/* ===================================
   CSS Variables & Theming
   =================================== */
:root {
    /* Light scene (default) - porcelain/paper */
    --bg-color: #faf8f3;
    --text-primary: #0a0a0a;
    --text-secondary: #3a3a3a;
    --text-tertiary: #6a6a6a;
    --accent: #1a1a1a;

    /* Transitions */
    --transition-scene: 700ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-lamp: 1800ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-exposure: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --spacing-unit: 1rem;
}

[data-scene="dark"] {
    --bg-color: #0d0d0d;
    --text-primary: #f0f0f0;
    --text-secondary: #b8b8b8;
    --text-tertiary: #7a7a7a;
    --accent: #e0e0e0;
}

/* ===================================
   Reset & Base
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* ===================================
   Viewport Lock Container
   =================================== */
.scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    transition: background-color var(--transition-scene),
        color var(--transition-scene);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* Camera exposure blur overlay (Performance optimized) */
.exposure-overlay {
    position: fixed;
    inset: -50px;
    /* Oversized to prevent edges when blurred */
    background: transparent;
    backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-exposure) ease, visibility var(--transition-exposure) ease;
    will-change: opacity;
}

body.transitioning .exposure-overlay {
    opacity: 0.95;
    visibility: visible;
}

/* ===================================
   Film Grain Texture & Dust Particles
   =================================== */
.grain-overlay {
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="5" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
    animation: grainShift 10s steps(12) infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes grainShift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, 5%);
    }

    30% {
        transform: translate(7%, -25%);
    }

    40% {
        transform: translate(-5%, 25%);
    }

    50% {
        transform: translate(-15%, 10%);
    }

    60% {
        transform: translate(15%, 0%);
    }

    70% {
        transform: translate(0%, 15%);
    }

    80% {
        transform: translate(3%, 35%);
    }

    90% {
        transform: translate(-10%, 10%);
    }
}

[data-scene="dark"] .grain-overlay {
    opacity: 0.06;
}

/* Snowfall canvas */
.dust-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    will-change: transform;
    transform: translateZ(0);
}

/* ===================================
   Light Cone (SVG)
   =================================== */
.light-cone {
    position: fixed;
    top: 0;
    right: calc(18% - 90px);
    width: 500px;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-scene), visibility var(--transition-scene);
    transform-origin: top center;
    will-change: transform, opacity;
    transform: translateZ(0);
}

[data-scene="dark"] .light-cone {
    opacity: 0;
    visibility: hidden;
}

/* ===================================
   Realistic Lamp
   =================================== */
.lamp-container {
    position: fixed;
    top: 0;
    right: 18%;
    z-index: 100;
    cursor: pointer;
    transform: translateY(-400px);
    /* Initial position */
    animation: lampDescend var(--transition-lamp) forwards, lampSway 5s ease-in-out infinite 2s;
    animation-delay: 300ms, 2s;
    transform-origin: top center;
    will-change: transform;
}

@keyframes lampDescend {
    0% {
        transform: translate(var(--tremor-x, 0), -400px);
    }

    68% {
        transform: translate(var(--tremor-x, 0), 8vh);
    }

    82% {
        transform: translate(var(--tremor-x, 0), calc(8vh - 6px));
    }

    92% {
        transform: translate(var(--tremor-x, 0), calc(8vh - 2px));
    }

    100% {
        transform: translate(var(--tremor-x, 0), 8vh);
    }
}

@keyframes lampSway {

    0%,
    100% {
        transform: translate(var(--tremor-x, 0), 8vh) rotate(0deg);
    }

    25% {
        transform: translate(var(--tremor-x, 0), 8vh) rotate(0.5deg);
    }

    75% {
        transform: translate(var(--tremor-x, 0), 8vh) rotate(-0.5deg);
    }
}

/* Ceiling cap */
.ceiling-cap {
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Cord */
.lamp-cord {
    display: block;
    margin: 0 auto;
    transform-origin: top center;
    filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.2));
    position: relative;
    margin-bottom: -4px;
    /* Seamless connection with lamp */
    will-change: transform;
}

