/* ============================================================
   JET ATLAS — ht-hero (centred cinematic hero, video bg)
   Ported 1:1 from home-two.css (incl. hero reveal choreography).
   ============================================================ */
.ht-hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: #fff; }
.ht-hero__media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.ht-hero__video, .ht-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Always-on photo behind the <video>: shows when the browser can't play the
   WebM (e.g. iOS Safari) so the hero is never a dark/empty box on mobile. */
.ht-hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ht-hero__scrim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, var(--ht-scrim-in, rgba(10,10,10,0.3)), var(--ht-scrim-out, rgba(8,8,8,0.82))); }
.ht-hero__glow { position: absolute; inset: 0; background: radial-gradient(48% 40% at 50% 78%, var(--ht-hero-glow, rgba(220,255,0,0.16)), transparent 62%); mix-blend-mode: screen; pointer-events: none; }
.ht-hero__grain { position: absolute; inset: 0; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); mix-blend-mode: overlay; pointer-events: none; }
.ht-hero__inner { position: relative; z-index: 2; width: min(100% - 2 * clamp(16px,5vw,56px), 940px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; padding: 110px 0 96px; }
.ht-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ht-ui); font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 22px; }
.ht-hero__title { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(46px,8.6vw,122px); line-height: 0.96; letter-spacing: -0.015em; color: var(--ht-white); }
.ht-hero__title em { font-style: italic; color: var(--ht-lime); }
.ht-hero__sub { margin: 24px auto 0; max-width: 54ch; font-size: clamp(15px,1.5vw,19px); line-height: 1.65; color: rgba(255,255,255,0.86); }
.ht-hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ht-hero__note { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--ht-ui); font-size: 12.5px; letter-spacing: 0.4px; color: rgba(255,255,255,0.82); }
.ht-hero__note .ht-orb { flex: 0 0 auto; }
.ht-hero__ticker { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; font-family: var(--ht-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.ht-hero__ticker span { padding: 0 8px; }
.ht-hero__ticker i { color: var(--ht-lime); font-style: normal; font-size: 9px; }
.ht-hero__scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; display: grid; place-items: center; width: 26px; height: 58px; }
.ht-hero__scroll-line { position: relative; width: 2px; height: 56px; background: rgba(255,255,255,0.28); border-radius: 2px; overflow: hidden; }
.ht-hero__scroll-line::after { content: ""; position: absolute; top: -60%; left: 0; width: 100%; height: 60%; border-radius: 2px; background: var(--ht-lime); box-shadow: 0 0 10px rgba(220,255,0,0.9); animation: ht-scrolldot 1.6s var(--ht-ease) infinite; }
@keyframes ht-scrolldot { 0% { top: -60%; } 100% { top: 100%; } }

/* ---- reveal choreography (gated by .ht-js; static in the editor) ---- */
.ht-js .ht-hero__title { opacity: 0; }
.ht-hero.is-in .ht-rise { opacity: 1; transform: none; }
.ht-hero.is-in .ht-hero__eyebrow { transition-delay: .15s; }
.ht-hero.is-in .ht-hero__sub { transition-delay: .45s; }
.ht-hero.is-in .ht-hero__cta { transition-delay: .6s; }
.ht-hero.is-in .ht-hero__note { transition-delay: .72s; }
.ht-hero.is-in .ht-hero__ticker { transition-delay: .85s; }

@media (prefers-reduced-motion: reduce) {
  .ht-js .ht-hero__title { opacity: 1 !important; }
  .ht-hero__scroll-line::after { animation: none; }
}