/* USKOBOT Modular Optical Effects — safe shared presentation for real PHP pages.
   No login, account, payment or API behavior is touched. */
:root {
  --usk-optical-rgb: var(--mf-accent-rgb, 215,176,121);
}
/* Ambient illumination is a transparent, non-interactive overlay so existing
   opaque authenticated dashboard surfaces cannot cover it. */
body.mf-theme > .usk-optical-atmosphere {
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
  z-index:30; isolation:isolate; contain:strict;
  --usk-opt-x:0px; --usk-opt-y:0px;
}
.usk-optical-atmosphere > * {position:absolute;pointer-events:none}
.usk-optical-atmosphere .usk-opt-aura {
  width:105vw;height:98vh;mix-blend-mode:screen;
  opacity:.42;will-change:transform;
}
.usk-optical-atmosphere .usk-opt-aura-one {
  left:-42%;top:-39%;
  background:radial-gradient(ellipse at 50% 50%,rgba(var(--usk-optical-rgb),.26) 0%,rgba(var(--usk-optical-rgb),.055) 43%,transparent 71%);
  animation:usk-opt-aurora-one 25s ease-in-out infinite alternate;
}
.usk-optical-atmosphere .usk-opt-aura-two {
  right:-42%;bottom:-40%;
  background:radial-gradient(ellipse at 50% 50%,rgba(var(--usk-optical-rgb),.19) 0%,rgba(var(--usk-optical-rgb),.045) 44%,transparent 70%);
  animation:usk-opt-aurora-two 32s ease-in-out infinite alternate;
}
.usk-optical-atmosphere .usk-opt-grid {
  inset:-25%; background-image:
    linear-gradient(rgba(var(--usk-optical-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--usk-optical-rgb),.05) 1px,transparent 1px);
  background-size:90px 90px;mask-image:radial-gradient(ellipse at 50% 48%,#000,transparent 75%);
  opacity:.38;transform:perspective(800px) rotateX(23deg);
  animation:usk-opt-grid-drift 33s ease-in-out infinite alternate;
}
.usk-optical-atmosphere .usk-opt-trace {
  inset:0; background:linear-gradient(113deg,transparent 45%,rgba(var(--usk-optical-rgb),.12) 49.8%,transparent 54%);
  background-size:195% 195%;opacity:.45;mix-blend-mode:screen;
  animation:usk-opt-trace-sweep 23s linear infinite;
}
.usk-optical-atmosphere .usk-opt-prism {
  width:140px;height:140px;border:1px solid rgba(var(--usk-optical-rgb),.18);
  border-radius:20px;transform:rotate(28deg);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.07);
  animation:usk-opt-prism-drift 31s ease-in-out infinite alternate;
}
.usk-optical-atmosphere .usk-opt-prism-one {top:21%;left:-80px;}
.usk-optical-atmosphere .usk-opt-prism-two {right:-110px;bottom:9%;width:215px;height:215px;animation-delay:-15s;animation-duration:39s;opacity:.62;}
.usk-optical-atmosphere .usk-opt-point {
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(var(--usk-optical-rgb),.8);
  box-shadow:0 0 9px rgba(var(--usk-optical-rgb),.7);opacity:.25;
  animation:usk-opt-point-pulse var(--usk-opt-time,11s) ease-in-out var(--usk-opt-delay,0s) infinite;
}
/* Gold glints and hover optics sit inside their own card. Unlike a global
   overlay, these retain a quiet appearance behind text. */
