/* ============================================================================
   OPERATION SEE BLUE — PREMIUM MOTION & VISUAL LAYER
   ---------------------------------------------------------------------------
   Loaded last. Everything here is additive: it dresses the composition built
   in auth.css without changing a single structural value, so the layout lock,
   the column geometry and the copy all stay exactly as they were.

   Contents
     01  Motion system
     02  Ambient atmosphere
     03  Console glass & frame
     04  Crest
     05  Headline
     06  Instrument rule & horizon
     07  Tabs
     08  Fields
     09  Buttons, links, SSO
     10  Toasts
     11  Authenticated view
     12  Text selection, caret, scrollbars
     13  Reduced motion
   ========================================================================= */


/* ============================================================ 01 MOTION === */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms;
  --t-med:340ms;
  --t-slow:720ms;
  --t-epic:1400ms;
}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:-30%}


/* ====================================================== 02 ATMOSPHERE ===== */
/* The key light behind the console breathes very slowly — below the threshold
   of "animation", above the threshold of "static". */
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes horizonDrift{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.85;transform:translateY(-6px)}}
@keyframes grainShift{
  0%{transform:translate(0,0)}    20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}  100%{transform:translate(0,0)}
}
@keyframes scanDown{
  0%{transform:translateY(-8%);opacity:0}
  12%{opacity:.85}
  88%{opacity:.85}
  100%{transform:translateY(880%);opacity:0}
}
@keyframes rulerShimmer{
  0%{opacity:.35}50%{opacity:1}100%{opacity:.35}
}

.grain{animation:grainShift 9s steps(6) infinite}
.editorial::before{animation:horizonDrift 14s var(--ease-in-out) infinite}
/* the travelling highlight has its own element, so the ruler stays put */
.scan{
  position:absolute;top:0;bottom:0;left:0;width:20px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgba(198,164,81,.30) 46%,rgba(232,237,243,.60) 50%,rgba(198,164,81,.30) 54%,transparent 100%);
  background-size:100% 24px;background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:scanDown 7.5s var(--ease-in-out) infinite;
}


/* ==================================================== 03 CONSOLE GLASS === */
/* A slowly rotating champagne hairline around the credential block. The
   conic gradient is masked to a 1px ring, so it reads as light travelling
   around an edge rather than a border that changes colour. */
.access-inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  padding:1px;
  background:conic-gradient(from var(--spin),
    rgba(198,164,81,0) 0deg,
    rgba(198,164,81,.05) 30deg,
    rgba(214,186,128,.55) 52deg,
    rgba(198,164,81,.05) 74deg,
    rgba(198,164,81,0) 120deg,
    rgba(198,164,81,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:spinEdge 9s linear infinite;
}
@keyframes spinEdge{to{--spin:360deg}}

/* A soft reflection travelling down the glass. */

/* Corner registration marks: static. A blinking frame reads as template
   furniture, not as an instrument. */
.corner{opacity:.55}

/* The console panel lifts a hair of champagne along its seam. */
.access{transition:box-shadow var(--t-med) var(--ease-out)}
.access:hover{
  box-shadow:
    inset 0 1px 0 rgba(232,237,243,.075),
    inset 0 0 90px rgba(198,164,81,.03),
    -1px 0 60px rgba(198,164,81,.075);
}


/* ============================================================= 04 CREST === */
.crest{animation:crestBreathe 8s var(--ease-in-out) infinite}
@keyframes crestBreathe{0%,100%{opacity:.82;transform:scale(.985)}50%{opacity:1;transform:scale(1.03)}}
.crest::after{
  content:"";position:absolute;inset:-26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(198,164,81,.12),transparent 62%);
  animation:crestHalo 8s var(--ease-in-out) infinite;
}
@keyframes crestHalo{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.06)}}
.crest svg{filter:drop-shadow(0 0 12px rgba(198,164,81,.28))}


/* =========================================================== 05 HEADLINE === */
/* Entrance uses fill-mode backwards: if the animation never runs (the gate
   is display:none while the loader plays) the element still renders its
   natural, fully visible state. */
.editorial-title{
  animation:lineUp var(--t-epic) var(--ease-out) backwards .08s;
  will-change:transform;
}
@keyframes lineUp{
  from{transform:translateY(26px)}
  to{transform:none}
}
.editorial-title em{
  display:inline-block;
  animation:emUp var(--t-epic) var(--ease-out) backwards .26s;
}
@keyframes emUp{
  from{transform:translateY(20px)}
  to{transform:none}
}
/* the sheen rides across the italic line */
.editorial-title em{
  animation:emUp var(--t-epic) var(--ease-out) backwards .26s,
            sheen 11s var(--ease-in-out) 1.4s infinite;
}

/* a point of light travelling the gold rule */
.gold-rule{position:relative;overflow:visible}
.gold-rule i{position:relative}
.gold-rule::after{
  content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 14px 3px rgba(198,164,81,.65);
  animation:ruleTravel 6.5s var(--ease-in-out) infinite;
}
@keyframes ruleTravel{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  78%{opacity:1}
  100%{transform:translateX(96px);opacity:0}
}


