/* ==========================================================
   9GRAD OST · HOME FANCY V2
   Premium motion / editorial layer
   ========================================================== */

:root {
    --fancy-red: #690f00;
    --fancy-red-dark: #490a00;
    --fancy-ink: #111214;
    --fancy-paper: #f5f3f0;
    --fancy-white: #fff;
    --fancy-line: rgba(17,18,20,.12);
    --fancy-ease: cubic-bezier(.16,1,.3,1);
}


/* ==========================================================
   1. HERO · CINEMATIC
   ========================================================== */

.neo-hero--editorial {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.neo-hero--editorial::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(10,10,10,.26) 0%,
            rgba(10,10,10,.10) 46%,
            rgba(10,10,10,.02) 72%
        );
}

.neo-hero--editorial .neo-hero__media,
.neo-hero--editorial .neo-hero__background,
.neo-hero--editorial picture,
.neo-hero--editorial > img {
    will-change: transform;
}

.neo-hero--editorial img {
    transform: scale(1.035);
    animation:
        neoHeroCinematic 16s var(--fancy-ease) both;
}

@keyframes neoHeroCinematic {
    from {
        transform: scale(1.075);
    }
    to {
        transform: scale(1.025);
    }
}


/* Hero content over overlay */

.neo-hero--editorial .neo-hero__content,
.neo-hero--editorial .neo-hero__meta {
    position: relative;
    z-index: 2;
}


/* Hero text reveal */

.neo-hero--editorial .neo-hero__eyebrow,
.neo-hero--editorial h1,
.neo-hero--editorial .neo-hero__text,
.neo-hero--editorial .neo-hero__actions,
.neo-hero--editorial .neo-hero__rating,
.neo-hero--editorial .neo-hero__meta {
    opacity: 0;
    transform: translateY(34px);

    animation:
        neoHeroReveal .95s var(--fancy-ease) forwards;
}

.neo-hero--editorial .neo-hero__eyebrow {
    animation-delay: .10s;
}

.neo-hero--editorial h1 {
    animation-delay: .18s;
}

.neo-hero--editorial .neo-hero__text {
    animation-delay: .31s;
}

.neo-hero--editorial .neo-hero__actions {
    animation-delay: .42s;
}

.neo-hero--editorial .neo-hero__rating {
    animation-delay: .52s;
}

.neo-hero--editorial .neo-hero__meta {
    animation-delay: .63s;
}

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


/* animated CI line */

.neo-hero--editorial .neo-hero__eyebrow::before {
    transform-origin: left center;
    animation: neoLineGrow 1.2s .25s var(--fancy-ease) both;
}

@keyframes neoLineGrow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}


/* ==========================================================
   2. MOTION MARQUEE
   ========================================================== */

.neo-motion-marquee {
    position: relative;
    z-index: 3;

    overflow: hidden;

    padding: clamp(20px, 2.5vw, 34px) 0;

    background: var(--fancy-red);
    color: #fff;
}

.neo-motion-marquee__viewport {
    overflow: hidden;
}

.neo-motion-marquee__track {
    display: flex;
    width: max-content;

    will-change: transform;

    animation:
        neoMarquee 32s linear infinite;
}

.neo-motion-marquee__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    gap: clamp(20px, 3vw, 50px);

    padding-right: clamp(20px, 3vw, 50px);

    white-space: nowrap;
}

.neo-motion-marquee span {
    font-size: clamp(27px, 3.6vw, 58px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
}

.neo-motion-marquee span:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.80);
}

.neo-motion-marquee i {
    font-size: clamp(17px, 2vw, 28px);
    font-style: normal;
    color: rgba(255,255,255,.58);
}

@keyframes neoMarquee {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-50%,0,0);
    }
}

.neo-motion-marquee:hover .neo-motion-marquee__track {
    animation-play-state: paused;
}


/* ==========================================================
   3. GLOBAL EDITORIAL REVEAL
   ========================================================== */

.fancy-reveal {
    opacity: 0;
    transform: translateY(44px);

    transition:
        opacity .9s var(--fancy-ease),
        transform .9s var(--fancy-ease);
}

.fancy-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fancy-reveal-left {
    opacity: 0;
    transform: translateX(-55px);

    transition:
        opacity 1s var(--fancy-ease),
        transform 1s var(--fancy-ease);
}

.fancy-reveal-right {
    opacity: 0;
    transform: translateX(55px);

    transition:
        opacity 1s var(--fancy-ease),
        transform 1s var(--fancy-ease);
}

.fancy-reveal-left.is-visible,
.fancy-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================
   4. INTRO · MORE EDITORIAL
   ========================================================== */

.neo-intro {
    position: relative;
    isolation: isolate;
}

.neo-intro::before {
    content: "9°";
    position: absolute;

    right: 4vw;
    top: 50%;

    z-index: -1;

    transform: translateY(-50%);

    font-size: clamp(150px, 21vw, 350px);
    font-weight: 600;
    line-height: .8;
    letter-spacing: -.08em;

    color: rgba(105,15,0,.035);

    pointer-events: none;
}

.neo-intro h2 {
    max-width: 930px;
}


/* ==========================================================
   5. TARGETS · SCROLL STORY FEEL
   ========================================================== */

@media (min-width: 1025px) {

    .neo-targets {
        position: relative;
    }

    .neo-targets__intro {
        position: sticky;
        top: 110px;

        z-index: 2;
    }

    .neo-target,
    .neo-targets article,
    .neo-targets__item {
        position: relative;
    }

    .neo-target img {
        will-change: transform;
    }

}


