/* ==========================================================
   DInvite — Tema "Aurora" (koleksi Modern)
   Biru malam pekat dengan cahaya aurora (lavender · merah muda · toska)
   yang bergerak perlahan, kartu kaca buram bertepi pelangi lembut,
   dan huruf Bodoni miring. Animasi halus; dimatikan otomatis bila
   perangkat meminta gerak minimal (prefers-reduced-motion).
   ========================================================== */
@property --au-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.t-aurora {
    --bg: #0b0c16; --bg-2: rgba(255,255,255,.025); --card: rgba(255,255,255,.05); --ink: #eef0fb; --muted: #a9aecb;
    --accent: #e7cfa2; --accent-2: #f4e4c4; --on-accent: #0b0c16; --line: rgba(231,207,162,.22);
    --hero-rgb: 11,12,22; --tint-a: .62; --hero-ink: #f7f5ff;
    --au-violet: 124,108,255; --au-pink: 255,122,182; --au-teal: 63,211,198;
    --iri: linear-gradient(110deg, #f4e4c4 0%, #ffb3d5 26%, #b9adff 52%, #7fe6da 78%, #f4e4c4 100%);
    --glass-edge: linear-gradient(140deg, rgba(244,228,196,.55), rgba(185,173,255,.22) 38%, rgba(255,255,255,.05) 62%, rgba(127,230,218,.35));
    --serif-d: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
    color-scheme: dark;
    background: #0b0c16;
}

/* ---------- Latar aurora (tetap di tempat, bergerak perlahan) ---------- */
.t-aurora::before {
    content: ''; position: fixed; inset: -30vmax; z-index: -2; pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(var(--au-violet), .42), transparent) 18% 22% / 62vmax 62vmax no-repeat,
        radial-gradient(closest-side, rgba(var(--au-pink), .26), transparent) 82% 30% / 56vmax 56vmax no-repeat,
        radial-gradient(closest-side, rgba(var(--au-teal), .22), transparent) 46% 88% / 70vmax 70vmax no-repeat;
    animation: auDrift 26s ease-in-out infinite alternate;
    will-change: transform;
}
/* Bintang halus yang berkelip */
.t-aurora::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background:
        radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%),
        radial-gradient(1px 1px at 72% 12%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 64%, #fff, transparent 60%),
        radial-gradient(1px 1px at 88% 58%, #fff, transparent 60%),
        radial-gradient(1px 1px at 22% 86%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 58% 34%, #fff, transparent 60%),
        radial-gradient(1px 1px at 92% 90%, #fff, transparent 60%),
        radial-gradient(1px 1px at 6% 52%, #fff, transparent 60%);
    animation: auTwinkle 5s ease-in-out infinite alternate;
}
@keyframes auDrift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(4vmax, -3vmax, 0) rotate(7deg) scale(1.05); }
    100% { transform: translate3d(-3vmax, 2.5vmax, 0) rotate(-6deg) scale(1.1); }
}
@keyframes auTwinkle { from { opacity: .25; } to { opacity: .7; } }
@keyframes auSpin { to { --au-a: 360deg; transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes auShine { to { background-position: 200% center; } }
@keyframes auSweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes auRing { to { --au-a: 360deg; } }
@keyframes auChar { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes auFloat {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--dx, 10px), -42vh, 0) scale(1); }
}
@keyframes auPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231,207,162,0); } 50% { box-shadow: 0 0 22px -4px rgba(231,207,162,.55); } }

.t-aurora .page { background: transparent; box-shadow: none; }
.t-aurora .sec--tint { background: linear-gradient(180deg, transparent, rgba(255,255,255,.028) 18%, rgba(255,255,255,.028) 82%, transparent); }

/* ---------- Huruf ---------- */
.t-aurora .names { font-family: var(--serif-d); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--hero-ink); }
.t-aurora .names i {
    font-family: var(--serif-d); font-style: italic; font-weight: 400;
    background: var(--iri); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: auShine 7s linear infinite;
}
.t-aurora .cover .names { font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1.1; }
.t-aurora .names--md { font-size: 2rem; color: var(--ink); }
.t-aurora .kicker {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .5em; text-indent: .5em; text-shadow: none;
    background: var(--iri); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: auShine 8s linear infinite;
}
.t-aurora .cover__date, .t-aurora .hero__date, .t-aurora .aside__date { font-family: var(--serif-d); font-style: italic; font-weight: 400; letter-spacing: .02em; }
.t-aurora .cover__to strong { font-family: var(--serif-d); font-weight: 500; font-style: italic; }
.t-aurora .sec__title { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: 2.25rem; letter-spacing: -.01em; color: var(--ink); }
.t-aurora .sec__title::after {
    content: ''; display: block; width: 76px; height: 1px; margin: 1rem auto 0; background: var(--iri);
    transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2,.7,.2,1) .35s;
}
.t-aurora .is-visible .sec__title::after, .t-aurora .sec:not(.reveal) .sec__title::after { transform: scaleX(1); }
.t-aurora .quote { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: 1.18rem; line-height: 1.75; color: var(--ink); }
.t-aurora .ornament { font-size: 0; margin-bottom: 1.1rem; }
.t-aurora .ornament::before {
    content: '✦'; font-size: 1.5rem;
    background: var(--iri); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: auShine 6s linear infinite;
}
.t-aurora .lead-txt, .t-aurora .person__parents, .t-aurora .story { color: var(--muted); }
.t-aurora .amp { font-family: var(--serif-d); font-style: italic; background: var(--iri); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: auShine 7s linear infinite; }

