/**
 * iPhone Duo layout breakpoints — Prestige Kids
 * Folded: 466×678 (portrait) / 678×466 (landscape)
 * Unfolded: 890×626 (landscape) / 626×890 (portrait)
 *
 * Visual sizing only — do NOT override section height / sticky / overflow
 * (those control GSAP ScrollTrigger pin / “scroll stop” like production).
 */

/* Vitamin playground: hide native play bar (inline pointer-events:auto invites it) */
#vitamin-playground .video-animation.svelte-ob7x5y {
  pointer-events: none !important;
}
#vitamin-playground .video-animation.svelte-ob7x5y::-webkit-media-controls,
#vitamin-playground .video-animation.svelte-ob7x5y::-webkit-media-controls-enclosure,
#vitamin-playground .video-animation.svelte-ob7x5y::-webkit-media-controls-panel,
#vitamin-playground .video-animation.svelte-ob7x5y::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Folded portrait ~466×678                                                   */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) and (min-height: 640px) and (max-height: 720px) and (orientation: portrait) {
  .desc-component.svelte-oezw7v {
    max-width: 92%;
  }

  .desc-component.svelte-oezw7v .img1-div:where(.svelte-oezw7v),
  .desc-component.svelte-oezw7v .img3-div:where(.svelte-oezw7v) {
    max-width: 18rem;
  }

  .desc-component.svelte-oezw7v .img2-div:where(.svelte-oezw7v) {
    max-width: 22rem;
  }

  .tin-container.svelte-dmtfnp > div:where(.svelte-dmtfnp) {
    max-width: 88%;
  }

  .immugen-icon.svelte-dmtfnp {
    width: 4.5rem;
  }

  .kids.svelte-1m5i49v {
    display: block;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .ball1-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball2-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball3-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball4-warpper.svelte-vl7317 > div:where(.svelte-vl7317) {
    max-width: 11rem;
  }

  .brain-container.svelte-1vy4jj {
    max-width: 92%;
  }

  .kib-table.svelte-wqlpii {
    max-width: 22rem;
  }

  .kid.svelte-15zouq0 {
    max-width: 90%;
  }

  nav[aria-label="Page navigation"] a[aria-label="CTA Button"] img {
    width: 4.5rem;
    height: 4.5rem;
  }

  #school .school-divider-sky {
    top: calc(var(--spacing) * -13);
  }

  .spacer.star-bottom.svelte-vl7317 {
    height: calc(var(--spacing) * 60);
  }

  #brain .brain-divider-gold {
    top: calc(var(--spacing) * -26);
  }

  /* Folded portrait ~466×678 vitamin-playground framing */
  #vitamin-playground .section1.svelte-ob7x5y {
    height: 88vh;
    margin-top: 2vh;
  }

  #vitamin-playground .section2.svelte-ob7x5y {
    height: 126vh;
  }
}

