/* Original ONDA brand-film direction. All imagery is generated for this project. */
.home .site-header{position:absolute;inset:0 0 auto;background:transparent;color:#fff;border-color:#ffffff30;height:100px}
.home .nav-group>a:after{background:#d6eb99}.home .site-header:has(.menu-toggle[aria-expanded=true]){background:var(--paper);color:var(--deep)}
.home .hero{height:100svh;min-height:760px;max-height:1200px}.home .hero-image{animation:none;object-position:50% 50%}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero.has-film .hero-film{opacity:1}.home .hero-shade{background:linear-gradient(90deg,#032e38ba 0%,#032e3850 50%,#001e2c08 90%),linear-gradient(0deg,#001d2dba,transparent 35%,transparent 75%,#01283350)}
.film-grid{position:absolute;inset:100px 0 0;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - .5px),#ffffff0b 50%,transparent calc(50% + .5px));border-left:1px solid #ffffff14;margin:0 56px}
.home .hero-content{padding-top:clamp(210px,29svh,330px);padding-bottom:190px}.home .hero-content .eyebrow{letter-spacing:.22em;color:#dfecdd;font-size:10px}
.home .hero h1{font-size:clamp(54px,5.5vw,88px);line-height:1.26;max-width:970px;font-weight:400;margin:30px 0 25px;text-shadow:0 2px 30px #002d3030}
.home .hero-description{font-size:14px;max-width:410px;color:#f3f6f0;line-height:1.9}.home .hero .button{margin-top:29px;background:#ffffff0a;color:white;border-color:#ffffff70;backdrop-filter:blur(5px);gap:70px;min-width:185px}
.home .hero .button:hover{background:var(--paper);color:var(--deep)}.hero-content>*{animation:film-copy-in 1s cubic-bezier(.2,.7,.2,1) both}.hero-content>:nth-child(2){animation-delay:.12s}.hero-content>:nth-child(3){animation-delay:.24s}.hero-content>:nth-child(4){animation-delay:.36s}
.film-side{position:absolute;right:30px;top:48%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;color:#ffffffa8}
.home .hero-bottom{bottom:43px;z-index:3;display:flex;align-items:end;justify-content:space-between}.film-scroll{display:flex;align-items:center;gap:14px;font-size:8px;letter-spacing:.15em;height:48px}.scroll-track{width:1px;height:43px;background:#ffffff30;position:relative;overflow:hidden}.scroll-track:after{content:'';position:absolute;width:1px;height:18px;top:-18px;background:#fff;animation:scroll-line 2.3s ease-in-out infinite}
.film-controls{display:flex;align-items:center;gap:25px}.film-chapters{display:flex;gap:25px}.film-chapter{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;width:118px;border:0;color:#ffffffb0;background:none;padding:12px 0;text-align:left;font-size:9px;letter-spacing:.12em;line-height:1.5}.film-chapter>span:first-child{font-family:Georgia,serif;font-size:14px;line-height:1}.film-chapter i{grid-column:1/-1;display:block;height:2px;background:#ffffff30;position:relative;overflow:hidden}.film-chapter b{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left center}.film-chapter.is-active{color:white}.film-toggle{display:grid;place-items:center;width:44px;height:44px;background:#ffffff0a;border:1px solid #ffffff60;border-radius:50%;color:white;transition:background .2s}.film-toggle:hover{background:#ffffff28}.film-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}.film-toggle .pause-icon{display:none}.hero.is-playing .pause-icon{display:block}.hero.is-playing .play-icon{display:none}.home .hero-watermark{font-size:clamp(170px,22vw,340px);bottom:90px;right:3%;opacity:.055;line-height:.8;pointer-events:none}
.motion-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.motion-reveal.is-revealed{opacity:1;transform:none}
@keyframes film-copy-in{from{opacity:0;transform:translateY(25px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes scroll-line{to{top:100%}}
@media(min-width:1500px){.film-grid{margin:0 max(56px,calc((100vw - 1320px)/2))}}
@media(max-width:1100px){.home .site-header{height:90px}.home .hero{min-height:740px}.film-grid{inset-block-start:90px;margin-inline:36px}.home .hero h1{font-size:62px}.film-chapter{width:100px}.film-chapters{gap:18px}.film-side{right:14px}}
@media(max-width:900px){.home .site-header{height:82px}.home .hero{min-height:760px}.film-grid{inset-block-start:82px}.home .hero-content{padding-top:230px}.home .hero h1{font-size:60px}.film-chapter{width:90px}.film-chapters{gap:14px}.film-controls{gap:18px}.film-side{display:none}}
@media(max-width:620px){.home .site-header{height:76px}.home .hero{height:100svh;min-height:740px;max-height:1100px}.home .hero-content{padding-top:clamp(185px,27svh,270px);padding-bottom:210px}.home .hero h1{font-size:clamp(38px,10.6vw,59px);line-height:1.34;letter-spacing:-.075em;margin:28px 0 21px}.home .hero-content .eyebrow{font-size:8px;letter-spacing:.14em}.home .hero-description{font-size:12px;max-width:280px;line-height:1.95}.home .hero .button{margin-top:25px;min-width:166px;gap:42px;font-size:11px}.home .hero-image{object-position:65% center}.home .hero-shade{background:linear-gradient(90deg,#032c36b0,#022b3540),linear-gradient(0deg,#011e2dcf,transparent 45%,transparent 80%,#01283360)}.film-grid{inset-block-start:76px;margin-inline:20px}.home .hero-bottom{bottom:28px;display:block}.film-controls{justify-content:space-between;width:100%;gap:15px}.film-chapters{flex:1;gap:14px}.film-chapter{width:auto;flex:1;gap:9px 7px;font-size:7px;letter-spacing:.04em}.film-chapter>span:first-child{font-size:13px}.film-toggle{width:38px;height:38px;flex-shrink:0}.film-scroll{margin-bottom:20px;font-size:7px;height:28px;gap:10px}.scroll-track{height:28px}.home .hero-watermark{font-size:150px;bottom:160px;right:-5px}}
.home .hero-bottom .scroll-track{width:1px;height:43px;border:0;border-radius:0}
@media(min-width:621px) and (max-width:900px){.film-chapter{width:110px}.chapter-name{font-size:8px}}
@media(max-width:620px){.home .hero-bottom .scroll-track{height:28px}}
@media(prefers-reduced-motion:reduce){.motion-reveal{opacity:1;transform:none}.hero-film{transition:none}.hero-content>*{animation:none}.scroll-track:after{animation:none;top:10px}}
