/* =========================================================
   THE WEDDING OF FEBRIAN & ANITA — stylesheet (VARIANT)
   Theme: Traditional Javanese Ornate (Batik Sepia & Gold)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Petit+Formal+Script&family=Jost:wght@200;300;400;500&family=Noto+Sans+Javanese&display=swap');

:root {
    /* -- palette: traditional javanese ornate (batik sepia & gold) -- */
    --bg-main:    #2b1810; /* Deep warm batik brown */
    --bg-panel:   rgba(255, 226, 175, 0.06);
    --glass-brd:  rgba(230, 190, 120, 0.28);
    
    --text-main:  #fdf3e0;
    --text-dim:   #d8c3a0;
    --text-mute:  #a68966;
    
    /* Batik & Gold Accents */
    --accent-pink:  #C9962C;
    --accent-soft:  #E8C77E;
    --accent-purp:  #7a4a1e;
    --accent-gold:  #e6c875;
    
    --glow-grad: linear-gradient(135deg, #C9962C, #7a4a1e);
    --soft-glow: 0 0 20px rgba(201, 150, 44, 0.4), 0 0 40px rgba(122, 74, 30, 0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-main); scroll-behavior: smooth; }
body {
    font-family: 'Jost', sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
}
/* subtle batik-inspired diagonal lattice, always sitting behind content */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, rgba(230, 190, 120, 0.05) 0px, rgba(230, 190, 120, 0.05) 1.5px, transparent 1.5px, transparent 38px),
        repeating-linear-gradient(-45deg, rgba(230, 190, 120, 0.05) 0px, rgba(230, 190, 120, 0.05) 1.5px, transparent 1.5px, transparent 38px);
}
.serif { font-family: 'Cormorant Garamond', serif; }
.script { font-family: 'Petit Formal Script', cursive; }

/* ---------- background & 3D utilities ---------- */
.tilt-zone { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform 0.1s ease-out; }
.float-el { animation: floatGlam 6s ease-in-out infinite; will-change: transform; }
.float-el.f2 { animation-delay: -2s; animation-duration: 5s; }
.float-el.f3 { animation-delay: -4s; animation-duration: 7s; }

/* ---------- generic 3D tilt engine (mouse-only, self-resetting) ---------- */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}
[data-tilt] > * { transform-style: preserve-3d; }
[data-tilt-glare] { position: relative; overflow: hidden; }
.tilt-glare {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.16), transparent 55%);
    opacity: 0; transition: opacity 0.4s ease;
}
[data-tilt-glare]:hover .tilt-glare { opacity: 1; }
/* On touch devices, tilt is driven by device-orientation (gentle) instead of stuck mouse state */
@media (hover: none), (pointer: coarse) {
    [data-tilt] { transition: transform 0.4s ease-out; }
}

@keyframes floatGlam {
    0%, 100% { transform: translateY(0) translateZ(0) rotate(0deg); }
    50% { transform: translateY(-15px) translateZ(30px) rotate(2deg); filter: drop-shadow(0 10px 15px rgba(201,150,44,0.25)); }
}

/* Glow Orb Dinamis — the translateY(var(--py)) term is live-updated by JS on
   scroll to give real parallax depth; it's chained inside the keyframes
   (rather than set as a separate inline transform) so it survives the
   running animation instead of being silently overridden by it. */
.glow-orb {
    position: absolute; border-radius: 50%;
    background: var(--glow-grad);
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    animation: discoOrb 10s ease-in-out infinite alternate;
}
@keyframes discoOrb {
    0% { transform: translateY(var(--py, 0px)) scale(1) translate(0, 0) rotate(0deg); opacity: 0.15; }
    100% { transform: translateY(var(--py, 0px)) scale(1.5) translate(40px, -40px) rotate(180deg); opacity: 0.25; }
}

