/* --- WARNA & HURUF --- */
        :root {
            --paper: #f5ede2;
            --paper-light: #fbf7f0;
            --paper-deep: #e9dccb;
            --ink: #4e3b33;
            --ink-soft: #8a7266;
            --rose: #c98b8b;
            --gold: #c9a36a;
            --polaroid: #fffdf9;
            --font-script: 'Dancing Script', cursive;
            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-hand: 'Caveat', 'Dancing Script', cursive;
            --font-mono: 'Courier Prime', monospace;
        }

        html, body { height: 100%; }

        body {
            margin: 0;
            background-color: var(--paper);
            background-image:
                radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255, 250, 244, 0.95) 0%, rgba(255, 250, 244, 0) 70%),
                radial-gradient(ellipse 45% 40% at 78% 80%, rgba(236, 196, 190, 0.35) 0%, rgba(236, 196, 190, 0) 70%),
                radial-gradient(ellipse 40% 35% at 18% 18%, rgba(232, 206, 160, 0.3) 0%, rgba(232, 206, 160, 0) 70%),
                linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 55%, var(--paper-deep) 100%);
            overflow: hidden;
            font-family: var(--font-mono);
            color: var(--ink);
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            /* PENTING: Mencegah browser melakukan scroll/zoom halaman, biarkan 3D yang menangani */
            touch-action: none;
        }

        #webgl-container { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
        #css-container { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; }

        /* Bayangan tepi & butiran film untuk kesan foto lama */
        #vignette, #grain { position: fixed; inset: 0; pointer-events: none; }
        #vignette {
            z-index: 3;
            background:
                linear-gradient(180deg, rgba(245, 237, 226, 0.7) 0, rgba(245, 237, 226, 0) 120px),
                radial-gradient(ellipse 75% 70% at 50% 50%, rgba(78, 59, 51, 0) 55%, rgba(98, 72, 58, 0.22) 100%);
        }
        #grain {
            z-index: 1000;
            opacity: 0.07;
            mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* --- CUSTOM CURSOR (Desktop Only) --- */
        #cursor-dot, #cursor-circle {
            position: fixed; top: 0; left: 0;
            border-radius: 50%;
            z-index: 9999; pointer-events: none;
            display: none;
        }
        .custom-cursor, .custom-cursor * { cursor: none !important; }
        .custom-cursor.cursor-visible #cursor-dot,
        .custom-cursor.cursor-visible #cursor-circle { display: block; }
        #cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background-color: var(--ink); }
        #cursor-circle {
            width: 40px; height: 40px; margin: -20px 0 0 -20px;
            border: 1.5px solid var(--ink); box-sizing: border-box;
            transition: width 0.3s, height 0.3s, margin 0.3s, background-color 0.3s, border-color 0.3s; opacity: 0.55;
        }
        .cursor-hover #cursor-circle {
            width: 60px; height: 60px; margin: -30px 0 0 -30px;
            background-color: rgba(201, 139, 139, 0.18); border-color: transparent;
        }

        /* --- OVERLAY (halaman pembuka) --- */
        #overlay {
            position: fixed; inset: 0;
            display: flex; justify-content: center; align-items: center;
            z-index: 999;
            background:
                radial-gradient(ellipse 70% 60% at 50% 45%, rgba(251, 247, 240, 0.9) 0%, rgba(245, 237, 226, 0.94) 100%);
            transition: opacity 2s ease, visibility 2s;
            color: var(--ink);
        }
        #overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

        .intro {
            display: flex; flex-direction: column; align-items: center;
            text-align: center; padding: 0 24px;
        }
        .intro > * { opacity: 0; animation: rise-in 1.4s ease forwards; }
        .intro > :nth-child(2) { animation-delay: 0.2s; }
        .intro > :nth-child(3) { animation-delay: 0.45s; }
        .intro > :nth-child(4) { animation-delay: 0.65s; }
        .intro > :nth-child(5), .intro > :nth-child(6) { animation-delay: 0.85s; }
        .intro > :nth-child(7) { animation-delay: 1.1s; }

        @keyframes rise-in {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .intro-eyebrow {
            font-family: var(--font-mono); font-size: 0.8rem;
            letter-spacing: 0.45em; text-transform: uppercase; color: var(--ink-soft);
            margin-right: -0.45em;
        }
        h1 {
            font-family: var(--font-script); font-weight: 700;
            font-size: clamp(2.8rem, 9vw, 4.8rem); line-height: 1.1;
            margin: 14px 0 6px; color: var(--ink);
            text-shadow: 0 2px 18px rgba(201, 139, 139, 0.25);
        }
        .intro-sub {
            font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.45rem);
            color: var(--ink-soft); margin: 0;
        }
        .intro-divider {
            display: flex; align-items: center; gap: 14px; margin: 26px 0 28px;
        }
        .intro-divider::before, .intro-divider::after {
            content: ''; width: 64px; height: 1px;
            background: linear-gradient(90deg, rgba(78, 59, 51, 0), rgba(78, 59, 51, 0.35));
        }
        .intro-divider::after { transform: scaleX(-1); }
        .intro-divider svg { width: 14px; height: 14px; fill: var(--rose); animation: heart-beat 1.8s ease-in-out infinite; }

        @keyframes heart-beat {
            0%, 100% { transform: scale(1); }
            15% { transform: scale(1.25); }
            30% { transform: scale(1); }
            45% { transform: scale(1.18); }
        }

        #loader {
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            height: 58px; transition: opacity 0.6s;
        }
        .loader-bar {
            width: 180px; height: 2px; border-radius: 2px; overflow: hidden;
            background: rgba(78, 59, 51, 0.12);
        }
        #loader-fill {
            display: block; width: 0; height: 100%;
            background: linear-gradient(90deg, var(--gold), var(--rose));
            transition: width 0.4s ease;
        }
        #loader-text { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft); }

        #startButton {
            display: none;
            height: 58px; padding: 0 56px;
            background: rgba(255, 253, 249, 0.4); border: 1.5px solid var(--ink); color: var(--ink);
            font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.4em; text-indent: 0.4em;
            border-radius: 50px; cursor: pointer;
            transition: background-color 0.4s, color 0.4s;
            animation: rise-in 1s ease forwards, soft-pulse 2.8s ease-in-out 1s infinite;
        }
        #startButton:hover, #startButton:focus-visible { background-color: var(--ink); color: var(--paper-light); }
        #startButton:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
        .is-ready #loader { display: none; }
        .is-ready #startButton { display: block; }

        @keyframes soft-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(201, 139, 139, 0.35); }
            50% { box-shadow: 0 0 0 12px rgba(201, 139, 139, 0); }
        }

        .intro-note {
            margin: 22px 0 0; font-family: var(--font-serif); font-style: italic;
            font-size: 1rem; color: var(--ink-soft);
        }

        /* --- TAMPILAN SETELAH MASUK --- */
        #brand, #toolbar, #lyrics-container, #hint, #focus-bar {
            opacity: 0; pointer-events: none;
            transition: opacity 1.2s ease, transform 0.8s ease;
        }
        .entered #brand, .entered #toolbar, .entered #lyrics-container { opacity: 1; transition-delay: 2.4s; }
        .entered #toolbar { pointer-events: auto; }

        #brand {
            position: fixed; z-index: 100;
            top: calc(20px + env(safe-area-inset-top)); left: calc(24px + env(safe-area-inset-left));
            display: flex; flex-direction: column; gap: 2px;
        }
        .brand-title { font-family: var(--font-script); font-weight: 700; font-size: 1.45rem; color: var(--ink); }
        #brand span { text-shadow: 0 0 14px rgba(251, 247, 240, 1), 0 0 4px rgba(251, 247, 240, 0.9); }
        .brand-sub { font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-soft); }

        #toolbar {
            position: fixed; z-index: 100;
            top: calc(20px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right));
            display: flex; gap: 10px;
        }

        .ui-button, .ui-pill {
            display: inline-flex; align-items: center; justify-content: center;
            height: 44px; border-radius: 22px;
            background: rgba(255, 253, 249, 0.62);
            -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border: 1px solid rgba(78, 59, 51, 0.14);
            box-shadow: 0 4px 18px -6px rgba(78, 59, 51, 0.25);
            color: var(--ink); cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }
        .ui-button { width: 44px; padding: 0; }
        .ui-pill { padding: 0 22px; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; }
        .ui-button:hover, .ui-pill:hover { background: rgba(255, 253, 249, 0.92); transform: translateY(-1px); }
        .ui-button:focus-visible, .ui-pill:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
        .ui-button svg {
            width: 18px; height: 18px; fill: none; stroke: currentColor;
            stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        }
        #musicButton .icon-off, #musicButton.is-muted .icon-on { display: none; }
        #musicButton.is-muted .icon-off { display: block; }
        #focus-counter { font-family: var(--font-hand); font-size: 1.25rem; letter-spacing: 0; color: var(--rose); }
        .pill-dot { color: var(--ink-soft); }

        #hint {
            position: fixed; z-index: 100; left: 50%; top: calc(84px + env(safe-area-inset-top));
            transform: translate(-50%, -6px);
            width: max-content; max-width: calc(100% - 48px); text-align: center;
            padding: 10px 18px; border-radius: 20px;
            background: rgba(255, 253, 249, 0.7);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--ink-soft);
        }
        #hint.visible { opacity: 1; transform: translate(-50%, 0); }

        #focus-bar {
            position: fixed; z-index: 100; left: 50%;
            bottom: calc(24px + env(safe-area-inset-bottom));
            transform: translate(-50%, 16px);
            display: flex; align-items: center; gap: 12px;
        }
        .focus-mode #focus-bar { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0.3s; }

        /* --- LIRIK --- */
        #lyrics-container {
            position: fixed; left: 50%; transform: translateX(-50%);
            bottom: calc(56px + env(safe-area-inset-bottom));
            width: 90%; text-align: center; z-index: 100;
            text-shadow: 0 0 18px rgba(251, 247, 240, 1), 0 0 6px rgba(251, 247, 240, 0.9);
        }
        .focus-mode #lyrics-container { bottom: calc(92px + env(safe-area-inset-bottom)); }
        /* Cahaya lembut di belakang lirik supaya tetap terbaca di atas foto */
        #lyrics-container::before {
            content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
            width: min(640px, 115%); height: 130px; transform: translate(-50%, -50%);
            background: radial-gradient(ellipse at center, rgba(251, 247, 240, 0.9) 0%, rgba(251, 247, 240, 0.6) 40%, rgba(251, 247, 240, 0) 70%);
            opacity: 0; transition: opacity 0.6s ease;
        }
        #lyrics-container:has(#lyric-text.visible)::before { opacity: 1; }
        #lyric-text {
            font-family: var(--font-script); font-weight: 500;
            font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--ink);
            transition: opacity 0.45s ease, transform 0.6s ease, filter 0.6s ease;
            opacity: 0; transform: translateY(12px); filter: blur(6px);
        }
        #lyric-text.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

        /* --- FOTO POLAROID --- */
        /* Semua ukuran memakai --u supaya foto yang sedang dilihat bisa dirender lebih tajam
           (--u diperbesar, lalu objek 3D-nya diperkecil dengan faktor yang sama) */
        .element {
            --u: 1px;
            width: calc(200 * var(--u)); height: calc(324 * var(--u));
            cursor: pointer;
        }
        .element.is-focused { --u: calc(var(--hires, 2) * 1px); }
        .card {
            position: relative;
            width: 100%; height: 100%; box-sizing: border-box;
            padding: calc(10 * var(--u)) calc(10 * var(--u)) 0;
            background: linear-gradient(160deg, #fffefb 0%, var(--polaroid) 60%, #f8f2e8 100%);
            border-radius: calc(3 * var(--u));
            box-shadow:
                0 var(--u) calc(2 * var(--u)) rgba(78, 59, 51, 0.12),
                0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgba(78, 59, 51, 0.35);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
            /* Biarkan event touch tembus ke OrbitControls */
            touch-action: none; 
        }
        .photo {
            width: calc(180 * var(--u)); height: calc(270 * var(--u)); overflow: hidden;
            background: #eee4d6;
        }
        .photo img {
            display: block; width: 100%; height: 100%; object-fit: cover;
            filter: sepia(0.22) saturate(0.9) contrast(0.97);
            transition: filter 0.8s ease;
            pointer-events: none;
        }
        .card .caption {
            height: calc(44 * var(--u)); line-height: calc(44 * var(--u)); text-align: center;
            font-family: var(--font-hand); font-size: calc(24 * var(--u)); color: var(--ink-soft);
            pointer-events: none;
        }

        /* Selotip washi di atas polaroid */
        .card.has-tape::before {
            content: '';
            position: absolute; top: calc(-11 * var(--u));
            left: calc(50% + (var(--tape-x, 0) - 38) * var(--u));
            width: calc(76 * var(--u)); height: calc(22 * var(--u));
            background:
                repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 calc(4 * var(--u)), rgba(255, 255, 255, 0) calc(4 * var(--u)) calc(8 * var(--u))),
                var(--tape-color, rgba(226, 170, 170, 0.82));
            transform: rotate(var(--tape-rot, 0deg));
            clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
            pointer-events: none;
        }

        .element:hover .card {
            transform: translateY(calc(-6 * var(--u))) scale(1.03);
            box-shadow:
                0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(78, 59, 51, 0.12),
                0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-12 * var(--u)) rgba(78, 59, 51, 0.4);
        }
        .element:hover .photo img, .element.is-focused .photo img { filter: none; }
        .element.is-focused .card {
            transform: none;
            box-shadow:
                0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(78, 59, 51, 0.12),
                0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-14 * var(--u)) rgba(78, 59, 51, 0.45);
        }

        .whisper-element {
            font-family: var(--font-script); font-weight: 500; color: var(--ink);
            font-size: 24px; pointer-events: none; white-space: nowrap;
            text-shadow: 0 0 12px rgba(251, 247, 240, 0.9);
        }

        @media (hover: none) and (pointer: coarse) {
            #startButton { height: 64px; padding: 0 64px; font-size: 1.2rem; }
        }

        @media (max-width: 600px) {
            #brand { top: calc(16px + env(safe-area-inset-top)); left: calc(18px + env(safe-area-inset-left)); }
            .brand-title { font-size: 1.2rem; }
            .brand-sub { font-size: 0.62rem; }
            #toolbar { top: calc(16px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); gap: 8px; }
            #hint { top: calc(76px + env(safe-area-inset-top)); font-size: 0.72rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .intro > *, .intro-divider svg, #startButton { animation: none; opacity: 1; }
        }