/* ===========================================================
   RayTech — Tier 1 "breathe life" layer
   1) Motion-token foundation + reduced-motion gate
   2) Living hero code card
   3) Ambient gradient + grain depth
   Loaded after styles.css; append-only, fully reversible.
   =========================================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-1:.16s;
  --dur-2:.28s;
  --dur-3:.45s;
  --dur-4:.6s;
}

/* ---- 1. Foundation: asymmetric "snappy-in, relaxed-out" timing ---- */
.btn{transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),background var(--dur-2) ease,border-color var(--dur-2) ease}
.btn:hover{transition-duration:var(--dur-1)}
.scard{transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-2) ease}
.scard:hover{transition-duration:var(--dur-1)}
.wcard{transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.wcard:hover{transition-duration:var(--dur-1)}

/* moving sheen on the brand gradient word (text-sized, cheap) */
.grad-text{background-size:220% auto;animation:sheen 7s linear infinite}

/* ---- 3. Ambient gradient depth: drifting light behind key bands ---- */
.hero::before{animation:drift 18s ease-in-out infinite}
.hero::after{content:"";position:absolute;left:-170px;bottom:-200px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,123,224,.22),transparent 62%);z-index:0;animation:drift2 24s ease-in-out infinite}

.stats{position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(440px 300px at 14% 130%,rgba(255,255,255,.22),transparent 60%);animation:drift 20s ease-in-out infinite}
.stats__grid{position:relative;z-index:1}

.ctaband__inner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px 260px at 18% 28%,rgba(110,123,224,.4),transparent 60%);animation:drift2 22s ease-in-out infinite}
.ctaband__inner h2,.ctaband__inner p,.ctaband__inner .btn{position:relative;z-index:1}

/* fine grain overlay to kill gradient banding and add tactility */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* ---- 2. Living hero code card ---- */
.codecard{will-change:transform}
.codecard.is-live{animation:breath 7s ease-in-out infinite}
.codecard .cc-line{display:block;white-space:pre}
.codecard.is-typing .cc-line{opacity:0;transform:translateY(3px);
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.codecard.is-typing .cc-line.is-printed{opacity:1;transform:none}
.codecard__status{padding:2px 20px 18px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.82rem;color:#7fe0c0;min-height:1.5em;white-space:pre}
.cc-caret{display:inline-block;width:7px;height:1.05em;background:#7fe0c0;
  vertical-align:-2px;margin-left:2px;border-radius:1px;animation:blink 1s step-end infinite}
.codecard.is-live .codecard__bar i:first-child{background:#37d39b;animation:dotpulse 2.4s var(--ease-out) infinite}

/* ---- keyframes ---- */
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,18px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-20px) scale(1.1)}}
@keyframes breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006)}}
@keyframes blink{50%{opacity:0}}
@keyframes sheen{to{background-position:220% center}}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(55,211,155,.55)}70%{box-shadow:0 0 0 7px rgba(55,211,155,0)}100%{box-shadow:0 0 0 0 rgba(55,211,155,0)}}

/* ---- work-section illustrations ---- */
.wcard__img{position:relative}
.wcard__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform var(--dur-4) var(--ease-out)}
.wcard__img::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,16,32,.5),transparent 55%)}
.wcard__img span{position:relative;z-index:2}
.wcard:hover .wcard__pic{transform:scale(1.06)}

/* ===========================================================
   Tier 2 — tactile micro-interactions + wayfinding
   =========================================================== */

/* cursor-following spotlight on service cards */
.scard{--mx:50%;--my:0%}
.scard::before{z-index:2}
.scard::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(200px circle at var(--mx) var(--my),rgba(59,91,219,.12),transparent 60%);
  transition:opacity var(--dur-2) ease}
.scard:hover::after{opacity:1}
.scard > *{position:relative;z-index:1}

/* detent icon snap on hover */
.scard__icon{transition:transform var(--dur-2) var(--ease-spring)}
.scard:hover .scard__icon{transform:rotate(-6deg) scale(1.08)}

/* process wayfinding spine — gradient draws over each step's top line */
.pstep::after{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--grad);z-index:1;
  transition:width var(--dur-4) var(--ease-out)}
.pstep.is-lit::after{width:100%}
.pstep.is-lit::before{color:var(--indigo)}
/* number badge sits ABOVE the line with an opaque mask so the spine never crosses the digits */
.pstep::before{background:var(--bg);z-index:3;padding:0 12px 0 0}

/* magnetic buttons get a hint of GPU promotion */
.btn--grad,.btn--primary,.btn--white{will-change:transform}

/* ===========================================================
   Accessibility — skip link + visible focus rings (WCAG AA)
   =========================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--indigo);color:#fff;
  padding:12px 18px;font-weight:600;border-radius:0 0 var(--border-radius-md,8px) 0;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}

/* ---- reduced-motion gate: neutralizes everything above ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}