@import url('/images/templates/lunaria-aquarelle/fonts/fonts.css');
:root {
    --paper: #f3efe7;
    --ink: #292a29;
    --rose: #d64778;
    --gold: #e3bd37;
    --cyan: #2bc4c0;
    --blue: #506eb8;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
    display: grid;
    min-height: 100svh;
    place-items: center;
    overflow: hidden;
    background: #b9b7b2;
    font-family: Poppins, sans-serif;
}
button { font: inherit; }

.stage {
    position: relative;
    width: min(100vw, 62svh, 620px);
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 28px 100px rgba(46, 44, 39, .26);
    touch-action: none;
}
.paper, #dustCanvas, .grain, .scene, .split-wipe, .loading, .asset-tray { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper { z-index: 0; object-fit: cover; opacity: .92; }
#dustCanvas { z-index: 2; pointer-events: none; }
.scene { z-index: 3; overflow: hidden; opacity: 0; visibility: hidden; }

.ambient { position: absolute; z-index: 1; pointer-events: none; opacity: .08; filter: grayscale(1) blur(1.5px); }
.ambient img { display: block; width: 100%; }
.ambient-left { top: 5%; left: -34%; width: 64%; transform: rotate(-35deg); }
.ambient-right { right: -42%; bottom: -2%; width: 73%; transform: rotate(145deg); }

.grain {
    z-index: 20;
    pointer-events: none;
    opacity: .10;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
    animation: grain .46s steps(2) infinite;
}

