/* Home v2 — film stage, typed slogan, journal + socials. 100vh, no page scroll */
@font-face{font-family:'CL Slogan';src:url(../assets/fonts/cl-slogan-thin.woff2) format('woff2');font-display:swap} /* subset of 辰宇落雁體 2.0, OFL — see assets/fonts/OFL.txt */
.home{--champagne:#D9C49A}
html,body.home{height:100%;overflow:hidden}
.stage{position:relative;height:100svh;overflow:hidden;color:var(--oat);background:var(--espresso)}
.stage__bg{position:absolute;inset:0;overflow:hidden}
.stage__bg video{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.stage__bg::after{content:"";position:absolute;inset:0;background:rgba(33,26,23,.32)}
.stage__blur{display:none!important}
/* phones: the wide film no longer crops to its middle quarter. A sharp band shows nearly the whole room (118% of the
   screen width), centred between the slogan and the buttons; a blurred copy of the same film fills the rest */
@media (max-width:760px){
  .stage__bg .stage__blur{display:block!important;position:absolute;inset:0;filter:blur(22px) brightness(.62) saturate(1.1);transform:scale(1.15)}
  .stage__bg #hero-video{position:absolute;left:50%;width:118%;max-width:none;height:auto;aspect-ratio:960/544;transform:translateX(-50%);
    top:max(300px,calc(410px + (100svh - 528px - 66.9vw) / 2));
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
  .stage__bg::after{background:rgba(33,26,23,.18)}
}

/* a soft shade in the top-left corner keeps the white logo legible over bright frames */
.stage::before{content:"";position:absolute;left:0;top:0;width:min(520px,70vw);height:320px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 0 0,rgba(33,26,23,.55),rgba(33,26,23,0) 70%)}

/* logo: white knockout, kept small */
.brand{position:fixed;top:24px;left:var(--m);z-index:60;display:block;width:118px}
.brand img{width:100%;height:auto;display:block;filter:drop-shadow(0 1px 2px rgba(20,14,11,.55)) drop-shadow(0 0 14px rgba(20,14,11,.35))}
@media (prefers-reduced-motion:no-preference){.brand{animation:chrome-in 1s .1s var(--ease-out) both}}

/* burger: hidden until the pointer reaches the top-right corner (or it gets keyboard focus) */
.burger-zone{position:fixed;top:0;right:0;width:160px;height:120px;z-index:79}
.home .burger{opacity:0;pointer-events:none;animation:none;transition:opacity .4s var(--ease),background .3s}
.burger-zone:hover~.burger,.home .burger:hover,.home .burger:focus-visible,.menu-open .home .burger{opacity:1;pointer-events:auto}

.stage__title{position:absolute;top:clamp(120px,15vh,160px);left:0;right:0;z-index:2;text-align:center;pointer-events:none}
.stage__title h1{font-size:var(--s-hero);line-height:.92;letter-spacing:-.025em;font-weight:400;animation:rise 1.4s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* slogan: typed in step with the film. Each clause is unbreakable, so lines only break after punctuation;
   the by-line always takes the last line */
.slogan{margin:26px auto 0;max-width:780px;padding:0 20px;font:400 25px/1.75 'CL Slogan',var(--f-head);letter-spacing:.08em;
  text-shadow:0 1px 3px rgba(20,14,11,.6),0 0 18px rgba(20,14,11,.35)}
.slogan .seg{display:inline-block;white-space:nowrap}
.slogan .by{display:block;width:max-content;margin:.2em auto 0;font-size:.86em;letter-spacing:.06em}
.slogan i{font-style:normal;opacity:0;transition:opacity .25s}
.slogan i.on{opacity:1}
.slogan i.sp{display:inline-block;width:.4em}
.slogan .caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--oat);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* once the last character lands, the caret holds 1.2s then fades away */
.slogan .caret.done{animation:caret-out .9s 1.2s var(--ease) forwards}
@keyframes caret-out{from{opacity:1}to{opacity:0}}

/* journal: bottom-left, champagne frame and type on a 5% champagne glass */
.journal{position:absolute;left:var(--m);bottom:84px;z-index:5;display:inline-flex;align-items:center;height:52px;padding:0 28px;
  border:1px solid var(--champagne);border-radius:5%;background:rgba(217,196,154,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); /* taste-skill-ignore: translucent button requested by the client */
  color:var(--champagne);font:500 15px/1 var(--f-head);letter-spacing:.14em;text-shadow:0 1px 3px rgba(20,14,11,.5);
  transition:background .3s;animation:rise 1.2s .35s var(--ease-out) both}
.journal:hover{background:rgba(217,196,154,.18)}

/* socials: the menu's squares, larger, champagne frame and glyph on a 50% walnut ground */
.stage .socials{position:absolute;right:var(--m);bottom:84px;z-index:5;margin:0;gap:10px;animation:rise 1.2s .45s var(--ease-out) both}
.stage .socials a{width:52px;height:52px;border:1px solid var(--champagne);background:rgba(47,38,35,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} /* taste-skill-ignore: translucent ground requested by the client */
.stage .socials a:hover{background:rgba(47,38,35,.75)}
.stage .socials svg{width:24px;height:24px;stroke:var(--champagne)}

/* video player: play, scrub, time, music */
.player{position:absolute;left:var(--m);right:var(--m);bottom:20px;z-index:5;display:flex;align-items:center;gap:16px;height:44px;animation:rise 1.2s .6s var(--ease-out) both}
.player__play{position:relative;width:44px;height:44px;flex:none;border-radius:50%;background:rgba(33,26,23,.55);transition:background .3s}
.player__play:hover{background:rgba(33,26,23,.8)}
.player__play i{position:absolute;left:17px;top:15px;width:3px;height:14px;background:var(--oat)}
.player__play i+i{left:24px}
.player__play.is-paused i{left:18px;top:14px;width:0;height:0;background:none;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--oat)}
.player__play.is-paused i+i{display:none}
.player__track{position:relative;flex:1;height:44px}
.player__track::before{content:"";position:absolute;left:0;right:0;top:20px;height:4px;background:rgba(245,242,235,.28)}
.player__fill{position:absolute;left:0;top:20px;height:4px;width:0;background:var(--gold)}
.player__track input{position:absolute;inset:0;width:100%;height:44px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.player__track input::-webkit-slider-runnable-track{height:44px;background:none}
.player__track input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:14px;border-radius:50%;background:var(--oat);transition:transform .2s}
.player__track input:hover::-webkit-slider-thumb,.player__track input:active::-webkit-slider-thumb{transform:scale(1.25)}
.player__track input::-moz-range-track{height:44px;background:none}
.player__track input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--oat)}
.player__track input:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.player__time{flex:none;min-width:5.6em;font:400 14px/1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--oat)}
.player__music{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:rgba(33,26,23,.55);color:var(--oat);font:400 14px/1 var(--f-head);transition:background .3s,color .3s}
.player__music:hover{background:rgba(33,26,23,.8)}
.player__music svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.player__music[aria-pressed="true"]{background:var(--gold);color:var(--espresso)}

@media (max-width:760px){
  .brand{width:96px;top:18px}
  .stage__title{top:150px;padding:0 20px}
  .stage__title h1{font-size:15vw}
  .slogan{font-size:19px;margin-top:18px;padding:0 16px}
  .journal{left:20px;bottom:72px;height:46px;padding:0 16px;font-size:14px}
  .stage .socials{right:20px;bottom:72px;gap:6px}
  .stage .socials a{width:46px;height:46px}
  .stage .socials svg{width:22px;height:22px}
  .player{left:20px;right:20px;bottom:12px;gap:10px}
  .player__time{display:none}
  .player__music span{display:none}
  .player__music{width:44px;padding:0;justify-content:center}
}
/* short phones (e.g. 375×667): tighter title and slogan so the band clears the text */
@media (max-width:760px) and (max-height:720px){
  .stage__title{top:112px}
  .slogan{font-size:17px;margin-top:10px;line-height:1.65}
  .stage__bg #hero-video{top:340px}
}