/* ---------- cover (animated gradient background) ---------- */
#cover {
    position: fixed; inset: 0; z-index: 100;
    width: 100vw; height: 100vh;
    background:
        repeating-linear-gradient(45deg, rgba(230, 190, 120, 0.06) 0px, rgba(230, 190, 120, 0.06) 1.5px, transparent 1.5px, transparent 34px),
        repeating-linear-gradient(-45deg, rgba(230, 190, 120, 0.06) 0px, rgba(230, 190, 120, 0.06) 1.5px, transparent 1.5px, transparent 34px),
        linear-gradient(-45deg, #2b1810, #3a2214, #1f120b, #33200f);
    background-size: auto, auto, 400% 400%;
    animation: fluidBg 15s ease infinite;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
    padding: 40px 24px;
    perspective: 1000px;
    overflow: hidden;
}
@keyframes fluidBg {
    0% { background-position: 0 0, 0 0, 0% 50%; }
    50% { background-position: 0 0, 0 0, 100% 50%; }
    100% { background-position: 0 0, 0 0, 0% 50%; }
}
#cover.away { opacity: 0; pointer-events: none; transform: scale(1.1) translateY(-50px); filter: blur(10px); }

/* ---------- cinematic cover entrance (staggered, like the video's staged reveal) ---------- */
.cover-anim { opacity: 0; animation: coverIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cover-anim.ce1 { animation-delay: 0.05s; }
.cover-anim.ce2 { animation-delay: 0.35s; }
.cover-anim.ce3 { animation-delay: 0.6s; }
.cover-anim.ce4 { animation-delay: 0.85s; }
.cover-anim.ce5 { animation-delay: 1.05s; }
.cover-anim.ce6 { animation-delay: 1.3s; }
.cover-anim.ce7 { animation-delay: 1.55s; }
@keyframes coverIn {
    from { opacity: 0; transform: translateY(26px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cover-anim { animation: none; opacity: 1; }
}

/* ---------- flying dove (simple original silhouette, echoes the video's dove) ---------- */
.dove {
    position: absolute; top: 8%; left: -15%; width: 70px; height: 34px;
    color: var(--accent-gold); opacity: 0.85; pointer-events: none; z-index: 2;
    animation: doveFly 16s linear infinite;
    filter: drop-shadow(0 0 6px rgba(230, 190, 120, 0.35));
}
.dove svg { width: 100%; height: 100%; display: block; }
.dove .wing { animation: doveFlap 0.9s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.dove.d2 { top: 18%; width: 44px; height: 22px; opacity: 0.5; animation-duration: 22s; animation-delay: -9s; }
@keyframes doveFly {
    0%   { transform: translate(0, 0); }
    45%  { transform: translate(65vw, 6vh); }
    50%  { transform: translate(70vw, 6vh) scaleX(1); }
    50.01% { transform: translate(70vw, 6vh) scaleX(-1); }
    95% { transform: translate(5vw, 1vh) scaleX(-1); }
    100% { transform: translate(0, 0) scaleX(-1); }
}
@keyframes doveFlap {
    from { transform: scaleY(1) rotate(0deg); }
    to   { transform: scaleY(0.55) rotate(-8deg); }
}

/* ---------- drifting firefly sparkles ---------- */
.firefly {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent-gold); box-shadow: 0 0 8px 2px rgba(230, 190, 120, 0.7);
    opacity: 0; pointer-events: none; z-index: 2;
    animation: fireflyDrift 6s ease-in-out infinite;
}
.firefly.f2 { animation-delay: -2s; animation-duration: 7.5s; }
.firefly.f3 { animation-delay: -4s; animation-duration: 5.5s; }
.firefly.f4 { animation-delay: -1s; animation-duration: 8s; }
.firefly.f5 { animation-delay: -3.5s; animation-duration: 6.8s; }
@keyframes fireflyDrift {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    20%  { opacity: 0.9; }
    50%  { transform: translate(14px, -30px) scale(1); }
    80%  { opacity: 0.7; }
    100% { opacity: 0; transform: translate(-10px, -60px) scale(0.5); }
}

/* corner flourishes framing the whole cover, echoing the ornate gold-corner look */
#cover::before, #cover::after {
    content: '❧'; position: absolute; font-size: 26px; color: var(--accent-gold);
    opacity: 0.55; pointer-events: none; z-index: 1;
    text-shadow: 0 0 10px rgba(230, 190, 120, 0.3);
}
#cover::before { top: 22px; left: 22px; transform: rotate(-8deg); }
#cover::after { bottom: 22px; right: 22px; transform: rotate(172deg); }

.cover-deco-top { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.cover-deco-line { width: 60px; height: 1px; background: var(--glass-brd); }
.cover-deco-diamond { width: 8px; height: 8px; background: var(--accent-gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--accent-gold); }

/* Ornate oval gold medallion — double-ring frame styled after the video's photo frame */
.cover-mono {
    width: 130px; height: 158px;
    border: 3px double var(--accent-gold);
    outline: 1px solid rgba(230, 190, 120, 0.35);
    outline-offset: 7px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 40px; position: relative;
    transform-style: preserve-3d;
    box-shadow: 0 0 30px rgba(201, 150, 44, 0.25), inset 0 0 20px rgba(201, 150, 44, 0.15);
    background: rgba(255, 226, 175, 0.03);
    backdrop-filter: blur(5px);
}
.cover-mono span { font-family: 'Petit Formal Script', cursive; font-size: 38px; color: var(--text-main); position: relative; z-index: 2; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.cover-mono::before, .cover-mono::after {
    content: '❧'; position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 16px; color: var(--accent-gold); opacity: 0.8; z-index: 3;
}
.cover-mono::before { top: -20px; }
.cover-mono::after  { bottom: -20px; transform: translateX(-50%) rotate(180deg); }

/* Cincin Orbit Berputar */
.orbit-ring {
    position: absolute; inset: -15px; border-radius: 50%;
    border: 1px dashed rgba(230, 190, 120, 0.2);
    pointer-events: none; transform-style: preserve-3d;
    animation: orbitSpin 12s linear infinite;
}
.orbit-ring.rev { animation-direction: reverse; animation-duration: 18s; border: 1px dotted rgba(230, 200, 117, 0.35); }
.orbit-dot {
    position: absolute; top: -4px; left: 50%; margin-left: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-gold); box-shadow: 0 0 12px var(--accent-gold);
}
.orbit-dot.d2 { top: auto; bottom: -4px; background: var(--accent-soft); box-shadow: 0 0 12px var(--accent-soft); }
.orbit-dot.d3 { top: 50%; left: -4px; background: var(--accent-pink); box-shadow: 0 0 12px var(--accent-pink); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.cover-eyebrow { font-size: 9px; letter-spacing: 0.6em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; text-align: center; }
.cover-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(50px, 14vw, 85px);
    font-weight: 400; color: #fff;
    letter-spacing: 0.05em; line-height: 1;
    text-align: center;
    text-shadow: 0 5px 25px rgba(0,0,0,0.8);
}
.cover-title em { 
    font-style: italic; display: block; font-size: 0.6em; line-height: 1.4; 
    font-family: 'Petit Formal Script', cursive;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(230, 200, 117, 0.35);
}
.cover-date-row { display: flex; align-items: center; gap: 16px; margin: 30px 0 40px; color: var(--text-dim); font-size: 10px; letter-spacing: 0.5em; }
.cover-date-row::before, .cover-date-row::after { content: ''; width: 40px; height: 1px; background: var(--glass-brd); }
.cover-guest-label { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; text-align: center; }
#cover-guest-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-style: italic; color: var(--accent-gold); text-shadow: 0 0 10px rgba(230, 200, 117, 0.3); text-align: center; }

/* Tombol Glassmorphism */
.cover-btn, .dl-btn, .submit-btn, .send-btn {
    display: inline-block;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-brd);
    color: #fff; padding: 16px 48px;
    font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.4s ease; border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Fix Untuk Form Submit & Send Button agar lebar penuh */
.submit-btn, .send-btn {
    width: 100%;
    display: block;
    margin-top: 32px;
}

.cover-btn::before, .submit-btn::before, .send-btn::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--glow-grad); opacity: 0; transition: opacity 0.4s ease;
}
.cover-btn:hover, .dl-btn:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 15px 35px rgba(201,150,44,0.25); }
.cover-btn:hover::before, .submit-btn:hover::before, .send-btn:hover::before { opacity: 1; }
.cover-btn span, .submit-btn span, .send-btn span { position: relative; z-index: 1; font-weight: 400; }

