/* Demo: rotating Earth in the hero + one-product-at-a-time scroll story. Loaded after v3.css. */
:root { --vx-ink: #071D33; --vx-deep: #0B3158; --vx-cyan: #08A9C8; --vx-text: #e8f3f6; --vx-dim: #93abb8; }

/* ---------- hero globe ---------- */
.vx-globe { position: relative; aspect-ratio: 1; width: min(114%, 700px); justify-self: center; align-self: center; margin-right: -6%; opacity: 0; transform: scale(.94); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.vx-globe.is-ready { opacity: 1; transform: none; }
.vx-globe canvas { width: 100%; height: 100%; display: block; }
.vx-globe::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #08a9c824, transparent 62%); filter: blur(30px); z-index: -1; }
.vx-globe-tag { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font: 700 11px 'Manrope', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8fd2de; white-space: nowrap; opacity: .8; }
.vx-globe.no-gl { opacity: 1; background: radial-gradient(circle at 40% 35%, #134a6c, #061d31 70%); border-radius: 50%; }

/* ---------- product story ---------- */
.vx-story { position: relative; height: calc(var(--n) * 80vh + 100vh); background: var(--vx-ink); color: var(--vx-text); }
.vx-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: calc(96px + 2vh) 0 clamp(20px, 4vh, 40px);
  background: radial-gradient(60% 70% at 72% 55%, #0f3d63 0%, var(--vx-ink) 70%); }
.vx-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.vx-head .v2-eyebrow { color: #67dce5; margin: 0 0 10px; }
.vx-h2 { margin: 0; font: 800 clamp(30px, 4vw, 56px)/1.05 'Manrope', sans-serif; letter-spacing: -.05em; color: #fff; }
.vx-h2 span { color: #7fa9bd; }
.vx-count { margin: 0; font: 700 14px 'Manrope', sans-serif; color: var(--vx-dim); font-variant-numeric: tabular-nums; }
.vx-count b { font-size: 34px; color: #fff; }

.vx-stage { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4%; min-height: 0; }
.vx-copy { position: relative; min-height: 300px; }
.vx-item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(40px); pointer-events: none;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.vx-item.is-past { transform: translateY(-40px); }
.vx-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.vx-div { margin: 0 0 14px; font: 800 12px 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--vx-cyan); }
.vx-item h3 { margin: 0; font: 800 clamp(40px, 5.4vw, 80px)/1.02 'Manrope', sans-serif; letter-spacing: -.055em; color: #fff; text-wrap: balance; }
.vx-sub { margin: 14px 0 0; font: 700 15px 'Manrope', sans-serif; color: #9fd7e1; }
.vx-body { margin: 16px 0 26px; max-width: 420px; font-size: 17px; line-height: 1.6; color: var(--vx-dim); }
.vx-item a { align-self: flex-start; color: #fff; font: 800 14px 'Manrope', sans-serif; border-bottom: 1px solid var(--vx-cyan); padding-bottom: 7px; }
.vx-item a b { margin-left: 18px; color: var(--vx-cyan); }

.vx-media { position: relative; height: min(62vh, 560px); }
.vx-halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, #08a9c838, transparent 65%); filter: blur(20px); }
.vx-img { position: absolute; left: 50%; top: 50%; width: min(100%, 62vh, 540px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%) translateY(18%) scale(.72) rotate(28deg); filter: drop-shadow(0 40px 50px #0009);
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.vx-img.is-past { transform: translate(-50%, -50%) translateY(-18%) scale(.72) rotate(-28deg); }
.vx-img.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }

.vx-dots { display: flex; gap: 8px; }
.vx-dots i { flex: 1; height: 3px; border-radius: 2px; background: #ffffff1f; cursor: pointer; position: relative; overflow: hidden; }
.vx-dots i::after { content: ''; position: absolute; inset: 0; background: var(--vx-cyan); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.vx-dots i.is-done::after, .vx-dots i.is-on::after { transform: scaleX(1); }

@media (max-width: 860px) {
  .vx-stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 8px; }
  .vx-media { order: -1; height: 38vh; }
  .vx-img { width: min(80vw, 36vh); }
  .vx-copy { min-height: 240px; }
  .vx-item h3 { font-size: 38px; }
  .vx-body { font-size: 15px; margin: 10px 0 16px; }
  .vx-count b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-item, .vx-img, .vx-globe, .vx-dots i::after { transition: none; }
}
@media (max-width: 860px) { .vx-sticky { padding-top: 84px; } .vx-h2 { font-size: 28px; } }
@media (max-width: 860px) { .vx-globe { order: -1; width: min(86%, 380px); margin: 6px auto 0; } .vx-globe-tag { font-size: 9px; } }
/* outgoing product leaves quickly, the next one comes in just after: no overlapping text */
.vx-item { transition: opacity .25s ease, transform .45s ease; }
.vx-item.is-on { transition: opacity .5s ease .22s, transform .8s cubic-bezier(.2,.7,.2,1) .22s; }
.vx-img { transition: opacity .35s ease, transform .7s ease; }
.vx-img.is-on { transition: opacity .6s ease .15s, transform 1.1s cubic-bezier(.2,.7,.2,1) .15s; }