/* Lamp fixture */
.lamp-fixture {
    position: relative;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* Touch-friendly hover/active states */
@media (hover: hover) and (pointer: fine) {
    .lamp-container:hover .lamp-fixture {
        transform: scale(1.03) translateY(-2px);
    }
}

.lamp-container:active .lamp-fixture {
    transform: scale(0.97) translateY(1px);
}

.lamp-svg {
    display: block;
}

/* Bulb glow */
.bulb-glow {
    transition: opacity var(--transition-scene);
    will-change: opacity;
}

[data-scene="light"] .bulb-glow {
    opacity: 0.75;
}

[data-scene="dark"] .bulb-glow {
    opacity: 0;
}

/* ===================================
   Main Content Layout
   =================================== */
.content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 8vw;
    pointer-events: none;
    /* Allow clicks to pass to lamp */
}

.left-panel {
    max-width: 600px;
    animation: contentFadeIn 1200ms ease-out forwards;
    animation-delay: 800ms;
    opacity: 0;
    pointer-events: auto;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   Premium Editorial Typography
   =================================== */
.microline {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 5rem;
    transition: color var(--transition-scene);
    font-variant: small-caps;
    opacity: 0.7;
}

.wordmark {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: clamp(3.5rem, 15vw, 10rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin-bottom: 2.5rem;
    color: var(--text-primary);
    transition: color var(--transition-scene);
    will-change: transform, color;
}

.tagline-container {
    position: relative;
    max-width: 520px;
}

.tagline {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: clamp(1.1rem, 2.6vw, 1.55rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 520px;
    letter-spacing: -0.01em;
    margin: 0;
    will-change: opacity;
}

/* Main sharp text layer */
.main-layer {
    position: relative;
    z-index: 2;
    transition: color var(--transition-scene), opacity var(--transition-scene);
}

/* Glow layer (underneath) */
.glow-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #F2F2EE;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(1px);
    pointer-events: none;
    transition: opacity 400ms ease-out;
    /* Removed animated blur */
}

/* When lamp is OFF - glow becomes visible */
[data-scene="dark"] .glow-layer {
    opacity: 0.35;
}

/* ===================================
   Easter Egg Message Box
   =================================== */
.easter-egg-message {
    position: fixed;
    right: 18%;
    /* 8vh (lamp) + 490px offset */
    transform: translate(50%, calc(8vh + 490px));
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    letter-spacing: 0.025em;
    z-index: 50;
    white-space: nowrap;

    /* Card styling */
    padding: 12px 18px;
    border-radius: 7px;
    background: #f5f5f0;
    color: #1a1a1a;
    border: 1px solid #e8e8e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    transition: background-color var(--transition-scene),
        color var(--transition-scene),
        border-color var(--transition-scene),
        box-shadow var(--transition-scene);
    will-change: transform, opacity;
}

/* Connection notch - tiny centered line at top */
.easter-egg-message::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background: currentColor;
    opacity: 0.3;
}

/* Dark mode styling */
[data-scene="dark"] .easter-egg-message {
    background: #2a2a2a;
    color: #F2F2EE;
    border: 1px solid #3a3a3a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Reveal animation - editorial, calm */
.easter-egg-message.visible {
    animation: easterEggReveal 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
        easterEggDisappear 350ms cubic-bezier(0.4, 0, 0.2, 1) 2500ms forwards;
}

@keyframes easterEggReveal {
    from {
        opacity: 0;
        transform: translate(50%, calc(8vh + 486px));
    }

    to {
        opacity: 1;
        transform: translate(50%, calc(8vh + 490px));
    }
}

@keyframes easterEggDisappear {
    from {
        opacity: 1;
        transform: translate(50%, calc(8vh + 490px));
    }

    to {
        opacity: 0;
        transform: translate(50%, calc(8vh + 493px));
    }
}

/* Tablet positioning */
@media (max-width: 1024px) {
    .easter-egg-message {
        right: 10%;
        transform: translate(50%, calc(8vh + 430px));
    }

    @keyframes easterEggReveal {
        from {
            opacity: 0;
            transform: translate(50%, calc(8vh + 426px));
        }

        to {
            opacity: 1;
            transform: translate(50%, calc(8vh + 430px));
        }
    }

    @keyframes easterEggDisappear {
        from {
            opacity: 1;
            transform: translate(50%, calc(8vh + 430px));
        }

        to {
            opacity: 0;
            transform: translate(50%, calc(8vh + 433px));
        }
    }
}

/* Mobile positioning */
@media (max-width: 768px) {
    .easter-egg-message {
        right: 5%;
        transform: translate(50%, calc(6vh + 360px));
    }

    @keyframes easterEggReveal {
        from {
            opacity: 0;
            transform: translate(50%, calc(6vh + 356px));
        }

        to {
            opacity: 1;
            transform: translate(50%, calc(6vh + 360px));
        }
    }

    @keyframes easterEggDisappear {
        from {
            opacity: 1;
            transform: translate(50%, calc(6vh + 360px));
        }

        to {
            opacity: 0;
            transform: translate(50%, calc(6vh + 363px));
        }
    }
}

@media (max-width: 480px) {
    .easter-egg-message {
        right: 0%;
        transform: translate(50%, calc(5vh + 290px));
    }

    @keyframes easterEggReveal {
        from {
            opacity: 0;
            transform: translate(50%, calc(5vh + 286px));
        }

        to {
            opacity: 1;
            transform: translate(50%, calc(5vh + 290px));
        }
    }

    @keyframes easterEggDisappear {
        from {
            opacity: 1;
            transform: translate(50%, calc(5vh + 290px));
        }

        to {
            opacity: 0;
            transform: translate(50%, calc(5vh + 293px));
        }
    }
}

/* ===================================
   Reduced Motion
   =================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }

    .lamp-container {
        animation: none;
        transform: translateY(8vh);
    }

    .grain-overlay {
        animation: none;
    }

    .exposure-overlay {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.4);
        /* Fallback */
    }

    .light-cone {
        transition: opacity 200ms ease;
    }

    .dust-canvas {
        display: none;
    }
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
    .lamp-container {
        right: 10%;
    }

    .light-cone {
        right: calc(10% - 90px);
        width: 450px;
    }
}

