/* =====================================================================
   THE WIZARD'S DESK — Lo-Fi looping hero for index.html
   A calm, always-looping scene (a video loop) as the full-viewport hero.
   Navigation is the top pill-nav only — the scene has NO hover/click
   targets. Pairs with scene.js. Lives above the existing content
   (hybrid scroll), so it is a 100vh hero block, not a fixed stage.
   ===================================================================== */

#scene-hero{
  position:relative;
  width:100%;
  height:100vh;            /* fallback */
  height:100svh;           /* mobile-chrome aware */
  margin:0;
  overflow:hidden;
  background:#0c0908;
  isolation:isolate;
}

/* the diorama: a 16:9 frame, cover-cropped + centered */
#scene-hero .scene{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(100vw,calc(100vh*16/9));
  aspect-ratio:16/9;
}
/* the looping video (and the still poster fallback) fill the scene */
#scene-hero .room,
#scene-hero #scene-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

/* soft foreground framing so the edges sink into the page */
#scene-hero .scene-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 13vw 4vw rgba(12,8,6,.42)}

/* ---------- HERO OVERLAY UI (scoped to the hero) ---------- */
.scene-ui{position:absolute;z-index:6}
#scene-ctl{top:max(1rem,calc(env(safe-area-inset-top) + .9rem));right:1.1rem;display:flex;gap:9px;align-items:center}
.scene-btn{font-family:'Playfair Display',Georgia,serif;font-size:.8rem;cursor:pointer;color:#F4EEE0;
  background:rgba(20,14,11,.5);border:1px solid rgba(244,238,224,.28);padding:.5em;border-radius:50px;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:background .2s,transform .2s,border-color .2s}
.scene-btn:hover{background:rgba(20,14,11,.7);transform:translateY(-1px);border-color:rgba(244,238,224,.5)}

/* scroll affordance — "the story continues" */
#scene-scroll{left:50%;bottom:1.4rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  gap:5px;color:#F4EEE0;background:none;border:none;cursor:pointer;font-family:'IM Fell English',Georgia,serif;
  font-style:italic;font-size:.92rem;letter-spacing:.3px;text-shadow:0 2px 12px rgba(0,0,0,.9);opacity:.88;
  transition:opacity .3s,transform .3s}
#scene-scroll:hover{opacity:1;transform:translateX(-50%) translateY(2px)}
#scene-scroll .chev{font-size:.95rem;animation:scenebob 2.6s ease-in-out infinite}
@keyframes scenebob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}

/* ---------- VALUE-PROP OVERLAY (who + hook + CTA, above the fold) ---------- */
/* Bottom scrim so the headline + scroll cue stay legible over a busy scene. */
#scene-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:48%;z-index:3;pointer-events:none;
  background:linear-gradient(to top, rgba(8,6,5,.78), rgba(8,6,5,.32) 46%, transparent);
}
.scene-intro{
  position:absolute;z-index:6;left:clamp(1.1rem,5vw,4rem);bottom:clamp(4.75rem,11vh,7rem);
  max-width:min(92vw,620px);color:#F4EEE0;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.scene-kicker{
  font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:clamp(.78rem,1.6vw,1rem);
  letter-spacing:1.6px;text-transform:uppercase;color:#F4EEE0;opacity:.92;margin:0 0 .55rem;
}
.scene-headline{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(1.75rem,4.4vw,3.2rem);
  line-height:1.05;letter-spacing:-.01em;margin:0 0 1.3rem;color:#F4EEE0;
}
.scene-cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.scene-intro .btn{font-size:.8rem}

/* ---------- REDUCED MOTION + MOBILE ---------- */
@media (prefers-reduced-motion:reduce){
  #scene-scroll .chev{animation:none}
}
@media (max-width:760px){
  /* Mobile: show the CENTRE SQUARE of the scene (Jake, owl, window, desk) instead
     of a tall over-cropped strip, with the value prop + CTAs stacked below it. */
  #scene-hero{height:auto}
  #scene-hero .scene{
    position:relative;top:auto;left:auto;transform:none;
    width:100%;aspect-ratio:1/1;
  }
  #scene-hero::after{display:none}
  #scene-scroll{display:none}
  .scene-intro{
    position:static;transform:none;left:auto;bottom:auto;
    width:auto;max-width:none;text-align:center;text-shadow:none;
    padding:clamp(1.5rem,6vw,2rem) var(--edge-pad) clamp(1.9rem,7vw,2.6rem);
  }
  .scene-cta-row{justify-content:center}
}