/* ==========================================================================
   Hero · featured product slider over a NASA photograph of the Gulf at night
   Stage stack, back to front: halo and shadow 1 · orbit and back droplets 2 ·
   product 3 · front droplets 5
   ========================================================================== */

@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.5 0.12 243);
}

.hero {
  --glow: oklch(0.5 0.12 243);
  --dir: 1;
  position: relative;
  min-height: 100svh;
  padding-top: 72px;
  overflow: clip;
  isolation: isolate;
  background: var(--orbit);
  color: var(--on-orbit);
  transition: --glow 900ms var(--ease-out);
}

/* ---------- Background: the NASA photograph, tinted in brand blues ---------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  scale: 1.06;
  will-change: transform;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}
.js .hero__photo img {
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.is-loaded .hero__photo img {
  opacity: 1;
}

/* Darkens the copy side for the headline, the bottom for the controls, and sits a soft
   brand-blue glow with a dark core behind the product so it separates from the city lights.
   --stage-x follows the product column: 67% in English, 33% in Arabic */
.hero__shade {
  --stage-x: calc(50% + 17% * var(--flip));
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 44% at var(--stage-x) 48%, color-mix(in oklch, var(--glow) 42%, transparent), transparent 72%),
    radial-gradient(28% 38% at var(--stage-x) 52%, rgb(3 8 18 / 0.55), transparent 78%),
    linear-gradient(calc(90deg * var(--flip)), rgb(3 8 18 / 0.9) 0%, rgb(3 8 18 / 0.72) 30%, rgb(3 8 18 / 0.12) 58%, rgb(3 8 18 / 0.3) 100%),
    linear-gradient(0deg, rgb(3 8 18 / 0.92) 0%, transparent 28%),
    linear-gradient(180deg, rgb(3 8 18 / 0.65) 0%, transparent 18%);
}

.hero__scene,
.hero__inside {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  scale: 1.04;
}
.hero__scene {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero.has-scene .hero__scene {
  opacity: 1;
}
.hero.has-scene.is-switching .hero__scene {
  opacity: 0;
  transition-duration: 360ms;
}

/* See inside: a soft circular lens reveals the cutaway render under the pointer */
.hero__inside {
  --lx: 64%;
  --ly: 50%;
  clip-path: circle(0px at var(--lx) var(--ly));
  transition: clip-path 420ms var(--ease-out);
}
.hero:not(.has-scene) .hero__inside,
.hero.is-switching .hero__inside {
  display: none;
}
.hero.is-lens .hero__inside {
  clip-path: circle(clamp(120px, 12vw, 190px) at var(--lx) var(--ly));
}
.hero.is-inside .hero__inside {
  clip-path: circle(150vmax at calc(50% + 16% * var(--flip)) 50%);
  transition-duration: 1100ms;
}
.hero.has-scene .hero__art {
  display: none;
}

/* ---------- Layout ---------- */

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--s-6);
  min-height: calc(100svh - 72px);
  padding-block: var(--s-4) var(--s-6);
}

/* ---------- Copy ---------- */

.hero__copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: var(--s-4);
  max-width: 580px;
  padding-block: var(--s-5);
  container-type: inline-size;
}

/* Credential lockup, not a button: the insignia inside a faint orbit, a hairline, then the claim
   in two sizes. TRINITY's slide shows its award with the orbit mark instead */
