.desktop-motion-hero {
  display: none;
}

@media (min-width: 1440px) and (min-height: 780px) {
  .site-header {
    z-index: 30;
  }

  .hero {
    display: none;
  }

  .desktop-motion-hero {
    --motion-cream: #fff6e8;
    --motion-red: #d6332c;
    --motion-orange: #f5a623;
    --motion-brown: #3d1f19;
    --motion-ink: #22100d;
    display: block;
    position: relative;
    height: 100svh;
    min-height: 780px;
    padding: clamp(10px, 1.1vw, 22px);
    color: var(--motion-cream);
    background:
      radial-gradient(circle at 15% 10%, rgba(255, 196, 122, .18), transparent 27%),
      linear-gradient(145deg, #8e5038, #62301f);
  }

  .motion-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: clamp(18px, 2vw, 36px);
    background: linear-gradient(115deg, rgba(58, 26, 21, .97), rgba(29, 14, 13, .99));
    box-shadow: 0 24px 70px rgba(32, 10, 4, .32);
    isolation: isolate;
  }

  .motion-intro {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    background: #120d0c;
    pointer-events: none;
    transition: opacity .9s .2s cubic-bezier(.55, 0, .1, 1), visibility 1.1s;
  }

  .motion-intro-product {
    width: clamp(74px, 8vw, 128px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 5px solid var(--motion-cream);
    border-radius: 50%;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .45);
    animation: motionIntroPulse 1.1s ease-in-out infinite alternate;
  }

  .motion-intro-product img,
  .motion-orbit img,
  .motion-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .motion-intro p {
    margin: 0;
    color: rgba(255, 246, 232, .72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .motion-progress {
    width: clamp(120px, 15vw, 220px);
    height: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
  }

  .motion-progress::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--motion-red), var(--motion-orange));
    transform: translateX(-100%);
    animation: motionLoadLine 1.2s cubic-bezier(.7, 0, .2, 1) forwards;
  }

  .motion-scene {
    position: absolute;
    inset: 0;
    padding: 84px clamp(58px, 5vw, 92px) clamp(32px, 5vh, 62px);
    display: grid;
    grid-template-columns: minmax(390px, .8fr) minmax(650px, 1.2fr);
    align-items: center;
  }

  .motion-copy {
    position: relative;
    z-index: 8;
    max-width: 590px;
  }

  .motion-eyebrow {
    margin: 0 0 12px;
    color: var(--motion-orange);
    font-size: clamp(10px, .75vw, 13px);
    font-weight: 800;
    letter-spacing: .18em;
  }

  .motion-title {
    margin: 0;
    padding-top: 20px;
    overflow: visible;
    font-size: clamp(112px, 10.4vw, 188px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.085em;
  }

  .motion-title-line {
    display: block;
    width: max-content;
    padding: .13em .14em .08em .05em;
    margin: -.13em -.14em -.08em -.05em;
    clip-path: inset(-.26em 100% -.18em -.14em);
    transform: translateX(-48px) skewX(-8deg);
  }

  .motion-title-outline {
    margin-left: .48em;
    color: transparent;
    -webkit-text-stroke: 4px var(--motion-cream);
  }

  .motion-title {
    cursor: default;
    transition: color .25s ease;
  }

  .motion-title:hover .motion-title-line:not(.motion-title-outline) {
    color: var(--motion-orange);
    -webkit-text-stroke: 0;
  }

  .motion-title:hover .motion-title-outline {
    color: transparent;
    -webkit-text-stroke: 4px var(--motion-orange);
  }

  .motion-description {
    max-width: 480px;
    margin: clamp(24px, 3vh, 38px) 0 24px;
    color: rgba(255, 246, 232, .73);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
  }

  .motion-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    padding: 0 22px;
    color: var(--motion-ink);
    border-radius: 999px;
    background: var(--motion-orange);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: transform .25s ease, background .25s ease;
  }

  .motion-cta:hover {
    transform: translateY(-3px);
    background: #ffc04d;
  }

  .motion-world {
    position: absolute;
    z-index: 2;
    top: 7%;
    right: 1%;
    width: min(62vw, 990px);
    height: 89%;
    transform-style: preserve-3d;
  }

  .motion-sun {
    position: absolute;
    z-index: -2;
    top: 4%;
    right: 2%;
    width: min(54vw, 820px);
    aspect-ratio: 1.35;
    border-radius: 48% 52% 42% 58% / 55% 42% 58% 45%;
    background: var(--motion-red);
  }

  .motion-word {
    position: absolute;
    z-index: -1;
    top: 21%;
    right: 3%;
    color: rgba(91, 13, 8, .35);
    font-size: clamp(120px, 15vw, 260px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.1em;
  }

  .motion-halo,
  .motion-plate {
    position: absolute;
    top: 14%;
    right: 10%;
    width: min(37vw, 590px);
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .motion-halo {
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, .2);
    transform: scale(1.08);
  }

  .motion-plate {
    z-index: 4;
    overflow: hidden;
    border: clamp(7px, .7vw, 12px) solid var(--motion-cream);
    box-shadow: 0 38px 65px rgba(26, 5, 1, .5);
    will-change: transform, translate;
  }

  .motion-plate img {
    transform: scale(1.06);
  }

  .motion-orbit {
    position: absolute;
    z-index: 5;
    top: 3%;
    left: 10%;
    width: clamp(100px, 10vw, 170px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 5px solid var(--motion-cream);
    border-radius: 50%;
    box-shadow: 0 20px 40px rgba(20, 5, 2, .35);
    will-change: transform, translate;
  }

  .motion-beer {
    position: absolute;
    z-index: 5;
    display: block;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 25px 24px rgba(24, 6, 1, .42));
    will-change: transform, translate;
  }

  .motion-beer-glass {
    z-index: 3;
    left: 15%;
    bottom: 2%;
    width: clamp(130px, 12vw, 205px);
    height: clamp(130px, 12vw, 205px);
    border: 5px solid var(--motion-cream);
    border-radius: 50%;
    object-fit: cover;
    object-position: 18% center;
    box-shadow: 0 20px 44px rgba(20, 5, 2, .38);
  }

  .motion-beer-333 {
    right: -5%;
    bottom: -9%;
    height: min(28vw, 410px);
  }

  .motion-beer-hanoi {
    left: 20%;
    top: calc(-5% - 20px);
    height: min(23vw, 350px);
  }

  .motion-beer-saigon {
    right: -5%;
    top: -1%;
    height: min(25vw, 370px);
  }

  .motion-badge {
    position: absolute;
    z-index: 7;
    right: 5%;
    top: 8%;
    width: clamp(72px, 7vw, 110px);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    color: var(--motion-cream);
    border-radius: 50%;
    background: var(--motion-brown);
    font-weight: 900;
    line-height: .9;
    text-align: center;
  }

  .motion-crumb {
    position: absolute;
    z-index: 3;
    display: block;
    border-radius: 50%;
    background: var(--motion-orange);
  }

  .motion-crumb-one { top: 19%; left: 34%; width: 18px; height: 18px; }
  .motion-crumb-two { bottom: 20%; left: 28%; width: 11px; height: 11px; }
  .motion-crumb-three { right: 3%; top: 48%; width: 14px; height: 14px; }

  .motion-scroll {
    position: absolute;
    z-index: 8;
    left: clamp(58px, 5vw, 92px);
    bottom: 25px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 246, 232, .45);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .motion-scroll span { width: 24px; height: 1px; background: var(--motion-orange); }

  .motion-copy > *,
  .motion-world > * { opacity: 0; }
  .motion-copy > * { transform: translateY(46px); }
  .motion-copy .motion-title { opacity: 1; transform: none; }
  .motion-plate { transform: translateY(34%) scale(.55) rotate(-14deg); }
  .motion-sun { transform: rotate(-8deg) scale(.15); }
  .motion-word { transform: translateX(15%) rotate(-7deg); }
  .motion-orbit { transform: translate(90px, 80px) scale(.3); }
  .motion-beer-glass { transform: translate(-180px, 170px) rotate(-24deg) scale(.35); }
  .motion-beer-333 { transform: translate(160px, 180px) rotate(28deg) scale(.35); }
  .motion-beer-hanoi { transform: translate(-80px, -160px) rotate(-35deg) scale(.25); }
  .motion-beer-saigon { transform: translate(120px, -170px) rotate(30deg) scale(.25); }
  .motion-badge { transform: rotate(10deg) scale(.2); }

  .desktop-motion-hero.is-ready .motion-intro { opacity: 0; visibility: hidden; }
  .desktop-motion-hero.is-ready .motion-sun { opacity: 1; transform: rotate(-8deg) scale(1); transition: opacity .65s .2s, transform 1.4s .2s cubic-bezier(.2, .9, .25, 1.1); }
  .desktop-motion-hero.is-ready .motion-plate { opacity: 1; transform: translateY(0) scale(1) rotate(0); transition: opacity .75s .55s, transform 1.55s .55s cubic-bezier(.16, 1, .3, 1); }
  .desktop-motion-hero.is-ready .motion-word { opacity: 1; transform: translateX(0) rotate(-7deg); transition: opacity .9s .75s, transform 1.25s .75s cubic-bezier(.16, 1, .3, 1); }
  .desktop-motion-hero.is-ready .motion-copy > * { opacity: 1; transform: translateY(0); transition: opacity .65s, transform .8s cubic-bezier(.16, 1, .3, 1); }
  .desktop-motion-hero.is-ready .motion-copy > :nth-child(1) { transition-delay: .8s; }
  .desktop-motion-hero.is-ready .motion-copy > :nth-child(3) { transition-delay: 1.55s; }
  .desktop-motion-hero.is-ready .motion-copy > :nth-child(4) { transition-delay: 1.75s; }
  .desktop-motion-hero.is-ready .motion-title-line { animation: motionTitleReveal 1.05s .95s cubic-bezier(.16, 1, .3, 1) forwards; }
  .desktop-motion-hero.is-ready .motion-title-outline { animation-delay: 1.2s; }
  .desktop-motion-hero.is-ready .motion-orbit,
  .desktop-motion-hero.is-ready .motion-halo,
  .desktop-motion-hero.is-ready .motion-crumb,
  .desktop-motion-hero.is-ready .motion-badge { opacity: 1; transition: opacity .5s, transform .9s cubic-bezier(.16, 1, .3, 1); }
  .desktop-motion-hero.is-ready .motion-orbit { transform: none; transition-delay: .75s; animation: motionFloatOrbit 5.4s 1.65s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-badge { transform: rotate(10deg) scale(1); transition-delay: 1s; }
  .desktop-motion-hero.is-ready .motion-beer { opacity: 1; transition: opacity .7s, transform 1.35s cubic-bezier(.16, 1, .3, 1); }
  .desktop-motion-hero.is-ready .motion-beer-hanoi { transform: rotate(-12deg) scale(1); transition-delay: 1.25s; animation: motionBeerHanoi 6.4s 2.6s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-beer-saigon { transform: rotate(11deg) scale(1); transition-delay: 1.4s; animation: motionBeerSaigon 7.2s 2.75s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-beer-glass { transform: rotate(-9deg) scale(1); transition-delay: 1.55s; animation: motionBeerGlass 6.8s 2.9s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-beer-333 { transform: rotate(8deg) scale(1); transition-delay: 1.7s; animation: motionBeer333 7.4s 3.05s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-crumb-one { animation: motionCrumb 3.6s 1.3s ease-in-out infinite alternate; }
  .desktop-motion-hero.is-ready .motion-crumb-two { animation: motionCrumb 4.2s 1.5s ease-in-out infinite alternate-reverse; }
}

@keyframes motionIntroPulse { to { transform: translateY(-8px) rotate(5deg) scale(1.06); } }
@keyframes motionLoadLine { to { transform: translateX(0); } }
@keyframes motionTitleReveal {
  0% { clip-path: inset(-.26em 100% -.18em -.14em); transform: translateX(-48px) skewX(-8deg); letter-spacing: .06em; }
  65% { clip-path: inset(-.26em -.18em -.18em -.14em); }
  100% { clip-path: inset(-.26em -.18em -.18em -.14em); transform: translateX(0) skewX(0); letter-spacing: -.085em; }
}
@keyframes motionFloatOrbit { to { transform: translate(14px, -16px) rotate(5deg); } }
@keyframes motionCrumb { to { transform: translateY(-20px) rotate(20deg); } }
@keyframes motionBeerHanoi { to { transform: translate(-20px, 19px) rotate(-4deg); } }
@keyframes motionBeerSaigon { to { transform: translate(18px, -22px) rotate(4deg); } }
@keyframes motionBeerGlass { to { transform: translate(-14px, -24px) rotate(-3deg); } }
@keyframes motionBeer333 { to { transform: translate(-21px, 20px) rotate(2deg); } }
@media (min-width: 1440px) and (min-height: 780px) {
  .motion-scene {
    left: 50%;
    right: auto;
    width: min(calc(100% - 40px), 1580px);
    transform: translateX(-50%);
  }
}