:root{
    interpolate-size: allow-keywords;
    
    --white: #F8F6F2;
    --black: #121212;
    --red-editorial: #B9161A;
    --green-editorial: #A9BB16;
    --green-editorial-dimm: #98A914;
    --gray: #595959;

    --line-height-80: 0.8;
    --line-height-90: 0.9;
    --line-height-100: 1;
    --line-height-105: 1.05;
    --line-height-120: 1.2;
    --line-height-150: 1.5;
    --line-height-160: 1.6;

    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --space-8: clamp(0.25rem, 0.14rem + 0.3vi, 0.5rem);
    --space-12: clamp(0.375rem, 0.27rem + 0.4vi, 0.75rem);
    --space-16: clamp(0.5rem, 0.4rem + 0.5vi, 1rem);
    --space-20: clamp(0.75rem, 0.47rem + 0.65vi, 1.25rem);
    --space-24: clamp(0.875rem, 0.54rem + 0.8vi, 1.5rem);
    --space-32: clamp(1.25rem, 0.56rem + 1.2vi, 2rem);
    --space-38: clamp(1.25rem, 0.695rem + 1.4vi, 2.375rem);

    --space-48: clamp(1.75rem, -1.5rem + 3.75vi, 3rem);
    --space-56: clamp(2rem, -1.75rem + 4.37vi, 3.5rem);
    --space-64: clamp(2.25rem, -2rem + 5vi, 4rem);
    --space-72: clamp(2.5rem, -2.25rem + 5.62vi, 4.5rem);
    --space-96: clamp(3rem, -3rem + 7.5vi, 6rem);
    --space-128: clamp(4rem, -4rem + 10vi, 8rem);
    --space-192: clamp(5rem, -6rem + 15vi, 12rem);
    --space-256: clamp(7rem, -8rem + 20vi, 16rem);

    --font-size-x-small: clamp(0.625rem, 0.395rem + 0.4vi, 0.875rem);
    --font-size-small: clamp(0.75rem, 0.46rem + 0.45vi, 1rem);
    --font-size-regular: clamp(0.875rem, 0.525rem + 0.5vi, 1.125rem);
    
    --font-size-guiding: clamp(1rem, 0.72rem + 0.65vi, 1.5rem);
    --font-size-medium: clamp(1.25rem, 0.81rem + 1.2vi, 2.25rem);
    --font-size-semilarge: clamp(1.5rem, 0.9rem + 1.75vi, 3rem);
    --font-size-large: clamp(1.75rem, 1.12rem + 2.4vi, 4rem);
    --font-size-x-large: clamp(2rem, 1.14rem + 2.8vi, 4.5rem);
    --font-size-xx-large: clamp(2.25rem, 1.17rem + 3.4vi, 5.25rem);
    --font-size-xxx-large: clamp(2.5rem, 1.2rem + 4vi, 6rem);
    --font-size-display: clamp(3rem, 1.75rem + 7.5vi, 10.75rem);
}

:where(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
}

html {
    scrollbar-gutter: stable;
}

/* @media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
} */

body {
    font-family: 'Geist Mono', monospace;
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-regular);
    font-optical-sizing: auto;
    color: var(--black);
    background-color: var(--black);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    min-height: 100svb;
    display: flex;
    flex-direction: column;
}

body:has(.mischief-popup[open], .nav-overlay.is-open) {
    overflow: clip;
}

h1, h2 {
    font-family: 'Nyght Serif';
    line-height: var(--line-height-105);
    overflow-wrap: break-word;

    b {
        color: var(--green-editorial);
    }
}
h3 {
    font-family: "alga-variable", serif;
    font-style: italic;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-size: var(--font-size-x-large);
    font-weight: var(--font-weight-extralight);

    em {
        font-weight: var(--font-weight-medium);
    }
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    line-height: var(--line-height-150);
    max-width: 35ch;

    b {
        font-style: italic;
        font-weight: var(--font-weight-extrabold);
    }
}

a {
    display: inline-block;
}

section, footer {
    overflow-x: clip;
    background-color: var(--white);

    a {
        color: var(--black);
    }
}

.section--dark {
    color: var(--white);
    background-color: var(--black);

    a {
        color: var(--white);
    }
}

.section-title {
    font-family: 'Nyght Serif';
    line-height: var(--line-height-105);
    overflow-wrap: break-word;
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-regular);
}

.title--small {
    font-family: "alga-variable", serif;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-regular);
    font-style: italic;
}

.intermission-style, .signature-creation__comment {
    font-family: "alga-variable", serif;
    font-style: italic;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-size: var(--font-size-x-large);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-120);
    text-align: center;
    max-width: 25ch;

    em {
        font-weight: var(--font-weight-semibold);        
    }
}

.explanation-text {
    font-family: "alga-variable", serif;
    font-style: italic;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-size: var(--font-size-semilarge);
    font-weight: var(--font-weight-light);

    em {
        font-weight: var(--font-weight-semibold);
    }
}

.description-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-38);

    .description {
        display: grid;
        gap: var(--space-20);
    }
}

.text--shift {
    padding-inline-start: var(--space-48);
    position: relative;
    &::before {
        position: absolute;
        content: '';
        inset: 0;
        border-inline-start: var(--black) 1px solid;
    }
}
.section--dark .text--shift {
    &::before {
        border-color: var(--gray);
    }
}

.info-guide {
    display: flex;
    gap: var(--space-32);
    align-items: center;
    color: var(--green-editorial);

    .info-guide__icon {
        font-size: var(--font-size-guiding);
        padding: var(--space-20) var(--space-24);
        border: var(--green-editorial) 1px solid;
    }
}

.text--hint {
    color: var(--green-editorial);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-guiding);
    position: relative;
    isolation: isolate;

    &::before {
        position: absolute;
        content: '';
        inset: calc(-1 * var(--space-72)) calc(-1 * var(--space-64));
        z-index: -1;
    }
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

:focus-visible {
    outline: 2px solid var(--red-editorial);
    outline-offset: 4px;
}

.container {
    max-width: calc(100vi - 10rem);
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
==========================================================================
---------------- NAVBAR
==========================================================================
*/

.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 8000;

    font-size: var(--font-size-small);
    
    background-color: rgb(from var(--white) r g b / 75%);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    
    transition: translate 0.4s ease, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.sticky-nav.is-hidden {
    translate: 0 -100%;
    opacity: 0;
}

.sticky-nav--dark {
    background-color: rgb(from var(--black) r g b / 75%);
    color: var(--white);
}

.sticky-nav__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-12);
    border-block-end: 1px solid var(--black);
    transition: border-color 0.3s ease;
    text-transform: uppercase;
}

.sticky-nav--dark .sticky-nav__container {
    border-color: var(--gray);
}