/* =============================================== 06 INSTRUMENT RULE ===== */
/* the closing lozenge pulses gently */
.editorial-inner::before{animation:lozenge 5.5s var(--ease-in-out) infinite}
@keyframes lozenge{0%,100%{opacity:.55;box-shadow:0 0 0 rgba(198,164,81,0)}50%{opacity:1;box-shadow:0 0 12px rgba(198,164,81,.45)}}
.editorial-inner::after{animation:ruleFade 7s var(--ease-in-out) infinite}
@keyframes ruleFade{0%,100%{opacity:.55}50%{opacity:1}}


/* ============================================================== 07 TABS === */
.tab{position:relative;transition:color var(--t-fast) var(--ease-out)}
.tab:hover{color:var(--tx)}
.tab-ink{
  box-shadow:0 0 12px rgba(198,164,81,.55);
  animation:inkGlow 2.6s var(--ease-in-out) infinite;
}
@keyframes inkGlow{0%,100%{opacity:.75}50%{opacity:1}}
.tabs{transition:border-color var(--t-med) var(--ease-out)}


/* ============================================================ 08 FIELDS === */
/* The underline draws itself in champagne on focus. */
.field{position:relative}
.field::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(198,164,81,.55);
  transition:width var(--t-med) var(--ease-out);
  pointer-events:none;
}
.field:focus-within::after{width:100%}
.field:focus-within{border-bottom-color:transparent}
.field input{caret-color:var(--gold)}
.field input::selection{background:rgba(198,164,81,.30);color:#fff}
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  transition:background-color 9999s ease-in-out 0s;
}
.field.has-action input{padding-right:56px}
.eye{
  transition:color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.eye:hover{transform:translateX(2px)}
.check-box{transition:all var(--t-fast) var(--ease-back)}
.check input:checked+.check-box{box-shadow:0 0 12px rgba(198,164,81,.4)}
.check{transition:color var(--t-fast) var(--ease-out)}
.check:hover{color:var(--tx-2)}

/* strength meter animates its fill */
.strength-bars i{transition:background var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.strength[data-s="3"] i:nth-child(-n+3){box-shadow:0 0 8px rgba(198,164,81,.5)}
.strength[data-s="4"] i{box-shadow:0 0 8px rgba(38,184,135,.5)}
.strength span{transition:color var(--t-med) var(--ease-out)}


/* ================================================ 09 BUTTONS / LINKS === */
.btn{
  overflow:hidden;
  transition:background var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-out),
             box-shadow var(--t-med) var(--ease-out),
             color var(--t-med) var(--ease-out);
}
.btn.primary{
  position:relative;isolation:isolate;
  animation:btnBreath 4.2s var(--ease-in-out) infinite;
}
@keyframes btnBreath{
  0%,100%{box-shadow:0 10px 30px rgba(198,164,81,.13)}
  50%{box-shadow:0 12px 40px rgba(198,164,81,.24)}
}
.btn.primary:active{transform:translateY(1px) scale(.995)}
.btn.primary::before{
  content:"";position:absolute;top:-45%;left:-45%;width:26%;height:190%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease-out);
}
.btn.primary:hover::before{left:118%}
.btn-arrow{transition:transform var(--t-med) var(--ease-back)}
.btn.primary:hover .btn-arrow{transform:translateX(5px)}
.btn.ghost{transition:all var(--t-med) var(--ease-out)}
.btn.ghost:hover{transform:translateY(-1px)}
.link{position:relative;display:inline-block}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-med) var(--ease-out);
}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.sso-btn{position:relative;overflow:hidden;transition:all var(--t-med) var(--ease-out)}
.sso-btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(198,164,81,.14) 50%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .7s var(--ease-out);
}
.sso-btn:hover::after{transform:translateX(110%)}
.sso-btn:hover{transform:translateY(-2px)}


/* ============================================================ 10 TOASTS === */
.toast{position:relative;overflow:hidden;transition:transform var(--t-med) var(--ease-out)}
.toast::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(232,237,243,.10) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:toastSweep 2.8s var(--ease-in-out) infinite;
}
@keyframes toastSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}


/* ================================================== 11 AUTHENTICATED ===== */
.avatar{position:relative;overflow:hidden;animation:breathe 7s var(--ease-in-out) infinite}
.avatar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:avatarSweep 5s var(--ease-in-out) infinite;
}
@keyframes avatarSweep{0%{transform:translateX(-120%)}50%,100%{transform:translateX(120%)}}
.authed-card{animation:cardIn var(--t-slow) var(--ease-out) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}


