Cinematic Space-Themed Hero Section in HTML, CSS & Vanilla JS | Vebnox

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/2FVxf657KXk?si=lmswDSEf7F1FMHua" style="display:none;" allow="autoplay"></iframe>
</div>


Build a single, self-contained HTML file: a full-viewport space-themed hero section for a site called "Vebnox". No build step, no frameworks, no external JS, no copyright or license comments. All CSS in one <style> block in <head>, all JS in one <script> block before </body>. All CSS classes and state/animation classes must use the "vbx-" prefix format (e.g., .vbx-stage, .vbx-sky, .vbx-planet, etc.). It must be pixel-faithful to the spec below and fully mobile responsive.

════════════════════════════════════════════════════════════════════════
1. BRAND & CONCEPT
════════════════════════════════════════════════════════════════════════
Brand Name: "Vebnox" (rendered in header logo as Veb<i>nox</i> with "nox" in cyan #5fd0e1).
A cinematic hero: A looping video of a single planet fills the whole viewport as background. Centred over it: eyebrow "PLANET", huge serif planet name, short cyan rule, lede paragraph, and glossy white pill button ("GET STARTED"). Flanking the button, cropped by left and right screen edges, sit two transparent planet cut-outs with serif labels.

Three planets exist: EARTH, VENUS, MARS. Exactly one is "featured" (clip is background, name is headline). The other two occupy left and right slots. Clicking a side planet makes it featured; the slots then re-fill with the remaining two. Earth is featured on load. Rotation order: ['earth', 'venus', 'mars'], fully reversible.

════════════════════════════════════════════════════════════════════════
2. EXACT ASSETS
════════════════════════════════════════════════════════════════════════
Background clips (10s, 16:9, silent, loop):
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_3ffb4889-c520-432d-8458-038009eb40df.mp4
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_b211cd74-013b-4dd3-bfd0-64491d8696fa.mp4
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_51eae59a-2459-4c84-907c-cc5edfe5fea7.mp4

Posters / still fallbacks:
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_508c64b8-a31e-4290-bdfc-1187df70e0a6.png
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_cf55d1d8-7b59-4a64-80da-d72052ae974e.png
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_0ba6de7c-285d-43dc-b7ab-8c54c73707cb.png

Transparent planet cut-outs (2048x2048 PNG with alpha):
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202005_3346cc4d-ec3b-44ab-825c-b18e49f5021a.png
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202012_640b239a-d08a-4200-adb2-741bbe129ac8.png
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202018_3d559490-f613-4ed7-a3bb-3b7e9fc90fb8.png

Favicon: Earth cut-out PNG URL above.

════════════════════════════════════════════════════════════════════════
3. FONTS
════════════════════════════════════════════════════════════════════════
Load Google Fonts:
  Prata 400
  Hanken Grotesk 400, 500, 600, 700
  Poppins 500, 600

Font Stacks:
  --font-serif: 'Prata', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Poppins', sans-serif;

════════════════════════════════════════════════════════════════════════
4. DESIGN SYSTEM (UNIT --u)
════════════════════════════════════════════════════════════════════════
Fixed composition measured from 1353 x 1163 reference, expressed in one custom property --u. EVERY length must be calc(N * var(--u)). Do not substitute arbitrary px values.

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }

