/* Variant A · Temple tank at sunset.
   The home screen is a layered scene: sky → sun → gopuram → tree and tank, so the scroll can move
   the camera under the tree towards the gopuram. */

/* ---------- gate: the wide painting, then a push-in towards the gopuram ---------- */
.v-a .gate { background: #1d120c; color: #fff6e2; }
.v-a .gate__scene { position: absolute; inset: 0; }
.v-a .gate__img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; transform-origin: 49% 56%; }
.v-a .gate__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 12, 6, 0.72) 0%, rgba(24, 12, 6, 0.1) 34%, rgba(24, 12, 6, 0.08) 58%, rgba(24, 12, 6, 0.85) 100%); }
.v-a .gate__content { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; text-align: center; padding: calc(60px + env(safe-area-inset-top, 0px)) 22px calc(36px + env(safe-area-inset-bottom, 0px)); }
.v-a .gate__top { color: var(--gold-hi); }
.v-a .gate__logo { width: 100%; margin-top: 18px; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)); }
.v-a .gate__date { margin-top: 6px; font: italic 400 19px/1.3 var(--serif); color: #fff1d6; }
.v-a .gate__cta { align-self: end; }
.v-a .gate__quiet { color: #fff1d6; }
.v-a .gate__flash { position: absolute; inset: 0; background: radial-gradient(circle at 49% 52%, #fffaf0 0%, #fbe1a6 35%, #f6b872 70%, #f39a55 100%); opacity: 0; pointer-events: none; }

/* ---------- home scene ---------- */
.scene { position: relative; }
.scene__pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: #f3b06a; }
.scene__sky, .scene__dusk { position: absolute; inset: 0; }
.scene__sky { background: linear-gradient(180deg, #4e5f9c 0%, #9a7fae 18%, #e2a3a0 34%, #f5bf86 50%, #fad18c 62%, #f6ad62 80%, #ef9450 100%); }
.scene__dusk { background: linear-gradient(180deg, #2b1b3d 0%, #6b3e66 26%, #d77a68 52%, #f3a85c 74%, #f08b47 100%); opacity: 0; }
.scene__clouds i { position: absolute; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 214, 0.42), rgba(255, 236, 214, 0)); animation: drift 46s linear infinite; }
.scene__clouds i:nth-child(1) { top: 9%; left: -10%; width: 55%; }
.scene__clouds i:nth-child(2) { top: 17%; left: 40%; width: 48%; height: 12px; animation-duration: 60s; animation-delay: -20s; opacity: 0.7; }
.scene__clouds i:nth-child(3) { top: 26%; left: 5%; width: 38%; height: 10px; animation-duration: 52s; animation-delay: -35s; opacity: 0.55; }
@keyframes drift { from { transform: translateX(-30%); } to { transform: translateX(60%); } }

/* the stage uses the tree painting's own proportions so everything inside lines up with it */
.scene__stage { position: absolute; left: -9%; width: 118%; bottom: -1%; aspect-ratio: 1147 / 1372; }
.scene__sun { position: absolute; left: 68%; top: 54%; width: 70%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fffbe8 0 5%, rgba(255, 232, 160, 0.9) 10%, rgba(255, 198, 110, 0.45) 28%, rgba(255, 170, 80, 0) 62%); }
.scene__gopuram { position: absolute; left: 33.5%; width: 43%; bottom: 33%; transform-origin: 50% 100%; filter: saturate(0.92) brightness(0.98); }
.scene__tree { position: absolute; inset: 0; transform-origin: 56% 46%; }
.scene__tree img { width: 100%; height: 100%; }
.lamp { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 220, 130, 0.95) 0%, rgba(255, 176, 70, 0.45) 30%, rgba(255, 150, 40, 0) 68%); mix-blend-mode: screen; animation: flicker 2.4s ease-in-out infinite alternate; }
.lamp--1 { left: 18.6%; top: 35.6%; }
.lamp--2 { left: 26.4%; top: 38.6%; width: 17%; animation-delay: -1.1s; }
@keyframes flicker { 0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.92); } 40% { opacity: 1; } 60% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.98); } }
.spark { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 10px 3px rgba(255, 222, 140, 0.9); opacity: 0; animation: twinkle 3.2s var(--d) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }

