/* ============================================
   GGOGGL.com - Optics Laboratory
   Frutiger Aero / Optical Lens Aesthetic
   ============================================ */

/* --- Custom Properties --- */
:root {
    /* Palette */
    --optical-white: #f4f7fa;
    --frosted-pane: #e8eef5;
    --deep-graphite: #1a1f2e;
    --slate-medium: #5a6577;
    --lens-teal: #0891b2;
    --caustic-amber: #f59e0b;
    --prism-violet: #7c3aed;
    --spectrum-green: #10b981;
    --chromatic-red: #ef4444;
    --chromatic-blue: #3b82f6;

    /* Focal point (updated by JS) */
    --focal-x: 50%;
    --focal-y: 50%;

    /* Typography */
    --font-display: 'Albert Sans', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Sizing */
    --title-size: clamp(3.5rem, 8vw, 9rem);
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--deep-graphite);
    background-color: var(--optical-white);
    overflow-x: hidden;
    cursor: none;
}

/* --- Dot Grid Background --- */
#dot-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--deep-graphite) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.04;
}

/* --- Light Bloom (cursor follower) --- */
#light-bloom {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(8,145,178,0.08) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: left 0.15s ease-out, top 0.15s ease-out;
    will-change: left, top;
}

/* --- Cursor Lens --- */
#cursor-lens {
    position: fixed;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: left 0.08s ease-out, top 0.08s ease-out;
    will-change: left, top;
    overflow: hidden;
    border: 1px solid var(--lens-teal);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), 0 0 60px rgba(8, 145, 178, 0.06);
    opacity: 0;
    mix-blend-mode: normal;
    background: radial-gradient(circle, rgba(8,145,178,0.04) 0%, transparent 70%);
}

#cursor-lens .lens-ring {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(8,145,178,0.25);
}

body:hover #cursor-lens {
    opacity: 1;
}

/* --- Aperture Iris Overlay --- */
#aperture-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--optical-white);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#aperture-overlay.open {
    background: transparent;
}

.iris-blade {
    position: absolute;
    width: 110vmax;
    height: 110vmax;
    background: var(--frosted-pane);
    border: 1px solid var(--lens-teal);
    transform-origin: center center;
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.iris-blade[data-blade="0"] {
    clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
}
.iris-blade[data-blade="1"] {
    clip-path: polygon(50% 50%, 75% 0%, 100% 50%);
}
.iris-blade[data-blade="2"] {
    clip-path: polygon(50% 50%, 100% 50%, 75% 100%);
}
.iris-blade[data-blade="3"] {
    clip-path: polygon(50% 50%, 75% 100%, 25% 100%);
}
.iris-blade[data-blade="4"] {
    clip-path: polygon(50% 50%, 0% 100%, 25% 100%);
    clip-path: polygon(50% 50%, 25% 100%, 0% 50%);
}
.iris-blade[data-blade="5"] {
    clip-path: polygon(50% 50%, 0% 50%, 25% 0%);
}

#aperture-overlay.open .iris-blade[data-blade="0"] {
    clip-path: polygon(50% -80%, -30% -120%, 130% -120%);
    opacity: 0;
}
#aperture-overlay.open .iris-blade[data-blade="1"] {
    clip-path: polygon(130% -30%, 170% -80%, 170% 70%);
    opacity: 0;
}
#aperture-overlay.open .iris-blade[data-blade="2"] {
    clip-path: polygon(130% 130%, 170% 70%, 170% 180%);
    opacity: 0;
}
#aperture-overlay.open .iris-blade[data-blade="3"] {
    clip-path: polygon(50% 180%, 130% 220%, -30% 220%);
    opacity: 0;
}
#aperture-overlay.open .iris-blade[data-blade="4"] {
    clip-path: polygon(-30% 130%, -70% 180%, -70% 70%);
    opacity: 0;
}
#aperture-overlay.open .iris-blade[data-blade="5"] {
    clip-path: polygon(-30% -30%, -70% 70%, -70% -80%);
    opacity: 0;
}

.iris-bloom {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0px rgba(8,145,178,0);
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                height 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#aperture-overlay.open .iris-bloom {
    width: 300px;
    height: 300px;
    box-shadow: 0 0 80px rgba(8,145,178,0.15), 0 0 200px rgba(8,145,178,0.05);
}

/* After overlay is fully done */
#aperture-overlay.done {
    display: none;
}

/* --- Lens Chamber (Full-Viewport Sections) --- */
.lens-chamber {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    z-index: 1;
}