.sticky-nav__menu-btn {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    
    display: grid;
    place-content: center;
    
    background-color: rgb(from var(--white) r g b / 85%);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-overlay__close {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    position: absolute;
    inset: 10vb 10vi auto auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-32) var(--space-48);
    border: 1px solid var(--black);
    text-transform: uppercase;

    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    &:hover {
        background-color: var(--black);
        color: var(--white);
    }
}

.nav-overlay--dark {
    background-color: rgb(from var(--black) r g b / 85%);
    color: var(--white);

    .nav-overlay__close {
        &:hover {
            border-color: var(--black);
            background-color: var(--white);
            color: var(--black);
        }
        border: 1px solid var(--white);
    }

    .close-icon {
        stroke: var(--white);
    }
}

/*
==========================================================================
---------------- FOLD
==========================================================================
*/

.hero {
    position: relative;
    isolation: isolate;
    height: 100svb;
}

.hero__grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.hero__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-24);
    border-block-end: var(--black) 1px solid;
}

.hero__layout {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: var(--space-96);

    padding-block: var(--space-64);
    padding-inline: var(--space-64) 0;
}

.hero__intro {
    align-self: end;

    .hero__hook {
        font-family: "alga-variable", serif;
        font-style: italic;
        text-wrap: balance;
        overflow-wrap: break-word;
        font-size: var(--font-size-x-large);

        em {
            font-weight: var(--font-weight-medium);        
        }
    }
}

.hero__visual {
    position: absolute;
    inset: 0 20vi auto auto;
    z-index: -1;
}
.hero__image {
    height: 65svb;
}

.nav {
    justify-self: end;
}
.nav__list {
    display: grid;
    gap: var(--space-12);
}

.nav__link {
    line-height: var(--line-height-150);
    transition: all .3s ease-out .1s;
    color: var(--black);

    &:hover {
        font-style: italic;
        font-weight: var(--font-weight-bold);
        transition: all .1s ease-out;
    }

    &.nav__link--active {
        font-style: italic;
        font-weight: var(--font-weight-bold);

        &::before {
            content: '-> ';
        }
    }
}

.nav-overlay {
    .nav__link {
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-light);

        &:hover {
            color: var(--red-editorial);
            font-weight: var(--font-weight-bold);
        }
    }
}
.nav-overlay--dark {
    .nav__link {
        color: var(--white);

        &:hover {
            color: var(--green-editorial);
        }
    }
}

.hero__title {
    display: grid;
    font-style: italic;
    font-weight: var(--font-weight-regular);
    grid-column: 1 / -1;
    justify-self: center;
    
    .hero__word--fashion {
        font-weight: var(--font-weight-light);

        em {
            font-weight: var(--font-weight-regular);
            color: var(--red-editorial);
        }

        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: 15% 0 0 10%;
            width: 100%;
            height: 90%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/image/decoration/fashion-decoration.avif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
    
    .hero__word--anarchist {
        padding-inline-start: min(17.5vi, 30rem);

        b {
            color: var(--green-editorial);
        }
    }
}

/*
==========================================================================
---------------- INTRO - who's that girl?
==========================================================================
*/

.intro-whois {
    padding-block: var(--space-64);
}

.intro-whois__grid {
    display: grid;
    gap: var(--space-64);
    grid-template-columns: 1fr 1fr;
    padding-block: var(--space-64);
}

.intro-whois__title {
    display: grid;
    place-content: center;
    justify-self: end;
    word-break: break-all;

    font-style: italic;
    font-weight: var(--font-weight-light);
    z-index: 15;

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 25% 0 0 5%;
        width: 80%;
        height: 80%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/who-is-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .intro-whois__line--large {
        font-size: var(--font-size-display);
    }
    .intro-whois__line--small {
        font-size: var(--font-size-xxx-large);
        justify-self: end;
    }
}

.intro-whois__visual {
    position: relative;
    isolation: isolate;
    z-index: 250;

    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.intro-whois__hint {
    position: absolute;
    top: 15%;
    left: -2.5%;
    z-index: 500;
    
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    
    &::before {
        background: radial-gradient(
            ellipse, 
            hsl(from var(--white) h s l / 0.65) 0%,
            hsl(from var(--white) h s l / 0.45) 30%,
            hsl(from var(--white) h s l / 0) 70%
        );
    }

    &.intro-whois__hint--hidden {
        display: none;
    }
}

.intro-whois__image-wrapper {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 32.5vi;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-whois__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
}

.tattoo-text {
    position: absolute;
    z-index: 25;
    font-family: "alga-variable", serif;
    font-style: italic;
    font-size: var(--font-size-semilarge);
    font-weight: var(--font-weight-medium);
    color: var(--black);
    transform-origin: center;
    translate: -50% 0;
    
    opacity: 0;
    scale: 0.5;
    
    transition: opacity 0.2s ease-out, scale 0.75s linear(0, 0.009 1%, 0.039 2.1%, 0.153 4.4%, 0.306 6.6%, 0.765 12.5%, 0.989 16.1%, 1.068 17.8%, 1.129 19.5%, 1.172 21.2%, 1.199 23%, 1.209 25.4%, 1.195 28.1%, 1.161 30.8%, 1.011 40.5%, 0.977 44.1%, 0.959 47.8%, 0.959 53.3%, 0.997 65.4%, 1.008 72.2%, 1), translate 0.75s linear(0, 0.009 1%, 0.039 2.1%, 0.153 4.4%, 0.306 6.6%, 0.765 12.5%, 0.989 16.1%, 1.068 17.8%, 1.129 19.5%, 1.172 21.2%, 1.199 23%, 1.209 25.4%, 1.195 28.1%, 1.161 30.8%, 1.011 40.5%, 0.977 44.1%, 0.959 47.8%, 0.959 53.3%, 0.997 65.4%, 1.008 72.2%, 1);
    pointer-events: none;
}

.tattoo-text--1 {
    top: 11%;
    left: 51%;
    rotate: 8deg;
}

.tattoo-text--2 {
    top: 25%;
    left: 48.5%;
    rotate: -6deg;
}

.tattoo-text--3 {
    top: 41%;
    left: 50%;
    rotate: 25deg;
}

.tattoo-text--4 {
    top: 55%;
    left: 45%;
    rotate: -15deg;
}

.intro-whois__visual[data-stage="2"] .tattoo-text--1,
.intro-whois__visual[data-stage="3"] .tattoo-text--1,
.intro-whois__visual[data-stage="4"] .tattoo-text--1,
.intro-whois__visual[data-stage="5"] .tattoo-text--1 {
    opacity: 1;
    scale: 1;
}

.intro-whois__visual[data-stage="3"] .tattoo-text--2,
.intro-whois__visual[data-stage="4"] .tattoo-text--2,
.intro-whois__visual[data-stage="5"] .tattoo-text--2 {
    opacity: 1;
    scale: 1;
}

.intro-whois__visual[data-stage="4"] .tattoo-text--3,
.intro-whois__visual[data-stage="5"] .tattoo-text--3 {
    opacity: 1;
    scale: 1;
}

.intro-whois__visual[data-stage="5"] .tattoo-text--4 {
    opacity: 1;
    scale: 1;
}

/*
==========================================================================
---------------- INTRO - greetings
==========================================================================
*/


.intro-greetings {
    padding-block: var(--space-64) var(--space-256);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -150% 0 0 -100%;
        width: 220%;
        height: 260%;
        z-index: -10;
        pointer-events: none;
        background-image: 
            url('../assets/background/intro-greetings-background-curtain-alt.avif'),
            url('../assets/background/intro-greetings-background.avif');
            
        background-size: contain, cover;
        background-repeat: no-repeat;
        background-position: top 55% left, top 35rem right;
    }
}
.intro-greetings__grid {
    display: grid;
    gap: var(--space-64);
}

.intro-greetings__title {
    justify-self: center;
    display: grid;

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 25% 0 0 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/demi-pointer-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .greetings-word--pointer {
        color: var(--green-editorial);
        padding-inline-start: min(10vi, 12.5rem);
    }
}

.intro-greetings__talk-block {
    padding-inline: 30% 17.5%;
}
.intro-greetings__talk-block--right {
    justify-self: end;
}

.intro-greetings__subtitle {
    max-width: 15ch;
}

/*
==========================================================================
---------------- INTRO - prelude
==========================================================================
*/

.intro-prelude {
    padding-block: var(--space-192) var(--space-256);
    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -35% -1.25% 0 auto;
        width: 102.5%;
        height: 135%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/intro-prelude-background.avif'),
            url('../assets/background/intro-prelude-background-secondary-new.avif');
            
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center, top -5% center;

        -webkit-mask-image: linear-gradient(to top, transparent 0%, var(--black) 25%);
        mask-image: linear-gradient(to top, transparent 0%, var(--black) 25%);
    }
}
.intro-prelude__grid {
    display: grid;
    gap: var(--space-64);
    place-content: center;
    place-items: center;

}