/* -------------------------------------------------------------------------- */
/* Folded landscape ~678×466                                                  */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 640px) and (max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  /* website-desc: pull section up; tighten divider + component offset */
  #website-desc > .relative.w-full.h-full.overflow-hidden {
    margin-top: -10rem;
  }

  #website-desc .desc-divider.svelte-oezw7v {
    top: calc(var(--spacing) * -2);
  }

  .desc-component.svelte-oezw7v {
    max-width: 70%;
    margin-top: calc(var(--spacing) * 14);
  }

  .desc-component.svelte-oezw7v .img1-div:where(.svelte-oezw7v),
  .desc-component.svelte-oezw7v .img3-div:where(.svelte-oezw7v) {
    max-width: 16rem;
  }

  .desc-component.svelte-oezw7v .img2-div:where(.svelte-oezw7v) {
    max-width: 20rem;
  }

  /* Immugen sticky scroll length */
  #immugen.immugen-scroll-section.svelte-h7bcrl {
    height: 312vh;
  }

  /*
   * Spacer after #immugen drives stage progress 0.3→1.
   * Default h-[250vh] is too short with H=312vh + mobile stage2 @0.5,
   * so ringBallVideo never unlocks before free scroll (~need ≥297vh).
   */
  #immugen.immugen-scroll-section.svelte-h7bcrl + div {
    height: 350vh;
  }

  /* Immugen title inset + vertical positions */
  #immugen .absolute.left-0.right-0.z-20.svelte-dmtfnp {
    left: calc(var(--spacing) * 15);
    right: calc(var(--spacing) * 15);
    top: 8%;
  }

  .tin-container.svelte-dmtfnp {
    top: 30.5%;
  }

  /*
   * Enlarge from center while moving down.
   * Rest 30.5% → enlarged 42% (58% from 890 is too low on 466px height).
   */
  @keyframes duo-tin-scale-in-678 {
    0% {
      top: 30.5%;
      transform: translate(-50%, -50%) scale(1);
    }
    to {
      top: 42%;
      transform: translate(-50%, -50%) scale(1.6);
    }
  }

  @keyframes duo-tin-scale-out-678 {
    0% {
      top: 42%;
      transform: translate(-50%, -50%) scale(1.6);
    }
    to {
      top: 30.5%;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .tin-container.svelte-dmtfnp.animate-tin-down,
  .tin-container.svelte-dmtfnp.animate-tin-up {
    transform-origin: center center;
  }

  .tin-container.svelte-dmtfnp.animate-tin-down {
    animation: duo-tin-scale-in-678 0.6s ease-out forwards;
  }

  .tin-container.svelte-dmtfnp.animate-tin-up {
    animation: duo-tin-scale-out-678 0.6s ease-out forwards;
  }

  .tin-container.svelte-dmtfnp > div:where(.svelte-dmtfnp) {
    max-width: 100%;
  }

  .features-container.svelte-dmtfnp {
    top: 16%;
  }

  .immugen-img-container.svelte-dmtfnp {
    max-width: 100%;
    /* Nudge ring up vs tin on short 466px landscape */
    top: 12%;
    overflow: visible;
  }

  .immugen-icon.svelte-dmtfnp {
    width: 3.75rem;
  }

  /*
   * Ring video uses CSS scale + UA overflow:clip — clipped glow looks “missing”.
   * Match 890: full-width parent, overflow visible, explicit scale.
   * Cap scale on 466px height so the ring stays in-frame.
   */
  .ringBallVideo.svelte-dmtfnp {
    max-width: none;
    width: 100%;
    overflow: visible;
    scale: 1.15;
  }

  #immugen .max-w-6xl:has(.ringBallVideo) {
    max-width: 100%;
    width: 100%;
  }

  #immugen [style*="will-change: opacity, transform"]:has(.ringBallVideo) {
    max-width: 100%;
    overflow: visible;
  }

  .kids.svelte-1m5i49v {
    display: block;
    max-width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .ball1-warpper.svelte-vl7317,
  .ball2-warpper.svelte-vl7317,
  .ball3-warpper.svelte-vl7317,
  .ball4-warpper.svelte-vl7317 {
    top: 76vh;
  }

  .ball1-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball2-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball3-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball4-warpper.svelte-vl7317 > div:where(.svelte-vl7317) {
    max-width: 9rem;
  }

  .spacer.star-bottom.svelte-vl7317 {
    height: calc(var(--spacing) * 90);
  }

  /* Brain: push title/video below gold divider */
  #brain .brain-divider-gold {
    top: calc(var(--spacing) * -90);
    height: calc(var(--spacing) * 150);
  }

  #brain .brain-component:not(.library-text) .text-container.svelte-18d0jjj {
    margin-top: 5rem;
  }

  #brain .library-text .text-container.svelte-18d0jjj {
    margin-top: 2rem;
  }

  .brain-container.svelte-1vy4jj {
    max-width: 48%;
    margin-top: 8rem;
  }

  /*
   * Brain pin length on short landscape Duo:
   * - Library fades at scrollProgress > 0.2 (spacer still approaching).
   * - Keep ~one more viewport of pin after that, then sticky parent ends
   *   so scrolling is free again. (Default prod spacer is 150vh.)
   */
  #brain.brain-scroll-section + div {
    height: 120vh !important;
  }

  #brain.brain-scroll-section ~ section.relative.h-\[50vh\] {
    height: 0;
    min-height: 0;
    overflow: hidden;
  }

  .brain-content {
    font-size: 0.875rem !important;
    line-height: 1.35;
  }

  .kib-table.svelte-wqlpii {
    max-width: 34rem;
    width: 100%;
  }

  /*
   * DHA Product (.dhaBall) is width:150vw in prod CSS → ~529px tall on Duo,
   * taller than the 466px viewport. Fade-in uses threshold:0.4 + rootMargin:-20%,
   * so is-visible never fires and the image stays opacity:0. Force visible +
   * shrink so the trio graphic fits in-frame.
   */
  #dha .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }

  #dha .relative.z-10.flex.flex-col {
    margin-top: 4rem;
  }

  #dha .dhaBall.svelte-1d429ty {
    width: 90%;
    max-width: 28rem;
    margin-top: 0;
  }

  #dha .dha-remark.svelte-1d429ty {
    margin-bottom: 4rem;
  }

  nav[aria-label="Page navigation"] a[aria-label="CTA Button"] img {
    width: 4rem;
    height: 4rem;
  }

  nav[aria-label="Page navigation"] ul {
    gap: 0.5rem;
  }

  nav[aria-label="Page navigation"] ul button {
    width: 1rem;
    height: 1rem;
  }

  nav[aria-label="Page navigation"] ul button > span.border-2 {
    width: 0.75rem;
    height: 0.75rem;
  }

  nav[aria-label="Page navigation"] ul button > span.rounded-full:not(.border-2) {
    width: 0.5rem;
    height: 0.5rem;
  }

  /* Folded landscape ~678×466 vitamin-playground framing */
  #vitamin-playground .section1.svelte-ob7x5y {
    margin-top: -54vh;
    height: 152vh;
  }

  #vitamin-playground .section2.svelte-ob7x5y {
    height: 248vh;
  }

  /* Patent video + flavor section (after #patent) */
  #patent .video-zoom-mobile.svelte-hx6cvt {
    scale: 1.5;
  }

  #patent + section.relative {
    top: calc(var(--spacing) * -14);
  }

  #patent + section .spacer {
    height: calc(var(--spacing) * 114);
  }

  #recipe .bottom-\[17rem\] {
    bottom: 30rem;
  }

  /*
   * Product-info buttons: inner row is flex-col below md (no items-center)
   * and buttons use sm:mx-0, so they sit left on Duo. Re-center.
   */
  #product-info .flex.flex-col.md\:flex-row {
    align-items: center;
  }

  #product-info .flex.flex-col.md\:flex-row > button,
  #product-info .flex.flex-col.md\:flex-row > a {
    margin-left: auto;
    margin-right: auto;
  }

  #track {
    height: 192vh;
  }

  #track .track-component.svelte-lfi3za {
    margin-top: calc(var(--spacing) * 31);
  }

  #track .track-divider-sky {
    height: calc(var(--spacing) * 95);
  }

  #track .hand-swing-warrap.svelte-lfi3za {
    left: calc(var(--spacing) * -42);
    bottom: calc(var(--spacing) * -4);
  }

  #track .hand-swing.svelte-lfi3za {
    width: 72%;
  }

  #track .absolute.z-10.w-full.hidden.sm\:block {
    height: calc(var(--spacing) * 18);
    bottom: calc(var(--spacing) * 9);
  }
}

