/* =============================================================================
   OD ATELLIER — Cinematic mode
   A fixed, scroll-scrubbed video background with a dark "glass" reskin of the
   light editorial site. Everything here is gated behind `body.cinematic`, so
   removing that class (and this file) restores the original light design.

   Pairs with: assets/js/scrollvideo.js
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. The fixed video layer (sits behind all content, above the page ground)
   -------------------------------------------------------------------------- */
.scrollvideo {
  position: fixed;
  inset: 0;
  z-index: -1;               /* behind normal-flow content, above body ground */
  overflow: hidden;
  background: #07080a;
  pointer-events: none;
  /* fade the whole layer in once the first frame is painted */
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.scrollvideo.is-ready { opacity: 1; }

.scrollvideo__video,
.scrollvideo__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The raw <video> is the poster/fallback; the canvas draws the smooth frames. */
.scrollvideo__video  { z-index: 1; opacity: 1; transition: opacity 0.5s ease-out; }
.scrollvideo__canvas { z-index: 2; opacity: 0; transition: opacity 0.5s ease-out; }
.scrollvideo.is-ready  .scrollvideo__canvas { opacity: 1; }
.scrollvideo.is-cached .scrollvideo__video  { opacity: 0; }

/* Legibility veil + vignette so white type reads over the footage everywhere.
   It's fixed with the video, so the hero (top of viewport) stays clearer while
   content-dense lower regions get a touch more dimming. */
.scrollvideo__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(7,8,10,0.20), rgba(7,8,10,0.66) 78%),
    linear-gradient(180deg, rgba(7,8,10,0.30) 0%, rgba(7,8,10,0.42) 45%, rgba(7,8,10,0.58) 100%);
}

/* -----------------------------------------------------------------------------
   2. Palette flip — override the token layer so components re-tint themselves
   -------------------------------------------------------------------------- */
body.cinematic {
  /* Text ramps → light */
  --bone:        #ffffff;
  --bone-dim:    rgba(255, 255, 255, 0.74);
  --bone-faint:  rgba(255, 255, 255, 0.54);

  /* Hairlines / borders → light, low-alpha */
  --border-ink:  rgba(255, 255, 255, 0.22);
  --ink-hair:    rgba(255, 255, 255, 0.14);
  --ink-hair-2:  rgba(255, 255, 255, 0.08);

  /* Surfaces → translucent glass */
  --ink-2:       rgba(255, 255, 255, 0.07);   /* card surface */
  --ink-3:       rgba(255, 255, 255, 0.13);   /* input focus / preview */

  /* Accent wash → blue-tinted glass */
  --brass-wash:  rgba(59, 130, 246, 0.18);

  background: #07080a;
  color: #fff;
}