#audio-btn {
    position: fixed; top: 20px; right: 20px; z-index: 90; display: none; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); border: 1px solid var(--glass-brd); border-radius: 30px;
    color: #fff; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; padding: 10px 18px; cursor: pointer;
}
#audio-btn.show { display: flex; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.wb { width: 3px; border-radius: 2px; background: var(--accent-soft); animation: wb 0.6s ease-in-out infinite alternate; }
.wb:nth-child(1){height:4px;animation-delay:0s} .wb:nth-child(2){height:14px;animation-delay:.1s}
.wb:nth-child(3){height:6px;animation-delay:.2s} .wb:nth-child(4){height:12px;animation-delay:.05s}
.wave.off .wb { animation: none; height: 3px !important; background: var(--text-mute); }
@keyframes wb { from{transform:scaleY(0.3)} to{transform:scaleY(1)} }

#scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: rgba(255,255,255,0.05); }
#scroll-fill { height: 100%; background: var(--glow-grad); width: 0%; transition: width .1s; box-shadow: 0 0 10px rgba(201,150,44,0.4); }

#main {
    max-width: 720px; margin: 0 auto;
    background: transparent;
    opacity: 0; transition: opacity 1.5s 0.2s;
    position: relative;
}
#main.show { opacity: 1; }

