:root {
    --ease-fluid: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.25, 1.2, 0.3, 1);
}

body.theme-velvet {
    --bg-base: #261115; --bg-glow-1: #5c1e2b; --bg-glow-2: #3a121b;
    --text-main: #ffffff; --text-muted: rgba(255, 255, 255, 0.6);
    --card-bg: rgba(42, 16, 21, 0.65);
    --accent: #e85d7f; --accent-hover: #f07592;
    --seal-color: #a61b34;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.25);
    --ring-color: rgba(232, 93, 127, 0.3);
}

body.theme-paper {
    --bg-base: #f5f2eb; --bg-glow-1: #e6dfcf; --bg-glow-2: #ffffff;
    --text-main: #1c1c1c; --text-muted: rgba(0, 0, 0, 0.5);
    --card-bg: rgba(255, 255, 255, 0.7);
    --accent: #8b7355; --accent-hover: #735d42;
    --seal-color: #8b0000;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(0, 0, 0, 0.03);
    --ring-color: rgba(139, 115, 85, 0.2);
}

body.theme-midnight {
    --bg-base: #060913; --bg-glow-1: #152243; --bg-glow-2: #090e1c;
    --text-main: #f8fafc; --text-muted: rgba(255, 255, 255, 0.5);
    --card-bg: rgba(15, 23, 42, 0.7);
    --accent: #fbbf24; --accent-hover: #fcd34d;
    --seal-color: #b45309;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.3);
    --ring-color: rgba(251, 191, 36, 0.2);
}

/* global */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Inter', sans-serif; color: var(--text-main);
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    overflow-x: hidden; background: var(--bg-base); transition: background 0.8s ease;
    -webkit-font-smoothing: antialiased;
}

/*ambient background */
.ambient-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -3; overflow: hidden; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; transition: background 0.8s ease; }
.orb-1 { width: 60vw; height: 60vw; top: -10vw; right: -10vw; background: var(--bg-glow-1); animation: float 15s ease-in-out infinite alternate; }
.orb-2 { width: 50vw; height: 50vw; bottom: -10vw; left: -10vw; background: var(--bg-glow-2); animation: float 20s ease-in-out infinite alternate-reverse; }
@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(5vw, 5vh); } }

.noise-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* typography */
.serif { font-family: 'Playfair Display', serif; }
.title { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.5px; }
.title-large { font-size: 2.8rem; font-weight: 500; line-height: 1.2; text-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.title-small { font-size: 1.5rem; font-weight: 500; }
.subtitle { font-size: 0.95rem; font-weight: 400; color: var(--text-muted); line-height: 1.5; }
.text-red { color: #ff453a !important; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 20px; } .mb-6 { margin-bottom: 32px; } .mt-2 { margin-top: 8px; } .mt-6 { margin-top: 32px; }
.text-center { text-align: center; }
.hidden { display: none !important; }

.container { flex: 1; width: 100%; max-width: 520px; padding: 30px 20px; display: flex; flex-direction: column; justify-content: center; z-index: 10; }

/* card */
.card {
    background: var(--card-bg); border-radius: 24px; padding: 40px 32px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-subtle);
}

/* form inputs */
.form-stack { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.input-group { position: relative; }
.input-group input, .input-group textarea, .dropdown-display {
    width: 100%; padding: 24px 16px 10px; background: var(--input-bg);
    border: 1px solid var(--border-subtle); color: var(--text-main);
    font-family: inherit; font-size: 1rem; outline: none; border-radius: 14px;
    transition: all 0.3s var(--ease-fluid);
}
.input-group input:focus, .input-group textarea:focus, .custom-dropdown.open .dropdown-display {
    border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring-color); background: transparent;
}

.input-group label {
    position: absolute; top: 16px; left: 16px; font-size: 1rem; color: var(--text-muted);
    pointer-events: none; transition: all 0.3s var(--ease-fluid);
}
.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label, .input-group textarea:not(:placeholder-shown) ~ label,
.custom-dropdown .dropdown-label {
    top: 8px; left: 16px; font-size: 0.75rem; color: var(--accent); font-weight: 500;
}

textarea { resize: none; min-height: 120px; line-height: 1.5; }
.char-counter { position: absolute; right: 12px; bottom: 12px; font-size: 0.75rem; color: var(--text-muted); }

/* Dropdown menu*/
.custom-dropdown { cursor: pointer; }
.dropdown-display { display: flex; align-items: center; justify-content: space-between; }
.dropdown-display svg { transition: transform 0.3s var(--ease-spring); color: var(--text-muted); }
.custom-dropdown.open .dropdown-display svg { transform: rotate(180deg); color: var(--accent); }

.dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0; width: 100%;
    background: var(--card-bg); border-radius: 14px; padding: 6px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-subtle); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98);
    transition: all 0.25s var(--ease-fluid); z-index: 100;
}
.custom-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown-item { padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; color: var(--text-main); transition: background 0.2s; cursor: pointer; }
.dropdown-item:hover, .dropdown-item.selected { background: var(--input-bg); color: var(--accent); font-weight: 500; }