/* -------------------------------------------------------------------------- */
/* Unfolded landscape ~890×626                                                */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 840px) and (max-width: 920px) and (min-height: 580px) and (max-height: 680px) {
  /* website-desc: Duo landscape framing (from UAT inline tweaks) */
  #website-desc > .relative.w-full.h-full.overflow-hidden {
    margin-top: -13rem;
  }

  #website-desc .desc-divider.svelte-oezw7v {
    top: calc(var(--spacing) * -6);
  }

  #website-desc .desc-component.svelte-oezw7v {
    max-width: 78%;
    margin-top: calc(var(--spacing) * 58);
  }

  #website-desc .desc-component.svelte-oezw7v > .spacer:first-child {
    height: calc(var(--spacing) * 10);
  }

  #website-desc .desc-component.svelte-oezw7v > .spacer:last-child {
    height: calc(var(--spacing) * 57);
  }

  .desc-component.svelte-oezw7v .img1-div:where(.svelte-oezw7v),
  .desc-component.svelte-oezw7v .img3-div:where(.svelte-oezw7v) {
    max-width: 20rem;
  }

  .desc-component.svelte-oezw7v .img2-div:where(.svelte-oezw7v) {
    max-width: 26rem;
  }

  .tin-container.svelte-dmtfnp {
    top: 41%;
  }

  /*
   * Enlarge from center while moving down (41% → 58%).
   * Keep translate(-50%,-50%) so scale doesn't grow from the bottom.
   */
  @keyframes duo-tin-scale-in {
    0% {
      top: 41%;
      transform: translate(-50%, -50%) scale(1);
    }
    to {
      top: 58%;
      transform: translate(-50%, -50%) scale(1.6);
    }
  }

  @keyframes duo-tin-scale-out {
    0% {
      top: 58%;
      transform: translate(-50%, -50%) scale(1.6);
    }
    to {
      top: 41%;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .tin-container.svelte-dmtfnp.animate-tin-down,
  .tin-container.svelte-dmtfnp.animate-tin-up {
    transform-origin: center center;
  }

  .tin-container.svelte-dmtfnp.animate-tin-down {
    animation: duo-tin-scale-in 0.6s ease-out forwards;
  }

  .tin-container.svelte-dmtfnp.animate-tin-up {
    animation: duo-tin-scale-out 0.6s ease-out forwards;
  }

  .features-container.svelte-dmtfnp {
    top: 20%;
  }

  .tin-container.svelte-dmtfnp > div:where(.svelte-dmtfnp) {
    max-width: 58%;
  }

  .immugen-img-container.svelte-dmtfnp {
    max-width: 68%;
    top: 12%;
  }

  #immugen .mx-auto.px-4.max-w-6xl.svelte-dmtfnp {
    max-width: 100%;
  }

  .immugen-icon.svelte-dmtfnp {
    width: 5rem;
  }

  .ringBallVideo.svelte-dmtfnp {
    max-width: none;
    width: 100%;
    overflow: visible;
    scale: 0.9;
  }

  #immugen .max-w-6xl:has(.ringBallVideo) {
    max-width: 100%;
    width: 100%;
  }

  #immugen [style*="will-change: opacity, transform"]:has(.ringBallVideo) {
    max-width: 100%;
    overflow: visible;
  }

  .kids.svelte-1m5i49v {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .ball1-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball2-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball3-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball4-warpper.svelte-vl7317 > div:where(.svelte-vl7317) {
    max-width: 12rem;
  }

  /* Star Unique balls — Duo landscape vertical stacking */
  .ball2-warpper.svelte-vl7317 {
    top: 55vh;
  }

  .ball3-warpper.svelte-vl7317 {
    top: 62vh;
  }

  .ball4-warpper.svelte-vl7317 {
    top: 70vh;
  }

  .spacer.star-bottom.svelte-vl7317 {
    height: calc(var(--spacing) * 61);
  }

  .brain-container.svelte-1vy4jj {
    max-width: 55%;
  }

  .kib-table.svelte-wqlpii {
    max-width: 48rem;
    width: 85%;
  }

  nav[aria-label="Page navigation"] a[aria-label="CTA Button"] img {
    width: 5rem;
    height: 5rem;
  }

  #patent .video-zoom-mobile.svelte-hx6cvt {
    scale: 1.5;
  }

  #hero video.w-full.hidden.sm\:block {
    margin-top: -2vw;
  }

  /* Product-info buttons: force desktop row layout */
  #product-info .flex.flex-col.md\:flex-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  #product-info .flex.flex-col.md\:flex-row > button,
  #product-info .flex.flex-col.md\:flex-row > a {
    flex: none;
    width: 250px;
    min-width: 200px;
    margin-left: 0;
    margin-right: 0;
  }

  #product-info .flex.flex-col.md\:flex-row > button img,
  #product-info .flex.flex-col.md\:flex-row > a img {
    width: 100%;
    height: auto;
    display: block;
  }

  #track p.svelte-lfi3za {
    font-size: 1.1rem;
  }

  #track img[alt="全然安心 全港唯一 TrackEasy 奶源追溯系統"] {
    max-height: 8.1rem;
  }

  #track .track-component.svelte-lfi3za {
    margin-top: calc(var(--spacing) * 40);
  }

  #track .track-divider-sky {
    height: calc(var(--spacing) * 184);
    top: calc(var(--spacing) * -62);
  }

  #track .hand-swing-warrap.svelte-lfi3za {
    width: 59%;
  }

  .grow-divider-gold {
    top: calc(var(--spacing) * -68);
  }

  #brain .brain-divider-gold {
    top: calc(var(--spacing) * -87);
    height: calc(var(--spacing) * 150);
  }

  #brain .brain-component:not(.library-text) .text-container.svelte-18d0jjj {
    margin-top: calc(var(--spacing) * 22);
  }

  .elements-component.svelte-1dxe1fe {
    margin-top: calc(var(--spacing) * 40);
  }

  .elements-component.svelte-1dxe1fe > .spacer.svelte-1dxe1fe {
    height: 33rem;
  }

  #recipe .absolute.z-10.bg-cover.bg-top {
    top: calc(var(--spacing) * -75);
  }

  #school .school-divider-sky {
    top: calc(var(--spacing) * -32);
  }

  #school .school-component.svelte-1m5i49v {
    margin-top: calc(var(--spacing) * 24);
  }

  #school .relative.w-full.h-full.overflow-hidden.md\:mt-30 {
    margin-top: calc(var(--spacing) * 11);
  }

  /* Unfolded landscape ~890×624 vitamin-playground framing */
  #vitamin-playground .section1.svelte-ob7x5y {
    height: 95vh;
  }

  #vitamin-playground .section2.svelte-ob7x5y {
    height: 212vh;
  }

  #vitamin-playground .video-overlay.svelte-ob7x5y {
    top: 52rem;
    bottom: 0;
    height: auto;
    align-items: center;
  }

  #vitamin-playground .video-animation.svelte-ob7x5y {
    scale: 1;
    height: 1800px;
  }
}