.intro-prelude__wrapper {
    display: grid;
    gap: var(--space-32);
}
.intro-prelude__wrapper--its-time {
    grid-template-columns: 1fr auto;
    gap: var(--space-96);

    position: relative;
    isolation: isolate;

    .intro-prelude__accompany {
        max-width: 15ch;
    }

    .prelude-word--its {
        &::before {
            content: "";
            position: absolute;
            inset: 25% 0 0 -15%;
            width: 80%;
            height: 80%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/image/decoration/prelude-its-time-decoration.avif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
}
.intro-prelude__wrapper--world-mischief {
    place-items: center;

    .prelude-word--mischief {
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -15% 0 0 0%;
            width: 100%;
            height: 200%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/image/decoration/prelude-mischief-decoration.avif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right top;
        }
    }
}

.intro-prelude__title {
    display: grid;
    place-items: center;

    font-style: italic;
    font-weight: var(--font-weight-light);
}
.prelude-word--its {
    padding-inline-end: min(15vi, 17.5rem);
}
.prelude-word--mischief {
    padding-inline-start: min(20vi, 22.5rem);
    display: flex;
    gap: var(--space-48);

    .title--small {
        align-self: center;
    }
}

.intro-prelude__accompany {
    align-self: end;
    padding-block: var(--space-32);
}

/*
==========================================================================
---------------- MISCHIEF GATE
==========================================================================
*/

.mischief-gate-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

.mischief-gate-wrapper > * {
    grid-area: 1 / 1;
}

.mischief-gate {
    align-self: start;

    height: 100vb;

    translate: 0 0;
    touch-action: none; 
    cursor: grab;
    z-index: 1000;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 15%, var(--black) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 15%, var(--black) 85%, transparent 100%);
    
    transition: translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), display 0.5s allow-discrete, opacity 0.5s ease;

    position: relative;
    isolation: isolate;

    &:active {
        cursor: grabbing;
    }
    &.is-dragging {
        transition: none;
    }

    &.is-dragged {
        translate: 0 100vb;
        opacity: 0;
        display: none;
    }

    &::before {
        content: "";
        position: absolute;
        inset: -25% 0 0 0%;
        width: 100%;
        height: 125%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/giant-sock-gate.avif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .mischief-gate__hint {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: 10;

        display: grid;
        place-items: center;
        gap: var(--space-32);
        
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
        
        &::before {
            inset: calc(-1 * var(--space-96)) calc(-1 * var(--space-72));
            background: radial-gradient(
                ellipse, 
                hsl(from var(--black) h s l / 0.65) 0%,
                hsl(from var(--black) h s l / 0.45) 50%,
                hsl(from var(--black) h s l / 0) 80%
            );
        }

        .intro-whois__hint--hidden {
            opacity: 0;
        }
    }
}

.world-of-mischief-hidden.is-discovered {
    display: block;
    opacity: 1;
    filter: blur(0);
}

@starting-style {
    .world-of-mischief-hidden.is-discovered {
        opacity: 0;
        filter: blur(2rem);
    }
    
    .mischief-gate.is-dragged {
        translate: 0 0;
        opacity: 1;
    }
}

/*
==========================================================================
---------------- LOOKBOOK
==========================================================================
*/

.lookbook {
    padding-block: var(--space-192);
}

.lookbook__grid {
    display: grid;
    gap: var(--space-128);
}

.lookbook__title {
    display: grid;
    place-content: center;
    place-items: center end;

    position: relative;
    isolation: isolate;

    &::before {
        content: '';
        position: absolute;
        inset: -35% auto auto 0;
        width: 100%;
        height: 250%;
        z-index: -100;
        pointer-events: none;
        background-image: 
            url('../assets/background/ballerina-skirt.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;

        -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--black) 25%);
        mask-image: linear-gradient(to left, transparent 0%, var(--black) 25%);
    }

    .title--small {
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -40% 0 0 -300%;
            width: 550%;
            height: 350%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/svg/cursive/lookbook-cursive.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
}

.lookbook__line {
    display: flex;
    gap: var(--space-48);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -15% 0 0 -35%;
        width: 250%;
        height: 300%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/lookbook-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

.lookbook__description {
    text-align: center;
    justify-self: center;
    z-index: 15;
}

/* ==================================================
LOOKBOOK LAYOUT
================================================== */

.lookbook__split-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-128);
    padding-inline: var(--space-72);
    z-index: 20;
    min-height: 50vb;

    position: relative;
    isolation: isolate;

    a {
        color: var(--black);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 5% 0 0 0;
        width: 100%;
        height: 90%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/cloth-piece-lookbook.avif');
        background-size: contain;
        background-repeat: repeat-y;
        background-position: center;
    }
}