.hero__badge {
  position: relative;
  justify-self: start;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--s-4);
  margin: 0;
  color: var(--on-orbit);
}
.hero__badge::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 50%;
  width: 100px;
  height: 36px;
  translate: 0 -50%;
  rotate: -16deg;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--quell) 50%, transparent);
  pointer-events: none;
}
.hero__badge-nasa {
  display: none;
  position: relative;
  width: auto;
  height: 64px;
  filter: drop-shadow(0 0 18px color-mix(in oklch, var(--accent) 70%, transparent));
}
.hero__badge.has-nasa .hero__badge-nasa {
  display: block;
}
.hero__badge-icon {
  width: 52px;
  height: 52px;
  padding: 8px;
  fill: none;
  stroke: var(--quell);
  stroke-width: 1.5;
}
.hero__badge.has-nasa .hero__badge-icon {
  display: none;
}
.hero__badge-text {
  display: grid;
  gap: 3px;
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid color-mix(in oklch, var(--on-orbit) 28%, transparent);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--on-orbit-2);
}
.hero__badge-text strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--on-orbit);
}
.hero__badge:not(.has-nasa) .hero__badge-text strong {
  font-size: 1.25rem;
  font-stretch: 110%;
  letter-spacing: 0;
  color: var(--quell);
}

.hero__title {
  font-size: min(5.6rem, 11.2cqi);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.07em;
}
.hero__title .line > span {
  display: inline-block;
  transition: transform 950ms var(--ease-out);
}
.hero__title .line--accent {
  color: var(--quell);
}

.hero__lead {
  max-width: 40ch;
  color: var(--on-orbit-2);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.hero__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-inline-end: var(--s-3);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  color: var(--on-orbit);
  text-decoration: none;
  font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: border-color 200ms var(--ease-out);
}
.hero__price:hover {
  border-color: var(--quell);
}
.hero__price-label {
  font-size: var(--text-sm);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--on-orbit-2);
}

.hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  font-size: 0.8125rem;
}
.hero__facts li {
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--on-orbit-2);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-orbit) 18%, transparent);
}
/* The Qatar line under the facts. Inline, not flex, so the bold phrase and the sentence wrap as one text */
.hero__local {
  font-size: var(--text-sm);
  color: var(--on-orbit-2);
}
.hero__local::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-inline-end: var(--s-2);
  vertical-align: -1px;
  border-radius: 2px;
  background: oklch(0.45 0.15 8);
  box-shadow: 0 0 0 1px oklch(0.95 0.012 230 / 0.35);
}
.hero__local strong {
  color: var(--on-orbit);
  font-weight: 650;
}

/* First load */
.hero__fade {
  transition:
    opacity 600ms var(--ease-out),
    transform 800ms var(--ease-out);
}
.js .hero__title .line > span {
  transform: translateY(var(--line-rise));
}
.js .hero__fade {
  opacity: 0;
  transform: translateY(16px);
}
.is-loaded .hero__title .line > span {
  transform: none;
  transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}
.is-loaded .hero__fade {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 80ms + 160ms);
}

/* Slide change: text leaves upward, the next one rises in */
.hero__copy.is-out .line > span {
  transform: translateY(calc(-1 * var(--line-rise)));
  transition: transform 360ms cubic-bezier(0.7, 0, 0.84, 0);
}
.hero__copy.is-out .hero__fade {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 280ms var(--ease-out),
    transform 360ms var(--ease-out);
}
.hero__copy.is-pre .line > span {
  transform: translateY(var(--line-rise));
  transition: none;
}
.hero__copy.is-pre .hero__fade {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

/* ---------- Stage ---------- */

.hero__stage {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(100%, calc(100svh - 230px));
  min-width: 300px;
  aspect-ratio: 1;
  touch-action: pan-y;
}
.hero__art {
  position: absolute;
  inset: 0;
}

/* A light beam rising from a glowing portal holds the product up */
.hero__beam {
  position: absolute;
  z-index: 1;
  left: 22%;
  right: 22%;
  top: 40%;
  bottom: 5%;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(to top, color-mix(in oklch, var(--quell) 42%, transparent), color-mix(in oklch, var(--quell) 10%, transparent) 55%, transparent);
}
.hero__portal {
  position: absolute;
  z-index: 1;
  left: 24%;
  right: 24%;
  bottom: 2%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--quell) 60%, transparent), color-mix(in oklch, var(--quell) 12%, transparent) 70%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--quell) 55%, transparent);
}