/* -------------------------------------------------------------------------- */
/* Unfolded portrait ~626×890                                                 */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 600px) and (max-width: 680px) and (min-height: 840px) and (orientation: portrait) {
  #hero {
    margin-top: -16vh;
  }

  /* website-desc: Duo portrait framing (from UAT inline tweaks) */
  #website-desc {
    height: 86vh;
  }

  #website-desc > .relative.w-full.h-full.overflow-hidden {
    margin-top: -22rem;
  }

  #website-desc .desc-divider.svelte-oezw7v {
    top: calc(var(--spacing) * 3);
  }

  #website-desc .desc-component.svelte-oezw7v {
    max-width: 88%;
    margin-top: calc(var(--spacing) * 8);
  }

  #website-desc .desc-component.svelte-oezw7v > .spacer:first-child,
  #website-desc .desc-component.svelte-oezw7v > .spacer:last-child {
    height: 0;
  }

  .desc-component.svelte-oezw7v .img1-div:where(.svelte-oezw7v),
  .desc-component.svelte-oezw7v .img3-div:where(.svelte-oezw7v) {
    max-width: 20rem;
  }

  .desc-component.svelte-oezw7v .img2-div:where(.svelte-oezw7v) {
    max-width: 26rem;
  }

  /* Immugen: Duo portrait framing (from UAT inline tweaks) */
  #immugen.immugen-scroll-section.svelte-h7bcrl {
    height: 110vh;
    margin-top: -20vh;
  }

  #immugen .immugen-divider-gold {
    top: calc(var(--spacing) * -25);
  }

  .tin-container.svelte-dmtfnp > div:where(.svelte-dmtfnp) {
    max-width: 78%;
  }

  .immugen-img-container.svelte-dmtfnp {
    max-width: 82%;
  }

  .immugen-icon.svelte-dmtfnp {
    width: 5rem;
  }

  .kids.svelte-1m5i49v {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .ball1-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball2-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball3-warpper.svelte-vl7317 > div:where(.svelte-vl7317),
  .ball4-warpper.svelte-vl7317 > div:where(.svelte-vl7317) {
    max-width: 12rem;
  }

  /* Star Unique: Duo portrait framing (from UAT inline tweaks) */
  #star-unique .star.svelte-vl7317 video.h-full.mx-auto {
    height: 1124px;
    max-height: none;
  }

  #star-unique .spacer.star-bottom.svelte-vl7317 {
    height: calc(var(--spacing) * 94);
  }

  .brain-container.svelte-1vy4jj {
    max-width: 85%;
  }

  .kib-table.svelte-wqlpii {
    max-width: none;
    width: 56rem;
  }

  .kid.svelte-15zouq0 {
    max-width: 85%;
  }

  nav[aria-label="Page navigation"] a[aria-label="CTA Button"] img {
    width: 5rem;
    height: 5rem;
  }

  /*
   * #vitamin-playground: below sm (640) keeps scale-150 which crops the ring.
   * Framing: section1 58vh + margin-top 7vh; overlay top 38rem; video scale 1.
   * Play/stage trigger band is widened in VitaminPlayground JS (not here).
   */
  #vitamin-playground .section1.svelte-ob7x5y {
    height: 58vh;
    margin-top: 7vh;
  }

  #vitamin-playground .video-overlay.svelte-ob7x5y {
    top: 38rem;
    bottom: 0;
    height: auto;
    align-items: center;
  }

  #vitamin-playground .video-animation.svelte-ob7x5y {
    scale: 1;
    height: 1800px;
  }
}