.lookbook__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-128);
}

.lookbook__column--left {
    align-items: end;
}

.lookbook__column--right {
    align-items: start;
}

.lookbook__item {
    display: grid;
    place-items: center;
    background-color: var(--white);
    color: var(--black);
    border: var(--white) .5rem solid;
    text-decoration: none;
    transition: translate 0.75s linear(0, 0.009 1%, 0.039 2.1%, 0.153 4.4%, 0.306 6.6%, 0.765 12.5%, 0.989 16.1%, 1.068 17.8%, 1.129 19.5%, 1.172 21.2%, 1.199 23%, 1.209 25.4%, 1.195 28.1%, 1.161 30.8%, 1.011 40.5%, 0.977 44.1%, 0.959 47.8%, 0.959 53.3%, 0.997 65.4%, 1.008 72.2%, 1);

    position: relative;
    isolation: isolate;

    p {
        max-width: 20ch;
        letter-spacing: 10%;
        font-size: var(--font-size-small);
    }

    &:hover {
        translate: 0 -1rem;
    }

    &::before {
        content: "";
        position: absolute;
        inset: -0.5rem;
        z-index: -1;
        background-color: transparent;
        box-shadow: 0 2.5rem 5rem rgb(from var(--white) r g b / 20%);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }

    &:hover::before {
        opacity: 1;
    }
}

.mischief__visual {
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mischief__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mischief__content {
    justify-self: stretch;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-38) var(--space-64);
    padding-inline: var(--space-32);
    padding-block: var(--space-16);
    text-transform: uppercase;
}

.mischief__title {
    font-size: var(--font-size-semilarge);
    font-family: 'Nyght Serif';
    line-height: var(--line-height-105);
    font-weight: var(--font-weight-medium);
    height: fit-content;
    grid-column: 1 / -1;
    position: relative;
    overflow-wrap: anywhere;

    text-align: center;

    &::before {
        position: absolute;
        content: '';
        inset: calc(-1 * var(--space-24)) 0 0 0;
        border-block-start: var(--black) 1px solid;
    }
}

.mischief__location, .mischief__number {
    max-width: 15ch;
    overflow-wrap: anywhere;
}
.mischief__number {
    text-align: end;
    justify-self: end;
}

.mischief__readmore {
    text-align: center;
    grid-column: 1 / -1;
    cursor: pointer;
    position: relative;

    &::before {
        position: absolute;
        content: '';
        inset: calc(-1 * var(--space-24)) 0 0 0;
        border-block-start: var(--black) 1px solid;
    }
}

/* VERTICAL BIG 
======================== */

.lookbook__item--vertical-big {
    grid-template-rows: auto 1fr;
    width: 100%;
    gap: var(--space-16);

    .mischief__visual {
        height: 65vb;
    }
    .mischief__title {
        text-align: center;
    }
}

/* VERTICAL
 ======================== */

.lookbook__item--vertical {
    grid-template-rows: auto 1fr;
    gap: var(--space-16);

    .mischief__title {
        max-width: 15ch;
        order: 1;

        &::before {
            inset: 0 0 calc(-1 * var(--space-16)) 0;
            border-block-end: var(--black) 1px solid;
            border-block-start: none;
        }
    }
    .mischief__location {
        order: 2;
    }
    .mischief__number {
        order: 2;
    }
    .mischief__readmore {
        order: 3;
    }
    .mischief__visual {
        height: 50vb;
    }
}

/* HORIZONTAL 
======================== */

.lookbook__item--horizontal {
    grid-template-columns: auto 1fr;
    text-align: end;

    p {
        max-width: 100%;
    }

    .mischief__title {
        text-align: end;
        order: 2;

        &::before {
            inset: 0 0 calc(-1 * var(--space-16)) 0;
            border-block-end: var(--black) 1px solid;
            border-block-start: none;
        }
    }
    .mischief__location {
        order: 3;
        grid-column: 1 / -1;
        justify-self: end;
    }
    .mischief__number {
        order: 1;
        grid-column: 1 / -1;
    }
    .mischief__readmore {
        order: 4;
    }
    .mischief__visual {
        height: 40vb;
    }
    .mischief__content {
        grid-template-rows: auto auto 1fr auto;
        gap: var(--space-32);
    }
}

/* 
========================================================== 
-----------------------POPUP
========================================================== 
*/

.mischief-popup {
    margin: auto;
    padding: 0;
    background-color: var(--white);
    color: var(--black);
    border: var(--white) 0.5rem solid;
    
    max-width: min(80vi, 75rem);
    width: 100%;
    max-height: 90vb;
    overflow-y: auto;
    box-shadow: 0 2.5rem 5rem rgb(from var(--black) r g b / 50%);
    
    opacity: 0;
    scale: 0.95;
    transition: 
        display 0.4s, 
        overlay 0.4s, 
        opacity 0.4s ease, 
        scale 0.4s ease;
}

.mischief-popup[open] {
    opacity: 1;
    scale: 1;
}

.mischief-popup::backdrop {
    background-color: rgb(from var(--black) r g b / 75%);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    opacity: 0;
    transition: display 0.4s, overlay 0.4s, opacity 0.4s ease;
}

.mischief-popup[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .mischief-popup[open] {
        opacity: 0;
        scale: 0.95;
    }
    .mischief-popup[open]::backdrop {
        opacity: 0;
    }
}

.mischief-popup__layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 70vb;
    max-height: 80vb;
}

.mischief-popup__visual {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
}

.mischief-popup__image {
    width: 100%;
    height: 100%;
    max-height: 75vb;
    object-fit: contain;
}

.mischief-popup__content {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    padding: var(--space-32) var(--space-48);
    overflow-y: auto;
}

.mischief-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-64);
    padding-block-end: var(--space-24);
    border-block-end: 1px solid var(--black);
}

.mischief-popup__title {
    font-family: 'Nyght Serif', serif;
    font-size: var(--font-size-semilarge);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-105);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.mischief-popup__close {
    width: var(--space-96);
    aspect-ratio: 1;
    border: 1px solid var(--black);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    
    display: grid;
    place-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover {
        background-color: var(--black);
        color: var(--white);
    }
}

.mischief-popup__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-16);
    border-block-end: 1px solid var(--black);
    
    text-transform: uppercase;
    letter-spacing: 15%;
    font-size: var(--font-size-small);

    b {
        font-weight: var(--font-weight-bold);
        font-style: normal;
    }
}

