/* =========================================================
   OBSCURA — cinematic video course (fake landing for reel) · v2
   Dark cinematic / warm amber / editorial-luxe
   ========================================================= */

:root{
  --bg:            #08070a;
  --bg-2:          #0d0c10;
  --surface:       #131218;
  --line:          rgba(255,255,255,.08);
  --line-2:        rgba(255,255,255,.14);
  --ink:           #f4efe6;
  --ink-soft:      #b7b0a4;
  --ink-mute:      #7d766c;
  --amber:         #f0a94b;
  --amber-hi:      #ffc06a;
  --orange:        #ff6a26;
  --ease:          cubic-bezier(.32,.72,0,1);
  --ease-soft:     cubic-bezier(.22,.61,.36,1);
  --wrap:          1200px;
  --r-lg:          2rem;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight:400; line-height:1.55; letter-spacing:-.01em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
em{ font-style:italic; }
a{ color:inherit; text-decoration:none; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(255,106,38,.14), transparent 60%),
    radial-gradient(900px 800px at 10% 110%, rgba(240,169,75,.09), transparent 60%);
}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--amber),var(--orange)); box-shadow:0 0 18px rgba(255,106,38,.6); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px); position:relative; z-index:1; }

/* ---- typography helpers ---- */
.eyebrow{
  font-family:"Space Grotesk", monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--amber);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--amber),transparent); }
.section-title{
  font-family:"Fraunces", Georgia, serif; font-weight:340;
  font-size:clamp(2.6rem,6.4vw,5.2rem); line-height:.98; letter-spacing:-.025em; margin-top:.5em;
}
.section-title em{ color:var(--amber-hi); font-weight:340; }
.section-lead{ color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.18rem); max-width:46ch; margin-top:1.4rem; font-weight:300; }
.section-head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-weight:500; font-size:.95rem; letter-spacing:-.01em; cursor:pointer; border:0;
  transition:transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.btn--pill{ background:var(--ink); color:#141017; padding:.72rem .8rem .72rem 1.3rem; border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px rgba(0,0,0,.35); }
.btn--pill:hover{ background:#fff; transform:translateY(-2px); }
.btn--pill:active{ transform:scale(.975); }
.btn--lg{ font-size:1.02rem; padding:.9rem .9rem .9rem 1.6rem; }
.btn__icon{ width:2rem; height:2rem; border-radius:999px; background:rgba(20,16,23,.10); display:inline-flex; align-items:center; justify-content:center; transition:transform .5s var(--ease), background .5s var(--ease); }
.btn--pill:hover .btn__icon{ background:var(--orange); color:#fff; transform:translate(3px,-2px) scale(1.06); }

/* ---- floating glass nav ---- */
.nav{
  position:fixed; top:clamp(14px,2.4vw,26px); left:50%; transform:translateX(-50%); z-index:50;
  width:min(1120px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.55rem .6rem .55rem 1.35rem; border-radius:999px;
  background:rgba(16,14,20,.5); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.7);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.nav__brand{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.16rem; letter-spacing:.12em; display:flex; align-items:center; gap:.6rem; }
.nav__mark{ width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--amber-hi), var(--orange) 70%); box-shadow:0 0 14px rgba(255,106,38,.7); }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{ font-size:.92rem; color:var(--ink-soft); position:relative; padding:.2rem 0; transition:color .4s var(--ease); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--amber); transition:width .45s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

/* =========================================================
   STUDIO TOUR (long scroll-scrubbed hero)
   ========================================================= */
.tour{ position:relative; height:100vh; z-index:1; }
.tour__pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.tour__media{ position:absolute; inset:0; background:#000; }
.tour__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; }
.tour__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,7,10,.78) 0%, rgba(8,7,10,.28) 24%, transparent 40%, transparent 60%, rgba(8,7,10,.28) 76%, rgba(8,7,10,.78) 100%),
    linear-gradient(180deg, rgba(8,7,10,.55) 0%, transparent 22%, transparent 50%, rgba(8,7,10,.9) 100%),
    radial-gradient(120% 90% at 50% 38%, transparent 42%, rgba(8,7,10,.45) 88%, var(--bg) 100%);
}
.tour__spot{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(closest-side, transparent 60%, rgba(8,7,10,.5)); }

