/* Motion formulas and timings ported from H.OS screens.css and English overrides. */
:root{--lp:clamp(20px,4vw,64px);--ease:cubic-bezier(.16,1,.3,1)}
.hero{--s01-p:0;display:block;height:160svh;min-height:160svh;max-height:none;padding:0;overflow:clip}
.hale-hero-pin{position:sticky;top:0;width:100%;height:100svh;min-height:36rem;overflow:hidden;isolation:isolate;display:flex;align-items:center}
.hero:after{display:none}.hale-hero-pin:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#08192673,#0819266b 32%,#081926a3 77%,#081926ba)}
.hero-bg{transform:scale(calc(1.025 + var(--s01-p)*.035));filter:saturate(calc(.98 - var(--s01-p)*.06)) brightness(calc(1.02 - var(--s01-p)*.08));will-change:transform,filter}
.hero-copy{transform:translateY(calc(var(--s01-p)*-18px));opacity:clamp(0,calc(1.35 - var(--s01-p)*2.35),1);will-change:transform,opacity}
.hero .actions{opacity:clamp(0,calc(1.15 - var(--s01-p)*5.75),1)}
.hero-bottom{opacity:clamp(0,calc(1 - var(--s01-p)*4),1)}
@media(max-width:760px){.hero{height:136svh;min-height:136svh}.hale-hero-pin{min-height:34rem}}
@media(prefers-reduced-motion:reduce){.hero{height:auto;min-height:100svh}.hale-hero-pin{position:relative}.hero-copy,.hero .actions,.hero-bottom{opacity:1;transform:none}.hero-bg{transform:none}}
.hale-film{
  position:relative;z-index:6; /* Above VR copy (3) and cue (5), below site navigation. */
  --film-p:0;
  --s02-display-font:var(--tevo-cjk);
  --s02-text-font:var(--tevo-cjk);
  display:block;
  height:165svh;
  min-height:165svh;
  padding:0;
  background:#08090c;
  isolation:isolate;
  overflow:clip;
}
.film-pin{
  position:sticky;top:0;
  width:100%;height:100svh;min-height:34rem;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;
}
/* 海报的颜色先铺成一层很暗的环境光，卡片放大时一起退掉，避免“酒店 → 黑洞”的硬切。 */
.film-ambient{
  position:absolute;inset:-8%;z-index:0;pointer-events:none;
  background:url('assets/hale-overview-poster.jpg') center/cover no-repeat;
  filter:blur(34px) saturate(.72);
  opacity:calc(.22 - .18 * var(--film-p));
  transform:scale(calc(1.08 + .04 * var(--film-p)));
}
.film-ambient::after{content:"";position:absolute;inset:0;background:rgba(3,5,9,.7)}

.film-copy{
  position:absolute;z-index:4;left:var(--lp);right:var(--lp);top:clamp(1.25rem,3.5vh,2.75rem);
  text-align:center;color:#f8f7f4;pointer-events:none;
  opacity:clamp(0,calc(2 - 12 * var(--film-p)),1);
  transform:translateY(calc(-12px * var(--film-p)));
  will-change:transform,opacity;
}
.film-copy h2{
  max-width:36rem;margin:0 auto;font-family:var(--s02-display-font);
  font-size:clamp(1.875rem,3vw,3rem);font-weight:600;line-height:1.12;letter-spacing:-.022em;
  color:rgba(248,247,244,.94);
  -webkit-font-smoothing:antialiased;font-kerning:normal;font-optical-sizing:auto;
  text-wrap:balance;
}
.film-copy p{
  max-width:42rem;margin:.55rem auto 0;
  font-family:var(--s02-text-font);
  font-size:1rem;font-weight:400;line-height:1.55;letter-spacing:0;
  color:rgba(248,247,244,.68);text-wrap:pretty;
  -webkit-font-smoothing:antialiased;font-kerning:normal;font-optical-sizing:auto;
}

