/* PRODUCT MODES
   One Taekwon V typography/layout system for both modes.
   Only image composition and lighting differ between robot and vessel. */
.mode-stage {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  height: clamp(720px, 78vh, 840px);
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 245, .06);
  background: radial-gradient(ellipse at 68% 24%, rgba(151, 177, 202, .17), transparent 48%), var(--black);
}
.mode-stage:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.mode-stage::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; content: ""; opacity: .25; background: url("hero-atmosphere-v2.webp") center bottom / cover no-repeat; filter: saturate(.35) brightness(.7); }
.mode-stage::after { position: absolute; z-index: 2; inset: 0; pointer-events: none; content: ""; background: linear-gradient(90deg, rgba(14, 14, 14, .96) 0%, rgba(14, 14, 14, .78) 32%, rgba(14, 14, 14, .04) 68%, transparent), linear-gradient(0deg, rgba(14, 14, 14, .38), transparent 28%); }
.mode-number { position: absolute; z-index: 3; top: 24px; left: clamp(28px, 4vw, 64px); color: rgba(245, 245, 245, .35); font: 800 14px/1 var(--display); letter-spacing: .12em; }
.mode-caption { position: absolute; z-index: 3; top: 48px; left: clamp(28px, 4vw, 64px); width: min(430px, 38%); }
.mode-caption > p:first-child { margin: 0 0 18px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.mode-caption h3 { margin: 0; font: 900 clamp(44px, 5.2vw, 64px)/1.12 var(--display); letter-spacing: -.055em; white-space: pre-line; }
.mode-caption > p:not(:first-child) { max-width: 28em; margin: 24px 0 0; color: rgba(245, 245, 245, .7); font-size: 18px; line-height: 1.75; white-space: pre-line; }

/* A self-contained visual keeps lighting anchored to the image on mobile. */
.mode-visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.mode-halo {
  --halo-x: 67%;
  --halo-y: 18%;
  --halo-core-x: clamp(190px, 24vw, 290px);
  --halo-core-y: clamp(180px, 25vh, 250px);
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse var(--halo-core-x) var(--halo-core-y) at var(--halo-x) var(--halo-y), rgba(211, 226, 239, .40) 0%, rgba(143, 179, 208, .20) 18%, rgba(102, 143, 179, .07) 50%, transparent 78%),
    radial-gradient(ellipse 40% 48% at var(--halo-x) var(--halo-y), rgba(90, 134, 171, .13), transparent 78%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 44%, transparent 72%);
  mask-image: linear-gradient(#000 0%, #000 44%, transparent 72%);
  filter: blur(14px);
  transition: opacity .24s ease;
}
.mode-ground { position: absolute; z-index: 1; right: 9%; bottom: 10px; width: 48%; height: 50px; pointer-events: none; background: radial-gradient(ellipse, rgba(0, 0, 0, .9), transparent 70%); filter: blur(9px); }
.mode-stage img { position: absolute; z-index: 1; top: 24px; right: 3%; width: 60%; height: calc(100% - 48px); object-fit: contain; object-position: center bottom; transition: opacity .24s linear; }
.mode-stage[data-current-mode="robot"] img { filter: brightness(1.06) contrast(1.04) drop-shadow(0 -2px 2px rgba(184, 217, 241, .22)) drop-shadow(0 24px 24px rgba(0, 0, 0, .6)); }
.mode-stage.is-switching img { opacity: .18; }

/* Vessel-only composition. Typography deliberately has no mode override. */
.mode-stage[data-current-mode="flight"] {
  --vessel-width: min(86cqw, 920px);
  --vessel-height: calc(var(--vessel-width) * 475 / 1011);
  --vessel-top: calc(29% + 60px);
  --vessel-right: 2%;
  background: radial-gradient(ellipse at 66% 53%, rgba(85, 110, 137, .12), transparent 60%), var(--black);
}
.mode-stage[data-current-mode="flight"]::before { opacity: .16; filter: saturate(.2) brightness(.48); }
.mode-stage[data-current-mode="flight"]::after { background: linear-gradient(0deg, rgba(14, 14, 14, .12), transparent 18%); }
.mode-stage[data-current-mode="flight"] img {
  top: var(--vessel-top);
  right: var(--vessel-right);
  width: var(--vessel-width);
  height: var(--vessel-height);
  object-position: center;
  filter: brightness(1.04) contrast(1.025) drop-shadow(0 -1px 1.4px rgba(184, 211, 233, .16)) drop-shadow(0 22px 16px rgba(0, 0, 0, .5));
}
.mode-stage[data-current-mode="flight"] .mode-halo {
  --halo-x: calc(100% - var(--vessel-right) - var(--vessel-width) / 2);
  --halo-y: calc(var(--vessel-top) + var(--vessel-height) * .28);
  --halo-core-x: calc(var(--vessel-width) * .48);
  --halo-core-y: calc(var(--vessel-height) * .45);
  background:
    radial-gradient(ellipse var(--halo-core-x) var(--halo-core-y) at var(--halo-x) var(--halo-y), rgba(211, 226, 239, .30) 0%, rgba(143, 179, 208, .16) 18%, rgba(102, 143, 179, .055) 55%, transparent 80%),
    radial-gradient(ellipse calc(var(--vessel-width) * .60) calc(var(--vessel-height) * .70) at var(--halo-x) var(--halo-y), rgba(90, 134, 171, .08), transparent 78%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
  filter: blur(18px);
}
.mode-stage[data-current-mode="flight"] .mode-ground {
  top: calc(var(--vessel-top) + var(--vessel-height) * .91);
  right: calc(var(--vessel-right) + var(--vessel-width) * .13);
  bottom: auto;
  width: calc(var(--vessel-width) * .74);
  height: clamp(26px, 4vw, 50px);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%);
  filter: blur(14px);
}

/* Narrow desktop windows use the same caption anchor as fullscreen. */
@media (min-width: 881px) and (max-width: 1239px) {
  .mode-stage[data-current-mode="robot"] img { width: 52%; }
  .mode-stage[data-current-mode="robot"] .mode-halo {
    --halo-x: 71%;
    --halo-y: calc(100% - 24px - min(calc(100% - 48px), 78cqw) * .84);
  }
  .mode-stage[data-current-mode="robot"] .mode-ground { right: 5%; }
}
@media (min-width: 601px) and (max-width: 880px) {
  .mode-stage { height: clamp(640px, calc(76vw + 32px), 672px); }
  .mode-caption h3 { font-size: clamp(32px, 4.8vw, 42px); }
  .mode-caption > p:not(:first-child) { font-size: 17px; }
  .mode-stage[data-current-mode="robot"] img { top: 28px; right: 2%; width: 52%; height: calc(100% - 56px); }
  .mode-stage[data-current-mode="robot"] .mode-halo {
    --halo-x: 72%;
    --halo-y: calc(100% - 28px - min(calc(100% - 56px), 78cqw) * .84);
    --halo-core-x: clamp(150px, 22vw, 200px);
    --halo-core-y: 180px;
  }
  .mode-stage[data-current-mode="flight"] {
    --vessel-width: 92cqw;
    --vessel-right: 4%;
    --vessel-top: calc(100% - var(--vessel-height) - clamp(32px, calc(840px - 100vw), 96px));
  }
}

/* The reading order is caption first, then the complete product image.
   The visual owns its own halo/ground; no JS height measurements are needed. */
@media (max-width: 600px) {
  .mode-stage {
    --mode-image-height: clamp(360px, 100vw, 500px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    height: auto;
    padding: 48px 20px 28px;
    background: var(--black);
  }
  .mode-stage::before { background-position: 60% bottom; }
  .mode-stage::after { background: linear-gradient(0deg, rgba(14, 14, 14, .65), transparent 55%); }
  .mode-number { top: 20px; left: 20px; }
  .mode-caption { position: relative; top: auto; left: auto; width: 100%; grid-row: 1; }
  .mode-caption h3 { font-size: clamp(32px, 8.8vw, 44px); }
  .mode-caption > p:first-child { font-size: 11px; }
  .mode-caption > p:not(:first-child) { margin-top: 20px; font-size: 17px; }
  .mode-visual { position: relative; inset: auto; width: 100%; height: var(--mode-image-height); grid-row: 2; container-type: inline-size; }
  .mode-stage img { top: 0; right: 0; width: 100%; height: 100%; }
  .mode-halo { --halo-x: 50%; --halo-y: 22%; --halo-core-x: clamp(140px, 28vw, 200px); --halo-core-y: clamp(140px, 35vw, 200px); filter: blur(12px); }
  .mode-ground { top: calc(100% - 24px); right: 10%; bottom: auto; width: 80%; height: 40px; }
  .mode-stage[data-current-mode="flight"] {
    --mode-image-height: calc(100cqw * 475 / 1011);
    --vessel-width: 100cqw;
    --vessel-top: 0px;
    --vessel-right: 0px;
    background: var(--black);
  }
  .mode-stage[data-current-mode="flight"] img { height: 100%; }
  .mode-stage[data-current-mode="flight"] .mode-halo { filter: blur(12px); }
  .mode-stage[data-current-mode="flight"] .mode-ground { top: 91%; right: 13%; width: 74%; height: 26px; opacity: .7; }
}