/* Headings are hard-coded near-black in the light theme → make them white. */
body.cinematic h1,
body.cinematic h2,
body.cinematic h3,
body.cinematic h4 { color: #fff; }

/* Free-standing type over the video (not inside a glass card) gets a soft
   shadow so it never smears into a bright frame. */
body.cinematic .hero__title,
body.cinematic .hero__lead,
body.cinematic .hero__badge,
body.cinematic .head__title,
body.cinematic .head__lead,
body.cinematic .section > .wrap > .head,
body.cinematic .stat__num,
body.cinematic .stat__label,
body.cinematic .about__copy h2,
body.cinematic .process__aside,
body.cinematic .faq__layout > div:first-child,
body.cinematic .contact__info {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------------------------
   3. Surfaces that were opaque light → dark glass
   -------------------------------------------------------------------------- */

/* Navigation */
body.cinematic .nav {
  background: rgba(9, 10, 13, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.cinematic .nav.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.cinematic .brand__mark [stroke] { stroke: #fff; }
body.cinematic .brand__mark text { fill: #fff; }

/* Mobile overlay menu */
body.cinematic .mobile-menu {
  background: rgba(7, 8, 11, 0.94);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Secondary / ghost buttons → glass */
body.cinematic .btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.cinematic .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* Generic glass helper for card-like surfaces */
body.cinematic .plan,
body.cinematic .quote,
body.cinematic .cta__panel,
body.cinematic .about__badge,
body.cinematic .field input,
body.cinematic .field textarea {
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* Pricing / package cards */
body.cinematic .plan { background: rgba(255, 255, 255, 0.06); }
body.cinematic .plan--feature { background: rgba(59, 130, 246, 0.16); border-color: rgba(255, 255, 255, 0.28); }
body.cinematic .plan__tag { color: #fff; border-color: rgba(255, 255, 255, 0.30); }

/* Benefits grid (was solid white cells over a hairline grid) */
body.cinematic .benefits__grid {
  background: rgba(255, 255, 255, 0.12);   /* the 1px "gaps" */
  border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.cinematic .benefit { background: rgba(16, 18, 22, 0.42); }
body.cinematic .benefit:hover { background: rgba(28, 31, 37, 0.55); }

/* Portfolio case tags */
body.cinematic .case__tag {
  background: rgba(8, 9, 12, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

/* Stats band hairlines */
body.cinematic .stats { border-color: rgba(255, 255, 255, 0.14); }

/* Process step number chips */
body.cinematic .step.is-active .step__num { background: var(--brass); color: #fff; border-color: var(--brass); }

/* Form fields */
body.cinematic .field input,
body.cinematic .field textarea {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
body.cinematic .field input:focus,
body.cinematic .field textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--brass);
}
body.cinematic .check__box { background: rgba(255, 255, 255, 0.05); }
body.cinematic .check__text a,
body.cinematic .cookie p a { color: #fff; }

/* Image mask reveal cover → dark instead of white flash */
body.cinematic .reveal-media::after { background: #07080a; }

/* Cookie banner */
body.cinematic .cookie {
  background: rgba(11, 13, 17, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Scrollbar surfaces */
body.cinematic { scrollbar-color: rgba(255,255,255,0.35) transparent; }
body.cinematic ::-webkit-scrollbar-track { background: #07080a; }
body.cinematic ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border: 3px solid #07080a;
}
body.cinematic ::-webkit-scrollbar-thumb:hover { background: var(--brass); }

/* -----------------------------------------------------------------------------
   4. Small legibility touch-ups
   -------------------------------------------------------------------------- */
/* The section header hairline label keeps the blue accent — good on dark. */
body.cinematic .hero__badge { background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Footer sits at the darkest part of the veil already; just soften its top rule */
body.cinematic .footer { border-top-color: rgba(255, 255, 255, 0.12); }

/* -----------------------------------------------------------------------------
   5. Mobile smoothness — kill per-frame backdrop-blur over the repainting canvas
   On phones, a real-time backdrop-filter re-blurs the (constantly redrawn) video
   behind every glass panel each frame → scroll jank. Swap those for solid,
   lightly-tinted surfaces (legibility stays high, scrolling stays buttery).
   The small fixed nav keeps a cheap light blur.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.cinematic .plan,
  body.cinematic .quote,
  body.cinematic .cta__panel,
  body.cinematic .about__badge,
  body.cinematic .benefits__grid,
  body.cinematic .benefit,
  body.cinematic .field input,
  body.cinematic .field textarea,
  body.cinematic .hero__badge,
  body.cinematic .btn--ghost,
  body.cinematic .cookie {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.cinematic .plan { background: rgba(20, 22, 28, 0.72); }
  body.cinematic .plan--feature { background: rgba(34, 52, 84, 0.74); }
  body.cinematic .quote,
  body.cinematic .cta__panel { background: rgba(20, 22, 28, 0.72); }
  body.cinematic .benefit { background: rgba(18, 20, 26, 0.82); }
  body.cinematic .benefit:hover { background: rgba(28, 31, 37, 0.88); }
  body.cinematic .field input,
  body.cinematic .field textarea { background: rgba(20, 22, 28, 0.72); }
  body.cinematic .btn--ghost { background: rgba(255, 255, 255, 0.12); }
  body.cinematic .hero__badge { background: rgba(20, 22, 28, 0.62); }
  body.cinematic .cookie { background: rgba(11, 13, 17, 0.95); }

  /* Nav is small and always on top — a light blur here is cheap and looks good */
  body.cinematic .nav {
    background: rgba(9, 10, 13, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Reduced motion: the engine paints a single static frame; keep the veil calm */
@media (prefers-reduced-motion: reduce) {
  .scrollvideo__canvas { transition: none; }
}