.hero{outline:none;position:relative}.hero__track{height:100svh;position:relative}.hero[data-film=loading] .hero__track,.hero[data-film=on] .hero__track{height:480svh}.hero__stage{background:var(--stage);isolation:isolate;height:100svh;position:sticky;top:0;overflow:hidden}.hero{--words-width:min(30rem, 34vw)}.hero__film{--scene-width:calc(var(--scene-right) - var(--scene-left));--words-end:calc(var(--gutter) + var(--words-width) + 24px);--right-margin:2vw;--w:min(100svh / var(--frame-ratio), (100vw - var(--words-end) - var(--right-margin)) / var(--scene-width));left:calc(100vw - var(--right-margin) - var(--w) * var(--scene-right));top:calc(50% - var(--w) * var(--frame-ratio) / 2);width:var(--w);aspect-ratio:16/9;-webkit-mask-composite:source-in;position:absolute;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 8% 96%,#0000 100%),linear-gradient(#0000 0,#000 3% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 8% 96%,#0000 100%),linear-gradient(#0000 0,#000 3% 90%,#0000 100%);mask-composite:intersect}.hero__film>picture,.hero__media{aspect-ratio:16/9;object-fit:cover;width:100%;display:block;position:absolute;top:0;left:0}.hero__film>picture>img{width:100%;height:100%;display:block}.hero__media--start,.hero__media--video{opacity:0}.hero[data-film=loading] .hero__media--start,.hero[data-film=on] .hero__media--video{opacity:1}.hero[data-film=loading] .hero__film>picture,.hero[data-film=on] .hero__film>picture{opacity:0}.hero__stage:after{content:"";pointer-events:none;background:radial-gradient(ellipse 130% 110% at 70% 45%, transparent 60%, var(--stage) 100%);z-index:2;position:absolute;inset:0}.hero__words{z-index:3;left:var(--gutter);width:var(--words-width);transition:opacity .65s var(--ease-out);position:absolute;top:50%;transform:translateY(-50%)}.hero__line{letter-spacing:-.02em;color:var(--rice);font-size:clamp(44px,1.5rem + 4.6vw,88px);font-weight:800;font-stretch:120%;line-height:1}.hero__sentence{max-width:34ch;color:var(--ash);margin:20px 0 32px}.hero__actions{flex-wrap:wrap;gap:12px;display:flex}.hero__play{display:none}.js .hero[data-film=still] .hero__play{display:inline-flex}.film-pending .hero__words{opacity:0;animation:0s linear 4s forwards words-fallback}@keyframes words-fallback{to{opacity:1}}.hero[data-film=loading]:not(.grown) .hero__words,.hero[data-film=on]:not(.grown) .hero__words{opacity:0;pointer-events:none;transition:opacity .42s ease-in}.hero[data-film=loading]:not(.grown) .hero__words:focus-within,.hero[data-film=on]:not(.grown) .hero__words:focus-within{opacity:1;pointer-events:auto;transition:opacity .2s var(--ease-out)}@media (aspect-ratio<=3/2) and (aspect-ratio>=11/10){.hero{--words-width:min(26rem, 34vw)}}@media (aspect-ratio<=11/10){.hero__stage{--room:calc(5svh + 230px);--side:8px;--up-w:min((100vw - 2 * var(--side)) / (var(--scene-right) - var(--scene-left)), (100svh - var(--room) - 2svh) / (var(--frame-ratio) * var(--scene-bottom)));--band:max(0px, calc(100svh - var(--room) - 2svh - var(--up-w) * var(--frame-ratio) * var(--scene-bottom)))}.hero__film{--w:var(--up-w);left:calc(50vw - var(--w) * (var(--scene-left) + var(--scene-right)) / 2);top:var(--band)}.hero__stage:after{background:radial-gradient(ellipse 140% 70% at 50% 25%, transparent 50%, var(--stage) 95%)}.hero__words{top:auto;bottom:max(24px,5svh);left:var(--gutter);right:var(--gutter);width:auto;transform:none}.hero__sentence{margin:14px 0 22px}}@media (aspect-ratio<=11/20){.hero__stage{--room:calc(5svh + 160px)}.hero__words{top:0}.hero__line{left:0;right:0;top:max(var(--gutter), calc(var(--band) / 2 - .5em));position:absolute}.hero__sentence{margin:0;position:absolute;bottom:70px;left:0;right:0}.hero__actions{position:absolute;bottom:0;left:0}}.rm .hero__words,.rm .hero__line>*{transition:none}