.film-frame{
  position:relative;z-index:2;width:100vw;height:100svh;overflow:hidden;
  border-radius:calc(28px - 28px * var(--film-p));
  background:#0b0b0d;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 44px 110px -38px rgba(0,0,0,.92);
  transform:translateY(calc(7vh - 7vh * var(--film-p))) scale(calc(.82 + .18 * var(--film-p)));
  transform-origin:50% 56%;
  will-change:transform,border-radius;
}
.film-preview,.s02-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;background:#0b0b0d;
}
.film-preview{z-index:0;transform:scale(calc(1.035 - .035 * var(--film-p)));will-change:transform}
/* 单独盖一张海报，等影片真的开始播再交叉淡出。这样第一次看到的永远是同一帧。 */
.s02-poster{z-index:1;opacity:1;transition:opacity .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hale-film.is-playing .s02-poster{opacity:0}
.s02-veil{
  position:absolute;inset:0;z-index:2;
  background:rgba(0,0,0,calc(.2 - .1 * var(--film-p)));pointer-events:none
}

.film-controls{
  position:absolute;z-index:3;left:clamp(1rem,2.4vw,2rem);right:clamp(1rem,2.4vw,2rem);
  bottom:clamp(1rem,2.6vw,2rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.film-open,.film-toggle{
  appearance:none;border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;
  background:rgba(5,7,10,.58);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.8);
  -webkit-tap-highlight-color:transparent;
}
.film-open{
  min-height:3rem;padding:.55rem .75rem .55rem .62rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--s02-text-font);font-size:.88rem;font-weight:500;letter-spacing:0;
  -webkit-font-smoothing:antialiased;font-kerning:normal;
  transition:background-color .25s ease,border-color .25s ease,transform .25s var(--ease);
}
.s02-ring{
  width:1.9rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:#f7f6f2;color:#141519;flex:none;
}
.s02-ring svg{width:.78rem;height:auto;transform:translateX(.06em)}
.film-time{color:rgba(255,255,255,.58);font-variant-numeric:tabular-nums;margin-left:.1rem}
.film-open:hover{background:rgba(15,17,21,.8);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.film-open:focus-visible,.film-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}

.film-toggle{
  width:3rem;height:3rem;padding:0;border-radius:50%;display:grid;place-items:center;
  transition:background-color .25s ease,border-color .25s ease;
}
.film-toggle:hover{background:rgba(15,17,21,.8);border-color:rgba(255,255,255,.5)}
.film-toggle svg{width:1rem;height:1rem}
.film-toggle .s02-ico-play{display:none;transform:translateX(.06em)}
.hale-film.is-paused .film-toggle .s02-ico-pause{display:none}
.hale-film.is-paused .film-toggle .s02-ico-play{display:block}

@media (max-width:1080px){
  #film .film-frame{aspect-ratio:16/9}
  #film .film-toggle{display:grid;flex:none;width:2.75rem;height:2.75rem}
  #film .film-controls{gap:.5rem}
  #film .film-time{display:none}
  #film .film-preview{object-fit:contain}
  #film + #hero .st-copy{position:relative;inset:auto!important;width:100%;max-width:100%;height:auto!important;min-height:0!important;display:block;padding:3rem var(--lp) 1.5rem!important}
  #film + #hero .st-cue{display:none}
  #film + #hero.mobile-demo-open .hero-cam{padding-top:1rem}
}

@media (max-width:1080px),(max-height:620px){
  /* 手机不把 16:9 影片硬裁成竖屏：留在 16:10 的一块屏幕里，只做很轻的放大。 */
  .hale-film{height:112svh;min-height:112svh}
  .film-pin{min-height:31rem;flex-direction:column;padding:clamp(4.5rem,10vh,6rem) var(--lp) 3.5rem}
  .film-copy{position:relative;inset:auto;width:100%;text-align:left;opacity:1;transform:none;margin:0 0 1.25rem}
  .film-copy h2{max-width:12em;margin-inline:0;font-size:clamp(1.75rem,7.2vw,2.5rem)}
  .film-copy p{max-width:28rem;margin:.5rem 0 0;font-size:1rem;line-height:1.55}
  .film-frame{
    width:auto;max-width:92vw;height:min(56svh,57.5vw);aspect-ratio:16/10;flex:none;
    border-radius:22px;
    transform:translateY(calc(10px - 10px * var(--film-p))) scale(calc(.96 + .04 * var(--film-p)));
    box-shadow:0 0 0 1px rgba(255,255,255,.12),0 34px 74px -34px rgba(0,0,0,.95);
  }
  .film-preview{transform:none}
  .film-controls{left:.8rem;right:.8rem;bottom:.8rem}
  .film-open{min-height:2.75rem;padding:.45rem .68rem .45rem .5rem;font-size:.82rem}
  .s02-ring{width:1.75rem}
  .film-toggle{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hale-film{height:auto;min-height:100svh}
  .film-pin{position:relative;height:auto;min-height:100svh;flex-direction:column;padding:clamp(5rem,10vh,7rem) var(--lp)}
  .film-copy{position:relative;inset:auto;width:100%;opacity:1;transform:none;margin:0 0 2rem}
  .film-frame{width:min(88vw,80rem);height:auto;aspect-ratio:16/9;border-radius:24px;transform:none}
  .s02-poster{transition:none}
  .film-toggle{display:none}
}


/* H.OS English reading runway and film grid, i18n/english.css:172-177. */
.hale-film .film-pin{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:1.5rem;padding:5.5rem var(--lp) 2rem}
.hale-film .film-copy{position:relative;inset:auto;margin:0;width:100%;max-width:none}
.hale-film .film-copy h2{max-width:24ch}.hale-film .film-copy p{max-width:64ch}
.hale-film .film-frame{width:100%;height:auto;min-height:0;max-width:none;margin:0;aspect-ratio:16/9;transform:scale(calc(.96 + .04 * var(--film-p)))}
.hale-film .film-preview{object-fit:contain;transform:none}
.hale-film .film-controls{inset:auto clamp(1rem,2.4vw,2rem) clamp(1rem,2.6vw,2rem)}
.hale-film .film-toggle{display:grid;place-items:center;padding:0;flex:none}
@media(min-width:1081px) and (min-height:621px){.drs-section{height:210svh}.drs-sticky{min-height:0}.drs-map-panel{--ry:0deg;--rx:0deg}.drs-glass:hover{--hz:20px}}
@media(max-width:1080px),(max-height:620px){.hale-film .film-pin{gap:1.25rem;grid-template-rows:auto auto;align-content:center}.hale-film .film-frame{height:auto;aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.hale-film .film-copy{opacity:1;transform:none}.hale-film .film-frame{transform:none}.drs-section{height:auto}.drs-sticky{height:auto}}

/* Keep the frame on the actual film bounds; release the title space as it fades. */
@media(min-width:1081px) and (min-height:621px) and (prefers-reduced-motion:no-preference){
 .hale-film .film-pin{display:block;padding:0}
 .hale-film .film-copy{position:absolute;top:5.5rem;left:var(--lp);right:var(--lp);width:auto}
 .hale-film .film-frame{position:absolute;left:50%;top:var(--film-center,60%);width:var(--film-width,70vw);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);transform-origin:center;border:0}
}