/* ---------- hero ---------- */
#hero { padding: 120px 40px 80px; text-align: center; position: relative; perspective: 1000px; }
#hero .glow-orb.h1 { width: 300px; height: 300px; top: -10%; right: -10%; }
#hero .glow-orb.h2 { width: 250px; height: 250px; bottom: 0; left: -10%; animation-delay: -3s; }
.hero-3d-stage { position: relative; transform-style: preserve-3d; }
.hero-intro { font-size: 10px; letter-spacing: 0.6em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 20px; font-weight: 400; }
.hero-names {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 15vw, 95px);
    font-weight: 400; line-height: 1; color: #fff; text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero-amp {
    display: block; font-size: 0.5em; font-family: 'Petit Formal Script', cursive; font-weight: 200;
    margin: -5px 0; padding: 10px;
    color: var(--accent-gold);
    filter: drop-shadow(0 0 15px rgba(230, 200, 117, 0.25));
}
.hero-date-strip {
    margin: 40px auto 0; display: inline-flex; align-items: center; gap: 24px;
    border: 1px solid var(--glass-brd); border-radius: 40px; padding: 16px 36px;
    background: var(--bg-panel); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.hero-date-num { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: #fff; line-height: 1; }
.hero-date-sep { font-size: 20px; color: var(--accent-pink); }
.hero-date-label { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-dim); display: block; margin-top: 4px; }
.hero-quote-wrap { margin: 50px auto 0; max-width: 440px; }
.hero-quote {
    font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; font-weight: 300;
    color: var(--text-dim); line-height: 1.8;
    background: var(--bg-panel); padding: 24px; border-radius: 12px;
    border-left: 3px solid var(--accent-soft); text-align: left;
    backdrop-filter: blur(5px);
}

.section { padding: 80px 40px; perspective: 1000px; position: relative; z-index: 10; }
@media (max-width: 600px) { .section { padding: 60px 20px; } }
.sec-label { font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent-pink); display: block; margin-bottom: 14px; font-weight: 400; }
.sec-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 8vw, 50px); font-weight: 400; color: #fff; line-height: 1.1; }
.divider { width: 60px; height: 3px; background: var(--glow-grad); margin: 24px 0; border-radius: 3px; box-shadow: var(--soft-glow); }
.divider.center { margin: 24px auto; }

/* ---------- glassmorphism cards ---------- */
.glass-card {
    background: var(--bg-panel); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-brd); border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---------- couple ---------- */