/* Scene 1 */
.scene-intro { display: grid; place-items: center; }
.intro-strokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.paint-path, .ink-line, .scribble path, .time-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.paint-path { stroke-width: 13; opacity: .76; filter: url("#brushRough"); }
.paint-rose { stroke: var(--rose); }
.paint-cyan { stroke: var(--cyan); stroke-width: 10; }
.paint-gold { stroke: var(--gold); stroke-width: 10; }
.ink-line { stroke: rgba(39,40,39,.42); stroke-width: 1.2; }
.intro-copy { position: relative; z-index: 2; width: 80%; margin-top: -2%; text-align: center; }
.intro-small { margin: 0 0 13px; font: 400 clamp(10px,2.4vw,14px)/1.4 Cardo, serif; letter-spacing: .08em; }
.intro-script { margin: 0; font: 400 clamp(58px,15.5vw,90px)/.9 "Great Vibes", cursive; }
.intro-question { margin: 16px 0 0; font: 400 clamp(13px,3vw,18px)/1.4 Cardo, serif; letter-spacing: .08em; }
.split-word, .split-line { display: inline-block; }
.ink-drops { position: relative; z-index: 5; width: 1px; height: 1px; margin: 27px auto 0; overflow: visible; }
.ink-drops i { position: absolute; top: 0; left: 0; width: 7px; height: 14px; border-radius: 100% 0 100% 0; background: var(--ink); transform-origin: 100% 100%; filter: drop-shadow(0 2px 1px rgba(72,64,48,.08)); }
.ink-drops i:nth-child(3n+1) { width: 9px; height: 17px; background: var(--rose); }
.ink-drops i:nth-child(3n+2) { width: 6px; height: 12px; background: var(--gold); }
.ink-drops i:nth-child(3n) { width: 7px; height: 14px; background: var(--cyan); }
.ink-drops i:nth-child(5n) { width: 5px; height: 10px; background: #687569; }
.ink-drops i:nth-child(7n) { width: 10px; height: 18px; background: #333532; }
.ink-drops i:nth-child(11n) { width: 5px; height: 9px; background: #bd7188; }
.diagonal-wash { position: absolute; z-index: 1; inset: -12% -42%; transform: rotate(-26deg); pointer-events: none; }
.wash { position: absolute; left: 0; width: 130%; border-radius: 45%; filter: blur(10px); transform-origin: 0 50%; opacity: .28; mix-blend-mode: multiply; }
.wash-rose { top: 37%; height: 14%; background: linear-gradient(90deg, transparent, #ec92ab 12%, #d94b7b 54%, transparent 92%); }
.wash-gold { top: 49%; height: 10%; background: linear-gradient(90deg, transparent, #f6df6e 14%, #e9bb32 61%, transparent 94%); }
.wash-cyan { top: 58%; height: 7%; background: linear-gradient(90deg, transparent, #8ee6df 14%, #34c2bd 58%, transparent 90%); }

/* Scene 2 */
.scene-couple { text-align: center; }
.portrait { position: absolute; z-index: 5; top: 14%; width: 51%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; opacity: 0; }
.portrait img { position: absolute; top: 8%; width: 160%; height: 120%; max-width: none; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color; opacity: .42; }
.portrait-rose { left: 14%; }
.portrait-rose img { left: -20%; object-position: left center; }
.portrait-rose::after { background: #db426f; }
.portrait-gold { right: 13%; }
.portrait-gold img { left: -60%; object-position: right center; }
.portrait-gold::after { background: #edc935; }
.flora { position: absolute; z-index: 3; width: 92%; opacity: 0; will-change: transform, opacity, clip-path; }
.flora-rose { top: 10%; left: -24%; transform: rotate(-9deg); }
.flora-gold { top: 15%; right: -26%; transform: rotate(171deg); }
.couple-orbits span { position: absolute; z-index: 2; border: 1px solid rgba(59,58,56,.45); border-radius: 50%; opacity: 0; }
.orbit-one { top: 18%; left: 8%; width: 48%; aspect-ratio: 1; }
.orbit-two { top: 13%; right: 7%; width: 54%; aspect-ratio: 1; border-color: rgba(216,68,113,.48)!important; }
.orbit-three { top: 9%; left: 34%; width: 28%; aspect-ratio: 1; border-color: rgba(226,186,53,.55)!important; }
.scribble { position: absolute; z-index: 4; top: 22%; left: 5%; width: 31%; height: 39%; overflow: visible; }
.scribble path { stroke: rgba(42,42,40,.52); stroke-width: 1.4; }
.couple-copy { position: absolute; z-index: 7; top: 49%; left: 9%; width: 82%; }
.couple-copy h2 { margin: 0; font: 400 clamp(55px,15vw,88px)/.72 "Great Vibes", cursive; }
.couple-copy h2 span, .couple-copy h2 b { display: block; font-weight: 400; }
.couple-copy h2 b { margin: 9px 0 2px; color: var(--rose); font: 400 clamp(19px,5vw,27px)/1 Cardo, serif; }
.couple-copy p { margin: 24px 0 0; font: 400 clamp(9px,2.2vw,12px)/1.3 Cardo, serif; letter-spacing: .22em; text-transform: uppercase; }
.petals { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.petals i, .blue-specks i { position: absolute; display: block; border-radius: 70% 30% 65% 35%; }

/* transition */
.split-wipe { z-index: 12; visibility: hidden; pointer-events: none; }
.split-panel { position: absolute; right: 0; left: 0; height: 51%; background: rgba(247,244,236,.98); }
.split-top { top: 0; transform-origin: 50% 100%; }
.split-bottom { bottom: 0; transform-origin: 50% 0; }

/* Scene 3 */
.scene-together { display: grid; place-items: center; text-align: center; }
.sun-orb { position: absolute; z-index: 2; top: 10.5%; left: 50%; width: 43%; aspect-ratio: 1; transform: translateX(-50%); }
.sun-orb .orb-layer { position: absolute; display: block; opacity: 0; mix-blend-mode: multiply; }
.sun-orb img { object-fit: contain; filter: saturate(.9) contrast(.96); }
.orb-yellow { top: -4%; left: -4%; width: 91%; height: 91%; }
.orb-rose { top: 31%; left: 25%; width: 68%; height: 68%; }
.orb-outline { inset: 8% 7% -2% -2%; border: 1px solid rgba(183,143,47,.32); border-radius: 48% 52% 46% 54%; transform: rotate(-7deg); }
.round-branch-sway { position: absolute; z-index: 4; top: 11%; left: 25%; width: 72%; height: 28%; transform: translate3d(0,0,0) rotate(-1.8deg); transform-origin: 2.5% 96%; backface-visibility: hidden; will-change: transform; }
.round-branch { display: block; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 100% 0 0); backface-visibility: hidden; image-rendering: auto; }
.together-copy { position: relative; z-index: 6; width: 70%; margin-top: 9%; }
.together-copy h2 { margin: 0 0 19px; font: 400 clamp(61px,16vw,94px)/.85 "Great Vibes", cursive; }
.together-copy p { margin: 0; font: 400 clamp(13px,3vw,18px)/1.24 Cardo, serif; letter-spacing: .03em; }
.together-copy .split-line { display: block; }

/* Scene 4 */
.scene-time { text-align: center; }
.cobalt-bloom { position: absolute; z-index: 2; left: -28%; bottom: -5%; width: 112%; opacity: 0; transform-origin: 22% 82%; mix-blend-mode: multiply; }
.time-lines { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; }
.time-lines path { stroke: rgba(62,65,74,.34); stroke-width: 1.2; }
.time-copy { position: absolute; z-index: 6; top: 44%; right: 5%; width: 78%; padding: 22px 2px 18px; overflow: visible; text-align: right; }
.time-at { display: block; margin-right: 28%; font: 400 clamp(10px,2.3vw,13px)/1 Cardo, serif; letter-spacing: .14em; text-transform: uppercase; }
.time-copy h2 { margin: -2px 0 4px; padding: .18em .05em .13em; overflow: visible; font: 400 clamp(55px,14vw,82px)/1.05 "Great Vibes", cursive; white-space: nowrap; }
.time-copy p { margin: 0; font: 400 clamp(10px,2.4vw,13px)/1.4 Cardo, serif; letter-spacing: .1em; }
.blue-specks { position: absolute; z-index: 5; inset: 0; }
.blue-specks i { background: rgba(53,84,160,.6); }

/* preview tools */
.preview-meta { position: absolute; z-index: 30; top: max(15px,env(safe-area-inset-top)); left: 17px; display: flex; gap: 11px; color: rgba(50,51,48,.53); font-size: 7px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.actions { position: absolute; z-index: 31; top: max(12px,env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; }
.actions button, .tray-close { border: 1px solid rgba(54,54,49,.2); border-radius: 999px; padding: 8px 11px; color: #484a47; background: rgba(249,247,241,.74); font-size: 8px; cursor: pointer; backdrop-filter: blur(9px); }
.timeline { position: absolute; z-index: 32; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(40,40,37,.08); }
.timeline span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--rose),var(--gold),var(--blue)); transform: scaleX(0); transform-origin: 0 50%; }
.loading { z-index: 40; display: grid; place-content: center; justify-items: center; gap: 14px; background: #f4f0e8; transition: opacity .5s ease, visibility .5s ease; }
.loading.is-hidden { opacity: 0; visibility: hidden; }
.loading span { width: 29px; height: 29px; border: 2px solid rgba(47,48,45,.12); border-top-color: var(--rose); border-radius: 50%; animation: spin .8s linear infinite; }
.loading p { margin: 0; color: rgba(48,48,45,.58); font: 400 9px/1 Poppins,sans-serif; letter-spacing: .14em; }
.asset-tray { z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: auto; padding: 62px 13px 18px; opacity: 0; visibility: hidden; background: rgba(240,236,228,.96); backdrop-filter: blur(15px); transition: .3s ease; }
.asset-tray.is-open { opacity: 1; visibility: visible; }
.asset-tray figure { display: grid; min-height: 190px; place-items: center; margin: 0; padding: 9px; border: 1px solid rgba(53,54,50,.12); border-radius: 16px; background: rgba(255,255,255,.52); }
.asset-tray figure img { max-width: 100%; max-height: 160px; object-fit: contain; }
.asset-tray figure:first-of-type { grid-column: span 2; min-height: 330px; }
.asset-tray figure:first-of-type img { max-height: 290px; }
.asset-tray figcaption { align-self: end; color: rgba(45,46,42,.65); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.tray-close { position: absolute; top: 14px; right: 13px; }

@keyframes grain { 0%{transform:translate(-2%,2%)} 33%{transform:translate(2%,-3%)} 66%{transform:translate(-3%,-1%)} 100%{transform:translate(-2%,2%)} }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
.is-embed body { background: var(--paper); }
.is-embed .stage { box-shadow: none; }
.is-embed .preview-meta, .is-embed .actions, .is-embed .timeline, .is-embed .asset-tray { display: none !important; }

/* Embedded version: natural parent scrolling, stable portrait canvas. */
.is-embed .stage {width:min(100vw,760px);height:100%;min-height:100svh;touch-action:pan-y}
.is-embed body{display:block}
.is-embed .scene{container-type:inline-size}
.is-embed .couple-copy h2 {font-size:clamp(32px,12cqw,72px);line-height:1.05;overflow-wrap:anywhere}
.is-embed .couple-copy {top:47%;padding:0 6px}
.is-embed .intro-script {font-size:clamp(40px,14cqw,85px);line-height:1.2}
.is-embed .time-copy h2{font-family:Manrope,sans-serif;font-size:clamp(24px,8cqw,48px);white-space:normal;line-height:1.6;letter-spacing:.02em}
.is-embed .loading.is-hidden span{animation:none}
.is-embed .grain{animation-play-state:paused}
.is-embed.is-running .grain{animation-play-state:running}