:root{
  --dw:1353; --dh:1163; --gutter:25;
  --u:max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
  --dh-px:calc(1163 * var(--u));
  --vshift:calc(max(0px, (100vh - var(--dh-px))) * .42);
  --ink:#ffffff; --cyan:#79dce8; --cyan-logo:#5fd0e1;
  --rule:rgba(255,255,255,.23); --btn-ink:#071227;
  --font-serif:'Prata', Georgia, serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo:'Poppins', sans-serif;
}
@supports (height:100dvh){
  :root{
    --u:max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
    --vshift:calc(max(0px, (100dvh - var(--dh-px))) * .42);
  }
}
html,body{height:100%}
body{background:#04101f; color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision; overflow:hidden}

════════════════════════════════════════════════════════════════════════
5. DOM STRUCTURE (with vbx- prefix)
════════════════════════════════════════════════════════════════════════
<div class="vbx-stage">
  <div class="vbx-sky">
    <!-- Earth: class="vbx-is-active", src=EARTH CLIP, poster=EARTH STILL, preload="auto" -->
    <!-- Venus & Mars: data-src=CLIP (NOT src), poster=STILL, preload="none" -->
    <video data-planet="earth" class="vbx-is-active" autoplay muted loop playsinline preload="auto" src="..." poster="..." aria-hidden="true"></video>
    <video data-planet="venus" muted loop playsinline preload="none" data-src="..." poster="..." aria-hidden="true"></video>
    <video data-planet="mars" muted loop playsinline preload="none" data-src="..." poster="..." aria-hidden="true"></video>
  </div>
  <div class="vbx-ui">
    <header class="vbx-navbar">
      <div class="vbx-navrow">
        <a class="vbx-logo" href="#">Veb<i>nox</i></a>
        <nav class="vbx-links" id="site-nav">
          <a href="#" aria-current="page">Planets</a>
          <a href="#">Tution</a>
          <a href="#">Tutorials</a>
          <a href="#">Blog</a>
          <a class="vbx-enroll" href="#">Enroll</a>
        </nav>
        <button class="vbx-burger" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="site-nav">
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
    <div class="vbx-copy">
      <div class="vbx-col vbx-eyebrow"><span class="vbx-ent-mask"><span class="vbx-ent-line">PLANET</span></span></div>
      <h1 class="vbx-col vbx-title"><span class="vbx-ent-mask"><span class="vbx-ent-line">EARTH</span></span></h1>
      <div class="vbx-col vbx-rule"><span></span></div>
      <p class="vbx-col vbx-lede">Learn more about the fascinating details that we call our home, Planet Earth. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!</p>
      <div class="vbx-col vbx-cta">
        <button class="vbx-planet vbx-planet-l" type="button" data-slot="l">
          <img data-planet="earth" alt="" src="...">
          <img data-planet="venus" alt="" src="...">
          <img data-planet="mars" alt="" src="...">
        </button>
        <button class="vbx-planet vbx-planet-r" type="button" data-slot="r">
          <img data-planet="earth" alt="" src="...">
          <img data-planet="venus" alt="" src="...">
          <img data-planet="mars" alt="" src="...">
        </button>
        <a href="#">GET STARTED</a>
        <span class="vbx-label vbx-label-l"></span>
        <span class="vbx-label vbx-label-r"></span>
      </div>
    </div>
  </div>
  <button class="vbx-scroll" type="button" aria-label="Scroll to next section">
    <svg viewBox="0 0 26 33" fill="none" aria-hidden="true">
      <path d="M13 1.5 V31.5 M1.9 20.4 L13 31.5 L24.1 20.4" stroke="#ffffff" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
    </svg>
  </button>
</div>

════════════════════════════════════════════════════════════════════════
6. EXACT CSS RULES
════════════════════════════════════════════════════════════════════════
.vbx-stage{position:fixed; inset:0; overflow:hidden; isolation:isolate}
.vbx-sky{position:absolute; inset:0; z-index:0; background-image:url(EARTH_STILL); background-size:cover; background-position:center; background-repeat:no-repeat}
.vbx-sky video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .22s linear}
.vbx-sky video.vbx-is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .vbx-sky video{display:none} }
.vbx-ui{position:absolute; inset:0; z-index:3}

.vbx-planet{position:absolute; z-index:-1; padding:0; border:0; background:none; -webkit-appearance:none; appearance:none; line-height:0; cursor:pointer; pointer-events:auto; transition:transform .45s cubic-bezier(.22,1,.36,1)}
.vbx-planet img{display:none; width:100%; height:auto}
.vbx-planet img.vbx-is-shown{display:block}
.vbx-planet:hover{transform:scale(1.045)}
.vbx-planet:active{transform:scale(.99)}
.vbx-planet-l{width:calc(143 * var(--u)); left:calc(-69.5 * var(--u)); top:calc(-38.3 * var(--u))}
.vbx-planet-r{width:calc(143 * var(--u)); right:calc(-64.7 * var(--u)); top:calc(-40.6 * var(--u))}
@media (prefers-reduced-motion:reduce){ .vbx-planet{transition:none} .vbx-planet:hover,.vbx-planet:active{transform:none} }