/* target rows bigger / less "website section" */

.neo-target {
    position: relative;
}

.neo-target::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(17,18,20,.13) 18%,
            rgba(17,18,20,.13) 82%,
            transparent
        );
}


/* images more cinematic */

.neo-target img {
    transition:
        transform 1.1s var(--fancy-ease),
        filter .7s ease;

    transform: scale(1.01);
}

.neo-target:hover img {
    transform: scale(1.045);
}


/* ==========================================================
   6. FULL BLEED PARALLAX MOMENT
   ========================================================== */

.neo-parallax-break {
    position: relative;

    min-height: min(78vh, 850px);

    display: grid;
    place-items: center;

    overflow: hidden;
    isolation: isolate;
}

.neo-parallax-break::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,5,.10),
            rgba(5,5,5,.55)
        );

    pointer-events: none;
}

.neo-parallax-break > * {
    position: relative;
    z-index: 2;
}

.neo-parallax-break h2,
.neo-parallax-break h3 {
    max-width: 1050px;

    font-size: clamp(48px, 6.5vw, 104px);
    line-height: .93;
    letter-spacing: -.055em;
}


/* ==========================================================
   7. WHY · ASYMMETRIC BENTO
   ========================================================== */

.neo-why {
    position: relative;
    overflow: hidden;
}

.neo-why::before {
    content: "";
    position: absolute;

    width: 560px;
    height: 560px;

    right: -230px;
    top: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(105,15,0,.13),
            rgba(105,15,0,0) 70%
        );

    pointer-events: none;
}


/*
 * Existing card grid becomes Bento.
 * Works when .neo-why contains a 4-card grid.
 */

@media (min-width: 900px) {

    .neo-why .neo-card-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, .75fr)
            minmax(0, .75fr);

        grid-template-rows:
            minmax(240px, auto)
            minmax(220px, auto);

        gap: 16px;
    }

    .neo-why .neo-card-grid > * {
        position: relative;

        min-height: 0;

        overflow: hidden;

        transition:
            transform .5s var(--fancy-ease),
            border-color .4s ease,
            background .4s ease;
    }

    .neo-why .neo-card-grid > *:nth-child(1) {
        grid-row: 1 / 3;
    }

    .neo-why .neo-card-grid > *:nth-child(4) {
        grid-column: 2 / 4;
    }

    .neo-why .neo-card-grid > *:hover {
        transform: translateY(-5px);
        border-color: rgba(105,15,0,.40);
    }

}


/* giant numbers behind cards */

.neo-why .neo-card-grid > *::before {
    position: absolute;

    right: 18px;
    bottom: -25px;

    font-size: clamp(85px, 9vw, 145px);
    font-weight: 600;
    line-height: 1;

    color: rgba(255,255,255,.025);

    pointer-events: none;
}

.neo-why .neo-card-grid > *:nth-child(1)::before {
    content: "01";
}

.neo-why .neo-card-grid > *:nth-child(2)::before {
    content: "02";
}

.neo-why .neo-card-grid > *:nth-child(3)::before {
    content: "03";
}

.neo-why .neo-card-grid > *:nth-child(4)::before {
    content: "04";
}


/* ==========================================================
   8. BUTTON MICROINTERACTIONS
   ========================================================== */

.neo-btn,
.neo-header__cta,
.neo-hero__actions a,
.neo-reviews__footer a {
    position: relative;

    transition:
        transform .28s var(--fancy-ease),
        box-shadow .28s ease,
        background .28s ease,
        color .28s ease !important;
}

@media (hover: hover) and (pointer: fine) {

    .neo-btn:hover,
    .neo-header__cta:hover,
    .neo-hero__actions a:hover {
        transform: translateY(-3px);
    }

    .neo-btn--primary:hover,
    .neo-header__cta:hover {
        box-shadow:
            0 16px 35px rgba(105,15,0,.23);
    }

}


/* ==========================================================
   9. IMAGE CURSOR PARALLAX
   ========================================================== */

[data-fancy-image] {
    overflow: hidden;
}

[data-fancy-image] img {
    will-change: transform;

    transition:
        transform .8s var(--fancy-ease);
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .neo-motion-marquee {
        padding: 18px 0;
    }

    .neo-motion-marquee__track {
        animation-duration: 25s;
    }

    .neo-motion-marquee span {
        font-size: 31px;
    }

    .neo-intro::before {
        right: -30px;
        font-size: 170px;
    }

    .neo-parallax-break {
        min-height: 68vh;
    }

    .neo-target:hover img {
        transform: none;
    }

}


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

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

    .neo-hero--editorial img,
    .neo-hero--editorial .neo-hero__eyebrow,
    .neo-hero--editorial h1,
    .neo-hero--editorial .neo-hero__text,
    .neo-hero--editorial .neo-hero__actions,
    .neo-hero--editorial .neo-hero__rating,
    .neo-hero--editorial .neo-hero__meta,
    .neo-motion-marquee__track {
        animation: none !important;
    }

    .neo-hero--editorial .neo-hero__eyebrow,
    .neo-hero--editorial h1,
    .neo-hero--editorial .neo-hero__text,
    .neo-hero--editorial .neo-hero__actions,
    .neo-hero--editorial .neo-hero__rating,
    .neo-hero--editorial .neo-hero__meta,
    .fancy-reveal,
    .fancy-reveal-left,
    .fancy-reveal-right {
        opacity: 1 !important;
        transform: none !important;
    }

    .neo-motion-marquee__track {
        transform: none !important;
    }

}