/* --- Focal Point Rings --- */
.focal-point {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.focus-ring {
    position: absolute;
    border: 1px solid rgba(8,145,178,0.15);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.focus-ring.ring-1 {
    width: 100px;
    height: 100px;
    animation: focusRingPulse 4s ease-out infinite;
    animation-delay: 0s;
}

.focus-ring.ring-2 {
    width: 100px;
    height: 100px;
    animation: focusRingPulse 4s ease-out infinite;
    animation-delay: 1.33s;
}

.focus-ring.ring-3 {
    width: 100px;
    height: 100px;
    animation: focusRingPulse 4s ease-out infinite;
    animation-delay: 2.66s;
}

@keyframes focusRingPulse {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

/* --- Chamber Content --- */
.chamber-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
    text-align: center;
}

/* --- Section Titles --- */
.section-title {
    font-family: var(--font-display);
    font-size: var(--title-size);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--deep-graphite);
    margin-bottom: 1.5rem;
    transition: font-weight 0.6s ease;
}

.section-title.in-focus {
    font-weight: 800;
}

/* --- Refraction Text Effect --- */
.refraction-text .letter {
    display: inline-block;
    transition: transform 0.4s ease, color 0.4s ease;
    position: relative;
}

.refraction-text:hover .letter {
    transform: translateY(calc((var(--i) - 3) * 1.5px));
}

.refraction-text:hover .letter:nth-child(1) { color: rgba(239,68,68,0.8); }
.refraction-text:hover .letter:nth-child(2) { color: rgba(245,158,11,0.7); }
.refraction-text:hover .letter:nth-child(-n+3):nth-child(n+3) { color: var(--deep-graphite); }
.refraction-text:hover .letter:nth-last-child(2) { color: rgba(59,130,246,0.7); }
.refraction-text:hover .letter:nth-last-child(1) { color: rgba(124,58,237,0.8); }

/* --- Chromatic Aberration on hover --- */
.section-title:hover {
    text-shadow: 1px 0 var(--chromatic-red), -1px 0 var(--chromatic-blue);
}

/* --- Section Body Text --- */
.section-body {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--slate-medium);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* --- Tech Labels (IBM Plex Mono) --- */
.tech-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--lens-teal);
    display: block;
    margin: 0.5rem 0;
}

/* --- Lens Flare Accents --- */
.lens-flare {
    position: absolute;
    width: 24px;
    height: 24px;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--caustic-amber);
    opacity: 0.5;
    pointer-events: none;
    animation: flareDrift 8s ease-in-out infinite alternate;
}

.flare-1 {
    top: 20%;
    right: 15%;
    animation-delay: 0s;
}

.flare-2 {
    bottom: 25%;
    left: 20%;
    animation-delay: -3s;
    width: 16px;
    height: 16px;
}

.flare-3 {
    top: 15%;
    left: 10%;
    animation-delay: -5s;
    width: 20px;
    height: 20px;
}

.flare-4 {
    bottom: 30%;
    right: 10%;
    animation-delay: -2s;
}

.flare-5 {
    top: 10%;
    right: 20%;
    animation-delay: -1s;
    width: 18px;
    height: 18px;
}

.flare-6 {
    bottom: 15%;
    left: 15%;
    animation-delay: -6s;
    width: 14px;
    height: 14px;
}

@keyframes flareDrift {
    0% {
        transform: translate(0, 0);
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translate(15px, -10px);
        opacity: 0.4;
    }
}

/* --- Frosted Glass Panels --- */
.frosted-panel {
    background: rgba(244, 247, 250, 0.7);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(8,145,178,0.12);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    display: inline-block;
}

/* --- Aperture Watermark --- */
.aperture-watermark {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.04;
    z-index: 0;
}

.watermark-blade {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--lens-teal);
}

.watermark-blade[data-blade="0"] {
    clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
}
.watermark-blade[data-blade="1"] {
    clip-path: polygon(50% 50%, 75% 0%, 100% 50%);
}
.watermark-blade[data-blade="2"] {
    clip-path: polygon(50% 50%, 100% 50%, 75% 100%);
}
.watermark-blade[data-blade="3"] {
    clip-path: polygon(50% 50%, 75% 100%, 25% 100%);
}
.watermark-blade[data-blade="4"] {
    clip-path: polygon(50% 50%, 25% 100%, 0% 50%);
}
.watermark-blade[data-blade="5"] {
    clip-path: polygon(50% 50%, 0% 50%, 25% 0%);
}

/* ============================================
   SECTION 1: APERTURE
   ============================================ */
#section-aperture {
    background: var(--optical-white);
}

/* ============================================
   SECTION 2: SPECTRUM
   ============================================ */
#section-spectrum {
    background: var(--optical-white);
}

.spectrum-bands {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.spectrum-band {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.8rem 2rem;
    color: #fff;
    background: var(--band-color);
    transform: translateX(calc(var(--band-offset) * 8px - 20px));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.4s ease;
    position: relative;
    overflow: hidden;
}

.spectrum-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.spectrum-band:hover::before {
    opacity: 1;
}

.spectrum-band:hover {
    transform: translateX(0) scale(1.02);
}

/* ============================================
   SECTION 3: FOCUS
   ============================================ */
#section-focus {
    background: var(--optical-white);
}

.focus-split {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 0;
    position: relative;
}

.focus-half {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: filter 0.8s ease;
}

.focus-blurred {
    filter: blur(4px);
}