.mischief-popup__description-block {
    padding-block: var(--space-32);
    border-block-end: 1px solid var(--black);
    display: grid;
    gap: var(--space-24);
}

.mischief-popup__label {
    font-weight: var(--font-weight-bold);
    letter-spacing: 15%;
    font-size: var(--font-size-regular);
}

.mischief-popup__description p {
    max-width: 100%;
    line-height: var(--line-height-160);
}

.mischief-popup__signature-block {
    padding-block: var(--space-32);
    border-block-end: 1px solid var(--black);
    
    display: grid;
    gap: var(--space-24);
}

.mischief-popup__signature {
    justify-self: center;
    align-self: center;
    max-height: var(--space-256);
    object-fit: contain;
    filter: drop-shadow(0 1rem 1.5rem rgb(from var(--black) r g b / 15%));
}

/*
==========================================================================
---------------- INTERMISSION 1
==========================================================================
*/

.intermission {
    height: 100vb;
}

.intermission__grid {
    height: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    gap: var(--space-96);
    grid-template-rows: 1fr auto;
    padding-block: var(--space-128);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        top: -10%;
        width: 100vi;
        height: 110%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/intermission-curtain-left.avif'),
            url('../assets/background/intermission-curtain-right.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left -20% center, right -20% center;

        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 30% var(--black) 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 30%, var(--black) 70%, transparent 100%);
    }
}

.intermission__text-wrapper {
    display: grid;
    place-items: center;
}

.intermission__text {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    scale: 0.9;
    filter: blur(1.5rem);
    transition: scale 0.35s ease-out, opacity 0.35s ease-out, filter 0.35s ease-out, visibility 0.35s;
    pointer-events: none;
}

.intermission__text.is-active {
    opacity: 1;
    visibility: visible;
    scale: 1;
    filter: blur(0);
    pointer-events: auto;
}

.text-highlight {
    position: relative;
    font-style: inherit;
    z-index: -1;
    display: inline-block;

    &::before {
        content: '';
        position: absolute;
        z-index: -1;
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
        
        pointer-events: none;
    }

    &.text-highlight--existence::before {
        inset: 60% 0 0 -15%;
        width: 150%;
        height: 275%;
        background-image: url('../assets/image/decoration/intermission-existence-decoration.avif');
    }
    &.text-highlight--anytime::before {
        inset: -60% 0 0 -25%;
        width: 150%;
        height: 250%;
        background-image: url('../assets/image/decoration/intermission-anytime-decoration.avif');
    }
    &.text-highlight--change::before {
        inset: -5% 0 0 -15%;
        width: 300%;
        height: 300%;
        background-image: url('../assets/image/decoration/intermission-change-decoration.avif');
    }
    &.text-highlight--onething::before {
        inset: -35% 0 0 -40%;
        width: 175%;
        height: 300%;
        background-image: url('../assets/image/decoration/intermission-anytime-decoration.avif');
    }
}

.intermission__switch {
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 12;
    
    padding-block: var(--space-32);
    padding-inline: var(--space-128);
    
    background-color: var(--black);
    border: 2px solid var(--gray);
    cursor: pointer;
    
    transition: border-color .3s ease;

    &:hover {
        border-color: var(--white);

        .arrow__next {
            translate: 1rem 0;
        }
    }
}

.arrow__next {
    stroke-width: 2px;
    transition: translate 1s linear(0, 0.01 0.7%, 0.042 1.5%, 0.162 3.1%, 0.824 8.8%, 1.053 11.2%, 1.201 13.6%, 1.242 14.8%, 1.264 16%, 1.266 17.5%, 1.244 19.1%, 0.996 27.6%, 0.951 30.1%, 0.93 32.7%, 0.935 36%, 1.001 44.4%, 1.019 49.4%, 0.995 65.9%, 1);
    
}

/*
==========================================================================
---------------- SHOW YOURSELF OFF
==========================================================================
*/

.show-off {
    padding-block: var(--space-192);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0 0 0 -50%;
        width: 150%;
        height: 100%;
        z-index: -50;
        pointer-events: none;
        background-image: 
            url('../assets/background/show-off-background.avif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;

        -webkit-mask-image: linear-gradient(to top, transparent 15%, var(--black) 30% var(--black) 70%, transparent 100%);
        mask-image: linear-gradient(to top, transparent 15%, var(--black) 30%, var(--black) 70%, transparent 100%);
    }
}

.show-off__grid {
    display: grid;
    gap: var(--space-32);
}

.show-off__title {
    display: grid;
    place-content: center;

    .title--small {
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -65% 0 0 -100%;
            width: 550%;
            height: 350%;
            z-index: -25;
            pointer-events: none;
            background-image:
                url('../assets/svg/cursive/show-off-cursive.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
        &::after {
            content: "";
            position: absolute;
            inset: -100% 0 0 0%;
            width: 100%;
            height: 200%;
            z-index: -50;
            pointer-events: none;
            background-image:
                url('../assets/image/decoration/show-off-decoration.avif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
}

.show-off__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    gap: var(--space-128);
}

.show-off__line {
    display: flex;
    gap: var(--space-72);
    align-items: center;
    justify-content: space-between;
}

.show-off__talk-block {
    justify-self: end;
    padding-block-end: var(--space-96);
}

.show-off__description p {
    max-width: 40ch;
}

.title--addition {
    font-family: "alga-variable", serif;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-100);
    font-style: italic;

    em {
        font-weight: var(--font-weight-semibold);
    }
}

.show-off__visual {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    max-width: 50vi;
    max-height: 85vb;
    height: 100%;
    width: 100%;
}
.show-off__image {
    height: 100%;
    object-fit: contain;

    -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--black) 25%);
    mask-image: linear-gradient(to left, transparent 0%, var(--black) 25%);
}

/*
==========================================================================
---------------- PROVE YOURSELF
==========================================================================
*/

.prove-yourself {
    padding-block: var(--space-192) var(--space-128);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0 0 0 -15%;
        width: 125%;
        height: 100%;
        z-index: -50;
        pointer-events: none;
        background-image: 
            url('../assets/background/prove-yourself-background.avif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;

        -webkit-mask-image: linear-gradient(to top, transparent 25%, var(--black) 60% var(--black) 75%, transparent 100%);
        mask-image: linear-gradient(to top, transparent 25%, var(--black) 60%, var(--black) 75%, transparent 100%);
    }
}

.prove-yourself__grid {
    display: grid;
    gap: var(--space-192);
}

.prove-yourself__title {
    display: grid;
    place-content: center;
}

