/* ====================================================
   GIANMARCO SPINA — LIVING SURFACE V2
   Clean cinematic design + four new interactions
==================================================== */

:root {
    --gs-gold: #d8b879;
    --gs-ivory: #f5f2eb;
}

/* =========================================
   01 — MAGNETIC TYPOGRAPHY
========================================= */

.gs-magnetic {
    will-change: transform;
    transition: transform 480ms cubic-bezier(.16,1,.3,1);
}

.gs-magnetic.is-magnetized {
    transition-duration: 110ms;
}


/* =========================================
   02 — FILM REVEAL ON SCROLL
========================================= */

@media (prefers-reduced-motion: no-preference) {

    .gs-reveal-ready .project-poster {
        clip-path: inset(0 0 100% 0);
        transform: translateY(28px);
        opacity: .65;
    }

    .gs-reveal-ready .project-info {
        opacity: 0;
        transform: translateY(35px);
    }

    .gs-reveal-ready.gs-revealed .project-poster {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0);

        transition:
            clip-path 850ms cubic-bezier(.76,0,.24,1),
            opacity 750ms ease,
            transform 850ms cubic-bezier(.16,1,.3,1);
    }

    .gs-reveal-ready.gs-revealed .project-info {
        opacity: 1;
        transform: translateY(0);

        transition:
            opacity 750ms ease 160ms,
            transform 850ms cubic-bezier(.16,1,.3,1) 160ms;
    }
}


/* =========================================
   03 — LIVING CONTACT SHEET
========================================= */

.stills-gallery .still-card {
    position: relative;

    transform: translateZ(0);

    transition:
        transform 480ms cubic-bezier(.16,1,.3,1),
        filter 350ms ease,
        opacity 350ms ease;

    will-change: transform;
}

.stills-gallery.gs-gallery-active
.still-card:not(.gs-still-active) {
    opacity: .75;
    filter: brightness(.83);
}

.stills-gallery .still-card.gs-still-active {
    transform: translateY(-7px) scale(1.018);
    filter: brightness(1.08);
    z-index: 2;
}


/* =========================================
   04 — SECTION COUNTER
========================================= */

.gs-section-counter {
    position: fixed;

    right: 5%;
    top: 50%;

    transform: translateY(-50%);

    z-index: 100;
    pointer-events: none;

    display: flex;
    align-items: center;
    gap: 9px;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .12em;

    color: var(--gs-ivory);

    opacity: .7;
    mix-blend-mode: difference;
}

.gs-counter-window {
    height: 13px;
    overflow: hidden;
}

.gs-counter-track {
    display: flex;
    flex-direction: column;

    line-height: 13px;

    transition:
        transform 430ms cubic-bezier(.16,1,.3,1);
}

.gs-counter-track span {
    display: block;
    height: 13px;
}

.gs-counter-divider,
.gs-counter-total {
    opacity: .5;
}


/* =========================================
   05 — GOLDEN THREAD
========================================= */

.gs-golden-line {
    position: relative;
}

.gs-golden-thread {
    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    pointer-events: none;
    z-index: 5;

    opacity: 0;

    background: radial-gradient(
        ellipse 95px 4px at var(--gs-line-x,50%) 50%,
        rgba(255,231,180,.95),
        rgba(216,184,121,.4) 40%,
        transparent 100%
    );

    filter:
        drop-shadow(0 0 4px rgba(216,184,121,.4));

    transition: opacity 230ms ease;
}

.gs-golden-line.gs-line-active
.gs-golden-thread {
    opacity: 1;
}


/* =========================================
   06 — CINEMATIC PARALLAX
========================================= */

.hero {
    --gs-parallax-x: 0px;
    --gs-parallax-y: 0px;
}

.hero::before {
    background-position:
        calc(50% + var(--gs-parallax-x))
        calc(50% + var(--gs-parallax-y));
}


/* =========================================
   NEW 07 — FRAME SCRUBBING
========================================= */

.gs-scrub-container {
    position: relative !important;
    overflow: hidden;
    isolation: isolate;
    cursor: ew-resize;
}

.gs-scrub-container > img:first-of-type {
    display: block;
}

.gs-scrub-layer {
    position: absolute !important;

    inset: 0;
    z-index: 3;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    max-width: none;

    pointer-events: none;

    opacity: 0;

    transition: opacity 180ms ease;
}

.gs-scrub-container.gs-scrub-active
.gs-scrub-layer {
    opacity: 1;
}