/* image-tour: scroll-driven zoom over a still studio frame */
.stage-img{ position:absolute; inset:0; background-size:cover; background-position:center; will-change:transform; transform-origin:50% 46%; transform:scale(1.08); }
.tour__smoke{ position:absolute; inset:-12%; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  background:radial-gradient(circle at 28% 42%, rgba(255,180,120,.12), transparent 42%), radial-gradient(circle at 72% 58%, rgba(120,180,210,.09), transparent 46%);
  animation:smokeDrift 20s ease-in-out infinite alternate; }
@keyframes smokeDrift{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(3%,-2.5%) scale(1.1);} }

/* ---- text stages over the video ---- */
.tstage{ position:absolute; opacity:0; z-index:5; pointer-events:none; will-change:opacity,transform,filter;
  filter:blur(10px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.tstage--bl{ transform:translate(-30px,22px); }
.tstage--br{ transform:translate(30px,22px); }
.tstage--center{ inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; transform:translateY(22px); }
.tstage.is-on{ opacity:1; transform:none; filter:none; }
.tstage__brand{ font-family:"Fraunces", Georgia, serif; font-weight:500; letter-spacing:.06em; font-size:clamp(3.4rem,11vw,9rem); line-height:.9; margin-top:1.2rem; }
.tstage__tagline{ font-family:"Space Grotesk", monospace; font-size:clamp(.85rem,1.6vw,1.1rem); letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.4rem; }

.tstage--bl, .tstage--br{ bottom:16vh; max-width:min(460px,42vw); }
.tstage--bl{ left:clamp(24px,6vw,84px); text-align:left; }
.tstage--br{ right:clamp(24px,6vw,84px); text-align:right; }
.tstage__no{ font-family:"Space Grotesk",monospace; font-size:.74rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--amber); }
.tstage__title{ font-family:"Fraunces", Georgia, serif; font-weight:330; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:.98; letter-spacing:-.025em; margin:.5rem 0 .8rem; }
.tstage__title em{ color:var(--amber-hi); }
.tstage__lead{ color:var(--ink-soft); font-size:clamp(.95rem,1.3vw,1.1rem); font-weight:300; max-width:40ch; margin-bottom:1.3rem; }
.tstage--br .tstage__lead{ margin-left:auto; }
.tstage__list{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.tstage__list li{ font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.08em; color:var(--ink-soft); position:relative; padding-left:1.4rem; }
.tstage__list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--amber-hi), var(--orange)); box-shadow:0 0 9px rgba(255,106,38,.6); }
.tstage--br .tstage__list li{ padding-left:0; padding-right:1.4rem; }
.tstage--br .tstage__list li::before{ left:auto; right:0; }

.tour__index{ position:absolute; bottom:11.5vh; left:50%; transform:translateX(-50%); display:flex; gap:1.1rem; z-index:5; font-family:"Space Grotesk",monospace; font-size:.8rem; letter-spacing:.2em; }
.tour__index span{ color:var(--ink-mute); transition:color .5s var(--ease), transform .5s var(--ease); }
.tour__index span.on{ color:var(--amber-hi); transform:scale(1.3); }

.hero__scrollcue{ position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--ink-mute); font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; }
.hero__scrollcue svg{ animation:bob 2s var(--ease-soft) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5;} 50%{ transform:translateY(6px); opacity:1;} }