/* ---------- Sampul: cahaya bergerak + cincin pelangi berputar ---------- */
.t-aurora .cover, .t-aurora .aside, .t-aurora .hero {
    background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, #0b0c16;
    overflow: hidden;
}
.t-aurora .cover::before, .t-aurora .aside::before, .t-aurora .hero::before {
    content: ''; position: absolute; inset: -30%; border: 0; border-radius: 0; opacity: 1; pointer-events: none; z-index: 0;
    background:
        radial-gradient(closest-side, rgba(var(--au-violet), .5), transparent) 25% 25% / 70% 60% no-repeat,
        radial-gradient(closest-side, rgba(var(--au-pink), .32), transparent) 78% 38% / 60% 55% no-repeat,
        radial-gradient(closest-side, rgba(var(--au-teal), .3), transparent) 45% 82% / 75% 60% no-repeat;
    mix-blend-mode: screen;
    animation: auDrift 18s ease-in-out infinite alternate;
}
.t-aurora .cover::after, .t-aurora .aside::after {
    content: ''; position: absolute; inset: auto; left: 50%; top: 50%; width: min(82vmin, 470px); height: min(82vmin, 470px);
    transform: translate(-50%, -50%); border: 0; border-radius: 50%; opacity: .75; pointer-events: none; z-index: 0;
    background: conic-gradient(from 0deg, transparent 0 8%, rgba(244,228,196,.9) 16%, transparent 30%, rgba(185,173,255,.8) 48%, transparent 62%, rgba(127,230,218,.75) 80%, transparent 92%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
            mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    animation: auSpin 22s linear infinite;
}
.t-aurora .cover__inner, .t-aurora .aside__inner, .t-aurora .hero__inner { position: relative; z-index: 2; }
.t-aurora .cover__inner { animation: none; }
.t-aurora .cover { transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; }
.t-aurora .cover.is-open { transform: scale(1.12); opacity: 0; filter: blur(14px); }

/* Nama muncul huruf demi huruf (dipecah oleh assets/js/themes/aurora.js) */
.t-aurora .au-ch { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.35em); animation: auChar 1.2s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.35s + var(--i, 0) * 55ms); }
.t-aurora .au-sp { display: inline-block; width: .28em; }
.t-aurora .names i.au-ch { margin: 0 .12em; animation-name: auChar, auShine; animation-duration: 1.2s, 7s; animation-timing-function: cubic-bezier(.2,.7,.2,1), linear; animation-iteration-count: 1, infinite; animation-fill-mode: forwards, none; animation-delay: calc(.35s + var(--i, 0) * 55ms), 0s; }
.t-aurora .cover .kicker, .t-aurora .cover__date, .t-aurora .cover__to, .t-aurora .cover .ibtn { opacity: 0; animation: auChar 1.1s cubic-bezier(.2,.7,.2,1) forwards; filter: blur(6px); transform: translateY(10px); }
.t-aurora .cover .kicker { animation-delay: .15s, 0s; animation-name: auChar, auShine; animation-duration: 1.1s, 8s; animation-timing-function: cubic-bezier(.2,.7,.2,1), linear; animation-iteration-count: 1, infinite; }
.t-aurora .cover__date { animation-delay: 1.1s; }
.t-aurora .cover__to { animation-delay: 1.35s; }
.t-aurora .cover .ibtn { animation-delay: 1.6s; }

/* Partikel cahaya di sampul (dibuat oleh JS) */
.t-aurora .au-spark { position: absolute; bottom: -10px; z-index: 1; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff, rgba(244,228,196,.6) 45%, transparent 70%);
    animation: auFloat var(--t, 9s) linear infinite; animation-delay: var(--d, 0s); }

/* ---------- Tombol: kaca, utama berkilau ---------- */
.t-aurora .ibtn {
    border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: var(--ink);
    background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    letter-spacing: .04em;
}
.t-aurora .ibtn:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.t-aurora .ibtn--solid {
    position: relative; overflow: hidden; border: 0; color: #0b0c16;
    background: linear-gradient(115deg, #f4e4c4, #e7cfa2 40%, #cbbfff 100%);
    box-shadow: 0 12px 32px -12px rgba(185,173,255,.85), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.t-aurora .ibtn--solid::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); transform: translateX(-130%); animation: auSweep 4s ease-in-out infinite 2.4s; }
