/* ==========================================================================
   Provision Strategy — motion layer
   Everything animated lives here so a single prefers-reduced-motion block
   at the bottom can switch the whole site to a static experience.
   ========================================================================== */

/* --- Keyframes ---------------------------------------------------------- */
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes slow-spin   { to { transform: rotate(360deg); } }
@keyframes shimmer     { 100% { transform: translateX(100%); } }
@keyframes marquee     { to { transform: translateX(-50%); } }
@keyframes ripple      { to { transform: scale(2.6); opacity: 0; } }
@keyframes draw-underline { to { stroke-dashoffset: 0; } }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(-8px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
@keyframes pulse-ring {
  0%   { transform: scale(.85); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes scroll-hint {
  0%        { transform: translateY(-100%); opacity: 0; }
  35%, 65%  { opacity: 1; }
  100%      { transform: translateY(100%); opacity: 0; }
}

/* --- Opening sequence (preloader) --------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: #050508;
  overflow: hidden;
}
#preloader[hidden] { display: none; }

.pre-noise {
  position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 3px 3px;
}
.pre-glow {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, rgba(139, 92, 246, .34), transparent 58%),
    radial-gradient(circle at 66% 62%, rgba(34, 211, 238, .22), transparent 56%);
  filter: blur(24px);
  animation: pre-glow-in 2.4s var(--ease-out) both;
}
@keyframes pre-glow-in {
  from { transform: scale(.35); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1); opacity: .85; }
}

.pre-stage { position: relative; text-align: center; padding: 0 1.5rem; }

/* 1 — the monogram draws itself */
.pre-mark { width: clamp(78px, 15vw, 108px); height: auto; margin: 0 auto 1.7rem; }
.pre-mark .mk-ring {
  fill: none; stroke: var(--accent-2); stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, .6));
  stroke-dasharray: 302; stroke-dashoffset: 302;
  animation: mark-draw 1.15s var(--ease-out) .15s forwards;
}
.pre-mark .mk-p {
  fill: #fff; opacity: 0; transform-origin: center;
  animation: mark-fill .7s var(--ease-back) .95s forwards;
}
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-fill {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* 2 — the wordmark rises letter by letter */
.pre-word {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 5.6vw, 3rem);
  letter-spacing: -.045em; color: #fff; line-height: 1.05;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .38em;
  margin: 0;
}
.pre-word .w { display: inline-flex; overflow: hidden; padding-bottom: .06em; }
.pre-word .l {
  display: inline-block; transform: translateY(105%);
  animation: letter-up .78s var(--ease-out) forwards;
}
@keyframes letter-up { to { transform: translateY(0); } }

/* 3 — tagline and progress */
.pre-tag {
  margin: 1rem 0 2.3rem; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  opacity: 0; animation: fade-up .8s var(--ease-out) 1.5s forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pre-progress {
  width: min(280px, 62vw); height: 2px; margin: 0 auto;
  background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden;
  opacity: 0; animation: fade-up .6s var(--ease-out) 1.3s forwards;
}
.pre-progress i {
  display: block; height: 100%; width: 0%;
  background: var(--grad);
  box-shadow: 0 0 14px var(--accent-glow);
  transition: width .32s var(--ease-soft);
}
.pre-count {
  margin-top: .85rem; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .22em; color: rgba(255,255,255,.42);
  opacity: 0; animation: fade-up .6s var(--ease-out) 1.45s forwards;
  font-variant-numeric: tabular-nums;
}

/* 4 — the curtain lifts in four panels */
.pre-curtains { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pre-curtains span {
  flex: 1; background: #050508; transform: translateY(0);
  transition: transform .95s var(--ease-out);
}
#preloader.is-leaving .pre-stage,
#preloader.is-leaving .pre-glow { opacity: 0; transition: opacity .4s ease; }
#preloader.is-leaving .pre-curtains span { transform: translateY(-101%); }
#preloader.is-leaving .pre-curtains span:nth-child(1) { transition-delay: 0s; }
#preloader.is-leaving .pre-curtains span:nth-child(2) { transition-delay: .07s; }
#preloader.is-leaving .pre-curtains span:nth-child(3) { transition-delay: .14s; }
#preloader.is-leaving .pre-curtains span:nth-child(4) { transition-delay: .21s; }
#preloader.is-leaving { background: transparent; }
#preloader.is-leaving .pre-noise { opacity: 0; transition: opacity .3s; }

/* The page eases in behind the lifting curtain. */
body.is-booting > *:not(#preloader) { opacity: 0; }
body.is-booted .site-header,
body.is-booted main,
body.is-booted .site-footer {
  animation: page-in .9s var(--ease-out) both;
}
body.is-booted main { animation-delay: .05s; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- Hero entrance ------------------------------------------------------ */
.hero-title .line > span,
[data-hero-step] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
body.is-booted .hero-title .line > span,
body.is-booted [data-hero-step] { opacity: 1; transform: none; }
body.is-booted .hero-title .line:nth-child(1) > span { transition-delay: .10s; }
body.is-booted .hero-title .line:nth-child(2) > span { transition-delay: .19s; }
body.is-booted .hero-title .line:nth-child(3) > span { transition-delay: .28s; }
body.is-booted [data-hero-step="1"] { transition-delay: .40s; }
body.is-booted [data-hero-step="2"] { transition-delay: .50s; }
body.is-booted [data-hero-step="3"] { transition-delay: .60s; }
body.is-booted [data-hero-step="4"] { transition-delay: .72s; }

/* --- Scroll reveal ------------------------------------------------------ */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Children stagger when the parent enters the viewport. */
[data-stagger] > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: .20s; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: .28s; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: .44s; }
[data-stagger].is-revealed > *:nth-child(7) { transition-delay: .52s; }
[data-stagger].is-revealed > *:nth-child(8) { transition-delay: .60s; }

/* --- Ambient motion ----------------------------------------------------- */
.floaty { animation: float-y 6.5s ease-in-out infinite; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; translate: -50% 0;
  display: grid; justify-items: center; gap: .7rem; z-index: 2;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted-soft);
}
.scroll-cue-rail {
  width: 1px; height: 46px; background: var(--line-strong);
  position: relative; overflow: hidden;
}
.scroll-cue-rail::after {
  content: ""; position: absolute; inset: 0; background: var(--grad);
  animation: scroll-hint 2.1s var(--ease-soft) infinite;
}

/* Pulsing ring behind the mobile call button */
.pulse-host { position: relative; }
.pulse-host::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--accent-2); animation: pulse-ring 2.4s var(--ease-out) infinite;
  pointer-events: none;
}

/* Number counters hold their width so the layout never jitters. */
[data-count] { font-variant-numeric: tabular-nums; }

/* --- Magnetic buttons (desktop, fine pointer only) ---------------------- */
@media (hover: hover) and (pointer: fine) {
  .magnetic { transition: transform .28s var(--ease-out); }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *,
  .hero-title .line > span, [data-hero-step] {
    opacity: 1 !important; transform: none !important;
  }
  #preloader { display: none !important; }
  body.is-booting > *:not(#preloader) { opacity: 1 !important; }
  .marquee-track { animation: none; }
  .scroll-cue { display: none; }
}