/* ---- viewfinder overlay ---- */
.vf{ position:absolute; inset:0; z-index:4; pointer-events:none; font-family:"Space Grotesk",monospace; color:rgba(245,240,230,.6); }
.vf__c{ position:absolute; width:24px; height:24px; border:2px solid rgba(255,255,255,.4); }
.vf__c--tl{ top:20px; left:20px; border-right:0; border-bottom:0; }
.vf__c--tr{ top:20px; right:20px; border-left:0; border-bottom:0; }
.vf__c--bl{ bottom:20px; left:20px; border-right:0; border-top:0; }
.vf__c--br{ bottom:20px; right:20px; border-left:0; border-top:0; }
.vf__rec{ position:absolute; left:32px; top:96px; display:flex; align-items:center; gap:.55rem; font-size:.7rem; letter-spacing:.24em; }
.vf__rec i{ width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px #ff3b30; animation:recblink 1.4s steps(1) infinite; }
@keyframes recblink{ 50%{ opacity:.22; } }
.vf__tc{ position:absolute; right:32px; top:96px; font-size:.84rem; letter-spacing:.16em; color:var(--amber-hi); }
.vf__meta{ position:absolute; top:118px; display:flex; gap:1rem; font-size:.62rem; letter-spacing:.2em; }
.vf__meta--l{ left:32px; }
.vf__meta--r{ right:32px; text-align:right; }
.vf__meta span{ opacity:.5; }
.vf__scan{ position:absolute; left:8%; right:8%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,192,106,.55),transparent); opacity:.4; }

/* ---- reveal ---- */
.reveal{ opacity:0; transform:translateY(48px); filter:blur(10px); }
.reveal.in{ opacity:1; transform:none; filter:none; transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }

/* =========================================================
   TRAILER / embedded player
   ========================================================= */
.trailer{ position:relative; z-index:3; padding:clamp(5rem,11vw,9rem) 0 clamp(6rem,14vw,10rem); background:linear-gradient(180deg,var(--bg),var(--bg-2)); }
.player{ max-width:1040px; margin:0 auto; }
.player__shell{ padding:.6rem; border-radius:calc(var(--r-lg) + .4rem); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line-2); box-shadow:0 50px 120px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); }
.player__inner{ border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); position:relative; }
.player__inner::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--r-lg); box-shadow:inset 0 0 120px rgba(255,106,38,.10); }
.player__caption{ text-align:center; margin-top:1.3rem; color:var(--ink-mute); font-family:"Space Grotesk",monospace; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing{ position:relative; z-index:3; padding:clamp(2rem,6vw,4rem) 0 clamp(7rem,15vw,11rem); background:var(--bg-2); }
.price-card{ max-width:720px; margin:0 auto; }
.price-card__shell{ padding:.7rem; border-radius:calc(var(--r-lg) + .5rem); background:linear-gradient(180deg, rgba(255,192,106,.14), rgba(255,255,255,.02)); border:1px solid var(--line-2); box-shadow:0 60px 130px -50px rgba(255,106,38,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.price-card__inner{ background:linear-gradient(180deg,#141119,#0e0c12); border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,2.8rem); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); }
.price-card__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.price-card__kicker{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.price-card__amount{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(3.4rem,8vw,5rem); line-height:1; margin:.4rem 0 .3rem; }
.price-card__amount .cur{ color:var(--ink-soft); font-size:.5em; vertical-align:.5em; margin-right:.1em; }
.price-card__note{ color:var(--ink-soft); font-size:.95rem; font-weight:300; }
.price-card__list{ list-style:none; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.5rem; }
.price-card__list li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); font-size:.98rem; font-weight:300; }
.price-card__list li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--amber-hi), var(--orange)); box-shadow:0 0 10px rgba(255,106,38,.6); }

/* ---- footer ---- */
.foot{ padding:3rem 0 4rem; border-top:1px solid var(--line); position:relative; z-index:3; background:var(--bg-2); }
.foot__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot__brand{ font-family:"Fraunces",Georgia,serif; letter-spacing:.14em; font-size:1.1rem; }
.foot__copy{ color:var(--ink-mute); font-size:.85rem; font-family:"Space Grotesk",monospace; letter-spacing:.08em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  .nav__links{ display:none; }
  .price-card__list{ grid-template-columns:1fr; }
  .price-card__top{ flex-direction:column; align-items:stretch; }
  .vf__meta{ display:none; }
  .tstage--bl, .tstage--br{ max-width:80vw; bottom:14vh; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .tour{ height:auto; }
  .tour__pin{ height:auto; min-height:100vh; padding:6rem 0; }
  .tstage{ position:relative; opacity:1; transform:none; margin:4rem auto; }
  .tstage--bl,.tstage--br{ left:auto; right:auto; bottom:auto; text-align:center; margin-inline:auto; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .hero__scrollcue svg{ animation:none; }
}