@media (max-width: 768px) {
    .content {
        padding: 0 6vw;
        align-items: flex-start;
        padding-top: 28vh;
    }

    .lamp-container {
        right: 5%;
        transform: translateX(15px) scale(0.7) translateY(6vh);
        animation: lampDescendMobile var(--transition-lamp) forwards, lampSwayMobile 5s ease-in-out infinite 2s;
    }

    @keyframes lampDescendMobile {
        0% {
            transform: translateX(15px) scale(0.7) translateY(-400px);
        }

        100% {
            transform: translateX(15px) scale(0.7) translateY(6vh);
        }
    }

    @keyframes lampSwayMobile {

        0%,
        100% {
            transform: translateX(15px) scale(0.7) translateY(6vh) rotate(0deg);
        }

        25% {
            transform: translateX(15px) scale(0.7) translateY(6vh) rotate(0.5deg);
        }

        75% {
            transform: translateX(15px) scale(0.7) translateY(6vh) rotate(-0.5deg);
        }
    }

    .light-cone {
        right: calc(5% - 63px);
        width: 350px;
        opacity: 0.8;
    }

    .microline {
        margin-bottom: 3.5rem;
    }

    .wordmark {
        margin-bottom: 2rem;
    }

    .tagline {
        margin-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .lamp-container {
        transform: translateX(30px) scale(0.6) translateY(5vh);
        right: 0%;
        /* Larger touch target for mobile */
        padding: 20px;
        margin: -20px;
        animation: lampDescendSmall var(--transition-lamp) forwards, lampSwaySmall 5s ease-in-out infinite 2s;
    }

    @keyframes lampDescendSmall {
        0% {
            transform: translateX(30px) scale(0.6) translateY(-400px);
        }

        100% {
            transform: translateX(30px) scale(0.6) translateY(5vh);
        }
    }

    @keyframes lampSwaySmall {

        0%,
        100% {
            transform: translateX(30px) scale(0.6) translateY(5vh) rotate(0deg);
        }

        25% {
            transform: translateX(30px) scale(0.6) translateY(5vh) rotate(0.5deg);
        }

        75% {
            transform: translateX(30px) scale(0.6) translateY(5vh) rotate(-0.5deg);
        }
    }

    .light-cone {
        right: calc(0% - 30px);
        width: 250px;
        opacity: 0.6;
    }

    .content {
        padding-top: 32vh;
        padding-left: 8vw;
        padding-right: 8vw;
    }

    .microline {
        margin-bottom: 2.5rem;
        font-size: 0.6rem;
    }

    .wordmark {
        font-size: clamp(3.5rem, 16vw, 8rem);
        margin-bottom: 1.5rem;
    }

    .tagline {
        font-size: clamp(1rem, 4.5vw, 1.3rem);
    }
}

/* ===================================
   Verification Checklist
   =================================== */
/*
- “No scrollbar appears when toggling lamp” confirmed
- “All animations use transform/opacity only” confirmed
- “Blur is constant; only opacity animates” confirmed
*/