.prove-yourself__line--top {
    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -50% 0 0 -10%;
        width: 100%;
        height: 300%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/prove-yourself-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .title--small {
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -125% 0 0 -100%;
            width: 400%;
            height: 500%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/svg/cursive/prove-yourself-that-cursive.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
}

.prove-yourself__line--bottom {
    .title--small {
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -125% 0 0 -250%;
            width: 700%;
            height: 500%;
            z-index: -1;
            pointer-events: none;
            background-image:
                url('../assets/svg/cursive/prove-yourself-of-cursive.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
        }
    }
}

.prove-yourself__line {
    display: flex;
    gap: var(--space-72);
    align-items: center;
    justify-content: space-between;
}

.prove-yourself__word.italics {
    font-style: italic;
    font-weight: var(--font-weight-light);
}

.prove-yourself__content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-64);
}

.prove-yourself__subtitle {
    writing-mode: sideways-lr;
    text-align: center;
    font-style: italic;
    font-weight: var(--font-weight-light);
    color: var(--gray);
}

.prove-yourself__visual {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-64);
    max-height: 80vb;
    height: 100%;
    width: 100%;
    border-inline: 2px var(--gray) solid;

    position: relative;
    isolation: isolate;
}

.prove-yourself__visual > * {
    grid-area: 1 / -1;
}

.prove-yourself__image {
    height: 100%;
    object-fit: contain;
    scale: -1 1;
    user-select: none;
}

.prove-yourself__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    cursor: crosshair;
    touch-action: none;
}

.prove-yourself__explanation-block {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: end;
    align-items: start;

    position: relative;
    isolation: isolate;
}

.prove-yourself__info p {
    max-width: 18ch;
}

.prove-yourself__explanation {
    line-height: var(--line-height-120);
    max-width: 18ch;
    text-align: end;
    align-self: center;
}

.prove-yourself__info-message {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-inline: var(--space-32);
    padding-block: var(--space-24);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-150);
    font-style: italic;
    white-space: pre-line;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    view-transition-name: validation-message;
}

.prove-yourself__info-message.is-active {
    opacity: 1;
    visibility: visible;
}

.prove-yourself__info-message--success {
    color: var(--black);
    background-color: var(--green-editorial);
    border: var(--green-editorial) 1px solid;
}

.prove-yourself__info-message--fail {
    color: var(--black);
    background-color: var(--red-editorial);
    border: var(--red-editorial) 1px solid;
}

/*
==========================================================================
---------------- CHALLENGES
==========================================================================
*/

.challenge {
    padding-block: var(--space-128) var(--space-192);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -10% 0 0 20%;
        width: 150%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/targets-background.avif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;

        -webkit-mask-image: linear-gradient(to top left, transparent 25%, var(--black) 60%);
        mask-image: linear-gradient(to top left, transparent 25%, var(--black) 60%);
    }
}

.challenge__grid {
    display: grid;
    gap: var(--space-192);
}

.challenge__header {
    display: grid;
    gap: var(--space-72);
    padding-inline-start: var(--space-128);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -10% 0 0 2.5%;
        width: 85%;
        height: 150%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/targets-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

.challenge__title {
    display: grid;
    gap: var(--space-24);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -15% 0 0 10%;
        width: 80%;
        height: 75%;
        z-index: -50;
        pointer-events: none;
        background-image:
            url('../assets/svg/cursive/targets-cursive.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

.challenge__description p {
    max-width: 40ch;
}

.challenge__subtitle {
    font-size: var(--font-size-large);

    em {
        font-weight: var(--font-weight-semibold);
    }
}

.challenge__content {
    display: grid;
    gap: var(--space-72);

    .info-guide p {
        max-width: 25ch;
    }
}

.challenge__content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TARGET ITEM
================================================= */

.challenge__item-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
}

.challenge__item {
    display: grid;
    place-items: center;
    border: var(--gray) .2rem solid;
    color: var(--white);
    text-decoration: none;

    p {
        letter-spacing: 15%;
        font-size: var(--font-size-small);

        b {
            font-style: normal;
        }

        &:not(b, .target__status) {
            font-weight: var(--font-weight-light);
        }
    }
}

.target__visual {
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: 40vb;
    display: flex;
    justify-content: center;
    align-items: center;
}

.target__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.target__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-48) var(--space-64);
    padding-inline: var(--space-32);
    padding-block: var(--space-32) var(--space-24);
    text-transform: uppercase;
}

.target__title {
    font-size: var(--font-size-semilarge);
    font-family: 'Nyght Serif';
    line-height: var(--line-height-105);
    font-weight: var(--font-weight-medium);
    grid-column: 1 / -1;
    position: relative;

    &::before { 
        position: absolute;
        content: '';
        inset: calc(-1 * var(--space-24)) 0 0 0;
        border-block-start: var(--gray) 1px solid;
    }
}

.target__location, .target__number {
    max-width: 15ch;
}
.target__joined, .target__location {
    text-align: end;
    justify-self: end;
}

.target__status {
    font-weight: var(--font-weight-bold);
}
.target__status.target__status--true {
    color: var(--green-editorial);
}
.target__status.target__status--false {
    color: var(--red-editorial);
}

/*
==========================================================================
---------------- SIGNATURE REVEAL
==========================================================================
*/

.signature-creation {
    padding-block: var(--space-64);
}

.signature-creation__comment {
    position: absolute;
    inset: 0 50% auto auto;
    translate: 50% 0;
    transition: opacity 0.3s ease, display 0.3s;
}

.signature-creation__grid {
    display: grid;
    place-items: center;
    grid-template-rows: auto 1fr;

    position: relative;

    & > .signature-creation__comment {
        font-size: var(--font-size-semilarge);
    }
}

.signature-creation__info {
    visibility: hidden;
    opacity: 0;
    justify-self: end;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    
    p {
        max-width: 22ch;
    }
}
.signature-creation__info.show-hint {
    visibility: visible;
    opacity: 1;
}

.signature-creation__workspace {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
}

.signature-creation__cloth-layer {
    position: relative;
    isolation: isolate;

    max-width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    transition: scale 0.2s ease, opacity 0.3s ease, display 0.3s;
}

.signature-creation__cloth {
    width: 100%;
    height: 100%;
    max-height: 75vb;
    object-fit: contain;
}

.signature-creation__hint {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 10;

    display: grid;
    place-items: center;
    gap: var(--space-32);
    
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    
    &::before {
        inset: calc(-1 * var(--space-64)) calc(-1 * var(--space-32));
        background: radial-gradient(
            ellipse, 
            hsl(from var(--black) h s l / 0.65) 0%,
            hsl(from var(--black) h s l / 0.45) 50%,
            hsl(from var(--black) h s l / 0) 80%
        );
    }
}

.signature-creation__assembly-layer {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    min-height: 70vb;
    transition: opacity 0.5s ease, display 0.5s, scale 0.5s ease;
}