.mf-theme :is(.login-card,.mf-metric,.mf-panel,.neu-panel-card,.settings-card,.signal-online-card) {position:relative;}
.mf-theme .usk-opt-sheen {
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  z-index:3;opacity:.7;isolation:isolate;
  --usk-opt-pointer-x:50%;--usk-opt-pointer-y:50%;
}
.mf-theme .usk-opt-sheen::before {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(360px circle at var(--usk-opt-pointer-x) var(--usk-opt-pointer-y),rgba(var(--usk-optical-rgb),.20),transparent 75%);
  opacity:0;transition:opacity .3s ease;
}
.mf-theme :is(.login-card,.mf-metric,.mf-panel,.neu-panel-card,.settings-card,.signal-online-card):hover > .usk-opt-sheen::before,
.mf-theme :is(.login-card,.mf-metric,.mf-panel,.neu-panel-card,.settings-card,.signal-online-card):focus-within > .usk-opt-sheen::before {opacity:1;}
.mf-theme .usk-opt-sheen::after {
  content:"";position:absolute;inset:-60% -100%;
  background:linear-gradient(108deg,transparent 40%,rgba(var(--usk-optical-rgb),.025) 46%,rgba(var(--usk-optical-rgb),.11) 50%,rgba(var(--usk-optical-rgb),.025) 54%,transparent 60%);
  transform:translateX(-45%);animation:usk-opt-satin 15s ease-in-out infinite;
}
.mf-theme .login-card > .usk-opt-sheen::after {animation-duration:11s;}
/* Auth card gets a gentle engraved perimeter without shifting form fields. */
.mf-theme .login-card {isolation:isolate;}
.mf-theme .login-card > .usk-opt-sheen {box-shadow:inset 0 0 0 1px rgba(var(--usk-optical-rgb),.14);}
.mf-theme .login-card > .usk-opt-sheen::before {opacity:.28;}
/* Theme switch remains operable, but visually shows only its switch. */
.usk-palette-control,.usk-guest-palette-toggle {gap:0;}
.usk-palette-control > span:not(.usk-palette-track),
.usk-guest-palette-toggle > span:not(.usk-guest-palette-track) {display:none!important;}
/* Motion preference honored, irrespective of palette. */
body.mf-theme.usk-optical-off .usk-optical-atmosphere,
body.mf-theme.usk-optical-off .usk-opt-sheen {display:none!important;}
@media(max-width:700px) {
  .usk-optical-atmosphere .usk-opt-grid {opacity:.25;background-size:65px 65px;}
  .usk-optical-atmosphere .usk-opt-aura {width:160vw;height:90vh;}
  .usk-optical-atmosphere .usk-opt-aura-one {left:-95%;}
  .usk-optical-atmosphere .usk-opt-aura-two {right:-95%;}
  .usk-optical-atmosphere .usk-opt-prism {width:95px;height:95px;}
}
@media(prefers-reduced-motion:reduce) {
  body.mf-theme .usk-optical-atmosphere *,
  body.mf-theme .usk-opt-sheen::after {animation:none!important;}
}
@media print {
  body.mf-theme > .usk-optical-atmosphere,body.mf-theme .usk-opt-sheen {display:none!important;}
}
@keyframes usk-opt-aurora-one {from{transform:translate3d(-8%,-6%,0) scale(1);}to{transform:translate3d(39%,31%,0) scale(1.18);}}
@keyframes usk-opt-aurora-two {from{transform:translate3d(9%,9%,0) scale(1.1);}to{transform:translate3d(-27%,-24%,0) scale(.9);}}
@keyframes usk-opt-grid-drift {from{transform:perspective(800px) rotateX(23deg) translateY(0);}to{transform:perspective(800px) rotateX(23deg) translateY(-45px);}}
@keyframes usk-opt-trace-sweep {0%,15%{background-position:150% 20%;opacity:0;}40%,65%{opacity:.48;}95%,100%{background-position:-110% 75%;opacity:0;}}
@keyframes usk-opt-prism-drift {from{transform:translate(0,0) rotate(28deg);}to{transform:translate(16px,-38px) rotate(40deg);}}
@keyframes usk-opt-point-pulse {0%,100%{opacity:.12;transform:translateY(0);}50%{opacity:.65;transform:translateY(-6px);}}
@keyframes usk-opt-satin {0%,8%{transform:translateX(-46%);opacity:.12;}46%{opacity:.85;}82%,100%{transform:translateX(46%);opacity:.1;}}