.scene__petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene__title { position: absolute; left: 0; right: 0; top: calc(52px + env(safe-area-inset-top, 0px)); padding: 0 16px; text-align: center; }
.scene__title .label { color: #fff7e4; text-shadow: 0 1px 10px rgba(70, 25, 15, 0.6); }
.scene__logo { width: 100%; margin: 4px auto 0; filter: drop-shadow(0 3px 10px rgba(70, 30, 10, 0.5)); }
.scene__date { margin-top: 2px; font: 500 14px/1 var(--sans); letter-spacing: 0.34em; color: #fff7e4; text-shadow: 0 1px 10px rgba(70, 25, 15, 0.7); }
.scene__hint { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 500 10px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: #fff7e4; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.scene__hint i { width: 1px; height: 30px; background: linear-gradient(#fff7e4, transparent); animation: drip 2s var(--ease-io) infinite; transform-origin: 50% 0; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: 50% 0; } 51% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
.scene__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(251, 245, 234, 0), var(--paper) 85%); opacity: 0; }

/* ---------- invocation sits on paper, warmed by the sunset above ---------- */
.v-a .invocation { background: linear-gradient(180deg, var(--paper), var(--paper-2)); padding-top: 40px; }

/* ---------- couple portrait opens as a circle ---------- */
.v-a .portrait img { transform-origin: 50% 30%; }

/* ---------- story: paintings open inside temple arches ---------- */
.v-a .story { background: var(--paper-2); }
.arch { margin: 40px auto 0; width: 88%; }
.arch__win { position: relative; aspect-ratio: 3 / 4.1; border-radius: 999px 999px 18px 18px; overflow: hidden; background: linear-gradient(180deg, #f8e7c6, #f1d2a0); box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 7px var(--paper-2), 0 0 0 8px var(--line), 0 30px 60px -30px rgba(58, 26, 20, 0.65); }
.arch__win img { width: 100%; height: 100%; object-fit: cover; }
.arch figcaption { margin-top: 22px; font: italic 400 22px/1.2 var(--display); color: var(--fg); }
.arch figcaption .script { display: block; font-size: 50px; line-height: 1; color: var(--accent); }

/* ---------- venue ---------- */
.v-a .venue { background: linear-gradient(180deg, var(--paper), #f8e5c4 70%, var(--paper)); }

/* ---------- finale: the sunset painting fades into the paper ---------- */
.v-a .finale { padding-top: 0; }
.v-a .finale__art { position: relative; margin: 0 calc(-1 * var(--pad)) -90px; overflow: hidden; }
.v-a .finale__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 64%; }
.v-a .finale__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 0%, rgba(251, 245, 234, 0) 16%, rgba(251, 245, 234, 0) 58%, var(--paper) 96%); }
.v-a .finale__logo { position: relative; z-index: 1; }

/* ---------- the opening stickers: die-cut paintings of the couple slap onto the screen ---------- */
.v-a .stickers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.v-a .sticker { position: absolute; opacity: 0; filter: drop-shadow(0 16px 20px rgba(30, 12, 4, 0.45)) drop-shadow(0 2px 3px rgba(30, 12, 4, 0.35)); will-change: transform; }
.v-a .sticker--couple { left: 5%; top: 11%; width: 58%; }
.v-a .sticker--scooter { right: 2%; top: 37%; width: 44%; }
.v-a .stickers__note { position: absolute; left: 12px; right: 12px; bottom: calc(10% + env(safe-area-inset-bottom, 0px)); text-align: center; font: 400 clamp(36px, 10.5vw, 44px)/1.15 var(--script); color: #fff4dc; text-shadow: 0 2px 16px rgba(60, 20, 8, 0.8); text-wrap: balance; opacity: 0; }
.v-a .stickers__note span { font: italic 400 0.5em/1 var(--display); padding: 0 0.25em; vertical-align: 0.25em; }
.v-a .gate__burst { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.v-a .gate__flash { z-index: 3; }

/* ---------- the stickers stay on the home scene ---------- */
.v-a .home-stickers { position: absolute; inset: 0; pointer-events: none; }
.v-a .hs { position: absolute; opacity: 0; transform: rotate(var(--r)); }
.v-a .hs--couple { --r: -5deg; left: 2%; bottom: 7%; width: 45%; }
.v-a .hs--scooter { --r: 7deg; right: 2%; bottom: 12%; width: 34%; }
.v-a .hs .shine { filter: drop-shadow(0 12px 16px rgba(40, 14, 4, 0.42)) drop-shadow(0 2px 3px rgba(40, 14, 4, 0.3)); }
.v-a .hs.is-live .shine { animation: bob 4.6s ease-in-out infinite alternate; }
.v-a .hs--scooter.is-live .shine { animation-duration: 3.7s; }
@keyframes bob { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-8px) rotate(1.4deg); } }
.v-a .stickers { z-index: 4; }
.v-a .scene__hint { left: 57%; }