.signature-creation__scatter-box {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, 1fr);
    min-height: 0;

    &::before {
        content: "";
        grid-column: 4 / 7;
        grid-row: 2 / -1;
    }
}

.cloth-piece {
    width: max(var(--space-128), 5%);
    object-fit: contain;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    z-index: 10;

    view-transition-class: cloth-piece;

    filter: drop-shadow(0 1rem 1.5rem rgb(from var(--white) r g b / 7.5%));
    
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

::view-transition-group(.cloth-piece) {
    animation-duration: 0.75s;
    animation-timing-function: linear(0, 0.009 1%, 0.039 2.1%, 0.153 4.4%, 0.306 6.6%, 0.765 12.5%, 0.989 16.1%, 1.068 17.8%, 1.129 19.5%, 1.172 21.2%, 1.199 23%, 1.209 25.4%, 1.195 28.1%, 1.161 30.8%, 1.011 40.5%, 0.977 44.1%, 0.959 47.8%, 0.959 53.3%, 0.997 65.4%, 1.008 72.2%, 1);
    animation-fill-mode: both;
}

.cloth-piece:active {
    cursor: grabbing;
    transition: none;
}

.signature-creation__dropzone {
    position: relative;
    width: 30%;
    aspect-ratio: 2 / 1;
    border: 2px dashed var(--green-editorial);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-16);
    z-index: 250;
    user-select: none;
}

.dropzone__counter {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--green-editorial);
    position: absolute;
    bottom: min(-25%, -3.5rem);
    user-select: none;
}

.signature-creation__generate {
    position: absolute;
    bottom: 0;
    padding: var(--space-24) var(--space-32);
    background-color: var(--black);
    color: var(--green-editorial);
    border: 2px var(--green-editorial) solid;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    z-index: 500;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, display 0.5s;

    &:hover {
        background-color: var(--green-editorial);
        color: var(--black);
    }
}

.signature-creation__assembly-layer.is-hidden,
.signature-creation__cloth-layer.is-hidden,
.signature-creation__generate.is-hidden,
.signature-creation__comment.is-hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    display: none;
}

.signature-creation__assembly-layer.is-hidden {
    scale: 0.5;
}

@starting-style {
    .signature-creation__assembly-layer,
    .signature-creation__cloth-layer,
    .signature-creation__generate,
    .signature-creation__comment {
        opacity: 0;
    }

    .signature-creation__assembly-layer {
        scale: 0.5;
    }
}

/*
==========================================================================
---------------- EVIDENCE PROOF
==========================================================================
*/

.evidence-proof {
    padding-block: var(--space-192) var(--space-128);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 10% 0 0 -5%;
        width: 100%;
        height: 95%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/evidence-proof-background.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
        -webkit-mask-image: linear-gradient(to top, transparent 10%, var(--black) 25%);
        mask-image: linear-gradient(to top, transparent 10%, var(--black) 25%);
    }
}

.evidence-proof__grid {
    display: grid;
    place-content: center;
    gap: var(--space-128);
}

.evidence-proof__title {
    display: grid;

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -5% 0 0 -2.5%;
        width: 85%;
        height: 150%;
        z-index: -1;
        pointer-events: none;
        background-image:
            url('../assets/image/decoration/evidence-proof-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

.evidence-proof__line {
    display: flex;
    gap: var(--space-72);
    align-items: center;
    justify-content: center;
}
.evidence-proof__line--shifted {
    padding-inline-start: var(--space-128);
}

.evidence-proof__word.title--small {
    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -10% 0 0 -135%;
        width: 400%;
        height: 300%;
        z-index: -50;
        pointer-events: none;
        background-image:
            url('../assets/svg/cursive/evidence-cursive.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

/* 
------------FORM
=======================================================
*/

.evidence-proof__form {
    display: grid;
    gap: var(--space-72);
    padding: var(--space-72) var(--space-64);
    background-color: rgb(from var(--black) r g b / 40%);
    backdrop-filter: blur(2.5rem);
    -webkit-backdrop-filter: blur(2.5rem);
}

.evidence-proof__form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-128);

    .info-guide p {
        max-width: 15ch;
    }
}

.evidence-proof__subtitle {
    font-size: var(--font-size-large);

    em {
        font-weight: var(--font-weight-semibold);
    }
}

.evidence-proof__form-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-64);
}

.form-layout__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.form-group label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--white);
}

.label-hint {
    font-weight: var(--font-weight-regular);
}
.signature-capture .label-hint {
    color: var(--green-editorial);
    font-weight: var(--font-weight-bold);
}

.form-group input,
.form-group select,
.form-group textarea {
    appearance: none;
    width: 100%;
    background-color: rgb(from var(--black) r g b / 50%);
    border: 1px solid var(--gray);
    color: var(--white);
    padding: var(--space-16) var(--space-20);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-150);
    border-radius: 0;
    transition: border-color .3s ease;
}

.form-group textarea {
    resize: vertical;
}

.form-group select option {
    background-color: var(--black);
    color: var(--white);
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--white);
    background-color: rgb(from var(--white) r g b / 5%);
}

.custom-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-32);

    select:invalid, select:user-invalid {
        color: var(--gray);
    }
}

.select-arrow {
    position: absolute;
    right: var(--space-20);
    color: var(--gray);
    pointer-events: none;
    transition: translate .3s ease, color 0.3s ease;
}
.custom-select-wrapper:focus-within .select-arrow {
    color: var(--white);
}

.signature-capture__visual {
    border: 1px solid var(--gray);
    max-height: 25vb;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: clip;

    padding: var(--space-32);
}
.signature-capture__image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0rem 1rem rgb(from var(--white) r g b / 25%));
}

.form-layout__upload {
    display: grid;
    border: 1px solid var(--gray);
    background-color: rgb(from var(--black) r g b / 50%);
    transition: border-color 0.3s ease, background-color 0.3s ease;

    &:hover {
        border-color: var(--white);
        background-color: rgb(from var(--white) r g b / 5%);
    }

    &:has(:focus-visible) {
        border-color: var(--white);
        background-color: rgb(from var(--white) r g b / 5%);
    }
}


.upload-dropzone {
    display: grid;
    place-items: center;
    place-content: center;
    gap: var(--space-24);
    cursor: pointer;
    
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.upload-dropzone__default {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

.upload-dropzone__default.is-hidden {
    display: none;
}

.upload-dropzone__preview {
    padding: var(--space-32);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 50;
}

.upload-dropzone__preview.is-hidden {
    display: none;
}

.upload-dropzone__icon {
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black);
    filter: drop-shadow(0 0.5rem 1rem rgb(from var(--black) r g b / 50%));
}

.upload-dropzone__text {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--white);
}

