.loader_container {z-index: 100000; background-color: #000;}
body:has(.loader_container:not(.d-none)) .follow_mouse { display: none; }

.mb_navbar{background-color: transparent !important;};
section.container-fluid{padding-right: 0; padding-left: 0; margin-left: 0; margin-right: 0;}
@media (max-width: 1367px){.first_section{margin-top: 0;}}
@media (max-width:1312px){section.container-fluid{padding-top: 75px;}}
@media (max-width: 1281px){.first_section{margin-top: 0;}}

#home_revise .s4_card_container { width: 100%; }
#home_revise .s4_card         { max-width: none; }
#home_revise .s4_card_content img {min-width: 0; max-width: none; max-height: none;width: clamp(180px, 21vw, 340px); height: auto;}
#home_revise .s7_upper_image { transform-origin: 50% 50%; }

@media screen and (min-width: 992px) {
  :root { --sec1-scroll: 262vh; }   
  #home_revise .lp_sec_1        { height: var(--sec1-scroll); }
  #home_revise .sec_1_list      { margin-top: var(--sec1-scroll); }
  #home_revise .sec_1_list_item {height: var(--sec1-scroll);margin-top: calc(var(--sec1-scroll) * -1);position: relative;}
}
@media (max-width: 991.98px) {
  #home_revise .lp_sec_1 { display: none; }
  #home_revise .mb_sec_1 { display: block; }
}

@media screen and (min-width: 992px) {
  #home_revise .lp_sec_1 { --stage: min(100vw, 1920px); }
  #home_revise .sticky_container {perspective: calc(var(--stage) * 0.26);   }
  #home_revise .lp_sec_1 .image {width:  calc(var(--stage) * 0.50);height: calc(var(--stage) * 0.35);max-height: min(75vh, calc(var(--stage) * 0.35));}
  #home_revise .lp_sec_1 .image img {width: auto;height: 100%;object-fit: contain;}
  #home_revise .lp_sec_1 .details {margin-left: calc(var(--stage) * -0.05);  }
  #home_revise .promo_link .details h1 {font-size: calc(var(--stage) * 0.05);width:calc(var(--stage) * 0.36);max-width: none;line-height: 1.08;}
}
@font-face {font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/home/4fafe71f7fe50f.woff2") format("woff2");}
@font-face {font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/home/91d08e5fe03c07.woff2") format("woff2");}
@font-face {font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/home/3c8f3d45dfa410.woff2") format("woff2");}
:root {--gold: #c59a53; --gold-bright: #deb566;}
.ma-sticky{-webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: 100% 100%;mask-size: 100% 100%;}
img {display: block; user-select: none; -webkit-user-drag: none;}
.ma-banner {position: relative; width: 100%; background: #000; --scroll-len: 460vh;}
.ma-scroll-wrap {position: relative; height: var(--scroll-len);}
.ma-sticky {position: sticky; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden;}
/* ---- the stage ---- */
.ma-stage {container-type: inline-size; position: relative; z-index: 1; width: max(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; --k: calc(100cqw / 1672);}
.ma-bg {position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
.ma-bg {width: 100% !important;max-width: none !important;height: 100% !important;}
.ma-layer {position: absolute; inset: 0; pointer-events: none;}
.ma-el {position: absolute; pointer-events: none;}
/* ========================================================= ACT 3 — the finished banner ========================================================= */
.ma-scene {position: absolute; inset: 0; opacity: 0; will-change: opacity, transform;}
.ma-bg, .ma-moonglow, .ma-moon, .ma-sky, .ma-petals, .ma-vignette, .ma-island, .ma-branch-lantern, .ma-change-wrap, .ma-rabbit {opacity: 0;}
/* ---- moon + atmospheric bloom ---------------------------- */
.ma-edge-fade {-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect;}
.ma-moonglow {background: radial-gradient( circle at 71.8% 18.1%, rgba(255, 216, 145, 0.3) 0%, rgba(255, 190, 105, 0.13) 24%, rgba(255, 168, 78, 0.045) 44%, transparent 60% ); animation: maMoonBreathe 9s ease-in-out infinite alternate;}
.ma-moon {left: 64.56%; top: 5.25%; width: 14.5%; filter: drop-shadow(0 0 calc(46 * var(--k)) rgba(255, 198, 112, 0.55)); animation: maMoonBreathe 9s ease-in-out infinite alternate; will-change: translate, opacity;}
/* ---- village island -------------------------------------- */
.ma-isle {position: absolute; inset: 0; transform-origin: 63.66% 53.1%; perspective: calc(1500 * var(--k)); perspective-origin: 63.66% 53.1%; will-change: transform;}
.ma-isle__turn {position: absolute; inset: 0; transform-origin: 63.66% 53.1%; transform-style: preserve-3d; will-change: transform;}
.ma-isle__cast {position: absolute; inset: 0; transform-origin: 63.66% 53.1%; transform-style: preserve-3d; will-change: transform;}
.ma-moon-depth, .ma-isle__upper, .ma-isle__lower {position: absolute; inset: 0; transform-origin: 63.66% 53.1%; transform-style: preserve-3d; pointer-events: none; will-change: transform;}
.ma-moon-depth {z-index: 0;}
.ma-isle__upper {z-index: 3;}
.ma-isle__lower {z-index: 2;}
.ma-island {left: 34.09%; top: 9.25%; width: 59.16%; filter: drop-shadow( 0 calc(8 * var(--k)) calc(22 * var(--k)) rgba(0, 0, 0, 0.5) ); will-change: translate, opacity;}
.ma-moon-halo {position: absolute; left: 62.41%; top: 1.43%; width: 18.8%; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient( circle, rgba(255, 235, 197, 0.34) 0%, rgba(255, 200, 121, 0.14) 42%, transparent 72% ); filter: blur(calc(13 * var(--k))); transform: translateZ(calc(-18 * var(--k))) scale(1.14); will-change: opacity;}
.ma-branch-lantern {will-change: translate, opacity;}
.ma-branch-lantern {left: 40.07%; top: 21.1%; width: 6.4%; transform-origin: 47% 3%; filter: drop-shadow(0 0 calc(12 * var(--k)) rgba(255, 96, 48, 0.4)); animation: maSway 6.5s ease-in-out infinite alternate;}
.ma-branch-lantern-glow {position: absolute; left: 43.43%; top: 28.64%; width: 4.1%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, rgba(255, 241, 182, 0.82) 0%, rgba(255, 165, 60, 0.46) 28%, rgba(255, 88, 26, 0.16) 58%, transparent 76% ); filter: blur(calc(5 * var(--k))); mix-blend-mode: screen; transform: translate(-50%, -50%); animation: maLanternBlink 4.8s ease-in-out -1.1s infinite; will-change: opacity, filter, scale;}
.ma-building-lights {position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;}
.ma-building-light {--light-speed: 5.2s; --light-delay: 0s; position: absolute; border-radius: 50%; background: radial-gradient( circle, rgba(255, 241, 182, 0.85) 0%, rgba(255, 165, 60, 0.48) 28%, rgba(255, 88, 26, 0.18) 58%, transparent 76% ); transform: translate(-50%, -50%); animation-name: maBuildingLanternGlow; animation-duration: var(--light-speed); animation-delay: var(--light-delay); animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: opacity, filter, scale;}
.ma-building-light--lantern-sm {width: 2%; aspect-ratio: 1; --glow-blur: calc(3 * var(--k));}
.ma-building-light--lantern-md {width: 2.6%; aspect-ratio: 1; --glow-blur: calc(4 * var(--k));}
.ma-building-light--lantern-lg {width: 3.6%; aspect-ratio: 1; --glow-blur: calc(5.5 * var(--k));}
.ma-building-light--small {width: 1.2%; aspect-ratio: 1; --glow-blur: calc(2 * var(--k));}
.ma-building-light--sky-a {left: 55.86%; top: 20.95%; --light-speed: 6.8s; --light-delay: -1.2s;}
.ma-building-light--sky-b {left: 55.5%; top: 20.35%; --light-speed: 5.6s; --light-delay: -3.4s;}
.ma-building-light--sky-c {left: 57.09%; top: 26%; --light-speed: 7.2s; --light-delay: -0.6s;}
.ma-building-light--sky-e {left: 63.18%; top: 27.16%; --light-speed: 5.9s; --light-delay: -2.1s;}
.ma-building-light--sky-f {left: 84.4%; top: 30.35%; --light-speed: 6.5s; --light-delay: -5s;}
.ma-building-light--garland-a {left: 64.4%; top: 34.5%; --light-speed: 2.6s; --light-delay: -0.8s;}
.ma-building-light--garland-b {left: 66.1%; top: 35%; --light-speed: 2.9s; --light-delay: -1.6s;}
.ma-building-light--garland-c {left: 67.62%; top: 35.5%; --light-speed: 3.1s; --light-delay: -2.3s;}
.ma-building-light--bridge {left: 66.5%; top: 42.36%; --light-speed: 5.4s; --light-delay: -3.7s;}
.ma-building-light--leftbldg-lantern {left: 46.1%; top: 45.5%; --light-speed: 5.1s; --light-delay: -2.8s;}
/* ---- waterline + mirrored reflection --------------------- */
.ma-water {inset: auto 4% auto 30%; top: 53.2%; height: 9%; background: linear-gradient( 180deg, transparent 0%, rgba(255, 208, 142, 0.13) 20%, rgba(255, 190, 110, 0.04) 55%, transparent 100% ); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; transform: translateZ(calc(5 * var(--k)));}
.ma-water-seam {inset: auto 4% auto 30%; top: 52.3%; height: calc(30 * var(--k)); background: linear-gradient( 180deg, transparent 0%, rgba(5, 4, 3, 0.55) 16%, rgba(5, 4, 3, 0.78) 50%, rgba(5, 4, 3, 0.55) 84%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 16%, #000 86%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 16%, #000 86%, transparent 100% ); transform: translateZ(calc(6 * var(--k)));}
.ma-water-seam::before, .ma-water-seam::after {content: ""; position: absolute; left: 0; right: 0; height: calc(1 * var(--k)); background: linear-gradient( 90deg, transparent 0%, rgba(197, 154, 83, 0.35) 18%, rgba(240, 208, 145, 0.75) 50%, rgba(197, 154, 83, 0.35) 82%, transparent 100% );}
.ma-water-seam::before {top: calc(4 * var(--k));}
.ma-water-seam::after {bottom: calc(4 * var(--k)); opacity: 0.45;}
.ma-reflection {left: 35.32%; top: 48.46%; width: 55.14%; opacity: 0; filter: blur(calc(0.9 * var(--k))) saturate(0.92) brightness(0.9); -webkit-mask-image: linear-gradient( 180deg, transparent 0%, #000 9%, #000 62%, transparent 88% ); mask-image: linear-gradient( 180deg, transparent 0%, #000 9%, #000 62%, transparent 88% ); animation: maRipple 7s ease-in-out infinite alternate; will-change: translate, opacity;}
/* ---- rabbits --------------------------------------------- */
.ma-rabbit {filter: drop-shadow( 0 calc(4 * var(--k)) calc(9 * var(--k)) rgba(0, 0, 0, 0.45) );}
.ma-rabbit--sit {left: 85.23%; top: 35.71%; width: 6.04%;}
.ma-rabbit--a {left: 37.07%; top: 53.03%; width: 5.5%; animation: maHop 4.2s ease-in-out infinite alternate;}
.ma-rabbit--b {left: 47.75%; top: 51.65%; width: 7.47%; animation: maHop 5.1s ease-in-out infinite alternate -1.2s;}
.ma-rabbit--c {left: 34.11%; top: 70.29%; width: 6.76%; animation: maHop 4.7s ease-in-out infinite alternate -2.4s;}
.ma-rabbit--d {left: 62.26%; top: 72.2%; width: 6.04%; transform: scaleX(-1); animation: maHopFlip 5.6s ease-in-out infinite alternate -0.6s;}
/* ---- Chang'e --------------------------------------------- */
.ma-figures {position: absolute; inset: 0; pointer-events: none;}
.ma-change-wrap {position: absolute; inset: 0; animation: maDrift 8s ease-in-out infinite alternate; will-change: translate, opacity, transform;}
.ma-change {left: 38.07%; top: 48%; width: 35%; filter: drop-shadow( 0 calc(10 * var(--k)) calc(26 * var(--k)) rgba(0, 0, 0, 0.45) );}
.ma-change-lantern-glow {position: absolute; left: 71.18%; top: 70.8%; width: 7.6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, rgba(255, 247, 198, 0.86) 0%, rgba(255, 184, 75, 0.5) 27%, rgba(255, 104, 30, 0.18) 56%, transparent 76% ); filter: blur(calc(5 * var(--k))); mix-blend-mode: screen; transform: translate(-50%, -50%); animation: maLanternBlink 5.3s ease-in-out -3.2s infinite; will-change: opacity, filter, scale;}
/* ---- sky lanterns + petals (placed by JS) ---------------- */
.ma-sky-lantern {position: absolute; background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 0 calc(9 * var(--k)) rgba(255, 150, 60, 0.55)); will-change: transform;}
.ma-petal {position: absolute; background: linear-gradient(145deg, #ffe6d8 0%, #f7c3a8 45%, #dd9370 100%); border-radius: 62% 8% 62% 8%; opacity: 0.82; filter: drop-shadow(0 0 calc(3 * var(--k)) rgba(255, 190, 150, 0.35)); will-change: transform;}
.ma-vignette {background: radial-gradient( ellipse 80% 76% at 52% 46%, transparent 44%, rgba(0, 0, 0, 0.46) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.3) 0%, transparent 13%, transparent 86%, rgba(0, 0, 0, 0.4) 100% );}
/* ========================================================= TYPOGRAPHY ========================================================= */
.ma-type {position: absolute; pointer-events: none; z-index: 5;}
.ma-t {margin: 0; font-family: "Northwell", "Northwell Alt", "Kaushan Script", "Brush Script MT", cursive; font-weight: 400; line-height: 1; white-space: nowrap; overflow: visible; transform: scaleX(var(--sx, 1)); -webkit-background-clip: text; background-clip: text; color: transparent;}
.ma-t--happy {--sx: 0.772; font-size: calc(68.2 * var(--k))!important;; background-image: linear-gradient( 172deg, #d5a65f 0%, #c79553 34%, #b88645 68%, #9b6f39 100% ); text-shadow: 0 0 0 #b88645; filter: drop-shadow( 0 calc(2 * var(--k)) calc(3 * var(--k)) rgba(88, 54, 24, 0.85) );}
.ma-t--mid {--sx: 0.715; font-size: calc(62 * var(--k))!important;; background-image: linear-gradient( 174deg, #dcb070 0%, #c99755 25%, #a6763c 58%, #8c6231 82%, #b58540 100% ); text-shadow: 0 0 0 #a6763c; filter: drop-shadow(0 calc(2.5 * var(--k)) 0 #754a24) drop-shadow(0 calc(6 * var(--k)) calc(11 * var(--k)) rgba(58, 33, 12, 0.75));}
.ma-t--fest {--sx: 0.878; font-size: calc(119.7 * var(--k))!important;; background-image: linear-gradient( 174deg, #d5a765 0%, #c18f4c 25%, #a06f37 58%, #86592c 82%, #ad7e3f 100% ); text-shadow: 0 0 0 #a06f37; filter: drop-shadow(0 calc(2.5 * var(--k)) 0 #70451f) drop-shadow(0 calc(6 * var(--k)) calc(11 * var(--k)) rgba(52, 30, 10, 0.75));}
/* ---- divider rule ---- */
.ma-rule {display: block; height: calc(30 * var(--k))!important; object-fit: cover; object-position: 50% 50%;}
/* ---- "Reunion ◆ Gratitude ◆ Happiness" ------------------- */
.ma-tag {margin: 0; font-family: "Inter_Regular"; font-weight: 500; font-size: calc(21 * var(--k))!important;; line-height: 1; white-space: nowrap; color: var(--gold); text-shadow: 0 calc(2 * var(--k)) calc(6 * var(--k)) rgba(0, 0, 0, 0.7);text-align: center;}
.ma-tag__dot {font-size: calc(17 * var(--k))!important;; color: var(--gold-bright); margin: 0 calc(5 * var(--k)); vertical-align: calc(2 * var(--k));}
/* ---- finished-banner title lockup ------------------------- */
.ma-type--scene {left: calc(64 * var(--k)); top: calc(270 * var(--k)); display: flex; flex-direction: column; align-items: center; width: calc(560 * var(--k));}
.ma-type--scene > * {position: relative; flex: none; transform-origin: center top;}
.ma-type--scene .ma-t {width: max-content; max-width: none; overflow: visible; text-align: center;}
.ma-type--scene .ma-rule {width: calc(427 * var(--k)); margin-bottom: calc(12 * var(--k)); margin-top: calc(12 * var(--k));}
.ma-type--scene .mb-cta-wrap {margin-top: calc(16 * var(--k)); pointer-events: auto;}
.ma-type--scene > * {opacity: 0; translate: 0 calc(26 * var(--k)); will-change: translate, opacity;}
/* ========================================================= ACT 1 — the same lockup, centred on black ========================================================= */
.ma-intro {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 30; will-change: opacity;pointer-events: none;}
.ma-type--intro {--intro-fit: 1; position: relative; display: flex; flex-direction: column; align-items: center; width: 88%; max-width: 88%; transform: scale(var(--intro-fit)); transform-origin: 50% 50%; will-change: transform;}
.ma-type--intro .ma-t {box-sizing: content-box; width: 100%; max-width: none; overflow: visible; text-align: center; transform-origin: center top;}
.ma-type--intro .ma-rule {width: calc(427 * var(--k)); margin-top: calc(12 * var(--k));}
.ma-type--intro .ma-tag {margin-top: calc(12 * var(--k));}
.ma-type--intro .mb-cta-wrap {margin-top: calc(16 * var(--k)); pointer-events: auto;}
.ma-type--intro > * {opacity: 0; translate: 0 calc(28 * var(--k)); will-change: translate, opacity;}
/* ========================================================= ACT 2 — lanterns rushing past the camera along Z ========================================================= */
.ma-tunnel {position: absolute; inset: 0; z-index: 20; perspective: calc(820 * var(--k)); perspective-origin: 50% 52%; transform-style: preserve-3d; pointer-events: none; opacity: 0;}
.ma-lantern {position: absolute; left: 50%; top: 50%; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform, opacity; backface-visibility: hidden;}
.ma-bloom {z-index: 25; opacity: 0; background: radial-gradient( ellipse farthest-corner at 50% 52%, rgba(255, 238, 205, 0.85) 0%, rgba(255, 216, 160, 0.55) 16%, rgba(255, 195, 115, 0.36) 32%, rgba(230, 150, 70, 0.2) 52%, rgba(206, 116, 40, 0.08) 74%, transparent 100% ); transition: opacity 0.6s ease-in-out; will-change: opacity;}
/* ========================================================= Ambient loops ========================================================= */
@keyframes maMoonBreathe {
  from {scale: 0.994;}
  to {scale: 1.006;}
}
@keyframes maDrift {
  from {transform: translate3d(0, 0, 0) rotate(0deg);}
  to {transform: translate3d(calc(-9 * var(--k)), calc(-13 * var(--k)), 0) rotate(-0.5deg);}
}
@keyframes maHop {
  from {transform: translate3d(0, 0, 0) rotate(-1.5deg);}
  to {transform: translate3d(calc(11 * var(--k)), calc(-15 * var(--k)), 0) rotate(2deg);}
}
@keyframes maHopFlip {
  from {transform: scaleX(-1) translate3d(0, 0, 0) rotate(1.5deg);}
  to {transform: scaleX(-1) translate3d(calc(11 * var(--k)), calc(-15 * var(--k)), 0) rotate(-2deg);}
}
@keyframes maSway {
  from {transform: rotate(-2.2deg);}
  to {transform: rotate(2.2deg);}
}
@keyframes maLanternBlink {
  0%, 100% {opacity: 0.42; scale: 0.94; filter: blur(calc(5 * var(--k))) brightness(0.92);}
  24% {opacity: 0.68; scale: 1.01;}
  46% {opacity: 0.5; scale: 0.97;}
  72% {opacity: 0.82; scale: 1.06; filter: blur(calc(6 * var(--k))) brightness(1.08);}
  84% {opacity: 0.61; scale: 1;}
}
@keyframes maBuildingLanternGlow {
  0%, 100% {opacity: 0.38; scale: 0.93; filter: blur(var(--glow-blur)) brightness(0.9);}
  24% {opacity: 0.62; scale: 1.02;}
  46% {opacity: 0.46; scale: 0.97;}
  72% {opacity: 0.78; scale: 1.07; filter: blur(calc(var(--glow-blur) * 1.15)) brightness(1.1);}
  84% {opacity: 0.56; scale: 1;}
}
@keyframes maRipple {
  from {transform: translateY(0) scaleY(1);}
  to {transform: translateY(calc(3 * var(--k))) scaleY(1.012);}
}
@keyframes maFloatUp {
  from {transform: translate3d(0, 0, 0);}
  to {transform: translate3d(calc(12 * var(--k)), calc(-24 * var(--k)), 0);}
}
@keyframes maPetalFall {
  from {transform: translate3d(0, calc(-12 * var(--k)), 0) rotate(0deg);}
  to {transform: translate3d(calc(-16 * var(--k)), calc(18 * var(--k)), 0) rotate(160deg);}
}
/* ========================================================= Portrait phones ========================================================= */
@media (max-width: 767px) and (orientation: portrait), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  html, body {width: 100%; max-width: 100%; overflow-x: clip;}
  html {scrollbar-width: none;}
  html::-webkit-scrollbar {display: none;}
  .ma-banner {--scroll-len: 460svh;}
  .ma-sticky {height: 100vh; height: 100svh;}
  .ma-stage {--ma-canvas-height: calc(100cqw * 941 / 1672); width: 100vw; height: 100vh; height: 100svh; aspect-ratio: auto;}
  .ma-bg {object-position: 58% 50%;}
  .ma-sky-lantern--large-left, .ma-sky-lantern--large-right {width: 14vw !important; height: auto !important; aspect-ratio: var(--lantern-aspect); top: calc(-50svh + 28.14vw + 20px) !important;}
  .ma-sky-lantern--large-left {left: 4vw !important;}
  .ma-sky-lantern--large-right {left: 82vw !important;top:-47vw !important;}
  .ma-sky-lantern--type-left, .ma-sky-lantern--type-right {width: 8.5vw !important; height: auto !important; aspect-ratio: var(--lantern-aspect); top: calc(-50svh + 28.14vw + 135px) !important;}
  .ma-sky-lantern--type-left {left: 3vw !important;top: -11vw !important;}
  .ma-sky-lantern--type-right {left: 88vw !important;top: -4vw !important;}
  .ma-sky-lantern--ambient {display: none;}
  .ma-scene {inset: auto 0; top: 50%; height: var(--ma-canvas-height); overflow: visible; transform: translateY(-50%);}
  .ma-isle {transform: translate(-13.7vw, 14.5svh) scale(1.48);}
  .ma-moonglow {inset: -70% -40%; translate: 0 7svh; background: radial-gradient( circle at 57% 42%, rgba(255, 224, 169, 0.27) 0%, rgba(255, 192, 107, 0.13) 15%, rgba(255, 166, 77, 0.045) 29%, transparent 48% ); filter: blur(calc(18 * var(--k))); -webkit-mask-image: none; mask-image: none;}
  .ma-type--scene {left: 50%; top: -22svh; transform: translateX(-50%) scale(2.35); transform-origin: 50% 0;}
  .ma-figures {transform: translate(-2.56vw, 27.7svh) scale(2.2); transform-origin: 52.57% 71.33%;}
  .ma-type--scene .mb-cta-wrap {zoom: calc(1 / 1.35);margin-top: calc(28 * var(--k)); }
  .ma-type--intro .mb-cta-wrap {zoom: calc(1 / var(--intro-fit, 1));}
  @media (max-height: 700px) {
    .ma-figures {transform: translate(-2.56vw, 24svh) scale(2.2);}
  }
  .ma-type--intro {width: 100%; max-width: 100%;}
  .ma-type--intro .ma-t--happy {font-size: clamp(3rem, 16cqw, 4.4rem)!important;;}
  .ma-type--intro .ma-t--mid, .ma-type--intro .ma-t--fest {font-size: clamp(3.4rem, 19cqw, 5.2rem)!important;;}
  .ma-type--intro .ma-rule {width: 70cqw; height: clamp(12px, 4cqw, 20px);}
  .ma-type--intro .ma-tag {font-size: clamp(0.74rem, 3.78cqw, 0.97rem)!important;;}
  .ma-tunnel {inset: auto 0; top: 50%; height: var(--ma-canvas-height); transform: translateY(-50%) scale(1.55); transform-origin: 50% 50%;}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .ma-bg {object-position: 54% 50%;}
  .ma-type--intro .ma-t--happy {font-size: 6.4rem!important;;}
  .ma-type--intro .ma-t--mid, .ma-type--intro .ma-t--fest {font-size: 7.2rem!important;}
  .ma-type--intro .ma-rule {width: 56cqw;}
  .ma-type--intro .ma-tag {font-size: 1.87rem!important;;}
  .ma-type--scene .ma-t--happy {font-size: 2.72rem!important;;}
  .ma-type--scene .ma-t--mid, .ma-type--scene .ma-t--fest {font-size: 3.06rem!important;;}
  .ma-type--scene .ma-rule {width: 20.43cqw;}
  .ma-type--scene .ma-tag {font-size: 0.63rem!important;;}
  .ma-type--scene::before {content: ""; position: absolute; inset: -5cqw -6cqw; z-index: -1; background: radial-gradient( ellipse at center, rgba(8, 5, 2, 0.55) 0%, rgba(8, 5, 2, 0.38) 42%, rgba(8, 5, 2, 0.16) 70%, transparent 100% );}
}

/* CTA btn */
/* ===== MA scene CTA: native button metrics, no zoom ===== */
@media (max-width: 767px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  .ma-type--scene {
    --ma-scene-scale: 2.35;
    --ma-cta-h: 52.4px;
    transform: translateX(-50%) scale(var(--ma-scene-scale));
    transform-origin: 50% 0;
  }

  .ma-type--scene > .mb-cta-wrap {
    zoom: 1;
    scale: calc(1 / var(--ma-scene-scale));
    transform-origin: 50% 0;
    margin-top: calc(28 * var(--k));
    margin-bottom: calc((1 / var(--ma-scene-scale) - 1) * var(--ma-cta-h));
  }

  .ma-type--scene > .mb-cta-wrap .mb-cta-wrap {
    display: contents;
    zoom: 1;
    scale: none;
    margin: 0;
  }

  .ma-type--scene .mb-cta-wrap .cta-button {
    pointer-events: none;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) and (orientation: portrait) {
    .ma-type--scene .ma-t--happy, .ma-type--scene .ma-t--mid, .ma-type--scene .ma-t--fest, .ma-type--intro .ma-t--happy, .ma-type--intro .ma-t--mid, .ma-type--intro .ma-t--fest {display: inline-block; padding-right: 0.16em; margin-right: -0.16em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transform: translateZ(0) scaleX(var(--sx)); transform: translateZ(0) scaleX(var(--sx));}
  }
}
/* ========================================================= Accessibility ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ma-banner {--scroll-len: 100vh;}
  .ma-moon, .ma-moonglow, .ma-change-wrap, .ma-rabbit, .ma-branch-lantern, .ma-reflection, .ma-sky-lantern, .ma-petal, .ma-building-light, .ma-branch-lantern-glow, .ma-change-lantern-glow {animation: none !important;}
  .ma-building-light {opacity: 0.62;}
  .ma-branch-lantern-glow, .ma-change-lantern-glow {opacity: 0.58; scale: 1;}
  .ma-rabbit--d {transform: scaleX(-1);}
  .ma-type--scene > *, .ma-type--intro > * {translate: none !important;}
}

/* ===== skip-intro state: banner sits at its final frame, no scroll runway ===== */
html.ma-static .ma-banner { --scroll-len: 100vh; }
html.ma-static .ma-intro,
html.ma-static .ma-tunnel,
html.ma-static .ma-bloom { display: none !important; }

@media (max-width: 767px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  html.ma-static .ma-banner { --scroll-len: 100svh; }
}

/* ===== iOS banner scroll performance ===== */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) and (orientation: portrait) {

    /* A. viewport-sized mask -> composited gradient (identical: backdrop is #000) */
    .ma-sticky { -webkit-mask-image: none; mask-image: none; }
    .ma-sticky::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 18%;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
      pointer-events: none;
      z-index: 60;
    }

    /* B. stop animating filter/blur on the 10 building lights */
    @keyframes maBuildingLanternGlowIOS {
      0%, 100% { opacity: 0.38; scale: 0.93; }
      24%      { opacity: 0.62; scale: 1.02; }
      46%      { opacity: 0.46; scale: 0.97; }
      72%      { opacity: 0.78; scale: 1.07; }
      84%      { opacity: 0.56; scale: 1; }
    }
    .ma-building-light {
      filter: none;
      animation-name: maBuildingLanternGlowIOS;
      will-change: opacity, scale;
    }

    /* C. blend mode forces a backdrop re-read every frame */
    .ma-building-lights { mix-blend-mode: normal; }

    /* D. keep invalidation inside the stage */
    .ma-stage { contain: paint; }
  }
}