/* ==========================================================================
   ADy AI Studios — site styles
   Extracted verbatim from the original single-file design.
   Loaded BEFORE tailwind.css so the cascade matches the original exactly
   (the Play CDN injected its stylesheet after this block).
   ========================================================================== */

:root{
  --ink:#0A0A0B; --accent:#FF1E2D; --scan:#FF7A18; --steel:#6B7280;
}
/* overflow-x: clip prevents horizontal scroll WITHOUT creating a scroll
   container (overflow-x: hidden would silently break position: sticky). */
html, body { background:#EEF0F3; max-width:100%; overflow-x:hidden; overflow-x:clip; }
body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); }

/* ---- Hero video: full-bleed, character centered ---- */
/* No will-change here: GSAP animates the #hero-media wrapper, not this element,
   and promoting a full-screen video to its own layer costs real memory on a
   phone for no benefit. */
.hero-video{
  filter:contrast(1.03) saturate(1.03);
}
/* Feathered white washes that let the display type sit legibly over the
   video's white edges without any visible box/seam (white-on-white). */
.wash-left{  background:linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.92) 12%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 52%); }
.wash-right{ background:linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,.92) 12%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 52%); }
.wash-bottom{ background:linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,.85) 22%, rgba(255,255,255,0) 60%); }
.wash-top{ background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%); }
/* subtle white halo so type stays readable if it grazes darker hair */
.hero-type{ text-shadow:0 1px 26px rgba(255,255,255,.85), 0 0 2px rgba(255,255,255,.6); }

/* ---- Display type ---- */
.display{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em; line-height:.86; }
.char{ display:inline-block; }