.evidence-proof__submit {
    grid-column: 1 / -1;
    background-color: var(--black);
    border: 1px solid var(--green-editorial);
    color: var(--green-editorial);
    padding-block: var(--space-24);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.evidence-proof__submit:hover {
    background-color: var(--green-editorial);
    color: var(--black);
}

.error-message {
    color: var(--red-editorial);
    font-weight: var(--font-weight-semibold);
}

/*
==========================================================================
---------------- WHISPERS
==========================================================================
*/

.whispers {
    padding-block: var(--space-128) var(--space-128);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0% 0 0 -45%;
        width: 150%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/background/whispers-background.avif');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;

        -webkit-mask-image: linear-gradient(to top, transparent 0%, var(--black) 25%);
        mask-image: linear-gradient(to top, transparent 0%, var(--black) 25%);
    }
}

.whispers__grid {
    display: grid;
    gap: var(--space-32);
}

.whispers__header {
    display: grid;
    gap: var(--space-72);
    padding-inline-start: var(--space-128);
}

.whispers__title {
    display: flex;
    gap: var(--space-24);

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: -25% 0 0 -2.5%;
        width: 100%;
        height: 200%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/svg/cursive/whispers-cursive.svg'),
            url('../assets/image/decoration/whispers-decoration.avif');
        background-size: 20%, contain;
        background-repeat: no-repeat;
        background-position: left top;
    }
}

.whispers__description p {
    max-width: 35ch;
}

/* 
------------WHISPERS ITEMS
=======================================================
*/

.whispers__wrapper {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;

    &::before, &::after {
        content: "";
        position: absolute;
        z-index: 100;
        pointer-events: none;
        background-color: var(--black);
        transition: opacity .3s ease;
    }

    /* &::before {
        inset: var(--space-64) auto var(--space-128) -5rem;
        background: linear-gradient(to left, transparent 0%, var(--black) 50%);
        width: 10vi;
        filter: blur(2rem);
    }
    &.start-reached::before {
        opacity: 0;
    } */

    &::after {
        inset: var(--space-64) -5rem var(--space-128) auto;
        background: linear-gradient(to right, transparent 0%, var(--black) 50%);
        width: 15vi;
        filter: blur(2rem);
    }
    &.end-reached::after {
        opacity: 0;
    }
}

.whispers__item-layout {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-64);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: inline proximity;
    padding-block: var(--space-64) var(--space-128);
    scrollbar-width: none;
}

.whispers__item-layout::-webkit-scrollbar {
    display: none;
}

.whispers__item {
    scroll-snap-align: center;
    height: fit-content;

    display: grid;
    place-content: center;
    gap: var(--space-48);
    padding: var(--space-48) var(--space-64);
    scale: 0.9;
    opacity: 0.5;
    filter: blur(0.1rem);
    transition: scale .35s ease-out, opacity .35s ease-out, filter .1s ease-out;

    background-image: 
            url('../assets/background/whisper-item-background.avif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    position: relative;
    isolation: isolate;

    &:nth-child(2n) {
        margin-block-start: var(--space-96);

        .whisper__user-signature {
            scale: -1 1;
        }
    }
    &:nth-child(3n + 1) {
        .whisper__user-signature {
            scale: 1 -1;
        }
    }

    &.in-view {
        scale: 1;
        opacity: 0.9;
        filter: blur(0rem);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -10;
        background-color: transparent;
        box-shadow: 0 2.5rem 4rem rgb(from var(--black) r g b / 65%);
        transition: opacity .3s ease;
        pointer-events: none;
    }
}

.whisper__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-64);
}

.whisper__content {
    display: grid;
    grid-template-columns: 1fr auto;
}

.whisper__user-level {
    text-transform: uppercase;
    font-style: italic;
    font-size: var(--font-size-semilarge);
    font-family: 'Nyght Serif';
    line-height: var(--line-height-105);
    font-weight: var(--font-weight-medium);
    grid-column: 1 / -1;
}

.whisper__user-location {
    text-transform: uppercase;
    letter-spacing: 15%;

    b {
        font-style: normal;
    }
}

.whisper__user-speech {
    line-height: var(--line-height-160);
    max-width: 45ch;
    min-width: 40ch;

    padding-block: var(--space-32);
    padding-inline: var(--space-32);
    border-block: 2px var(--gray) solid;
}

.whisper__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: var(--space-48);
    background-color: rgb(from var(--black) r g b / 50%);
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);

    border: 2px var(--gray) solid;
}

.whisper__user-signature {
    aspect-ratio: 2 / 1;
    min-width: 10vi;
    object-fit: contain;
    width: 100%;
}

/*
==========================================================================
---------------- FOOTER
==========================================================================
*/

.footer {
    padding-block: var(--space-24);
    position: relative;
    isolation: isolate;
    height: 100svb;
    overflow-y: clip;
    display: grid;

    &::before {
        content: "";
        position: absolute;
        inset: 15% 0 0 -10%;
        width: 100%;
        height: 80%;
        z-index: -1;
        pointer-events: none;
        background-image: 
            url('../assets/image/decoration/footer-decoration.avif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
    }
}
.footer__grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
}

.footer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-24);
    border-block-end: var(--black) 1px solid;
}

.footer__layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block: var(--space-64);
    height: 100%;

    .nav {
        align-self: end;
    }
}

.footer__title {
    display: grid;
    font-style: italic;
}

.footer__title--first {
    justify-self: end;
    align-self: end;
    grid-column: 1 / 3;

    .footer__word--red {
        color: var(--red-editorial);
    }
}
.footer__title--second {
    justify-self: center;
    align-self: start;
    grid-column: 2 / -1;
    padding-inline-end: var(--space-64);

    .footer__word--italic {
        font-weight: var(--font-weight-light);
    }

    .footer__word--black {
        b {
            color: var(--green-editorial);
        }
    }
}

.footer__visual {
    position: absolute;
    z-index: -100;
    inset: 45% 50% 0 0;

    max-width: 45vi;

    display: flex;
    align-items: end;
}

.footer__image {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.footer__finish {
    display: grid;
    align-items: center;
    padding-block: var(--space-24);
    border-block-start: var(--black) 1px solid;

    .footer__chapter {
        justify-self: end;
    }
}

/* ============================================= */

.mischief__image, 
.mischief-popup__image,
.target__image,
.upload-dropzone__preview {
    filter: grayscale(100%);
}

.world-of-mischief-hidden {
    display: none;
    opacity: 0;
    filter: blur(2rem);
    transition: display 0.5s allow-discrete, opacity 0.5s ease 0.2s, filter 0.5s ease 0.2s;
}

.first-locked-content, .second-locked-content, .third-locked-content {
    display: none;
}

.first-locked-content.is-unlocked, .second-locked-content.is-unlocked, .third-locked-content.is-unlocked {
    display: block;
}