/* GOLDFISCHER film hero (index #film): the approved 9:16 workshop header film, above the 3D hero,
   with a floating headline + CTA dock over its bottom. Phone: the film fills the screen under the header.
   Wider screens: the vertical film sits centred and the dock floats over its lower part.
   The section stays dark in both themes (the light theme inverts <html>; we invert this block back). */
.hero-film{position:relative;overflow:hidden;isolation:isolate;padding:0;background:#050506;color:#f4f4f6;
  height:calc(100vh - var(--ann-h,32px));min-height:560px;margin-top:calc(-1 * var(--hdr-h,61px))}
@supports (height:1svh){.hero-film{height:calc(100svh - var(--ann-h,32px))}}
html[data-theme="light"] .hero-film{filter:invert(1) hue-rotate(180deg)}
html[data-theme="light"] .hero-film video{filter:none}
.hero-film video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;background:#050506}

.film-shade{position:absolute;inset:auto 0 0 0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.72) 38%,rgba(5,5,6,0) 100%)}

.film-dock{position:absolute;z-index:2;left:50%;bottom:64px;transform:translateX(-50%);
  width:min(calc(100% - 32px),520px);text-align:center;
  bottom:calc(110px + env(safe-area-inset-bottom,0px));
  }
.film-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--champ,#c9ad78);
  margin-bottom:10px}
.film-h{font-size:clamp(24px,6.6vw,34px);line-height:1.12;font-weight:900;margin:0 0 18px;text-wrap:balance;color:#fff}
.film-h em{font-style:italic;font-weight:900;color:var(--champ,#c9ad78)}
.film-sub{font-size:14.5px;line-height:1.5;color:#d6d4cf;margin:0 auto 16px;max-width:28em}
.film-sub b{color:#fff}
.film-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.film-cta{flex-wrap:nowrap}
.film-cta .btn{flex:0 1 auto;min-width:220px;padding:14px 28px;font-size:17px}
.film-cta .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(10,10,11,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.film-cue{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#f4f4f6;font-size:20px;line-height:1;text-decoration:none;
  background:rgba(10,10,11,.45);border:1px solid rgba(255,255,255,.18)}

@media (min-width:760px){
  .hero-film{max-height:940px}
  .hero-film video{object-fit:contain;background:transparent}
  .film-shade{height:55%}
  .film-dock{bottom:120px;width:min(calc(100% - 48px),600px)}
  .film-h{font-size:clamp(30px,2.8vw,40px)}
  .film-sub{font-size:16px}
}
@keyframes film-rise{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.film-dock{animation:none}}

/* typing reveal (js/film.js): text types in order kicker → headline → sub, then the CTA fades up */
.film-dock[data-typing] .tw-wait{visibility:hidden}
.tw-caret{display:inline-block;width:2px;height:.9em;margin-inline-start:2px;vertical-align:-.08em;background:currentColor;animation:tw-blink .8s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
.film-dock[data-typing] .film-cta{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.film-dock.tw-done .film-cta{opacity:1;transform:none}

/* hide the copy over the closing GOLDFISCHER logo card (js/film.js toggles .film-end near the loop's end) */
.film-dock,.film-shade{transition:opacity .5s}
.hero-film.film-end .film-dock,.hero-film.film-end .film-shade,.hero-film.film-end .film-cue{opacity:0;pointer-events:none}

/* transparent floating header while it sits over the film (js/film.js toggles .over-film) */
.site-hdr.over-film{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-hdr.over-film::before{content:"";position:absolute;inset:0 0 -24px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,0))}
html[data-theme="light"] .site-hdr.over-film{filter:invert(1) hue-rotate(180deg)}
.site-hdr.over-film .progress{opacity:0}
/* the WhatsApp sticky bar is gone, so drop the space the body kept for it */
body{padding-bottom:env(safe-area-inset-bottom,0px)}

/* section 2 (3D hero): copy reduced to one collection link */
.hero-copy-min{display:flex;justify-content:center;max-width:none}
.hero-collection{flex:0 0 auto;min-width:240px;padding:15px 30px;font-size:17px}
@media (min-width:760px){.hero-copy-min{justify-content:flex-start}}
/* sections 2–3 carry no copy over the stage any more, so no shade (in the light theme it turned white and hid the piece) */
#hero .hero-shade,#necklace .hero-shade{display:none}
/* sections 2–3: no +/- zoom buttons (pinch and drag still work) */
#hero .h3d-zoom,#necklace .h3d-zoom{display:none!important}

/* sections 2–3: a typed line under the piece, above the button (js/film.js types it when it scrolls in) */
.sec-type{align-self:stretch;margin:0 0 18px;text-align:start;pointer-events:none}
.sec-type-h{color:var(--paper);text-wrap:balance;margin:0}
.sec-type-h em{color:var(--champ,#c9ad78)}
.sec-type .tw-wait{visibility:hidden}
.hero-copy-min{flex-direction:column;align-items:center}
@media (min-width:820px){.hero-copy-min{align-items:flex-start}.sec-type-h{font-size:clamp(30px,2.8vw,42px)}}

/* dark theme: soften the edge between the film and section 2 */
.hero-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--ink,#000))}
html[data-theme="light"] .hero-film::after{display:none}

/* sections 2–3 typed lines: quiet classic serif, set from the right (RTL start) so typing grows right → left */
.sec-type-h{font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:300;letter-spacing:0;font-size:clamp(23px,6.2vw,32px);line-height:1.25}
.sec-type-h em{font-style:normal;font-weight:300}
.sec-type{justify-content:flex-start;text-align:start}

/* sections 2–3 on phones: one screen each. The 3D piece sits in the middle of the section
   (the necklace, being tall, in the middle of the space above the copy); the button closes the section
   and the typed line sits right above it. */
@media (max-width:819px){
  /* full screen as seen while scrolling (Safari's bars collapsed): large viewport, not svh */
  #hero,#necklace{min-height:calc(100vh - 61px);padding:0;position:relative}
  @supports (height:1lvh){#hero,#necklace{min-height:calc(100lvh - 61px)}}
  #hero .hero-3d,#necklace .hero-3d{position:absolute;top:0;left:0;right:0;bottom:0;height:auto}
  #necklace .hero-3d{bottom:190px}
  #hero .hero-content,#necklace .hero-content{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom,0px));padding-top:0;margin:0}
  #hero .drag-hint{top:24px;bottom:auto;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
  .sec-type{margin-bottom:28px}
}
@media (min-width:820px){.sec-type-h{font-size:clamp(30px,2.8vw,42px)}}

/* keep the film's CTA clear of the seam with section 2: no scroll arrow on the edge */
.film-cue{display:none}
/* sections 2–3: a vertical swipe on the 3D piece scrolls the page; sideways turns it, pinch zooms */
#hero .hero-3d canvas,#necklace .hero-3d canvas{touch-action:pan-y!important}
/* header CTA lands section 2 flush under the menu bar (cancels the global +12px scroll padding) */
#hero,#necklace{scroll-margin-top:-12px}