/* Glow behind the product, breathing slowly */
.hero__halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--quell) 34%, transparent), color-mix(in oklch, var(--accent) 16%, transparent) 55%, transparent 75%);
  animation: hero-breathe 6s var(--ease-in-out) infinite alternate;
}
@keyframes hero-breathe {
  from {
    opacity: 0.7;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Two orbit rings in 3D, spinning around the product's centre */
.hero__orbits {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.hero__ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 94%;
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: rotate(-10deg) rotateX(76.5deg);
  transform-style: preserve-3d;
}
.hero__ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in oklch, var(--quell) 45%, transparent);
  animation: hero-ring-spin 28s linear infinite;
}
/* A bright comet tail travelling round the ring */
.hero__ring i::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in oklch, var(--quell) 95%, white) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.hero__ring--inner {
  width: 70%;
  transform: rotate(16deg) rotateX(72deg);
}
/* Each ring is drawn twice and split along its own axis: the far half sits behind
   the product, the near half in front, so the product sits inside its orbits */
.hero__orbits--back .hero__ring {
  clip-path: inset(-8px -8px 50% -8px);
}
.hero__orbits--front {
  z-index: 4;
}
.hero__orbits--front .hero__ring {
  clip-path: inset(50% -8px -8px -8px);
}
.hero__ring--inner i {
  border: 1px solid color-mix(in oklch, var(--on-orbit) 16%, transparent);
  animation-duration: 40s;
  animation-direction: reverse;
}
@keyframes hero-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero .droplet {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: var(--size, 28px);
  height: var(--size, 28px);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, oklch(0.99 0.01 200) 0 12%, transparent 16%),
    radial-gradient(circle at 60% 70%, color-mix(in oklch, var(--quell) 70%, white) 0 18%, transparent 60%),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--quell) 26%, transparent) 0 58%, color-mix(in oklch, var(--quell) 70%, transparent) 100%);
  box-shadow:
    inset -3px -4px 8px color-mix(in oklch, var(--orbit) 45%, transparent),
    0 0 18px -4px color-mix(in oklch, var(--quell) 65%, transparent);
  will-change: transform;
}
.hero .droplet.is-front {
  z-index: 5;
}

.hero__float {
  position: absolute;
  z-index: 3;
  inset: 8% 11% 16%;
  perspective: 1400px;
  animation: hero-float 7s var(--ease-in-out) infinite;
  will-change: transform;
}
@keyframes hero-float {
  50% {
    transform: translateY(-12px);
  }
}

.hero__product {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(0) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) drop-shadow(0 0 26px color-mix(in oklch, var(--quell) 40%, transparent));
  transition:
    transform 1000ms var(--ease-out),
    opacity 700ms var(--ease-out),
    filter 1000ms var(--ease-out);
}
.js .hero__product {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
}
.is-loaded .hero__product {
  opacity: 1;
  transform: none;
  transition-delay: 220ms;
}

/* Switching: the current product swings back round the orbit as the next comes to the front.
   hero.js drives the transforms frame by frame */
.hero__product.is-orbiting {
  position: absolute;
  inset: 0;
  transition: none;
  will-change: transform, opacity, filter;
}
.hero.is-orbit .hero__sheen {
  opacity: 0;
}

/* Light sweeping across the product as it lands, masked to its silhouette by hero.js */
.hero__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.45) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.hero__sheen.is-go {
  animation: hero-sheen 1500ms var(--ease-out);
}
@keyframes hero-sheen {
  0% {
    opacity: 1;
    background-position: 130% 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -30% 0;
  }
}

/* ---------- Slider controls ---------- */

.hero__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in oklch, var(--on-orbit) 14%, transparent);
}

