/* -----------------------------------------
   FONT
----------------------------------------- */
@font-face {
    font-family: 'Rinter';
    src: url('Assets/Web-PS/Rinter.woff2') format('woff2'),
        url('Assets/Web-TT/Rinter.woff') format('woff'),
        url('Assets/Web-TT/Rinter.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --bg: #0a0a0a;
    --fg: #ffffff;
    --dim: rgba(255, 255, 255, 0.38);
    --bar-h: 68px;
    --font: 'Rinter', 'Helvetica Neue', Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    /* NO scroll-behavior: smooth here -- JS handles it */
    overflow: hidden;
    /* prevent native scroll on desktop */
}

body {
    background: var(--bg);
    padding-bottom: var(--bar-h);
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
    overflow: hidden;
    height: 100vh;
}

/* -----------------------------------------
   SITE HEADER
----------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px clamp(20px, 4vw, 56px);
    background: transparent;
    pointer-events: none;
}

.site-header>* {
    pointer-events: auto;
}

.site-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s var(--ease);
}

.site-header__logo:hover {
    opacity: 0.7;
}

.logo-persistent {
    display: block;
    height: 18px;
    width: auto;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    position: relative;
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    text-decoration: none;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s var(--ease);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--fg);
    transition: width 0.4s var(--ease);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    opacity: 0.8;
}

/* -----------------------------------------
   PROGRESS DOTS (left centre)
----------------------------------------- */
.progress-dots {
    position: fixed;
    left: clamp(16px, 3vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--dim);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.4s var(--ease);
}

.progress-dot:hover {
    border-color: var(--fg);
    transform: scale(1.3);
}

.progress-dot.is-active {
    background: var(--fg);
    border-color: var(--fg);
    transform: scale(1.2);
}

/* -----------------------------------------
   GRADIENT OVERLAY (fixed at bottom, always animated)
----------------------------------------- */
.gradient-overlay {
    --cx1: 50%;
    --cy1: 50%;
    --cx2: 30%;
    --cy2: 60%;
    --cx3: 70%;
    --cy3: 40%;
    --cx4: 60%;
    --cy4: 70%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    /* Only show on hover */
    transition: opacity 0.8s var(--ease);
}

.gradient-overlay.is-hovered {
    opacity: 1;
}

/* Blobs are much larger now, and slower */
.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(200px);
    will-change: transform, left, top;
}

/* Blob 1 (Top Left) */
.gradient-blob--1 {
    width: 1000px;
    height: 1000px;
    background: var(--blob-c1, rgba(255, 253, 243, 0.829));
    left: var(--cx1);
    top: var(--cy1);
    transform: translate(-50%, -50%);
    animation: blob-drift-1 15s ease-in-out infinite alternate;
    transition: background 0.8s var(--ease);
}

/* Blob 2 (Top Right) */
.gradient-blob--2 {
    width: 1200px;
    height: 1200px;
    background: rgb(255, 199, 125);
    background: var(--blob-c2, rgba(138, 70, 43, 0.568));
    left: var(--cx2);
    top: var(--cy2);
    transform: translate(-50%, -50%);
    animation: blob-drift-2 18s ease-in-out infinite alternate;
    transition: background 0.8s var(--ease);
}

/* Blob 3 (Bottom Left) */
.gradient-blob--3 {
    width: 1200px;
    height: 1200px;
    background: var(--blob-c3, rgba(138, 70, 43, 0.568));
    left: var(--cx3);
    top: var(--cy3);
    transform: translate(-50%, -50%);
    animation: blob-drift-3 21s ease-in-out infinite alternate;
    transition: background 0.8s var(--ease);
}

/* Blob 4 (Bottom Right) */
.gradient-blob--4 {
    width: 1000px;
    height: 1000px;
    background: var(--blob-c4, rgba(221, 56, 27, 0.829));
    left: var(--cx4);
    top: var(--cy4);
    transform: translate(-50%, -50%);
    animation: blob-drift-4 17s ease-in-out infinite alternate;
    transition: background 0.8s var(--ease);
}

@keyframes blob-drift-1 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-48%, -52%) scale(1.05);
    }

    100% {
        transform: translate(-52%, -48%) scale(0.95);
    }
}

@keyframes blob-drift-2 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    33% {
        transform: translate(-45%, -55%) scale(1.03);
    }

    100% {
        transform: translate(-55%, -45%) scale(0.97);
    }
}

@keyframes blob-drift-3 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    33% {
        transform: translate(-48%, -45%) scale(1.04);
    }

    100% {
        transform: translate(-52%, -55%) scale(0.96);
    }
}