.t-aurora .ibtn--solid:hover { background: linear-gradient(115deg, #fff3dc, #f4e4c4 40%, #ddd4ff 100%); color: #0b0c16; }

/* ---------- Kartu kaca dengan tepi pelangi ---------- */
.t-aurora .event, .t-aurora .gift, .t-aurora .rsvp, .t-aurora .wish, .t-aurora .lstory__card, .t-aurora .countdown div {
    border: 1px solid transparent;
    background: linear-gradient(rgba(22,24,40,.62), rgba(14,15,28,.55)) padding-box, var(--glass-edge) border-box;
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 26px 50px -32px rgba(0,0,0,.9);
}
.t-aurora .event { border-radius: 24px; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.t-aurora .event:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(var(--au-violet), .7); }
.t-aurora .event::before, .t-aurora .qr-card::before { display: none; }
.t-aurora .event h3 { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: 1.85rem; color: var(--accent-2); }
.t-aurora .divider { width: 56px; background: var(--iri); }
.t-aurora .qr-card { border-radius: 24px; border: 1px solid rgba(255,255,255,.14); background: rgba(22,24,40,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.t-aurora .countdown div { border-radius: 18px; }
.t-aurora .countdown b { font-family: var(--serif-d); font-weight: 400; font-style: italic; font-size: 1.75rem; color: #fff; }
.t-aurora .countdown div:last-child { animation: auPulse 2s ease-in-out infinite; }

/* Form */
.t-aurora .ifld input, .t-aurora .ifld textarea, .t-aurora .ifld select { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--ink); }
.t-aurora .ifld select option { background: #151827; color: var(--ink); }
.t-aurora .att span { border-color: rgba(255,255,255,.18); }
.t-aurora .att input:checked + span { background: linear-gradient(115deg, #f4e4c4, #cbbfff); border-color: transparent; color: #0b0c16; }

/* ---------- The Couple: bingkai dengan cincin pelangi yang berputar ---------- */
.t-aurora .pframe::before {
    border: 0; padding: 1px; opacity: 1; border-radius: 999px 999px 26px 26px;
    background: conic-gradient(from var(--au-a), #f4e4c4, #ffb3d5, #b9adff, #7fe6da, #f4e4c4);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: auRing 8s linear infinite;
}
.t-aurora .pframe::after { width: 9px; height: 9px; bottom: -4px; background: #f4e4c4; box-shadow: 0 0 14px 2px rgba(244,228,196,.8); }
.t-aurora .pframe__arch { background: rgba(255,255,255,.04); box-shadow: 0 30px 60px -30px rgba(var(--au-violet), .7); }
.t-aurora .pframe__init { font-family: var(--serif-d); font-style: italic; font-size: 4rem; background: radial-gradient(circle at 50% 35%, rgba(var(--au-violet), .35), rgba(11,12,22,.6)); color: var(--accent-2); }
.t-aurora .psoc { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--accent-2); }
.t-aurora .psoc:hover { background: linear-gradient(115deg, #f4e4c4, #cbbfff); color: #0b0c16; border-color: transparent; }

/* Love story */
.t-aurora .lstory::before { background: linear-gradient(#f4e4c4, #b9adff 50%, rgba(127,230,218,.2)); }
.t-aurora .lstory__dot { background: #f4e4c4; box-shadow: 0 0 0 4px rgba(11,12,22,.9), 0 0 16px 3px rgba(185,173,255,.65); }
.t-aurora .lstory__date { color: #cbbfff; }
.t-aurora .lstory__title { font-family: var(--serif-d); font-style: italic; font-weight: 400; color: #fff; }

/* Galeri, ucapan, footer, musik */
.t-aurora .gslider, .t-aurora .gallery__item { border-radius: 22px; }
.t-aurora .gslider { box-shadow: 0 30px 60px -36px rgba(var(--au-violet), .8); }
.t-aurora .wish { border-radius: 16px; }
.t-aurora .gift__bank { color: #cbbfff; }
.t-aurora .ifoot { border-top: 1px solid rgba(255,255,255,.08); background: transparent; }
.t-aurora .music { background: rgba(22,24,40,.7); border-color: rgba(255,255,255,.18); color: var(--accent-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- Muncul saat digulir: dari kabur menjadi tajam ---------- */
.t-aurora .reveal { transform: translateY(34px) scale(.985); filter: blur(10px); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; }
.t-aurora .reveal.is-visible { transform: none; filter: none; }

@media (min-width: 960px) {
    .t-aurora .aside { background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, rgba(11,12,22,.4); }
    .t-aurora .aside .names { font-size: clamp(3.6rem, 6vw, 5.4rem); }
}
@media (prefers-reduced-motion: reduce) {
    .t-aurora .au-ch, .t-aurora .cover .kicker, .t-aurora .cover__date, .t-aurora .cover__to, .t-aurora .cover .ibtn { opacity: 1; filter: none; transform: none; }
    .t-aurora .au-spark { display: none; }
    .t-aurora .reveal { filter: none; }
}
.t-aurora .wishes__title, .t-aurora .thanks { font-family: var(--serif-d); font-style: italic; font-weight: 400; }