.hero__progress {
  display: grid;
  gap: var(--s-2);
}
.hero__count {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.hero__count > .num {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}
.hero__count .label {
  color: var(--on-orbit-2);
}
.hero__bar {
  position: relative;
  display: block;
  width: 132px;
  height: 2px;
  overflow: hidden;
  background: color-mix(in oklch, var(--on-orbit) 18%, transparent);
}
.hero__bar i {
  position: absolute;
  inset: 0;
  background: var(--quell);
  transform-origin: var(--start);
  transform: scaleX(var(--p, 0.2));
  transition: transform 700ms var(--ease-out);
}

.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.hero__dock {
  display: flex;
  gap: var(--s-1);
}
.hero__dock button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 88px;
  padding: 6px 6px 8px;
  border-radius: var(--radius);
  color: var(--on-orbit-2);
  transition: color 250ms var(--ease-out);
}
.hero__dock button:hover,
.hero__dock button[aria-selected="true"] {
  color: var(--on-orbit);
}
.hero__thumb {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(3 8 18 / 0.55);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-orbit) 14%, transparent);
  transition:
    box-shadow 300ms var(--ease-out),
    transform 450ms var(--ease-out),
    background-color 300ms var(--ease-out);
}
.hero__thumb img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.hero__dock button:hover .hero__thumb {
  background: rgb(3 8 18 / 0.75);
}
.hero__dock button[aria-selected="true"] .hero__thumb {
  background: color-mix(in oklch, var(--accent) 30%, rgb(3 8 18));
  box-shadow: inset 0 0 0 2px var(--quell);
  transform: translateY(-4px);
}
.hero__dock-name {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.hero__arrow {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-orbit);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--on-orbit) 32%, transparent);
  transition:
    background-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.hero__arrow:hover {
  background: var(--accent);
  box-shadow: none;
}
.hero__arrow svg {
  width: 20px;
  height: 20px;
}
.hero__arrow--prev svg {
  rotate: 180deg;
}

.hero__credit {
  position: absolute;
  inset-inline-end: var(--gutter);
  bottom: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--on-orbit-2);
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Smaller screens: product first, then the story, then the dock ---------- */

@media (max-width: 960px) {
  /* minmax(0, 1fr): the scrolling dock must not widen the column past the screen */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--s-3);
    min-height: 0;
    padding-top: var(--s-2);
    padding-bottom: var(--s-4);
  }
  .hero__copy,
  .hero__nav {
    min-width: 0;
  }
  .hero__stage {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 520px, 54svh);
    min-width: 0;
  }
  .hero__copy {
    grid-column: 1;
    grid-row: 2;
    max-width: 640px;
    padding-block: 0 var(--s-2);
  }
  .hero__nav {
    grid-row: 3;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  .hero__progress {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .hero__controls {
    justify-content: space-between;
  }
  .hero__dock {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero__dock::-webkit-scrollbar {
    display: none;
  }
  .hero__photo img {
    object-position: 50% 30%;
  }
  .hero__shade {
    background:
      radial-gradient(60% 30% at 50% 24%, color-mix(in oklch, var(--glow) 40%, transparent), transparent 72%),
      linear-gradient(180deg, rgb(3 8 18 / 0.6) 0%, rgb(3 8 18 / 0.15) 26%, rgb(3 8 18 / 0.78) 50%, rgb(3 8 18 / 0.95) 100%);
  }
  .hero__credit {
    position: static;
    padding: 0 var(--gutter) var(--s-3);
  }
}

@media (max-width: 760px) {
  .hero__title {
    font-size: min(3.9rem, 12.6cqi);
  }
  .hero__lead {
    font-size: 1.0625rem;
  }
  .hero__arrow {
    display: none;
  }
  .hero__dock {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .hero__dock button {
    min-width: 76px;
  }
  .hero__scene,
  .hero__inside {
    object-position: 50% 0%;
  }
}

@media (max-width: 760px) {
  .hero__badge-nasa {
    height: 50px;
  }
  .hero__badge::before {
    width: 80px;
    height: 30px;
  }
  .hero__badge-text strong {
    font-size: 1.4rem;
  }
}