/* HERO LAYOUT: keep first-screen visuals here. Copy lives in index.html. */
/* Shared colors, buttons, navigation and section layouts remain in ../styles.css. */

.hero-backdrop {
  --hero-zoom-scale: 1.14;
  position: absolute;
  z-index: -3;
  top: 88px;
  right: clamp(24px, 6vw, 120px);
  height: calc(100svh - 88px);
  aspect-ratio: 2 / 3;
  background-image: url("hero-product-v2.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 60% 12%;
  filter: brightness(1.1) contrast(1.05) saturate(1.02);
}
.hero-backdrop.is-awakening {
  animation: hero-zoom 12s cubic-bezier(.22, .5, .3, 1) .35s both;
}
.hero-activation {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, filter;
}
@supports (mask-mode: luminance) {
  .hero-activation {
    display: block;
    background: var(--red);
    mask-image: url("hero-product-activation-v3.png");
    mask-mode: luminance;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
.hero-activation-eyes {
  clip-path: inset(2.8% 35% 92.5% 35%);
}
.hero-activation-v {
  clip-path: inset(8% 22% 77.5% 22%);
}
.hero-backdrop.is-awakening .hero-activation-eyes {
  animation: eyes-awaken 1.05s cubic-bezier(.16, .82, .3, 1) .55s both;
}
.hero-backdrop.is-awakening .hero-activation-v {
  animation: v-awaken 1.25s cubic-bezier(.18, .76, .24, 1) 1.55s both;
}
@keyframes hero-zoom {
  from { transform: scale(1); filter: brightness(.94) contrast(1.03) saturate(.94); }
  to { transform: scale(var(--hero-zoom-scale)); filter: brightness(1.1) contrast(1.05) saturate(1.02); }
}
@keyframes hero-presence {
  from { opacity: .25; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.04); }
}
@keyframes eyes-awaken {
  0%, 12% { opacity: 0; filter: brightness(1) drop-shadow(0 0 0 rgba(196, 58, 51, 0)); }
  36% { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 11px rgba(196, 58, 51, 1)); }
  58% { opacity: .42; filter: brightness(1.35) drop-shadow(0 0 4px rgba(196, 58, 51, .5)); }
  76% { opacity: 1; filter: brightness(2) drop-shadow(0 0 8px rgba(196, 58, 51, .86)); }
  100% { opacity: .46; filter: brightness(1.35) drop-shadow(0 0 4px rgba(196, 58, 51, .46)); }
}
@keyframes v-awaken {
  0%, 10% { opacity: 0; filter: brightness(1) drop-shadow(0 0 0 rgba(196, 58, 51, 0)); }
  32% { opacity: .38; filter: brightness(1.3) drop-shadow(0 0 5px rgba(196, 58, 51, .5)); }
  68% { opacity: 1; filter: brightness(2.1) drop-shadow(0 0 14px rgba(196, 58, 51, .94)); }
  82% { opacity: .54; filter: brightness(1.45) drop-shadow(0 0 7px rgba(196, 58, 51, .6)); }
  100% { opacity: .36; filter: brightness(1.2) drop-shadow(0 0 4px rgba(196, 58, 51, .4)); }
}
.hero-copy { max-width: 34em; margin: 34px 0 0; color: rgba(245, 245, 245, .76); font-size: 20px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 38px; }

@media (max-width: 760px) {
  .hero-backdrop { top: 68px; right: auto; left: 78%; height: calc(100svh - 68px); translate: -50% 0; }
  .hero-copy { max-width: 21em; margin-top: 22px; font-size: 18px; line-height: 1.75; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
  .hero-actions .button { min-height: 56px; }
}

:root {
  --scrub-ink: var(--white);
  --scrub-dim: rgba(245, 245, 245, .74);
  --scrub-bg: var(--black);
  --scrub-scrim: .58;
  --scrub-font: var(--display);
  --scrub-title: clamp(44px, 6.1vw, 94px);
  --scrub-hero-title: clamp(54px, 6.35vw, 94px);
  --scrub-pad: clamp(20px, 4vw, 56px);
  --scrub-align: left;
  --scrub-justify: start;
  --scrub-accent: var(--red);
  --scrub-accent-ink: var(--white);
}

.rd-scrub { --opening: 1; --details: 1; position: relative; color: var(--scrub-ink); border-bottom: 1px solid rgba(245, 245, 245, .14); background: var(--scrub-bg); }
.rd-scrub__stage { position: relative; height: 100svh; min-height: 480px; overflow: hidden; }
.rd-scrub--live .rd-scrub__stage { position: sticky; top: 0; }

.rd-scrub__media { position: absolute; z-index: 0; inset: 0; background: var(--black); }
.rd-scrub__poster,
.rd-scrub__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rd-scrub__poster { z-index: 0; }
.rd-scrub__video { z-index: 1; opacity: 0; transition: opacity .5s ease; }
.rd-scrub--has-video .rd-scrub__video { opacity: 1; }
.rd-scrub--video-failed .rd-scrub__video { display: none; }
.rd-scrub__motion { display: none; }

/* Desktop transformation inherits the opening robot's measured position.
   Keep the atmosphere visible and reveal the uncropped portrait clip in place. */
.rd-scrub--anchored .rd-scrub__poster { display: none; }
.rd-scrub--anchored .rd-scrub__opening { opacity: 1; }
.rd-scrub--anchored .rd-scrub__opening-robot { opacity: var(--opening); transition: opacity .24s ease; }
.rd-scrub--anchored.rd-scrub--transforming .rd-scrub__opening-robot { animation-play-state: paused; }
.rd-scrub--anchored .rd-scrub__motion {
  display: block;
  position: absolute;
  z-index: 1;
  left: var(--motion-left);
  top: var(--motion-top);
  width: var(--motion-width);
  height: var(--motion-height);
  opacity: calc(1 - var(--opening));
  transition: opacity .24s ease;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.rd-scrub--anchored .rd-scrub__motion .rd-scrub__video {
  object-fit: contain;
  mask-image: linear-gradient(180deg, transparent calc(var(--motion-mask-top, 3%) - 12%), #000 var(--motion-mask-top, 3%), #000 var(--motion-mask-bottom, 82%), transparent 98%);
}
.rd-scrub--anchored .rd-scrub__band--intro.on {
  opacity: var(--intro-opacity, 1);
  transition: transform .6s ease;
}
.rd-scrub--anchored .rd-scrub__band--final {
  max-width: min(48vw, 700px);
  translate: var(--hero-window-copy-shift, 0px) 0;
}

.rd-scrub__opening {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--opening);
  background: var(--black);
  will-change: opacity;
}
.rd-scrub__opening::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(14, 14, 14, .96) 0%, rgba(14, 14, 14, .74) 38%, rgba(14, 14, 14, .16) 72%),
    linear-gradient(0deg, rgba(14, 14, 14, .86) 0%, transparent 44%);
}
.rd-scrub__opening-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("hero-atmosphere-v2.webp") center bottom / cover no-repeat;
  filter: saturate(.45) brightness(.78) contrast(1.05);
  opacity: .62;
}
.rd-scrub__opening-light {
  position: absolute;
  z-index: 0;
  left: var(--hero-light-left, 55%);
  top: var(--hero-light-top, 10%);
  width: var(--hero-light-width, 40%);
  height: var(--hero-light-height, 80%);
  pointer-events: none;
  opacity: var(--opening);
  transition: opacity .24s ease;
}
.rd-scrub__opening-light::before {
  position: absolute;
  inset: -8% -18%;
  content: "";
  background: radial-gradient(ellipse at 50% 30%, rgba(149, 180, 201, .24), rgba(70, 99, 122, .14) 34%, transparent 67%);
  transform-origin: 50% 30%;
  animation: hero-presence 12s cubic-bezier(.22, .5, .3, 1) .35s both;
}
.rd-scrub--transforming .rd-scrub__opening-light::before { animation-play-state: paused; }
.rd-scrub--static .rd-scrub__opening-light { display: none; }
.rd-scrub__opening-robot.hero-backdrop {
  z-index: 1;
  top: 112px;
  right: clamp(24px, 6vw, 120px);
  /* Narrow desktop keeps the original safe text-to-robot clearance. */
  height: min(calc((100svh - 112px) / var(--hero-zoom-scale)), 54vw);
}