/*buttons */
button {
    width: 100%; padding: 16px; border-radius: 14px; border: none; font-size: 1.05rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s var(--ease-fluid); font-family: inherit;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
body.theme-midnight .btn-primary, body.theme-paper .btn-primary { color: #000; }
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 8px 25px var(--ring-color); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.btn-small { padding: 10px 18px; border-radius: 10px; font-size: 0.95rem; background: var(--text-main); color: var(--bg-base); width: auto; }
body.theme-paper .btn-small { background: var(--accent); color: #fff; }
.btn-small:hover { transform: scale(1.05); }

/* result */
.icon-circle { display: inline-flex; padding: 16px; border-radius: 50%; background: var(--input-bg); color: var(--accent); border: 1px solid var(--border-subtle); }
.url-bar { display: flex; align-items: center; background: var(--input-bg); border-radius: 14px; padding: 6px; border: 1px solid var(--border-subtle); }
.url-bar input { border: none; flex: 1; padding: 10px 14px; outline: none; background: transparent; color: var(--text-main); font-size: 0.95rem; }

.qr-card { display: inline-block; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.qr-image { width: 130px; height: 130px; display: block; border-radius: 8px; }
.upi-id { font-family: monospace; font-size: 0.9rem; color: var(--text-muted); }

/* sax seal*/
.render-intro { margin-top: 15vh; }
.wax-seal-wrapper { display: inline-block; cursor: pointer; transition: transform 0.2s var(--ease-spring); }
.wax-seal-wrapper:hover { transform: scale(1.05); }
.wax-seal {
    width: 100px; height: 100px; background: radial-gradient(circle at 35% 35%, #ff5e5e, var(--seal-color) 70%);
    border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
}
.seal-letter { color: rgba(255,255,255,0.95); font-size: 2.5rem; text-shadow: -1px -1px 2px rgba(255,255,255,0.4), 1px 2px 4px rgba(0,0,0,0.5); }

.seal-breaking { animation: sealPop 0.5s forwards var(--ease-fluid); pointer-events: none; }
@keyframes sealPop {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(0.9); filter: brightness(0.8); }
    100% { transform: scale(2.5); filter: blur(20px); opacity: 0; }
}

/* Letter */
.letter-format { padding: 45px 35px; cursor: pointer; position: relative; }
.letter-to { font-size: 1.6rem; color: var(--accent); opacity: 0; margin-bottom: 20px; }
.message-body { 
    font-size: 1.1rem; line-height: 1.8; opacity: 0; font-weight: 300;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;
}
.message-from { font-size: 1.25rem; font-style: italic; color: var(--accent); text-align: right; border-top: 1px solid var(--border-subtle); padding-top: 20px; margin-top: 32px; opacity: 0; }

.skip-hint { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; font-size: 0.75rem; color: var(--text-muted); opacity: 0.5; animation: pulseOpacity 2s infinite; pointer-events: none;}

/* typewriter and skip */
.typewriter-ready { opacity: 1 !important; }
.reveal-instant .letter-to, .reveal-instant .message-body, .reveal-instant .message-from { opacity: 1; transition: opacity 0.3s ease; }
.reveal-instant .skip-hint { display: none; }

/* Animations*/
.fade-in-up { animation: fadeInUp 0.7s var(--ease-fluid) forwards; opacity: 0; transform: translateY(20px); }
.delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.1s; } .delay-3 { animation-delay: 0.15s; } .delay-4 { animation-delay: 0.2s; } .delay-5 { animation-delay: 0.25s; }

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulseOpacity { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }

footer { text-align: center; padding: 24px; font-size: 0.85rem; color: var(--text-muted); z-index: 10; }
footer a { color: var(--text-main); font-weight: 500; text-decoration: none; transition: color 0.3s; }
footer a:hover { color: var(--accent); }
.privacy-text { font-size: 0.75rem; opacity: 0.5; }