.gs-scrub-indicator {
    position: absolute;

    bottom: 17px;
    left: 18px;
    right: 18px;

    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 9px;
    letter-spacing: .12em;

    color: #f5f2eb;

    pointer-events: none;

    opacity: 0;
    transform: translateY(5px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    text-shadow: 0 1px 5px rgba(0,0,0,.8);
}

.gs-scrub-active .gs-scrub-indicator {
    opacity: 1;
    transform: translateY(0);
}

.gs-scrub-progress {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gs-scrub-progress i {
    display: block;

    width: 13px;
    height: 2px;

    background: rgba(245,242,235,.35);

    transition: background 120ms ease;
}

.gs-scrub-progress i.is-current {
    background: var(--gs-gold);
    box-shadow: 0 0 5px rgba(216,184,121,.5);
}


/* =========================================
   NEW 08 — INTERACTIVE VIEWFINDER
========================================= */

.gs-viewfinder {
    position: relative;
}

.gs-viewfinder-overlay {
    position: absolute;

    inset: 13px;
    z-index: 8;

    pointer-events: none;

    opacity: 0;
    transform: scale(1.035);

    transition:
        opacity 250ms ease,
        transform 350ms cubic-bezier(.16,1,.3,1);
}

.gs-viewfinder:hover > .gs-viewfinder-overlay,
.gs-viewfinder:focus-within > .gs-viewfinder-overlay {
    opacity: 1;
    transform: scale(1);
}

.gs-viewfinder-corner {
    position: absolute;

    width: 19px;
    height: 19px;

    border-color: var(--gs-gold);
    border-style: solid;
    border-width: 0;

    filter:
        drop-shadow(0 0 4px rgba(216,184,121,.45));
}

.gs-viewfinder-corner.tl {
    left: 0;
    top: 0;

    border-left-width: 1px;
    border-top-width: 1px;
}

.gs-viewfinder-corner.tr {
    right: 0;
    top: 0;

    border-right-width: 1px;
    border-top-width: 1px;
}

.gs-viewfinder-corner.bl {
    left: 0;
    bottom: 0;

    border-left-width: 1px;
    border-bottom-width: 1px;
}

.gs-viewfinder-corner.br {
    right: 0;
    bottom: 0;

    border-right-width: 1px;
    border-bottom-width: 1px;
}


/* =========================================
   NEW 09 — MAGNETIC CONNECTIONS
========================================= */

#gsMagneticConnections {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 9000;

    pointer-events: none;

    overflow: visible;

    opacity: 0;

    transition: opacity 170ms ease;
}

#gsMagneticConnections.is-active {
    opacity: 1;
}

#gsMagneticConnections path {
    fill: none;
    stroke: var(--gs-gold);
    stroke-width: .85;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

#gsMagneticConnections .gs-connection-glow {
    stroke-width: 4;
    opacity: .2;

    filter: blur(4px);
}

.gs-connection-anchor {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--gs-gold);

    box-shadow:
        0 0 7px rgba(216,184,121,.65);

    pointer-events: none;

    opacity: 0;

    transform: translate(-50%,-50%) scale(.4);

    transition:
        opacity 200ms ease,
        transform 250ms ease;
}

.gs-connection-target.gs-connected
.gs-connection-anchor {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}


/* =========================================
   NEW 10 — CINEMATIC SCROLL TRANSITION
========================================= */

.hero {
    --gs-scroll-progress: 0;

    isolation: isolate;
}

.hero > .gs-scroll-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: #050505;

    opacity: calc(var(--gs-scroll-progress) * .68);

    pointer-events: none;
}

.hero.gs-scroll-cinematic .hero-content {
    z-index: 2;

    transform:
        translate3d(
            0,
            calc(var(--gs-scroll-progress) * -23px),
            0
        )
        scale(
            calc(1 - var(--gs-scroll-progress) * .065)
        );

    opacity:
        calc(1 - var(--gs-scroll-progress) * .83);

    transform-origin: center 35%;

    will-change: transform, opacity;
}

.hero.gs-scroll-cinematic .scroll-indicator {
    z-index: 2;

    opacity:
        calc(1 - var(--gs-scroll-progress) * 1);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
    .gs-section-counter {
        right: 3%;
        opacity: .42;
    }
}

@media (max-width: 600px) {
    .gs-section-counter {
        display: none;
    }

    .stills-gallery .still-card {
        transform: none !important;
    }

    .gs-scrub-indicator {
        display: none;
    }

    #gsMagneticConnections {
        display: none;
    }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .gs-magnetic,
    .project-poster,
    .project-info,
    .stills-gallery .still-card,
    .gs-counter-track,
    .gs-viewfinder-overlay {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    #gsMagneticConnections,
    .gs-scroll-shade {
        display: none !important;
    }

    .hero.gs-scroll-cinematic .hero-content {
        transform: none !important;
        opacity: 1 !important;
    }
}