/* ================================ 12 SELECTION / CARET / SCROLLBARS === */
::selection{background:rgba(198,164,81,.30);color:#fff}
::-moz-selection{background:rgba(198,164,81,.30);color:#fff}
html{scrollbar-color:rgba(198,164,81,.22) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(232,237,243,.10);border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:rgba(198,164,81,.30)}
.access::-webkit-scrollbar{width:6px}
.access::-webkit-scrollbar-thumb{background:rgba(232,237,243,.10)}
input,textarea,button{font-family:inherit}
button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}


/* ====================================================== 13 REDUCED MOTION = */
@media (prefers-reduced-motion:reduce){
  .grain,.editorial::before,.editorial::after,.crest,.crest::after,
  .crest svg,.editorial-title,.editorial-title em,.gold-rule::after,
  .editorial-inner::before,.editorial-inner::after,.tab-ink,
  .btn.primary,.avatar,.avatar::after,.toast::after{
    animation:none!important;
  }
  .access-inner::before{animation:none!important;opacity:.45}
  .btn.is-busy::after,.access-foot::before,.crest .crest-arc,.scan{animation:none!important}
  .editorial-title em{background-position:50% 0}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}



/* ================================================= 14 STAGGERED CONSOLE = */
/* The credential block assembles itself: head, tabs, then each field, then
   the action, then the alternatives. Transform-only, so nothing can ever be
   stranded invisible if the gate was display:none when the animation was
   registered. */
.access-head{animation:stepUp var(--t-slow) var(--ease-out) backwards .06s}
.tabs{animation:stepUp var(--t-slow) var(--ease-out) backwards .14s}
.form{animation:stepUp var(--t-slow) var(--ease-out) backwards .2s}
.form .field:nth-child(1){animation:stepUp var(--t-slow) var(--ease-out) backwards .24s}
.form .field:nth-child(2){animation:stepUp var(--t-slow) var(--ease-out) backwards .30s}
.form .row-between{animation:stepUp var(--t-slow) var(--ease-out) backwards .36s}
.form .btn.primary{animation:stepUp var(--t-slow) var(--ease-out) backwards .42s}
.divider{animation:stepUp var(--t-slow) var(--ease-out) backwards .5s}
.sso{animation:stepUp var(--t-slow) var(--ease-out) backwards .56s}
.legal{animation:stepUp var(--t-slow) var(--ease-out) backwards .62s}
@keyframes stepUp{from{transform:translateY(14px)}to{transform:none}}

/* A champagne edge that wakes up as the pointer moves through the fields. */
.access-inner{--edge:0}
.access-inner:focus-within{--edge:1}
.access-inner::before{opacity:calc(.35 + var(--edge) * .65)}

/* The tab underline eases toward its target rather than snapping. */
.tab-ink{transition:width var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}

/* Inputs settle their label with a touch more weight. */
.field label{transition:transform var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out)}

/* A quiet highlight follows the active field's underline. */
.field:focus-within .field-error{opacity:.6}

/* Hairlines across the console brighten as it is engaged. */
.access-inner:hover .tabs{border-bottom-color:rgba(232,237,243,.13)}


/* ================================================= 15 FINISHING DETAIL === */

/* While the form is working, the button runs its own light rather than
   freezing. */
.btn.is-busy{position:relative;overflow:hidden}
.btn.is-busy::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-120%);
  animation:busySweep 1.1s var(--ease-in-out) infinite;
}
@keyframes busySweep{to{transform:translateX(120%)}}
.btn.is-busy .btn-label{opacity:.9}

/* Keyboard users get an animated champagne ring instead of a flat outline. */
.btn:focus-visible,
.sso-btn:focus-visible,
.tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(198,164,81,.16);
  animation:focusRing 2.4s var(--ease-in-out) infinite;
}
@keyframes focusRing{
  0%,100%{box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(198,164,81,.12)}
  50%{box-shadow:0 0 0 1px var(--gold-2),0 0 0 7px rgba(198,164,81,.22)}
}

/* The crest ring catches a travelling glint. */
.crest{isolation:isolate}
.crest svg{overflow:visible}
.crest .crest-arc{
  transform-origin:32px 32px;
  animation:spinEdge 9s linear infinite;
}

/* The provider line breathes so it reads as live state, not a caption. */
.access-foot{position:relative}
.access-foot::before{
  content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(198,164,81,.7);
  animation:providerPulse 3.2s var(--ease-in-out) infinite;
}
@keyframes providerPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.access-foot span{padding-left:14px}

/* One slow reflection travels across the glass when the panel is engaged. */
.access-inner{overflow:visible}


/* Legal copy links get a drawn underline. */
.legal a{transition:color var(--t-fast) var(--ease-out)}

/* The sign-out ghost button answers back. */
.btn.ghost:hover{box-shadow:0 0 0 1px rgba(198,164,81,.10)}

/* Cap the blur cost of the glass on low-end machines. */
@supports not (backdrop-filter:blur(2px)){
  .access{background:#101620}
}

/* ========================================================== RESPONSIVE === */
@media (max-width:1180px){
  .editorial-title{font-size:clamp(40px,5vw,62px)}
  .gold-rule::after{animation-duration:8s}
}
@media (max-width:900px){
  .access-inner::before{inset:-1px}
  .editorial-title{animation:lineUp var(--t-slow) var(--ease-out) backwards}
  .editorial-title em{animation:emUp var(--t-slow) var(--ease-out) backwards .12s,
                              sheen 11s var(--ease-in-out) 1.2s infinite}
}
@media (max-height:660px){
  .gold-rule::after{display:none}
  .crest::after{display:none}
}