.focus-sharp {
    filter: blur(0px);
}

.focus-half .section-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
}

.focus-plane {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent,
        var(--lens-teal),
        transparent
    );
    opacity: 0.4;
    z-index: 5;
}

.geometric-circle {
    position: absolute;
    border: 1px solid rgba(8,145,178,0.2);
    border-radius: 50%;
    pointer-events: none;
}

.circle-1 {
    width: 120px;
    height: 120px;
    top: 15%;
    right: 10%;
}

.circle-2 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 15%;
}

.circle-3 {
    width: 200px;
    height: 200px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.5;
}

/* ============================================
   SECTION 4: REFLECTION
   ============================================ */
#section-reflection {
    background: var(--optical-white);
}

.reflection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.reflection-original {
    position: relative;
    z-index: 2;
}

.reflection-mirror {
    transform: scaleY(-0.95);
    opacity: 0.3;
    position: relative;
    z-index: 1;
    margin-top: -0.5rem;
    pointer-events: none;
    mask-image: linear-gradient(to top, transparent, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.8));
    -webkit-mask-image: linear-gradient(to top, transparent, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.8));
}

.reflection-mirror .section-title {
    font-size: clamp(2.5rem, 6vw, 7rem);
}

.reflection-surface {
    width: 80%;
    max-width: 700px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--lens-teal),
        transparent
    );
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================
   SECTION 5: KALEIDOSCOPE
   ============================================ */
#section-kaleidoscope {
    background: var(--optical-white);
    overflow: hidden;
}

.kaleidoscope-container {
    position: relative;
}

.kaleidoscope-title {
    position: relative;
    z-index: 3;
}

.kaleidoscope-text {
    position: relative;
    z-index: 3;
}

.kaleidoscope-pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 1;
}

.k-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: rotate(var(--seg-angle));
    transform-origin: center center;
}

.k-segment::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 40%;
    width: 20%;
    height: 40%;
    border: 1px solid rgba(8,145,178,0.12);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.k-segment::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 45%;
    width: 10%;
    height: 20%;
    background: rgba(8,145,178,0.04);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* ============================================
   APERTURE DIAL NAVIGATION
   ============================================ */
#aperture-dial {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    z-index: 9999;
    cursor: pointer;
}

body:hover #aperture-dial {
    cursor: none;
}

.dial-ring {
    width: 100%;
    height: 100%;
    border: 2px solid var(--lens-teal);
    border-radius: 50%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(244, 247, 250, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dial-notch {
    position: absolute;
    width: 3px;
    height: 10px;
    background: var(--lens-teal);
    top: -1px;
    left: 50%;
    transform-origin: 50% 28px;
    transform: translateX(-50%) rotate(calc(var(--notch-angle, 0deg)));
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dial-notch:hover {
    background: var(--caustic-amber);
}

.dial-notch[data-section="0"] { --notch-angle: 0deg; }
.dial-notch[data-section="1"] { --notch-angle: 72deg; }
.dial-notch[data-section="2"] { --notch-angle: 144deg; }
.dial-notch[data-section="3"] { --notch-angle: 216deg; }
.dial-notch[data-section="4"] { --notch-angle: 288deg; }

.dial-indicator {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--caustic-amber);
}

/* ============================================
   SECTION TRANSITION EFFECTS
   ============================================ */
.lens-chamber.blurring .chamber-content {
    filter: blur(6px);
    transition: filter 0.4s ease;
}

.lens-chamber.sharpening .chamber-content {
    filter: blur(0px);
    transition: filter 0.4s ease;
}

/* --- Frosted panel slide-in --- */
.frosted-panel {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.6s ease;
}

.frosted-panel.visible {
    transform: translateY(0);
    opacity: 1;
}

/* ============================================
   SCROLL-DRIVEN FOCUS WEIGHT ANIMATION
   ============================================ */
.section-title[data-weight] {
    font-variation-settings: 'wght' var(--current-weight, 300);
    font-weight: var(--current-weight, 300);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .focus-split {
        flex-direction: column;
    }

    .focus-plane {
        width: 100%;
        height: 2px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    #cursor-lens {
        display: none;
    }

    body {
        cursor: auto;
    }

    .kaleidoscope-pattern {
        width: 300px;
        height: 300px;
    }

    .aperture-watermark {
        width: 300px;
        height: 300px;
    }

    #aperture-dial {
        bottom: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }

    .dial-notch {
        transform-origin: 50% 22px;
    }

    .spectrum-band {
        padding: 0.6rem 1.2rem;
    }
}

@media (max-width: 480px) {
    :root {
        --title-size: clamp(2.5rem, 12vw, 4rem);
    }

    .chamber-content {
        padding: 1.5rem;
    }

    .focus-half {
        padding: 1.5rem;
    }

    .frosted-panel {
        padding: 1rem 1.2rem;
    }
}

/* ============================================
   UTILITY ANIMATIONS
   ============================================ */
@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Prevent motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}