#couple { position: relative; overflow: hidden; }
.couple-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; margin-top: 50px; transform-style: preserve-3d; }
.person-card { text-align: center; cursor: pointer; }
.person-card-inner {
    position: relative; width: 100%; min-height: 220px;
    transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.person-card.flipped .person-card-inner { transform: rotateY(180deg); }
.person-card-face {
    position: relative; backface-visibility: hidden; width: 100%;
}
.person-card-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 18px; border-radius: 20px;
    background: var(--bg-panel); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px);
}
.person-flip-hint { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-mute); margin-top: 14px; }
.person-flip-hint::before { content: '↻ '; }
.person-frame {
    width: 110px; height: 132px; border-radius: 50%; margin: 0 auto 20px;
    background: rgba(255, 226, 175, 0.04);
    border: 2px double var(--accent-gold);
    outline: 1px solid rgba(230, 190, 120, 0.3);
    outline-offset: 5px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: 0 0 20px rgba(122, 74, 30, 0.25), inset 0 0 15px rgba(201, 150, 44, 0.12);
    transform: translateZ(30px);
}
.person-frame::before, .person-frame::after {
    content: '❧'; position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: var(--accent-gold); opacity: 0.75;
}
.person-frame::before { top: -16px; }
.person-frame::after  { bottom: -16px; transform: translateX(-50%) rotate(180deg); }
.person-card.right .person-frame { border-color: var(--accent-gold); box-shadow: 0 0 20px rgba(201, 150, 44, 0.25), inset 0 0 15px rgba(201, 150, 44, 0.12); }
.person-frame-icon { font-family: 'Petit Formal Script', cursive; font-size: 34px; color: var(--accent-gold); }
.person-role { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.person-name { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: #fff; line-height: 1.1; }
.person-parents { font-size: 11px; color: var(--text-mute); font-weight: 300; margin-top: 10px; line-height: 1.6; }
.couple-amp-center { padding: 0 20px; }
.couple-amp-inner {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--bg-main); border: 1px solid rgba(230, 200, 117, 0.4);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Petit Formal Script', cursive; font-size: 30px;
    color: var(--accent-gold); box-shadow: 0 0 30px rgba(230, 200, 117, 0.25);
    animation: floatGlam 4s ease-in-out infinite; z-index: 2;
}
@media (max-width: 560px) { .couple-grid { grid-template-columns: 1fr; gap: 40px; } .couple-amp-center { display: flex; justify-content: center; } }

/* ---------- events ---------- */
.tab-nav { display: flex; gap: 10px; margin: 40px 0 30px; }
.tab-btn {
    flex: 1; padding: 14px 0; border-radius: 30px;
    font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--glass-brd); cursor: pointer; transition: all 0.3s;
}
.tab-btn.on { background: var(--glow-grad); color: #fff; border-color: transparent; box-shadow: 0 5px 15px rgba(201,150,44,0.25); font-weight: 400; }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fadeUp 0.4s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
.event-box {
    background: var(--bg-panel); backdrop-filter: blur(15px);
    border: 1px solid var(--glass-brd); border-radius: 20px;
    padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 20px;
    align-items: center; transition: transform 0.3s, box-shadow 0.3s;
}
.event-box:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.4); border-color: var(--accent-soft); }
.ev-date { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 26px; color: #fff; }
.ev-time { font-size: 11px; letter-spacing: 0.2em; color: var(--accent-soft); margin-top: 6px; text-transform: uppercase; }
.ev-venue { font-size: 16px; font-weight: 500; color: #fff; margin-top: 20px; }
.ev-addr { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-top: 6px; font-weight: 300; }
.map-btn { border-radius: 30px; border-color: var(--glass-brd); color: #fff; }
.map-btn:hover { background: var(--accent-purp); color: #fff; border-color: var(--accent-purp); box-shadow: 0 0 15px rgba(122,74,30,0.4); }

/* ---------- dresscode ---------- */
.dc-note { font-size: 14px; color: var(--text-dim); font-weight: 300; line-height: 1.7; margin-top: 15px; }
.dc-palette { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.dc-swatch-dot { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--glass-brd); transition: transform 0.3s; }
.dc-swatch:hover .dc-swatch-dot { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 20px rgba(255,255,255,0.1); }
.dc-swatch-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-top: 10px; }
.dc-people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.dc-card {
    background: var(--bg-panel); border: 1px solid var(--glass-brd);
    padding: 30px 20px; text-align: center; border-radius: 20px;
    backdrop-filter: blur(10px); transition: transform 0.3s, border-color 0.3s;
}
.dc-card:hover { transform: translateY(-5px); border-color: var(--accent-pink); box-shadow: 0 10px 30px rgba(201,150,44,0.15); }
.dc-card svg { width: 45px; height: 55px; color: var(--accent-pink); margin-bottom: 20px; filter: drop-shadow(0 0 10px rgba(201,150,44,0.3)); }
.dc-card-role { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 8px; }
.dc-card-style { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; color: #fff; }

/* ---------- rundown ---------- */
.rundown-sub { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-mute); margin-top: -10px; margin-bottom: 35px; }
.rundown-list { position: relative; margin-top: 10px; padding-left: 30px; }
.rundown-list::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--glass-brd); }
.rundown-item { position: relative; padding: 0 0 35px 25px; transition: transform 0.3s; }
.rundown-item:last-child { padding-bottom: 0; }
.rundown-item:hover { transform: translateX(8px); }
.rundown-item::before {
    content: ''; position: absolute; left: -31px; top: 5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg-main); border: 2px solid var(--accent-purp);
    box-shadow: 0 0 10px rgba(122,74,30,0.3); transition: all 0.3s;
}
.rundown-item:hover::before { background: var(--accent-purp); transform: scale(1.3); }
.rundown-time { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; color: #fff; display: block; }
.rundown-label { font-size: 14px; color: var(--text-dim); font-weight: 300; margin-top: 4px; }

/* ---------- countdown ---------- */
#countdown {
    background: linear-gradient(180deg, #2b1810 0%, #1a0f08 100%);
    padding: 80px 20px; text-align: center; border-top: 1px solid var(--glass-brd); border-bottom: 1px solid var(--glass-brd);
}
.cd-eyebrow { font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 40px; }
.cd-grid { display: flex; justify-content: center; gap: 15px; max-width: 500px; margin: 0 auto; }
.cd-cell { flex: 1; padding: 20px 10px; border: 1px solid var(--glass-brd); border-radius: 15px; background: var(--bg-panel); backdrop-filter: blur(10px); }
.flip-card { height: 50px; position: relative; perspective: 400px; margin: 0 auto; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.5,0,.25,1); }
.flip-inner.flip { transform: rotateX(-180deg); }
.flip-front, .flip-back {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    backface-visibility: hidden; border-radius: 8px;
}
.flip-back { transform: rotateX(180deg); }
.cd-num { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: #fff; line-height: 1; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
.cd-lbl { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); margin-top: 15px; display: block; }