.rd-scrub__scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 14, 14, .78) 0%, rgba(14, 14, 14, .25) 58%, transparent 78%),
    linear-gradient(180deg, rgba(0, 0, 0, calc(var(--scrub-scrim) * .7)) 0%, transparent 30%, transparent 55%, rgba(0, 0, 0, var(--scrub-scrim)) 100%);
}

.rd-scrub__copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: var(--scrub-justify);
  padding: 112px var(--scrub-pad) 128px;
  text-align: var(--scrub-align);
}
.rd-scrub__band {
  grid-area: 1 / 1;
  width: 100%;
  max-width: min(100%, 68rem);
  pointer-events: none;
  opacity: 0;
  word-break: keep-all;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.rd-scrub__band.on { pointer-events: auto; opacity: 1; transform: none; }
.rd-scrub__band--intro { max-width: none; }
/* Keep copy in its own column, with room for the product and bottom information. */
.rd-scrub__hero-content { width: min(50vw, 820px); max-width: 100%; }
.rd-scrub__kicker { display: block; margin-bottom: 14px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.rd-scrub__band h1,
.rd-scrub__band h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--scrub-ink);
  font: 900 var(--scrub-title)/1.12 var(--scrub-font);
  letter-spacing: -.055em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.rd-scrub__band h1 span,
.rd-scrub__band h1 strong { display: block; }
.rd-scrub__band h1 { max-width: 100%; font-size: var(--scrub-hero-title); line-height: 1.1; }
/* A quieter introduction leaves the two-line product promise visually dominant. */
.rd-scrub__band h1 .hero-title-lead { color: rgba(245, 245, 245, .82); font: 700 clamp(20px, 1.8vw, 28px)/1.4 var(--body); letter-spacing: -.035em; }
.rd-scrub__band h1 .hero-title-main { margin-top: 16px; font-weight: 900; }
.rd-scrub__band p { max-width: 30em; margin: 20px 0 0; color: var(--scrub-dim); font-size: clamp(18px, 1.6vw, 20px); line-height: 1.75; }
.rd-scrub__band .eyebrow { margin: 0 0 22px; font-size: 12px; line-height: 1.3; }
.rd-scrub__band .hero-copy { margin-top: 24px; }
.rd-scrub__band .hero-actions { flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.rd-scrub__band--final { align-self: end; padding-bottom: clamp(22px, 3vh, 38px); }
.rd-scrub__btn {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 26px;
  padding: 0 24px;
  color: var(--scrub-accent-ink);
  border: 1px solid var(--scrub-accent);
  background: var(--scrub-accent);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
.rd-scrub__btn i { font-size: 19px; font-style: normal; }
.rd-scrub__btn:hover,
.rd-scrub__btn:focus-visible { color: var(--white); border-color: var(--white); background: transparent; outline: 0; }

.rd-scrub__spec-strip {
  position: absolute;
  z-index: 3;
  right: var(--scrub-pad);
  left: var(--scrub-pad);
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 245, 245, .18);
  pointer-events: none;
  opacity: var(--details);
  transition: opacity .25s ease;
}
.rd-scrub__spec-strip > div { min-width: 0; padding-left: 16px; border-left: 1px solid rgba(245, 245, 245, .32); }
.rd-scrub__spec-strip dt { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.rd-scrub__spec-strip dd { margin: 4px 0 0; color: rgba(245, 245, 245, .72); font-size: 16px; line-height: 1.5; }

.rd-scrub__cue { position: absolute; z-index: 3; top: 50%; right: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--scrub-dim); font-size: 9px; letter-spacing: .2em; opacity: var(--cue, 1); transform: translateY(-50%); transition: opacity .4s; }
.rd-scrub__cue span { writing-mode: vertical-rl; }
.rd-scrub__cue i { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: rd-scrub-cue 1.6s ease-in-out infinite; }
@keyframes rd-scrub-cue { 0%, 100% { opacity: .4; transform: scaleY(.3); } 50% { opacity: 1; transform: scaleY(1); } }
.rd-scrub__progress { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(245, 245, 245, .15); }
.rd-scrub__progress i { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; }
.rd-scrub--static .rd-scrub__cue,
.rd-scrub--static .rd-scrub__progress { display: none; }

.rd-scrub--static .rd-scrub__copy,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__copy { display: flex; flex-direction: column; gap: max(15vh, 132px); justify-content: end; }
.rd-scrub--static .rd-scrub__band--intro,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__band--intro { display: flex; min-height: calc(100svh - 244px); align-items: center; }
.rd-scrub--static .rd-scrub__band,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__band { pointer-events: auto; opacity: 1; transform: none; }
.rd-scrub--static .rd-scrub__stage,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__stage { height: auto; min-height: 100svh; }
.rd-scrub--static .rd-scrub__copy,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__copy { position: relative; padding-top: 112px; }
.rd-scrub > .rd-scrub__band { max-width: 100%; padding: 0 var(--scrub-pad); pointer-events: auto; opacity: 1; transform: none; }
.rd-scrub > .rd-scrub__band:first-child { padding-top: 30vh; }
.rd-scrub > .rd-scrub__band:last-child { padding-bottom: 12vh; }

/* Desktop only: keep the actions and product information in separate rows. */
@media (min-width: 881px) {
  .rd-scrub--live {
    /* Preserve the final-scene scale; budget the opening title for two lines. */
    --scrub-hero-title: min(clamp(54px, 6.35vw, 94px), clamp(54px, calc((100svh - 468px) / 2.2), 94px));
    --scrub-title: min(clamp(44px, 6.1vw, 94px), clamp(44px, calc((100svh - 484px) / 3.36), 94px));
  }
  .rd-scrub--live .rd-scrub__stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 32px;
    min-height: 620px;
    padding: 112px var(--scrub-pad) 26px;
  }
  .rd-scrub--live .rd-scrub__copy {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-height: 0;
    padding: 0;
  }
  .rd-scrub--live .rd-scrub__spec-strip {
    position: relative;
    inset: auto;
    grid-area: 2 / 1;
  }
}

/* Full-width desktop: make the robot monumental without squeezing side-panel layouts. */
@media (min-width: 1240px) {
  .rd-scrub__opening-robot.hero-backdrop {
    top: 88px;
    /* Also cap by the shared stage width, so tall 1080p/QHD windows cannot invade the title. */
    height: min(calc(100svh - 90px), 56vw, 820px);
  }
}

/* Keep copy and robot in one centered 1440px stage on wide and ultra-wide screens. */
@media (min-width: 1500px) {
  .rd-scrub__hero-content { margin-left: calc((100vw - 1440px) / 2); }
  .rd-scrub--anchored .rd-scrub__band--final { margin-left: calc((100vw - 1440px) / 2); }
  .rd-scrub__opening-robot.hero-backdrop { right: calc((100vw - 1440px) / 2 + 60px); }
}

/* Short desktop windows need a wider title and a closer robot, not empty center space. */
@media (min-width: 881px) and (max-height: 740px) {
  .rd-scrub--live .rd-scrub__band .eyebrow { margin-bottom: 16px; }
  .rd-scrub--live .rd-scrub__band .hero-copy { margin-top: 18px; }
  .rd-scrub--live .rd-scrub__band .hero-actions { margin-top: 20px; }
}

/* Desktop: measure rendered text/buttons on resize, including the final zoom.
   Keep typography and the centered wide-screen stage intact while reserving a 32px gap. */
.rd-scrub--window-fit .rd-scrub__hero-content {
  translate: var(--hero-window-copy-shift, 0px) 0;
}
.rd-scrub--window-fit .rd-scrub__opening-robot.hero-backdrop {
  left: var(--hero-window-robot-left);
  right: auto;
}

@media (max-width: 880px) {
  :root { --scrub-title: clamp(34px, 9.6vw, 58px); --scrub-hero-title: clamp(32px, 10.4vw, 58px); }
  .rd-scrub__band h1 .hero-title-lead { font-size: 18px; }
  .rd-scrub__band h1 .hero-title-main { margin-top: 12px; }
  .rd-scrub__stage { min-height: 760px; }
  .rd-scrub__band { max-width: 100%; }
  .rd-scrub__copy { align-items: end; padding: 112px 20px 132px; }
  .rd-scrub__hero-content { width: min(100%, 34rem); }
  .rd-scrub__band--intro { align-self: end; }
  .rd-scrub__band--intro { translate: none; }
  .rd-scrub__band--final { padding-bottom: 0; }
  .rd-scrub__band .eyebrow { margin-bottom: 14px; font-size: 10px; }
  .rd-scrub__band .hero-copy { max-width: 22em; margin-top: 18px; font-size: 18px; line-height: 1.75; }
  .hero-copy-break { display: none; }
  .rd-scrub__band .hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 24px; }
  .rd-scrub__band .hero-actions .button { min-height: 56px; font-size: 17px; }
  .rd-scrub__band .text-link { font-size: 17px; }
  .rd-scrub__opening::after { background: linear-gradient(0deg, rgba(14, 14, 14, .98) 0%, rgba(14, 14, 14, .72) 54%, rgba(14, 14, 14, .12) 82%); }
  .rd-scrub__opening-robot.hero-backdrop { --hero-zoom-scale: 1.06; top: 96px; right: auto; left: 70%; height: calc(100svh - 112px); translate: -50% 0; }
  .rd-scrub__opening-atmosphere { background-position: 68% bottom; opacity: .52; }
  .rd-scrub__scrim { background: linear-gradient(180deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, .08) 42%, rgba(14, 14, 14, .82) 100%); }
  .rd-scrub__spec-strip { right: 20px; bottom: 20px; left: 20px; padding-top: 14px; }
  .rd-scrub__spec-strip > div { min-width: 0; padding-left: 8px; }
  .rd-scrub__spec-strip dt { font-size: 9px; }
  .rd-scrub__spec-strip dd { font-size: 12px; line-height: 1.5; }
  .rd-scrub__cue { display: none; }
}

/* Short phones keep the two-line title and both actions inside the first screen. */
@media (max-width: 880px) and (max-height: 740px) {
  .rd-scrub__stage { min-height: 100svh; }
  .rd-scrub__copy { padding: 84px 20px 112px; }
  .rd-scrub__band .eyebrow { margin-bottom: 10px; }
  .rd-scrub__band h1 .hero-title-lead { font-size: 16px; }
  .rd-scrub__band h1 .hero-title-main { margin-top: 10px; }
  .rd-scrub__band .hero-copy { margin-top: 14px; font-size: 16px; line-height: 1.6; }
  .rd-scrub__band .hero-actions { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-backdrop { transform: none !important; }
  .hero-activation { opacity: 0 !important; filter: none !important; }
  .rd-scrub__cue i { animation: none; }
}