:root {
  --wine-950: #3f0c10;
  --wine-900: #501115;
  --wine-800: #651718;
  --wine-700: #7d221e;
  --wine-600: #962f25;
  --gold-500: #c9943b;
  --gold-400: #dfb55f;
  --gold-300: #eed08b;
  --cream-50: #fffdf8;
  --cream-100: #fbf5e8;
  --cream-200: #f5ead7;
  --ink-900: #2c1b17;
  --ink-700: #59433b;
  --ink-500: #7a675e;
  --line: rgba(113, 72, 43, .17);
  --shadow: 0 28px 80px rgba(54, 26, 17, .15);
  --shadow-strong: 0 30px 90px rgba(21, 4, 6, .34);
  --ease-silk: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1.28, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-900);
  background: var(--cream-50);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::selection { background: #e5c27d; color: #411012; }
a { color: inherit; }
img { display: block; width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.flower-field { position: fixed; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; color: #f0cf7d; opacity: .86; }
.floating-flower { --fall-x: 10vw; --fall-spin: 230deg; position: absolute; top: -12vh; display: block; width: clamp(24px, 3.2vw, 43px); height: auto; object-fit: contain; opacity: 0; filter: drop-shadow(0 5px 12px rgba(95,43,19,.16)); will-change: transform, opacity; animation: lotus-fall 18s linear infinite; }
.floating-flower--one { left: 7%; --fall-x: 14vw; --fall-spin: 250deg; width: clamp(29px, 3.9vw, 52px); animation-duration: 18s; animation-delay: -4s; }
.floating-flower--two { left: 87%; --fall-x: -12vw; --fall-spin: 205deg; width: clamp(23px, 3vw, 39px); animation-duration: 14s; animation-delay: -10s; }
.floating-flower--three { left: 4%; --fall-x: 18vw; --fall-spin: 275deg; width: clamp(21px, 2.7vw, 35px); animation-duration: 20s; animation-delay: -2s; }
.floating-flower--four { left: 91%; --fall-x: -16vw; --fall-spin: 220deg; width: clamp(31px, 4.4vw, 58px); animation-duration: 17s; animation-delay: -12s; }
.floating-flower--five { left: 17%; --fall-x: 12vw; --fall-spin: 240deg; width: clamp(24px, 3.1vw, 41px); animation-duration: 15s; animation-delay: -7s; }
.floating-flower--six { left: 80%; --fall-x: -18vw; --fall-spin: 285deg; width: clamp(21px, 2.6vw, 34px); animation-duration: 21s; animation-delay: -15s; }
.floating-flower--seven { left: 73%; --fall-x: -9vw; --fall-spin: 195deg; width: clamp(22px, 2.8vw, 37px); animation-duration: 13s; animation-delay: -5s; }
.floating-flower--eight { left: 55%; --fall-x: 9vw; --fall-spin: 260deg; width: clamp(27px, 3.4vw, 45px); animation-duration: 18s; animation-delay: -9s; }
.shell { width: min(1160px, calc(100% - 44px)); margin: 0 auto; }
.section { padding: 104px 0; }

/* Hero */
.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  color: #fff4df;
  background:
    radial-gradient(circle at 15% 5%, rgba(205, 147, 54, .18), transparent 31%),
    radial-gradient(circle at 90% 88%, rgba(202, 127, 54, .12), transparent 31%),
    linear-gradient(135deg, var(--wine-950), var(--wine-800) 58%, #571216 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  transform-origin: 70% 50%;
  animation: hero-grid-drift 24s ease-in-out infinite alternate;
}
.hero__halo {
  position: absolute;
  border: 1px solid rgba(234, 200, 124, .14);
  border-radius: 50%;
  pointer-events: none;
}
.hero__halo--one { width: 760px; height: 760px; right: -250px; top: -310px; box-shadow: 0 0 0 88px rgba(234,200,124,.025), 0 0 0 176px rgba(234,200,124,.018); animation: halo-orbit 18s ease-in-out infinite alternate; }
.hero__halo--two { width: 360px; height: 360px; left: -220px; bottom: -180px; animation: halo-breathe 12s ease-in-out infinite alternate; }
.hero__grid {
  position: relative;
  z-index: 2;
  min-height: 780px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(48px, 7vw, 90px);
  align-items: center;
  padding: 86px 0 92px;
}
.hero__copy { max-width: 650px; }
.temple-name {
  margin: 25px 0 14px;
  color: #fff1d0;
  font: 750 16px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
}
.temple-name small { font-size: .72em; opacity: .75; }
.hero h1 { margin: 0; font-size: clamp(36px, 4.7vw, 59px); font-weight: 800; color: var(--gold-300); letter-spacing: -.045em; line-height: .96; white-space: nowrap; text-shadow: 0 12px 38px rgba(0,0,0,.22); }
.hero__lead { max-width: 610px; margin: 28px 0 0; color: rgba(255,246,226,.86); font-size: clamp(18px, 2vw, 23px); line-height: 1.67; }
.hero__actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.hero__actions p { margin: 0; max-width: 250px; color: rgba(255,244,221,.69); font: 500 12.5px/1.55 ui-sans-serif, system-ui, sans-serif; }
.hero__actions p b { color: #f4d187; font-size: 11px; letter-spacing: .11em; }
.cta {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  font: 800 15px/1 ui-sans-serif, system-ui, sans-serif;
  transition: transform .32s var(--ease-spring), box-shadow .32s ease, filter .32s ease;
}
.cta:hover { transform: translateY(-4px); filter: brightness(1.04); }
.cta:active { transform: translateY(-1px) scale(.985); }
.cta:focus-visible, .inline-cta:focus-visible, .mobile-cta a:focus-visible { outline: 3px solid rgba(238,208,139,.9); outline-offset: 4px; }
.cta--gold { color: #431012; background: linear-gradient(135deg, #f5dda3, #d7a446); box-shadow: 0 14px 38px rgba(213,166,75,.22); }
.cta--wine { color: #fff7e5; background: linear-gradient(135deg, #861f20, #5d1216); box-shadow: 0 15px 38px rgba(83,20,23,.22); }
.cta__zalo { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: #fff; color: #5d1717; font: 900 14px/1 ui-sans-serif, system-ui, sans-serif; box-shadow: inset 0 0 0 1px rgba(76,16,18,.08); }
.cta__zalo--light { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.17); }
.cta__zalo { transition: transform .35s var(--ease-spring); }
.cta:hover .cta__zalo { transform: rotate(-8deg) scale(1.1); }
.cta__arrow { font-size: 18px; opacity: .7; transition: transform .35s var(--ease-spring), opacity .35s ease; }
.cta:hover .cta__arrow { opacity: 1; transform: translateX(5px); }
.hero__visual { position: relative; width: min(100%, 505px); justify-self: end; padding: 0 0 58px 34px; }
.hero-card { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 230px 230px 30px 30px; border: 1px solid rgba(242,210,138,.32); background: #3a0d10; box-shadow: var(--shadow-strong); transition: transform .75s var(--ease-silk), box-shadow .75s ease; }
.hero-card:hover { transform: translateY(-7px) rotate(-.35deg); box-shadow: 0 38px 100px rgba(21,4,6,.45); }
.hero-card::before { content: ""; position: absolute; z-index: 3; inset: 13px; border: 1px solid rgba(244,219,165,.25); border-radius: 220px 220px 22px 22px; pointer-events: none; }
.hero-card::after { content: ""; position: absolute; z-index: 2; top: -28%; left: -45%; width: 38%; height: 160%; pointer-events: none; background: linear-gradient(105deg, transparent 12%, rgba(255,241,193,.2) 48%, transparent 84%); transform: translateX(-150%) skewX(-18deg); animation: image-glint 8s ease-in-out infinite; }
.hero-card img { height: 100%; object-fit: cover; object-position: 50% 44%; transition: transform 1.1s var(--ease-silk); }
.hero-card:hover img { transform: scale(1.045); }
.hero-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,8,9,.04) 35%, rgba(35,7,9,.78) 100%); }
.hero-card__badge { position: absolute; z-index: 4; top: clamp(84px, 17%, 110px); right: 28px; display: grid; gap: 2px; padding: 10px 13px; border-radius: 10px; background: rgba(74,14,17,.82); border: 1px solid rgba(235,198,112,.35); backdrop-filter: blur(10px); text-align: center; color: #f4d48a; font-family: ui-sans-serif, system-ui, sans-serif; animation: badge-float 4.8s ease-in-out infinite; }
.hero-card__badge small { font-size: 9px; letter-spacing: .13em; }
.hero-card__badge b { font-size: 13px; letter-spacing: .08em; }
.hero-card__caption { position: absolute; z-index: 4; left: 32px; right: 32px; bottom: clamp(118px, 23%, 150px); color: #fff3d6; font-size: 21px; line-height: 1.48; text-shadow: 0 2px 15px rgba(0,0,0,.38); animation: caption-float 5.5s ease-in-out infinite; }
.hero-inset { position: absolute; z-index: 5; left: 0; bottom: 0; width: 210px; margin: 0; overflow: hidden; border: 6px solid #6e191a; border-radius: 16px; background: #681619; box-shadow: 0 14px 44px rgba(25,3,5,.34); transition: transform .5s var(--ease-spring), box-shadow .5s ease; }
.hero-inset:hover { transform: translateY(-8px) rotate(1deg); box-shadow: 0 22px 56px rgba(25,3,5,.46); }
.hero-inset img { height: 126px; object-fit: cover; object-position: 50% 44%; transition: transform .8s var(--ease-silk); }
.hero-inset:hover img { transform: scale(1.07); }
.hero-inset figcaption { padding: 10px 12px; color: #edd6a7; font: 700 10px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.hero__scroll { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; color: rgba(255,245,224,.55); text-decoration: none; font: 700 9px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .19em; }
.hero__scroll i { font-style: normal; font-size: 18px; animation: scroll-nudge 1.8s ease-in-out infinite; }

.hero__copy > * { opacity: 0; animation: hero-rise .8s var(--ease-silk) both; }
.hero__copy > .temple-name { animation-delay: .18s; }
.hero__copy > h1 { animation-delay: .28s; }
.hero__copy > .hero__lead { animation-delay: .4s; }
.hero__copy > .hero__actions { animation-delay: .52s; }
.hero__visual { opacity: 0; animation: hero-visual-in 1.15s var(--ease-silk) .24s both; }

/* Invitation */
.invitation { position: relative; overflow: hidden; background: linear-gradient(180deg, #fffdf8, #f8efdf); }
.invitation::before { content: ""; position: absolute; width: 520px; height: 520px; left: -260px; top: 40px; border: 1px solid rgba(201,148,59,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(201,148,59,.025), 0 0 0 140px rgba(201,148,59,.018); animation: paper-ring-drift 18s ease-in-out infinite alternate; }
.invitation__grid { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 50px; align-items: center; }
.section-sign { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 470px; border-right: 1px solid var(--line); color: #a5742b; font: 800 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .25em; writing-mode: vertical-rl; }
.section-sign b { font-size: 38px; font-weight: 400; color: #c18c3b; writing-mode: initial; animation: ornament-breathe 4.5s ease-in-out infinite; }
.paper-card { position: relative; max-width: 820px; padding: 58px clamp(34px, 5vw, 72px); border: 1px solid rgba(150,103,46,.16); border-radius: 22px; background: rgba(255,253,247,.85); box-shadow: 0 24px 65px rgba(74,43,24,.08); transition: transform .65s var(--ease-silk), box-shadow .65s ease, border-color .65s ease; }
.paper-card:hover { transform: translateY(-7px); border-color: rgba(150,103,46,.3); box-shadow: 0 34px 82px rgba(74,43,24,.14); }
.paper-card::before, .paper-card::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: rgba(177,127,54,.42); }
.paper-card::before { left: 15px; top: 15px; border-left: 1px solid; border-top: 1px solid; }
.paper-card::after { right: 15px; bottom: 15px; border-right: 1px solid; border-bottom: 1px solid; }
.kicker { margin: 0 0 16px; color: #9a6927; font: 850 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .24em; }
.paper-card h2, .section-heading h2, .ceremony__copy h2, .final-cta h2 { margin: 0; font-size: clamp(36px, 4.7vw, 59px); line-height: 1.1; letter-spacing: -.028em; }
.paper-card h2 em { color: var(--wine-700); font-style: italic; font-weight: 500; }
.rule { display: flex; align-items: center; gap: 12px; margin: 30px 0; color: #b37d31; }
.rule span { width: 76px; height: 1px; background: var(--line); }
.rule b { animation: ornament-spin 9s linear infinite; }
.paper-card > p:not(.kicker) { margin: 18px 0 0; color: var(--ink-700); font-size: 18px; line-height: 1.82; }
.paper-card strong { color: var(--wine-700); }
.inline-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 7px; color: var(--wine-700); border-bottom: 1px solid rgba(125,34,30,.3); text-decoration: none; font: 800 14px/1.2 ui-sans-serif, system-ui, sans-serif; transition: color .3s ease, border-color .3s ease; }
.inline-cta span { font-size: 18px; transition: transform .35s var(--ease-spring); }
.inline-cta:hover { color: var(--wine-900); border-color: currentColor; }
.inline-cta:hover span { transform: translateX(6px); }

/* Blessing */
.blessing { position: relative; overflow: hidden; background: #f2e7d5; }
.blessing::before { content: ""; position: absolute; width: 440px; height: 440px; right: -250px; top: -210px; border: 1px solid rgba(164,111,41,.11); border-radius: 50%; box-shadow: 0 0 0 58px rgba(164,111,41,.022); animation: blessing-ring-drift 20s ease-in-out infinite alternate; }
.section-heading { max-width: 750px; margin: 0 auto 47px; text-align: center; }
.section-heading > p:last-child { max-width: 600px; margin: 18px auto 0; color: var(--ink-500); font-size: 17px; line-height: 1.7; }
.blessing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blessing-card { position: relative; overflow: hidden; min-height: 300px; padding: 34px 30px 32px; border: 1px solid rgba(128,83,45,.13); border-radius: 18px; background: rgba(255,253,248,.72); box-shadow: 0 18px 44px rgba(73,45,27,.06); transition: transform .55s var(--ease-spring), box-shadow .55s ease, border-color .55s ease, background-color .55s ease; }
.blessing-card:hover { transform: translateY(-9px); border-color: rgba(178,126,49,.28); background: rgba(255,253,248,.92); box-shadow: 0 28px 62px rgba(73,45,27,.13); }
.blessing-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border: 1px solid rgba(178,126,49,.11); border-radius: 50%; box-shadow: 0 0 0 28px rgba(178,126,49,.025); transition: transform .8s var(--ease-silk); }
.blessing-card:hover::after { transform: translate(-12px, -12px) scale(1.12); }
.blessing-card__no { color: #b07d34; font: 850 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .15em; }
.blessing-card__icon { margin: 33px 0 23px; color: #bd8535; font-size: 36px; line-height: 1; animation: icon-breathe 4.8s ease-in-out infinite; transition: transform .45s var(--ease-spring), color .35s ease; }
.blessing-card:nth-child(2) .blessing-card__icon { animation-delay: -1.6s; }
.blessing-card:nth-child(3) .blessing-card__icon { animation-delay: -3.2s; }
.blessing-card:hover .blessing-card__icon { animation-play-state: paused; transform: scale(1.14) rotate(8deg); color: var(--wine-600); }
.blessing-card h3 { margin: 0; color: #4a211c; font-size: 24px; }
.blessing-card p { margin: 13px 0 0; color: var(--ink-500); font-size: 16px; line-height: 1.7; }

/* Ceremony */
.ceremony { position: relative; overflow: hidden; color: #fff5e4; background: linear-gradient(135deg, #4a0d12, #681718 58%, #571116); }
.ceremony::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 10%, rgba(223,181,95,.12), transparent 32%); animation: ceremony-light 13s ease-in-out infinite alternate; }
.ceremony::after { content: ""; position: absolute; z-index: 0; top: -30%; left: -18%; width: 24%; height: 170%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,226,151,.08), transparent); transform: translateX(-120%) skewX(-18deg); animation: ceremony-sheen 11s ease-in-out infinite; }
.ceremony__layout { position: relative; display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(46px, 7vw, 82px); align-items: center; }
.kicker--light { color: #e6c06f; }
.ceremony__copy p:not(.kicker) { margin: 22px 0 0; color: rgba(255,244,221,.74); font-size: 17px; line-height: 1.75; }
.ceremony__quote { margin-top: 42px; padding: 20px 0 0 22px; border-left: 1px solid rgba(231,195,117,.38); color: #e8c477; font-size: 25px; line-height: 1.5; font-style: italic; transition: transform .55s var(--ease-spring), color .4s ease; }
.ceremony__quote:hover { transform: translateX(8px); color: #f1d48a; }
.ceremony__gallery { display: grid; grid-template-columns: 1.02fr .98fr; grid-template-rows: 255px 255px; gap: 14px; }
.photo { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(240,210,149,.16); border-radius: 15px; background: #421013; box-shadow: 0 22px 52px rgba(20,2,5,.23); transition: transform .55s var(--ease-spring), box-shadow .55s ease, border-color .55s ease; }
.photo::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(135deg, rgba(245,212,137,.17), transparent 42%); transition: opacity .55s ease; }
.photo img { height: 100%; object-fit: cover; transition: transform .9s var(--ease-silk); }
.photo:hover { transform: translateY(-6px); border-color: rgba(240,210,149,.4); box-shadow: 0 30px 68px rgba(20,2,5,.36); }
.photo:hover::after { opacity: 1; }
.photo:hover img { transform: scale(1.055); }
.photo--tall { grid-row: 1 / 3; }
.photo--tall img { object-position: 50% 36%; }
.photo--wide img { object-position: 50% 43%; }
.photo--small img { object-position: 50% 42%; }

/* Final */
.final-cta { position: relative; overflow: hidden; background: linear-gradient(180deg, #fffdf8, #f7ecda); }
.final-cta::before { content: ""; position: absolute; width: 680px; height: 680px; border: 1px solid rgba(190,137,57,.09); border-radius: 50%; left: 50%; top: -430px; transform: translateX(-50%); box-shadow: 0 0 0 90px rgba(190,137,57,.022), 0 0 0 180px rgba(190,137,57,.016); animation: final-ring-drift 20s ease-in-out infinite alternate; }
.final-cta__card { position: relative; max-width: 920px; padding: 70px clamp(28px, 7vw, 88px); border: 1px solid rgba(134,87,48,.13); border-radius: 28px; background: rgba(255,253,248,.82); box-shadow: var(--shadow); text-align: center; transition: transform .65s var(--ease-silk), box-shadow .65s ease, border-color .65s ease; }
.final-cta__card:hover { transform: translateY(-7px); border-color: rgba(134,87,48,.28); box-shadow: 0 36px 94px rgba(54,26,17,.2); }
.final-cta__lotus { margin-bottom: 20px; color: #c18a39; font-size: 45px; line-height: 1; animation: lotus-breathe 4.5s ease-in-out infinite; transition: transform .55s var(--ease-spring); }
.final-cta__card:hover .final-cta__lotus { transform: scale(1.12) rotate(8deg); }
.final-cta h2 { max-width: 760px; margin: 0 auto; }
.final-cta .cta--wine { margin-top: 30px; }
.final-cta__foot { margin-top: 30px; color: #a27331; font: 800 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .17em; }
.site-footer { padding: 25px 0; color: #8a776d; background: #f2e7d5; font: 600 11px/1.6 ui-sans-serif, system-ui, sans-serif; }
.site-footer .shell { display: flex; justify-content: space-between; gap: 20px; }
.mobile-cta { display: none; }
.noscript-pixel { display: none; }

/* Motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .78s var(--ease-silk), transform .78s var(--ease-silk); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.blessing__grid .reveal:nth-child(2), .ceremony__gallery .reveal:nth-child(2) { transition-delay: .1s; }
.blessing__grid .reveal:nth-child(3), .ceremony__gallery .reveal:nth-child(3) { transition-delay: .2s; }

@keyframes mobile-cta-pulse {
  0%, 100% { box-shadow: 0 11px 30px rgba(83,20,22,.24), 0 0 0 0 rgba(140,37,33,0); }
  50% { box-shadow: 0 17px 44px rgba(83,20,22,.48), 0 0 0 9px rgba(140,37,33,.14); }
}

@keyframes mobile-cta-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes mobile-cta-shimmer {
  0%, 22% { opacity: 0; transform: translateX(-170%) skewX(-18deg); }
  35% { opacity: .72; }
  49%, 100% { opacity: 0; transform: translateX(300%) skewX(-18deg); }
}

@keyframes mobile-cta-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

@keyframes mobile-cta-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes lotus-fall {
  0% { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(-18deg) scale(.62); }
  10% { opacity: .36; }
  28% { opacity: .86; transform: translate3d(calc(var(--fall-x) * .18), 20vh, 0) rotate(26deg) scale(.86); }
  52% { opacity: .94; transform: translate3d(calc(var(--fall-x) * .52), 55vh, 0) rotate(88deg) scale(1); }
  76% { opacity: .68; transform: translate3d(calc(var(--fall-x) * .82), 88vh, 0) rotate(154deg) scale(.88); }
  91% { opacity: .18; }
  100% { opacity: 0; transform: translate3d(var(--fall-x), 122vh, 0) rotate(var(--fall-spin)) scale(.64); }
}

@keyframes hero-grid-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(24px, 18px, 0) rotate(1deg); }
}

@keyframes halo-orbit {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-22px, 16px, 0) rotate(7deg); }
}

@keyframes halo-breathe {
  from { transform: scale(.94); opacity: .72; }
  to { transform: scale(1.08); opacity: 1; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-visual-in {
  from { opacity: 0; transform: translate3d(34px, 20px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes image-glint {
  0%, 22% { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
  34% { opacity: .9; }
  48%, 100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes caption-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(7px); opacity: .95; }
}

@keyframes paper-ring-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(24px, 18px, 0) rotate(9deg); }
}

@keyframes ornament-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .76; }
  50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
}

@keyframes ornament-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes blessing-ring-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-20px, 24px, 0) rotate(-8deg); }
}

@keyframes icon-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

@keyframes ceremony-light {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  to { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: 1; }
}

@keyframes ceremony-sheen {
  0%, 28% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  42% { opacity: .7; }
  56%, 100% { transform: translateX(620%) skewX(-18deg); opacity: 0; }
}

@keyframes final-ring-drift {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(-10deg); }
}

@keyframes lotus-breathe {
  0%, 100% { transform: translateY(0) scale(1); opacity: .78; }
  50% { transform: translateY(-5px) scale(1.08); opacity: 1; }
}

@media (max-width: 960px) {
  .hero { min-height: auto; }
  .hero__grid { min-height: auto; grid-template-columns: 1fr .8fr; gap: 42px; padding: 78px 0 92px; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .hero__actions p { max-width: 420px; }
  .hero__visual { padding-left: 18px; }
  .hero-inset { width: 170px; }
  .hero-inset img { height: 100px; }
  .invitation__grid { grid-template-columns: 100px 1fr; gap: 30px; }
  .ceremony__layout { grid-template-columns: 1fr; }
  .ceremony__copy { max-width: 680px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 30px, 660px); }
  .section { padding: 72px 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 46px; padding: 40px 0 82px; }
  .hero__copy { max-width: none; }
  .temple-name { margin-top: 0; }
  .hero__lead { font-size: 18px; }
  .hero__actions { gap: 15px; }
  .hero__visual { width: min(100%, 520px); justify-self: center; padding-left: 26px; }
  .hero-inset { width: 190px; }
  .hero__scroll { display: none; }
  .invitation__grid { grid-template-columns: 1fr; }
  .section-sign { display: none; }
  .paper-card { padding: 44px 30px; }
  .blessing__grid { grid-template-columns: 1fr; }
  .blessing-card { min-height: 0; }
  .ceremony__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 220px; }
  .photo--tall { grid-column: 1 / 3; grid-row: auto; }
  .site-footer .shell { flex-direction: column; align-items: center; text-align: center; gap: 5px; }
}

@media (max-width: 560px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .section { padding: 60px 0; }
  .hero__grid { padding-top: 28px; gap: 37px; }
  .temple-name { margin-top: 0; font-size: 13px; letter-spacing: .09em; }
  .hero h1 { font-size: clamp(28px, 9.2vw, 36px); }
  .hero__lead { margin-top: 22px; font-size: 17px; line-height: 1.65; }
  .hero__actions { margin-top: 24px; }
  .cta--gold { width: 100%; }
  .hero__visual { padding: 0 0 42px 18px; }
  .hero-card { border-radius: 180px 180px 24px 24px; }
  .hero-card::before { border-radius: 172px 172px 18px 18px; }
  .hero-card__caption { left: 25px; right: 25px; font-size: 18px; }
  .hero-card__badge { top: clamp(84px, 17%, 110px); right: 24px; }
  .hero-inset { width: 154px; border-width: 4px; }
  .hero-inset img { height: 91px; }
  .hero-inset figcaption { padding: 8px 9px; font-size: 8px; }
  .paper-card { padding: 38px 23px; border-radius: 18px; }
  .paper-card h2, .section-heading h2, .ceremony__copy h2, .final-cta h2 { font-size: 36px; }
  .paper-card > p:not(.kicker) { font-size: 16.5px; }
  .blessing-card { padding: 29px 25px; }
  .ceremony__gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  .photo--tall { grid-column: auto; height: 410px; }
  .photo--wide { height: 235px; }
  .photo--small { display: none; }
  .final-cta__card { padding: 52px 23px; border-radius: 22px; }
  .cta--wine { width: 100%; }
  .mobile-cta {
    display: block;
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255,253,248,.9);
    border-top: 1px solid rgba(94,55,35,.11);
    backdrop-filter: blur(14px);
  }
  .mobile-cta a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-radius: 999px;
    color: #fff7e7;
    background: linear-gradient(135deg, #8c2521, #5d1216);
    box-shadow: 0 11px 30px rgba(83,20,22,.22);
    text-decoration: none;
    font: 800 14px/1 ui-sans-serif, system-ui, sans-serif;
    transition: transform .18s ease, filter .18s ease;
    animation: mobile-cta-breathe 2.8s ease-in-out infinite, mobile-cta-pulse 2.8s ease-in-out infinite;
    will-change: transform, box-shadow;
  }
  .mobile-cta a::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -65%;
    left: -32%;
    width: 34%;
    height: 230%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 12%, rgba(255,255,255,.52) 48%, transparent 84%);
    transform: translateX(-170%) skewX(-18deg);
    animation: mobile-cta-shimmer 3.8s ease-in-out infinite;
  }
  .mobile-cta a > * { position: relative; z-index: 1; }
  .mobile-cta a:hover { filter: brightness(1.04); }
  .mobile-cta a:active { animation: none; transform: scale(.985); filter: brightness(.98); }
  .mobile-cta .cta__zalo { transition: transform .18s ease; animation: mobile-cta-badge 2.8s ease-in-out infinite; }
  .mobile-cta .cta__arrow { opacity: .9; animation: mobile-cta-arrow 1.4s ease-in-out infinite; }
  .mobile-cta a:hover .cta__zalo { transform: scale(1.05); }
  .mobile-cta .cta__zalo { width: 26px; height: 26px; }
  .flower-field { opacity: .58; }
  .floating-flower--three, .floating-flower--seven { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .flower-field { display: none; }
  .hero__copy > *, .hero__visual { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}