/* ---------- forms & inputs ---------- */
.uc-field, .field { border-bottom: 1px solid var(--glass-brd); padding: 20px 0; transition: border-color 0.3s; }
.uc-field:focus-within, .field:focus-within { border-bottom-color: var(--accent-soft); }
.uc-label, .field-lbl { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-mute); display: block; margin-bottom: 10px; transition: color 0.3s; }
.uc-field:focus-within .uc-label, .field:focus-within .field-lbl { color: var(--accent-soft); }
.uc-input, .field-input { width: 100%; background: none; border: none; outline: none; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; color: #fff; }
.uc-textarea { width: 100%; background: none; border: none; outline: none; font-family: 'Jost', sans-serif; font-size: 15px; color: #fff; font-weight: 300; resize: none; min-height: 100px; }
.uc-input::placeholder, .field-input::placeholder, .uc-textarea::placeholder { color: rgba(255,255,255,0.2); }

.choice-row { display: flex; gap: 15px; margin-top: 10px; }
.choice-card {
    flex: 1; padding: 20px; border: 1px solid var(--glass-brd); border-radius: 15px;
    text-align: center; cursor: pointer; background: var(--bg-panel); backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}
.choice-card:hover { border-color: #fff; transform: translateY(-3px); }
.choice-card.on { background: var(--glow-grad); border-color: transparent; }
.choice-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.choice-card.on .choice-label { color: #fff; }

/* ---------- qr & amplop (FIXED AREA) ---------- */

/* Menyembunyikan Hasil QR Sebelum Submit */
#qr-result { display: none; margin-top: 44px; text-align: center; animation: fadeUp 0.6s ease; }
#qr-result.show { display: block; }
#no-attend-result { display: none; margin-top: 44px; text-align: center; animation: fadeUp 0.6s ease; }
#no-attend-result.show { display: block; }

.no-attend-icon { width: 64px; height: 64px; margin: 0 auto; border: 1px solid var(--accent-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.qr-box { display: inline-block; padding: 20px; background: #fff; border-radius: 20px; box-shadow: 0 0 30px rgba(255,255,255,0.1); margin-bottom: 20px; }

/* Memastikan canvas QR tidak melebihi kotak putih */
#qr-canvas { border-radius: 8px; max-width: 100%; height: auto; }

.qr-label { font-size: 10px; letter-spacing: 0.2em; color: var(--text-mute); margin-top: 14px; text-transform: uppercase;}
.qr-thanks { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-style: italic; color: #fff; margin-top: 20px; }
.qr-name { font-size: 14px; color: var(--accent-soft); margin-top: 4px; }
.qr-note { font-size: 12px; color: var(--text-dim); line-height: 1.75; margin-top: 12px; font-weight: 300; }

.amplop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.amplop-card {
    background: var(--bg-panel); border: 1px solid var(--glass-brd); border-radius: 20px;
    padding: 30px 20px; text-align: center; transition: all 0.3s;
}
.amplop-card:hover { transform: translateY(-5px); border-color: var(--accent-soft); box-shadow: 0 10px 25px rgba(232,199,126,0.15); }
.amplop-bank { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 10px; }
.amplop-rek { font-size: 18px; color: var(--accent-soft); letter-spacing: 3px; font-weight: 300; }
.amplop-name { font-size: 12px; color: var(--text-dim); margin: 15px 0 25px; }
.amplop-card .dl-btn { border-radius: 30px; }

/* ---------- ucapan ---------- */
.ucapan-wall { margin-top: 60px; background: var(--bg-panel); padding: 30px; border-radius: 20px; border: 1px solid var(--glass-brd); }
.wall-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-style: italic; color: #fff; }
.ucapan-card {
    background: rgba(0,0,0,0.4); padding: 20px; border-radius: 12px;
    border-left: 3px solid var(--accent-purp) !important;
    margin-bottom: 15px; transition: transform 0.3s;
}
.ucapan-card:hover { transform: translateX(5px); border-color: var(--accent-pink) !important; background: rgba(255,255,255,0.05); }
.uc-card-name { font-size: 16px; font-weight: 500; color: #fff; font-family: 'Cormorant Garamond', serif; }
.uc-card-msg { font-size: 14px; color: var(--text-dim); line-height: 1.6; font-weight: 300; margin-top: 10px; }

/* ---------- footer ---------- */
footer { background: #1c120a; padding: 80px 40px 50px; text-align: center; border-top: 1px solid #4a3018; }
.ft-logo { font-family: 'Petit Formal Script', cursive; font-size: 50px; color: var(--accent-gold); text-shadow: 0 0 20px rgba(230, 200, 117, 0.25); margin-bottom: 20px; }
.ft-sub { font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- ambient glowing confetti ---------- */
.petal {
    position: absolute;
    -webkit-mask-image: none !important; mask-image: none !important;
    width: 6px; height: 18px; border-radius: 10px;
    background: var(--accent-pink);
    box-shadow: 0 0 10px var(--accent-pink);
    opacity: 0.5; pointer-events: none;
    animation: confettiFall 8s linear infinite;
}
.petal.rose { background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); width: 8px; height: 8px; border-radius: 50%; }
.petal.sage { background: var(--accent-purp); box-shadow: 0 0 10px var(--accent-purp); width: 5px; height: 15px; }
.petal.p2 { animation-delay: -2s; animation-duration: 7s; }
.petal.p3 { animation-delay: -5s; animation-duration: 9s; }
.petal.p4 { animation-delay: -1s; animation-duration: 6s; background: var(--accent-gold); box-shadow: 0 0 10px var(--accent-gold); }

@keyframes confettiFall {
    0% { transform: translateY(-50px) translateZ(0) rotate(0deg) scale(0.8); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(150px) translateZ(50px) rotate(360deg) scale(1.2); opacity: 0; }
}

.rv { opacity: 0; transform: translateY(40px) scale(0.95); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rv.go { opacity: 1; transform: translateY(0) scale(1); }
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

@media (prefers-reduced-motion: reduce) {
    .orn, .petal, .orbit-ring, .float-el, .couple-amp-inner, .glow-orb, #cover { animation: none !important; }
    .rv { transition: opacity 0.4s ease !important; transform: none !important; }
    .dove, .dove .wing, .firefly { animation: none !important; opacity: 0 !important; }
}

/* ---------- touch devices: never let a hover-only transform get stuck "miring" after a tap ---------- */
@media (hover: none), (pointer: coarse) {
    .dc-card:hover, .amplop-card:hover, .rundown-item:hover, .event-box:hover,
    .ucapan-card:hover, .choice-card:hover, .cover-btn:hover, .dl-btn:hover {
        transform: none;
    }
}

/* ---------- ambient parallax depth layers (scroll + cursor driven) ---------- */
.glow-orb { transition: transform 0.2s linear; }
.hero-3d-stage, .cover-mono, .couple-grid, #cd-grid { transform-style: preserve-3d; }