/* ---- Glass ---- */
.glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px -24px rgba(10,10,11,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.glass-dark{
  background:rgba(16,16,18,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
}

/* Only promoted where the magnetic effect actually runs (see main.js). */
@media (hover:hover) and (pointer:fine){
  .btn-magnetic{ will-change:transform; }
}
.pill{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

.scan-dot{ animation:blink 1.4s steps(2,end) infinite; }
@keyframes blink{ 50%{ opacity:.15 } }

/* Marquee */
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* There are ~40 .feature-cards. A standing will-change on all of them means 40
   permanent compositor layers; GSAP sets and clears it around the one reveal
   tween each card gets, which is what we actually want. */
.feature-card{ }

.reveal-mask{ overflow:hidden; }

/* ---- Ghost section titles (parallax depth layer) ---- */
.ghost-title{
  position:absolute; pointer-events:none; user-select:none; z-index:0;
  font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.04em; line-height:1;
  white-space:nowrap;
}

/* ---- Process monitor frame ---- */
.monitor{
  background:#101012; border:1px solid rgba(255,255,255,.09); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 60px -20px rgba(255,30,45,.14);
}
.monitor-dot{ width:9px; height:9px; border-radius:50%; }

/* ---- SERVICES DECK — stacked cards that fling away on scroll ---- */
#deckWrap{ perspective:1400px; }
.deck-card{ position:absolute; inset:0; will-change:transform,opacity; transform-style:preserve-3d; }
.deck-inner{ will-change:transform; height:100%; }
.deck-face{
  height:100%; display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(10,10,11,.07); border-radius:28px;
  box-shadow:0 44px 90px -36px rgba(10,10,11,.4), 0 0 0 1px rgba(255,255,255,.6) inset;
  overflow:hidden;
}
.deck-face > div:last-child{ margin-top:auto; }
.deck-face::before{ /* red edge signature */
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--accent),var(--scan));
}
.deck-ghost-num{
  -webkit-text-stroke:2px rgba(255,30,45,.16); color:transparent;
  font-family:'Archivo',sans-serif; font-weight:900; line-height:1; user-select:none; pointer-events:none;
}
.svc-index-item{ cursor:pointer; transition:color .3s, transform .3s; }
.svc-index-item .idx-bar{ transition:width .45s cubic-bezier(.23,1,.32,1), background .3s; }
.svc-index-item.is-active{ color:var(--ink); transform:translateX(6px); }
.svc-index-item.is-active .idx-bar{ width:34px; background:var(--accent); }

.svc-phone-vid{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
.svc-phone-vid.is-active{ opacity:1; }

.svc-dot{ height:8px; border-radius:100px; background:rgba(10,10,11,.18); width:8px; transition:all .4s cubic-bezier(.23,1,.32,1); }
.svc-dot.is-active{ width:32px; background:var(--accent); }

/* ---- Top corner chips (replaces navbar) ---- */
@keyframes wiggle{
  0%,100%{ transform:rotate(0) } 4%{ transform:rotate(-4deg) } 8%{ transform:rotate(4deg) }
  12%{ transform:rotate(-3deg) } 16%{ transform:rotate(2deg) } 20%{ transform:rotate(0) }
}
.wiggle-core{ display:inline-flex; align-items:center; gap:8px; animation:wiggle 3.4s ease-in-out infinite; }

/* ---- WHY cards: dark dossier panels ---- */
.why-card{
  position:relative; background:#0E0E10; color:#fff; border-radius:26px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .45s cubic-bezier(.23,1,.32,1), border-color .45s, box-shadow .45s;
}
.why-card::before{ /* corner glow */
  content:''; position:absolute; top:-40%; right:-30%; width:80%; height:100%;
  background:radial-gradient(circle, rgba(255,30,45,.16) 0%, transparent 65%);
  opacity:0; transition:opacity .5s;
}
.why-card:hover{ transform:translateY(-6px); border-color:rgba(255,30,45,.45); box-shadow:0 18px 40px -22px rgba(255,30,45,.35); }
.why-card:hover::before{ opacity:1; }
.why-num{
  -webkit-text-stroke:1.5px rgba(255,255,255,.22); color:transparent;
  font-family:'Archivo',sans-serif; font-weight:900; transition:all .45s;
}
.why-card:hover .why-num{ -webkit-text-stroke:1.5px var(--accent); }
.why-tick{ position:absolute; width:14px; height:14px; border:1.5px solid rgba(255,255,255,.18); }

/* ---- Particle canvases (cursor-interactive backgrounds) ---- */
.px-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* ---- Cursor-reactive grid background ---- */
.fx-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  --mx:-9999px; --my:-9999px; --gsize:56px;
}
/* Baseline grid — barely visible */
.fx-grid::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line, rgba(10,10,11,.045)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line, rgba(10,10,11,.045)) 1px, transparent 1px);
  background-size:var(--gsize) var(--gsize);
}
/* Cursor spotlight — same grid, brighter, revealed only through a radial mask following the mouse */
.fx-grid::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-hot, rgba(255,30,45,.5)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-hot, rgba(255,30,45,.5)) 1px, transparent 1px);
  background-size:var(--gsize) var(--gsize);
  -webkit-mask-image: radial-gradient(260px 260px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 40%, transparent 72%);
          mask-image: radial-gradient(260px 260px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 40%, transparent 72%);
  opacity:0; transition:opacity .35s ease;
}
.fx-grid.is-live::after{ opacity:1; }
.fx-grid.dark{ --grid-line: rgba(255,255,255,.06); }

/* ---- Scroll cue ---- */
#scrollCue{ mix-blend-mode:difference; }
#scrollCue .cue-line{ transform-origin:top; }

/* ---- Process step pills ---- */
.step-pill{ height:5px; border-radius:100px; background:rgba(255,255,255,.12); width:6px; }
.step-pill.is-active{ width:26px; background:var(--accent); box-shadow:0 0 10px rgba(255,30,45,.6); }

/* ---- Showcase player ---- */
#adWrap.playing #adOverlay{ opacity:0; pointer-events:none; }
#adWrap #adOverlay{ transition:opacity .45s ease; }
.play-ring{ animation:playPulse 2.4s ease-out infinite; }
@keyframes playPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,30,45,.5); }
  70%{ box-shadow:0 0 0 26px rgba(255,30,45,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,30,45,0); }
}

/* ---- Connect modal ---- */
#connectModal{ opacity:0; pointer-events:none; }
#connectModal.open{ opacity:1; pointer-events:auto; }

/* ---- Intro splash (logo motion) ---- */
#introSplash{ background:#fff; }

/* Reduced-motion fallbacks: show stacked variants, hide pinned/sticky ones */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .rm-hide{ display:none !important; }
  .rm-show{ display:block !important; }
}

a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }