.js .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   TEMA: INFINITY CASTLE
   ====================================================================== */

:root {
  --bg: #0a080d; --bg-2: #140d18; --surface: rgba(28, 18, 25, .72); --wood: #1c1219;
  --text: #f2e8ea; --heading: #fff4e6; --muted: #b9a3aa;
  --accent: #e63946; --crimson: #e63946; --demon: #b7094c; --amber: #ffb703;
  --line: rgba(230, 57, 70, .45);
  --font-head: 'Shippori Mincho', serif; --font-script: 'Cinzel Decorative', serif; --font-body: 'Plus Jakarta Sans', sans-serif;
  --btn-bg: linear-gradient(135deg, #e63946, #b7094c); --btn-color: #fff; --btn-radius: 4px;
  --btn-shadow: 0 0 0 1px rgba(255, 183, 3, .55), 0 10px 30px -8px rgba(230, 57, 70, .7);
  --input-bg: rgba(10, 8, 13, .6); --radius: 6px; --radius-sm: 4px; --photo-radius: 4px; --toast-bg: #b7094c;
  --shoji: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2748%27%20height%3D%2764%27%20viewBox%3D%270%200%2048%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffb703%27%20stroke-opacity%3D%27.06%27%20stroke-width%3D%271%27%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2747%27%20height%3D%2763%27/%3E%3Cpath%20d%3D%27M24%200v64M0%2021.3h48M0%2042.6h48%27/%3E%3C/g%3E%3C/svg%3E"); --shoji-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2748%27%20height%3D%2764%27%20viewBox%3D%270%200%2048%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e63946%27%20stroke-opacity%3D%27.12%27%20stroke-width%3D%271%27%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2747%27%20height%3D%2763%27/%3E%3Cpath%20d%3D%27M24%200v64M0%2021.3h48M0%2042.6h48%27/%3E%3C/g%3E%3C/svg%3E");
}
/* Cegah overflow horizontal di HP (animasi AOS fade-left/right menggeser elemen) */
html, body { overflow-x: hidden; }
body { background: radial-gradient(ellipse at 50% 0%, #2a0f1c 0%, var(--bg-2) 35%, var(--bg) 75%) fixed; background-color: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--shoji); pointer-events: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: .03em; }

/* Judul babak */
.sec-kanji { display: block; font-family: 'Shippori Mincho', serif; font-size: .95rem; letter-spacing: .5em; color: var(--crimson); margin-bottom: .25rem; }
.sec-eyebrow { color: var(--amber); letter-spacing: .4em; font-size: .66rem; }
.sec-title { color: var(--heading); font-size: clamp(2rem, 8.5vw, 2.9rem); text-shadow: 0 0 22px rgba(230, 57, 70, .45); }
.divider { width: 200px; }
.person-name, .closing-names, .couple-amp { font-family: 'Shippori Mincho', serif; font-weight: 800; color: var(--heading); text-shadow: 0 0 18px rgba(230, 57, 70, .6); }
.couple-amp { color: var(--crimson); }
.btn-main { border: 1px solid rgba(255, 183, 3, .6); text-transform: uppercase; letter-spacing: .15em; font-size: .74rem; }
.btn-main:hover { box-shadow: 0 0 0 1px var(--amber), 0 0 30px rgba(230, 57, 70, .8); }
.btn-ghost { color: var(--amber); border-color: rgba(255, 183, 3, .6); border-radius: 4px; }
.btn-ghost:hover { background: rgba(255, 183, 3, .1); color: #fff; }

/* Kastil bersusun: atas terbalik, bawah tegak, kiri/kanan miring */
.castle { position: absolute; pointer-events: none; z-index: -1; opacity: .5; filter: drop-shadow(0 0 14px rgba(230, 57, 70, .35)); }
.castle-top { top: -6%; left: 50%; width: min(420px, 110vw); transform: translateX(-50%) rotate(180deg); animation: drift-top 18s ease-in-out infinite; }
.castle-bottom { bottom: -8%; left: 50%; width: min(460px, 120vw); transform: translateX(-50%); animation: drift-bottom 22s ease-in-out infinite; }
.castle-left { top: 30%; left: -32%; width: min(300px, 80vw); transform: rotate(90deg); opacity: .28; animation: drift-side 26s ease-in-out infinite; }
.castle-right { top: 42%; right: -32%; width: min(300px, 80vw); transform: rotate(-90deg); opacity: .28; animation: drift-side 30s ease-in-out infinite reverse; }
@keyframes drift-top { 50% { transform: translateX(-50%) rotate(180deg) translateY(-18px); } }
@keyframes drift-bottom { 50% { transform: translateX(-50%) translateY(-16px); } }
@keyframes drift-side { 50% { margin-top: 24px; } }
.castle-sm .castle-left, .castle-sm .castle-right { display: none; }

/* Aura merah bergelombang */
.aura { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: -1; animation: aura 7s ease-in-out infinite; }
.aura-1 { width: 340px; height: 340px; top: 18%; left: -120px; background: radial-gradient(circle, rgba(230, 57, 70, .55), transparent 70%); }
.aura-2 { width: 300px; height: 300px; bottom: 10%; right: -110px; background: radial-gradient(circle, rgba(183, 9, 76, .5), transparent 70%); animation-delay: -3.5s; }
@keyframes aura { 50% { transform: scale(1.25) translateY(-20px); opacity: .6; } }

/* Kelopak sakura berjatuhan */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal { position: absolute; top: -5%; width: 14px; color: #ff8fa3; opacity: .85; animation: petal-fall linear infinite; }
.petal:nth-child(3n) { color: #e63946; width: 10px; }
.petal:nth-child(4n) { color: #ffc2d1; width: 12px; }
.petal:nth-child(1) { left: 3%; animation-duration: 9s; animation-delay: -0.0s; }.petal:nth-child(2) { left: 11%; animation-duration: 16s; animation-delay: -3.1s; }.petal:nth-child(3) { left: 20%; animation-duration: 15s; animation-delay: -6.2s; }.petal:nth-child(4) { left: 28%; animation-duration: 14s; animation-delay: -9.3s; }.petal:nth-child(5) { left: 36%; animation-duration: 13s; animation-delay: -0.4s; }.petal:nth-child(6) { left: 44%; animation-duration: 12s; animation-delay: -3.5s; }.petal:nth-child(7) { left: 53%; animation-duration: 11s; animation-delay: -6.6s; }.petal:nth-child(8) { left: 61%; animation-duration: 10s; animation-delay: -9.7s; }.petal:nth-child(9) { left: 69%; animation-duration: 9s; animation-delay: -0.8s; }.petal:nth-child(10) { left: 78%; animation-duration: 16s; animation-delay: -3.9s; }.petal:nth-child(11) { left: 86%; animation-duration: 15s; animation-delay: -7.0s; }.petal:nth-child(12) { left: 94%; animation-duration: 14s; animation-delay: -10.1s; }
@keyframes petal-fall {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-40px, 55vh) rotate(260deg); }
  100% { transform: translate(30px, 112vh) rotate(540deg); }
}

/* Kanji vertikal raksasa */
.kanji-watermark { position: absolute; top: 50%; right: 4%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: 'Shippori Mincho', serif; font-weight: 800;
  font-size: clamp(4rem, 22vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(230, 57, 70, .25); pointer-events: none; z-index: -1; letter-spacing: .1em; }

/* Kartu kayu mahogany + kaca gelap + border ganda merah/emas */
.card-x, .quote-box, .cover-inner, .hero-inner, .closing-inner {
  background: var(--surface) var(--shoji-red); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); outline: 1px solid rgba(255, 183, 3, .35); outline-offset: -7px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 0 40px rgba(183, 9, 76, .12);
}

/* Cover */
.cover { background: radial-gradient(ellipse at 50% 40%, #2a0f1c, #0a080d 70%); }
.cover-photo { opacity: .22; filter: grayscale(.4) sepia(.4) hue-rotate(-20deg) saturate(1.6); }
.cover-overlay { background: radial-gradient(ellipse at center, transparent 20%, rgba(10, 8, 13, .9) 75%); }
.cover-inner { padding: 2.5rem 1.5rem 2.25rem; border-radius: 6px; }
.cover-figure { width: min(140px, 40vw); aspect-ratio: 3 / 4; border: 1px solid var(--crimson); outline: 1px solid rgba(255, 183, 3, .5); outline-offset: 4px; }
.cover-figure img { filter: sepia(.25) saturate(1.2) contrast(1.05); }
.cover-label { font-family: 'Cinzel Decorative', serif; font-size: .95rem; letter-spacing: .12em; text-transform: none; color: var(--amber); text-shadow: 0 0 14px rgba(255, 183, 3, .45); }
.cover-names, .hero-names { font-family: 'Shippori Mincho', serif; font-weight: 800; color: #fff; text-shadow: 0 0 24px rgba(230, 57, 70, .8), 0 0 2px #fff; }
.cover-names { font-size: clamp(2.6rem, 12vw, 3.8rem); }
.cover-names .amp, .hero-names .amp { color: var(--crimson); }
.cover-date, .hero-date { font-family: 'Cinzel Decorative', serif; color: var(--amber); letter-spacing: .3em; }
.cover-guest { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cover-guest strong { color: #fff; }
.cover-jp { font-family: 'Noto Serif JP', serif; font-size: .8rem; letter-spacing: .6em; color: var(--crimson); margin-bottom: 1rem; }

/* Hero */
.hero { background: radial-gradient(ellipse at 50% 50%, #2a0f1c, transparent 70%); }
.hero-bg { opacity: .18; filter: sepia(.4) hue-rotate(-20deg) saturate(1.6); }
.hero-overlay { background: linear-gradient(180deg, transparent 50%, var(--bg) 100%); }
.hero-inner { width: min(100%, 440px); padding: 2.75rem 1.5rem; border-radius: 6px; }
.hero-eyebrow { font-family: 'Cinzel Decorative', serif; letter-spacing: .25em; color: var(--amber); text-transform: none; }
.hero-names { font-size: clamp(3rem, 14vw, 4.8rem); }
.scroll-hint { color: var(--crimson); }

/* Kutipan berbingkai emas-merah */
.greeting-title { font-family: 'Noto Serif JP', serif; font-weight: 700; color: #fff; font-size: clamp(2rem, 9vw, 2.8rem); text-shadow: 0 0 20px rgba(230, 57, 70, .7); letter-spacing: .15em; }
.greeting-sub { color: var(--amber); }
.greeting-text { font-family: 'Noto Serif JP', serif; color: #e9d6da; }
.greeting-translation { font-family: var(--font-body); font-size: .9rem; }
.quote-box { position: relative; border-radius: 6px; padding: 2.5rem 1.25rem 2rem; border-image: linear-gradient(135deg, #e63946, #ffb703, #b7094c) 1; }
.arabic { color: var(--amber); }
.latin { color: var(--muted); }
.quote-src { color: var(--crimson); }

/* Mempelai */
.person-photo { border: 1px solid var(--crimson); outline: 1px solid rgba(255, 183, 3, .5); outline-offset: 5px; box-shadow: 0 0 40px -6px rgba(230, 57, 70, .6); }
.person-photo img { filter: sepia(.2) saturate(1.15) contrast(1.05); }
.person-full { color: #fff; }

/* Acara */
.cd-item { background: var(--surface); border-color: var(--line); outline: 1px solid rgba(255, 183, 3, .25); outline-offset: -5px; }
.cd-num { font-family: 'Shippori Mincho', serif; color: #fff; text-shadow: 0 0 14px rgba(230, 57, 70, .9); }
.cd-label { color: var(--amber); }
.event-icon { border-color: var(--crimson); color: var(--amber); background: rgba(230, 57, 70, .12); }
.event-card h3 { color: #fff; }

/* Galeri: hover zoom + kilau merah */
.g-item { border: 1px solid var(--line); }
.g-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(183, 9, 76, .55)); opacity: 0; transition: opacity .5s; }
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; }
.g-item:hover img { transform: scale(1.12); }
.g-item img { filter: sepia(.15) saturate(1.1); }
.video-box { border: 1px solid var(--crimson); outline: 1px solid rgba(255, 183, 3, .4); outline-offset: 4px; }

/* Dark card bank */
.gift-card { border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 30px -10px rgba(230, 57, 70, .5); }
.gift-card::after { content: ""; position: absolute; inset: 0; background: var(--shoji-red); opacity: .8; pointer-events: none; }
.gift-bca { --gift-bg: radial-gradient(circle at 85% 15%, rgba(230, 57, 70, .45), transparent 45%), linear-gradient(135deg, #2a141d, #140d18 60%, #0a080d); --gift-color: #fff4e6; }
.gift-mandiri { --gift-bg: radial-gradient(circle at 85% 15%, rgba(255, 183, 3, .3), transparent 45%), linear-gradient(135deg, #1c1219, #0a080d); --gift-color: #ffe5a8; }
.gift-chip { background: linear-gradient(135deg, #ffd166, #ffb703 50%, #c77d00); }
.gift-bank { font-family: 'Cinzel Decorative', serif; font-style: normal; }
.gift-card .btn-copy { border-color: rgba(255, 183, 3, .6); }
.gift-card .btn-copy:hover { background: rgba(230, 57, 70, .25); }

/* RSVP */
.form-x .form-select option { background: #140d18; }
.stats div { background: rgba(230, 57, 70, .08); }
.wish-avatar { font-family: 'Shippori Mincho', serif; }

/* Penutup */
.closing-inner { position: relative; max-width: 620px; margin-inline: auto; padding: 3rem 1.5rem; border-radius: 6px; }
.closing-title { font-family: 'Cinzel Decorative', serif; color: #fff; font-size: clamp(2rem, 9vw, 2.8rem); text-shadow: 0 0 22px rgba(230, 57, 70, .7); }
.closing-salam { color: var(--amber); }
.closing-families strong { color: #fff; }

/* Tombol musik: berputar + denyut aura */
.music-btn { border: 1px solid var(--amber); box-shadow: 0 0 22px rgba(230, 57, 70, .7); }
.music-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(230, 57, 70, .7); animation: pulse-ring 1.8s ease-out infinite; }
@keyframes pulse-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .petals, .aura { display: none; } }