.vbx-copy{position:absolute; inset:0; transform:translateY(var(--vshift)); pointer-events:none}
.vbx-copy a{pointer-events:auto}
.vbx-col{position:absolute; left:0; right:calc(var(--gutter) * var(--u)); text-align:center}

.vbx-navbar{position:absolute; top:0; left:0; right:0; z-index:6; height:calc(88 * var(--u))}
.vbx-navbar::after{content:""; position:absolute; left:calc(25 * var(--u)); right:calc(49 * var(--u)); top:calc(86 * var(--u)); height:calc(2 * var(--u)); background:var(--rule); transform-origin:center}
.vbx-navrow{position:absolute; left:calc(25 * var(--u)); right:calc(49 * var(--u)); top:0; height:calc(86 * var(--u)); display:flex; align-items:center; justify-content:space-between}
.vbx-logo{font-family:var(--font-logo); font-weight:600; font-size:calc(18.4 * var(--u)); letter-spacing:calc(-0.15 * var(--u)); line-height:1; color:#fff; text-decoration:none; white-space:nowrap; position:relative; top:calc(-1 * var(--u))}
.vbx-logo i{font-style:normal; color:var(--cyan-logo)}
.vbx-burger{display:none; position:relative; width:calc(46 * var(--u)); height:calc(46 * var(--u)); padding:0; border:0; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:calc(6 * var(--u)); flex:none}
.vbx-burger span{display:block; width:calc(24 * var(--u)); height:calc(2 * var(--u)); border-radius:calc(2 * var(--u)); background:#fff; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s linear}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(1){transform:translateY(calc(8 * var(--u))) rotate(45deg)}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(2){opacity:0}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(3){transform:translateY(calc(-8 * var(--u))) rotate(-45deg)}
.vbx-links{display:flex; align-items:center}
.vbx-links a{position:relative; display:flex; align-items:center; height:calc(86 * var(--u)); font-size:calc(18.4 * var(--u)); font-weight:400; line-height:1; color:#fff; text-decoration:none; padding:0 calc(17.5 * var(--u)); letter-spacing:calc(-1 * var(--u)); white-space:nowrap}
.vbx-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; top:calc(83.5 * var(--u)); height:calc(4 * var(--u)); background:var(--cyan); border-radius:calc(1 * var(--u)); transform-origin:center}
.vbx-links a:nth-child(3){letter-spacing:calc(-1.75 * var(--u))}
.vbx-links a:nth-child(2){margin-left:calc(24 * var(--u))}
.vbx-links a:nth-child(3){margin-left:calc(26 * var(--u))}
.vbx-links a:nth-child(4){margin-left:calc(27 * var(--u))}
.vbx-links a.vbx-enroll{margin-left:calc(28.5 * var(--u)); width:calc(107 * var(--u)); height:calc(38 * var(--u)); border-radius:calc(19 * var(--u)); display:flex; align-items:center; justify-content:center; font-size:calc(17 * var(--u)); font-weight:600; letter-spacing:calc(-0.75 * var(--u)); line-height:1; color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u)); background:linear-gradient(180deg,#ffffff 0%,#d8ecfe 9%,#dceefe 72%,#f4f9ff 100%); box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255,255,255,.22), inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.92); flex:none}

.vbx-eyebrow{top:calc(188.8 * var(--u)); font-size:calc(30.45 * var(--u)); font-weight:500; line-height:1; letter-spacing:calc(4 * var(--u)); text-indent:calc(4 * var(--u)); color:#fff}
h1.vbx-title{top:calc(268 * var(--u)); font-family:var(--font-serif); font-weight:400; font-size:calc(112.4 * var(--u)); line-height:1; letter-spacing:calc(2 * var(--u)); text-indent:calc(2 * var(--u)); color:#fff}
.vbx-rule{top:calc(405.5 * var(--u)); height:calc(5 * var(--u)); font-size:0; line-height:0; padding-right:calc(2 * var(--u))}
.vbx-rule span{display:inline-block; vertical-align:top; width:calc(100 * var(--u)); height:100%; border-radius:calc(2.5 * var(--u)); background:var(--cyan); transform-origin:center}
p.vbx-lede{top:calc(433.2 * var(--u)); font-size:calc(18.36 * var(--u)); font-weight:400; line-height:calc(30 * var(--u)); color:rgba(255,255,255,.95)}

.vbx-cta{top:calc(597 * var(--u)); height:calc(66 * var(--u)); isolation:isolate}
.vbx-cta a{display:inline-flex; align-items:center; justify-content:center; width:calc(216 * var(--u)); height:calc(66 * var(--u)); border-radius:calc(33 * var(--u)); font-size:calc(17 * var(--u)); font-weight:700; letter-spacing:0; text-indent:0; line-height:1; color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u)); background:linear-gradient(180deg,#ffffff 0%,#d6e8f8 4%,#d9ecfe 72%,#ffffff 100%); box-shadow:0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255,255,255,.50), 0 0 calc(26 * var(--u)) rgba(255,255,255,.18), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.9)}
.vbx-label{position:absolute; top:calc(33 * var(--u)); font-family:var(--font-serif); font-weight:400; font-size:calc(17.8 * var(--u)); letter-spacing:calc(4.6 * var(--u)); line-height:1; color:#fff; white-space:nowrap}
.vbx-label.vbx-label-l{left:calc(111 * var(--u))}
.vbx-label.vbx-label-r{right:calc(104 * var(--u))}

.vbx-scroll{position:absolute; z-index:4; left:50%; margin-left:calc((-48 - (var(--gutter) / 2)) * var(--u)); bottom:calc(68 * var(--u)); width:calc(96 * var(--u)); height:calc(96 * var(--u)); border-radius:50%; background:rgba(24,30,42,.70); -webkit-backdrop-filter:blur(calc(6 * var(--u))); backdrop-filter:blur(calc(6 * var(--u))); border:0; display:flex; align-items:center; justify-content:center; cursor:pointer}
.vbx-scroll svg{width:calc(20 * var(--u)); height:calc(25 * var(--u)); display:block}

.vbx-scroll:focus-visible,.vbx-links a:focus-visible,.vbx-enroll:focus-visible,.vbx-cta a:focus-visible,.vbx-logo:focus-visible{outline:calc(2 * var(--u)) solid var(--cyan); outline-offset:calc(3 * var(--u))}
.vbx-planet:focus-visible{outline:calc(2 * var(--u)) solid var(--cyan); outline-offset:calc(6 * var(--u)); border-radius:50%}

════════════════════════════════════════════════════════════════════════
7. RESPONSIVE TIERS (exact source order)
════════════════════════════════════════════════════════════════════════
A) NAV COLLAPSE @media (max-width:1030px), (max-height:620px)
  .vbx-navrow{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
  .vbx-burger{display:flex}
  .vbx-links{position:absolute; top:calc(96 * var(--u)); right:0; z-index:5; width:min(calc(324 * var(--u)), calc(100vw - 50 * var(--u))); flex-direction:column; align-items:stretch; padding:calc(12 * var(--u)); border-radius:calc(20 * var(--u)); background:rgba(9,21,42,.84); -webkit-backdrop-filter:blur(calc(18 * var(--u))); backdrop-filter:blur(calc(18 * var(--u))); border:calc(1 * var(--u)) solid rgba(255,255,255,.14); box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(2,8,20,.55); opacity:0; visibility:hidden; transform:translateY(calc(-10 * var(--u))); transition:opacity .24s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s}
  .vbx-navrow[data-open="true"] .vbx-links{opacity:1; visibility:visible; transform:none}
  .vbx-links a:nth-child(n){margin-left:0; height:auto; justify-content:flex-start; padding:calc(14 * var(--u)) calc(16 * var(--u)); font-size:calc(19 * var(--u)); letter-spacing:calc(-.6 * var(--u))}
  .vbx-links a + a{border-top:calc(1 * var(--u)) solid rgba(255,255,255,.08)}
  .vbx-links a[aria-current="page"]::after{top:auto; bottom:calc(9 * var(--u)); left:calc(16 * var(--u)); right:auto; width:calc(26 * var(--u)); height:calc(3 * var(--u))}
  .vbx-links a.vbx-enroll{margin:calc(14 * var(--u)) 0 calc(2 * var(--u)); width:100%; height:calc(46 * var(--u)); border-radius:calc(23 * var(--u)); justify-content:center; padding-top:calc(2 * var(--u)); font-size:calc(18 * var(--u)); letter-spacing:calc(-.4 * var(--u)); border-top:0}
  .vbx-links a.vbx-enroll::after{content:none}

B) TABLET @media (min-width:580px) and (max-width:1030px) and (min-height:621px)
  :root{--gutter:0; --u:min(max(min(.85px, calc(100vh / 780)), min(calc(100vw / 900), calc(100vh / 1163))), 1.15px); --dh-px:calc(1120 * var(--u)); --vshift:calc(max(0px, (100vh - var(--dh-px))) * .38)}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-navbar::after{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
  p.vbx-lede br{display:none}
  p.vbx-lede{max-width:calc(620 * var(--u)); margin-left:auto; margin-right:auto; text-wrap:pretty}
  .vbx-label.vbx-label-r{right:calc(116 * var(--u))}

C) PHONE @media (max-width:579px), (max-height:620px)
  :root{--gutter:0; --u:max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880))); --dh-px:calc(880 * var(--u)); --vshift:calc(max(0px, (100vh - var(--dh-px))) * .34)}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-navbar{height:calc(76 * var(--u))}
  .vbx-navbar::after{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(74 * var(--u))}
  .vbx-navrow{left:calc(24 * var(--u)); right:calc(24 * var(--u)); height:calc(74 * var(--u))}
  .vbx-links{top:calc(84 * var(--u))}
  .vbx-copy{top:calc(76 * var(--u)); display:flex; flex-direction:column; align-items:center; padding:calc(56 * var(--u)) calc(26 * var(--u)) 0}
  .vbx-col{position:static; width:100%; right:auto}
  .vbx-eyebrow{font-size:calc(20 * var(--u)); letter-spacing:calc(5 * var(--u)); text-indent:calc(5 * var(--u))}
  h1.vbx-title{font-size:calc(86 * var(--u)); margin-top:calc(15 * var(--u))}
  .vbx-rule{margin-top:calc(20 * var(--u)); height:calc(5 * var(--u)); padding-right:0}
  .vbx-rule span{width:calc(84 * var(--u))}
  p.vbx-lede{margin-top:calc(19 * var(--u)); font-size:calc(15.5 * var(--u)); line-height:calc(26 * var(--u)); max-width:calc(400 * var(--u)); text-wrap:balance}
  p.vbx-lede br{display:none}
  .vbx-cta{top:auto; margin-top:calc(32 * var(--u)); height:calc(60 * var(--u)); position:relative}
  .vbx-cta a{width:calc(190 * var(--u)); height:calc(60 * var(--u)); border-radius:calc(30 * var(--u))}
  .vbx-label{top:50%; transform:translateY(-50%); font-size:calc(16 * var(--u)); letter-spacing:calc(4 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(56 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(60 * var(--u))}
  .vbx-planet-l{width:calc(89 * var(--u)); left:calc(-44.5 * var(--u)); top:calc(-17 * var(--u))}
  .vbx-planet-r{width:calc(89 * var(--u)); right:calc(-44.5 * var(--u)); top:calc(-18.3 * var(--u))}
  .vbx-scroll{width:calc(74 * var(--u)); height:calc(74 * var(--u)); margin-left:calc(-37 * var(--u)); bottom:calc(49 * var(--u))}
  .vbx-scroll svg{width:calc(15.5 * var(--u)); height:calc(19.5 * var(--u))}

D) @media (max-height:660px){ .vbx-scroll{display:none} }

E) SHORT @media (max-height:620px)
  :root{--u:max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560))); --dh-px:calc(560 * var(--u)); --vshift:0px}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-copy{padding-top:calc(26 * var(--u))}
  h1.vbx-title{font-size:calc(64 * var(--u)); margin-top:calc(8 * var(--u))}
  .vbx-rule{margin-top:calc(12 * var(--u))}
  p.vbx-lede{margin-top:calc(12 * var(--u))}
  .vbx-cta{margin-top:calc(20 * var(--u))}
  .vbx-label{top:50%; transform:translateY(-50%); font-size:calc(15 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(58 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(58 * var(--u))}
  @media (min-width:821px) and (max-height:660px){ .vbx-copy{transform:none} }

F) NARROW PHONE @media (max-width:500px) (declared LAST to win inside tier E)
  .vbx-label{top:calc(100% + 34 * var(--u)); transform:none; font-size:calc(15 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(6 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(6 * var(--u))}

@media (prefers-reduced-motion:reduce){ .vbx-links,.vbx-burger span{transition:none} }

════════════════════════════════════════════════════════════════════════
8. ENTRANCE ANIMATION & DRIVER
════════════════════════════════════════════════════════════════════════
In <head> before <style>, blocking inline script adds class "vbx-anim" to documentElement unless prefers-reduced-motion:
  (function(){try{
    if(!window.matchMedia||!matchMedia('(prefers-reduced-motion: reduce)').matches){
      document.documentElement.classList.add('vbx-anim');
    }
  }catch(e){}})();

Keyframes:
  @keyframes vbx-ent-reveal{from{transform:translateY(115%)}to{transform:translateY(0)}}
  @keyframes vbx-ent-rise{from{opacity:0;transform:translateY(var(--rise,10px))}to{opacity:1;transform:none}}
  @keyframes vbx-ent-settle{from{opacity:0;transform:translateY(var(--rise,8px)) scale(.965)}to{opacity:1;transform:none}}
  @keyframes vbx-ent-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes vbx-ent-fade{from{opacity:0}to{opacity:1}}

The .vbx-anim state hides targets and sets transforms.
When .vbx-play is added:
  .vbx-sky: fade 1.6s .25s
  .vbx-navbar::after: draw .9s .12s
  .vbx-logo: rise 8u .6s .20s
  .vbx-links a: rise 8u .55s (staggered: (1) .26s, (2) .31s, (3) .36s, (4) .41s)
  .vbx-links a.vbx-enroll, .vbx-burger: settle 8u .6s .46s
  .vbx-links a[aria-current]::after: draw .55s .60s
  .vbx-eyebrow .vbx-ent-line: reveal .75s .30s
  h1.vbx-title .vbx-ent-line: reveal .95s .44s
  .vbx-rule span: draw .65s .78s
  p.vbx-lede: rise 12u .7s .86s
  .vbx-label.vbx-label-l: rise 8u .6s 1.04s
  .vbx-label.vbx-label-r: rise 8u .6s 1.10s
  .vbx-cta a: settle 8u .7s 1.14s
  .vbx-scroll: settle .6s 1.42s

Driver script: waits for document.fonts.ready (500ms timeout fallback), runs 2 requestAnimationFrames, adds .vbx-play, and after 2150ms removes both .vbx-anim and .vbx-play.

════════════════════════════════════════════════════════════════════════
9. PLANET SWITCHER JAVASCRIPT
════════════════════════════════════════════════════════════════════════
const ORDER = ['earth', 'venus', 'mars'];
Store for each planet: name, cutout URL, still URL, and lede text.

show(next):
  1. Bail if unknown or already featured.
  2. For video clips in .vbx-sky: if matching next, set src from data-src (lazy fetch), toggle .vbx-is-active, play() (catch reject); pause all other clips and remove .vbx-is-active.
  3. Set .vbx-sky background-image to planet still.
  4. Update h1.vbx-title .vbx-ent-line textContent.
  5. Update p.vbx-lede innerHTML.
  6. rest = ORDER.filter(p => p !== next). Slot L gets rest[0], Slot R gets rest[1].
     For each slot: set button data-planet, set aria-label "Show <NAME>", toggle .vbx-is-shown on child img matching data-planet (never mutate img.src), and set label text.

warm(planet): if video has data-src and no src, assign src, set preload='auto', call load().
Bind warm on pointerenter and focus on both side planet buttons.
In idleCallback (fallback setTimeout 2500ms), warm all remaining planets.
Call show('earth') at the end of setup.

════════════════════════════════════════════════════════════════════════
10. BURGER MENU JAVASCRIPT
════════════════════════════════════════════════════════════════════════
setNavOpen(open) writes .vbx-navrow dataset.open, burger button aria-expanded and aria-label ("Open navigation" / "Close navigation"). Initialise with false.
Toggle on burger click (stopPropagation).
Close on outside click, on Escape key (returning focus to burger button), and on any link click inside the menu.
Cinematic Space-Themed Hero Section in HTML, CSS & Vanilla JS | Vebnox

Vebnox Studio Guide

Deploy Next.js & AI Websites on Hostinger Cloud