@keyframes blob-drift-4 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-45%, -48%) scale(1.05);
    }

    100% {
        transform: translate(-55%, -52%) scale(0.94);
    }
}

/* -----------------------------------------
   LIGHT MODE OVERRIDES
----------------------------------------- */
body.light-mode {
    --bg: #ffffff;
    --fg: #0a0a0a;
    --dim: rgba(0, 0, 0, 0.5);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

body.light-mode .info-desc.is-hovered {
    color: var(--fg);
}

body.light-mode .info-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

img {
    display: block;
}

/* -----------------------------------------
   SCROLLBAR (thin, minimal)
----------------------------------------- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

/* -----------------------------------------
   SCENES WRAPPER (snap scroll)
----------------------------------------- */
.scenes {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* hide scrollbar for snap container */
}

.scenes::-webkit-scrollbar {
    display: none;
}

/* -----------------------------------------
   SINGLE SCENE
----------------------------------------- */
.scene {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: background 0.4s var(--ease);
}

/* Logo SVG container */
.scene__logo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(90vw, 900px);
    padding: clamp(16px, 3vw, 48px);
}

/* Expand activation radius for hover interactions */
.scene__logo-wrap::after {
    content: '';
    position: absolute;
    inset: -15vh -10vw;
    /* Expands hover area widely around the logo wrapper */
    z-index: 10;
}

.scene__logo {
    width: 100%;
    height: auto;
    max-height: 65vh;
    object-fit: contain;
    transition: transform 0.6s var(--ease);
    will-change: transform;
}

/* Hover FX */
.scene__logo-wrap:hover .scene__logo {
    transform: scale(1.04);
}

.info-desc.is-hovered {
    color: #ffffff;
    transform: translateY(-4px) scale(1.02);
}

/* -----------------------------------------
   FIXED BOTTOM INFO BAR & DESC
----------------------------------------- */
.info-desc {
    position: fixed;
    bottom: var(--bar-h);
    left: 0;
    right: 0;
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: 12px;
    z-index: 100;
    pointer-events: none;
    font-family: var(--font);
    font-size: 13px;
    color: var(--dim);
    line-height: 1.4;
    text-align: center;
    transition: transform 0.4s var(--ease), color 0.4s var(--ease), opacity 0.4s var(--ease);
    will-change: transform, color, opacity;
    transform-origin: bottom center;
}

.info-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--bar-h);

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0;
    padding: 0 clamp(20px, 4vw, 56px);

    background: var(--bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.015em;
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* -----------------------------------------
   THEME SWITCH BUTTON (inside header)
----------------------------------------- */
.theme-switch {
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 40px;
    background: transparent;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.theme-switch:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.light-mode .theme-switch {
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .theme-switch:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Left column: stacked name + author */
.info-bar__left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.info-bar__name {
    font-size: 14px;
    font-weight: 400;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-bar__author {
    color: var(--fg);
    font-size: 11px;
    white-space: nowrap;
}

/* Centre: industry */
.info-bar__industry {
    color: var(--fg);
    font-family: var(--font);
    white-space: nowrap;
    text-align: center;
    justify-self: center;
}

/* Right: year */
.info-bar__year {
    color: var(--fg);
    white-space: nowrap;
    text-align: right;
    font-size: 11px;
}

/* Typewriter cursor pulse */
.typing::after {
    content: '|';
    animation: blink 0.7s step-end infinite;
    margin-left: 1px;
    opacity: 0.7;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0;
    }
}

/* Slide down animation class for text */
.is-hidden {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}

/* -----------------------------------------
   RESPONSIVE (PHONES ONLY - allow free scroll)
----------------------------------------- */
@media (max-width: 600px) {

    html,
    body {
        overflow: auto;
        height: auto;
    }

    .scenes {
        height: auto;
        overflow: visible;
        scroll-snap-type: none;
    }

    .scene {
        height: auto;
        min-height: 50vh;
        padding: 10vh 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .scene__logo-wrap {
        padding: 0;
        width: 90vw;
    }

    .scene__logo {
        max-height: 50vh;
    }

    .info-desc {
        font-size: 14px;
        margin-bottom: 12px;
        padding: 0 16px;
    }

    .info-bar {
        padding: 0 16px;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .info-bar__name {
        font-size: 13px;
    }

    .info-bar__author {
        font-size: 11px;
    }

    .info-bar__industry {
        font-size: 13px;
        white-space: normal;
        line-height: 1.3;
        padding: 0 4px;
    }

    .info-bar__year {
        font-size: 13px;
    }

    .gradient-overlay {
        display: none;
    }

    .progress-dots {
        display: none;
    }
}