* { box-sizing: border-box; margin: 0; padding: 0; }

body { min-width: 320px; min-height: 100svh; overflow-x: hidden; background: #000; color: #eee; font-family: Arial, sans-serif; }

.site-loader {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: none;
    place-items: center;
    overflow: hidden;
    background: #000;
    color: rgba(255,255,255,.78);
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.js .site-loader { display: grid; }

.site-loader::before,
.site-loader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255,255,255,.12);
}

.site-loader::before { width: min(32vw, 130px); height: 1px; transform: translate(-50%, -50%); }
.site-loader::after { width: 1px; height: min(14vh, 88px); transform: translate(-50%, -50%); }

.loader-core {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 13px;
    min-width: 112px;
    padding: 18px 12px;
    background: #000;
    transition: opacity .45s ease, transform .6s cubic-bezier(.2,.75,.25,1);
}

.loader-mark { font: 200 22px/1 Georgia, serif; animation: loader-pulse 1.05s ease-in-out infinite; }
.loader-track { position: relative; width: 92px; height: 1px; overflow: hidden; background: rgba(255,255,255,.17); }
.loader-track::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.82); transform: translateX(-105%); animation: loader-scan 1.05s cubic-bezier(.55,0,.45,1) infinite; }
.loader-copy { color: rgba(255,255,255,.39); font: 7px/1 Arial, sans-serif; letter-spacing: 1.35px; }

@keyframes loader-scan {
    from { transform: translateX(-105%); }
    to { transform: translateX(105%); }
}

@keyframes loader-pulse {
    0%, 100% { opacity: .35; transform: scale(.92); }
    50% { opacity: .92; transform: scale(1); }
}

body.is-ready .site-loader { visibility: hidden; opacity: 0; pointer-events: none; }
body.is-ready .loader-core { opacity: 0; transform: translateY(-8px); }

.page {
    --section-gap: clamp(58px, 8vh, 74px);
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    padding: 40px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page > * { z-index: 1; }

.page::before,
.page::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.page::before {
    inset: -14%;
    opacity: .42;
    background:
        radial-gradient(ellipse at 14% 22%, rgba(255,255,255,.075) 0%, transparent 22%),
        radial-gradient(ellipse at 86% 52%, rgba(255,255,255,.05) 0%, transparent 26%),
        radial-gradient(ellipse at 49% 94%, rgba(255,255,255,.035) 0%, transparent 25%);
    filter: blur(17px);
    animation: background-drift 18s ease-in-out infinite alternate;
}

.page::after {
    inset: 0;
    opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    mix-blend-mode: screen;
    animation: film-grain 1.8s steps(4) infinite;
}

@keyframes background-drift {
    0% { transform: translate3d(-2%, -1%, 0) scale(1); }
    50% { transform: translate3d(2%, 3%, 0) scale(1.05); }
    100% { transform: translate3d(-1%, 5%, 0) scale(1.02); }
}

@keyframes film-grain {
    0% { background-position: 0 0; }
    25% { background-position: -21px 14px; }
    50% { background-position: 17px -28px; }
    75% { background-position: 28px 21px; }
    100% { background-position: -14px -17px; }
}

.quote { position: absolute; top: 42px; right: 31px; color: rgba(255,255,255,.57); font: 10px/1.2 Arial, sans-serif; letter-spacing: .2px; }

.marker { position: absolute; color: rgba(255,255,255,.55); font: 200 19px/1 Georgia, serif; user-select: none; animation: marker-float 5s ease-in-out infinite alternate; }
.m1 { top: 22%; left: 11%; } .m2 { top: 34%; right: 12%; opacity: .65; }
.m3 { top: 57%; left: 17%; opacity: .45; } .m4 { top: 70%; right: 19%; }
.m5 { bottom: 12%; left: 49%; opacity: .55; } .m6 { bottom: 24%; right: 10%; opacity: .35; }
.m7 { top: 12%; left: 31%; opacity: .38; animation-delay: -1.3s; } .m8 { top: 46%; right: 7%; opacity: .46; animation-delay: -2.6s; }
.m9 { bottom: 34%; left: 7%; opacity: .32; animation-delay: -3.7s; } .m10 { bottom: 6%; right: 32%; opacity: .5; animation-delay: -4.3s; }

@keyframes marker-float {
    from { transform: translate(0, 0); }
    to { transform: translate(3px, -5px); }
}

.visual-cluster { position: relative; isolation: isolate; width: 210px; margin-top: calc(clamp(52px, 9vh, 74px) + 100px); }

.visual-cluster::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -24px;
    left: -29px;
    width: 270px;
    height: 270px;
    opacity: .48;
    background: radial-gradient(ellipse at 48% 47%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 28%, transparent 67%);
    filter: blur(13px);
    animation: photo-halo 20s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes photo-halo {
    from { transform: translate3d(-5px, 3px, 0) scale(.96); opacity: .3; }
    to { transform: translate3d(7px, -4px, 0) scale(1.06); opacity: .55; }
}

.photo-card {
    position: relative;
    z-index: 1;
    width: 210px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    padding: 4px;
    overflow: hidden;
    background: linear-gradient(140deg, #eee 0%, #a9a9a9 3%, #080808 7%, #161616 100%);
    border: 1px solid rgba(255,255,255,.4);
    clip-path: polygon(1% 2%, 98% 0, 100% 95%, 97% 98%, 73% 99%, 68% 97%, 43% 100%, 3% 98%, 0 15%);
    transform: perspective(750px) rotate(-7deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
    touch-action: none;
    transition: transform .22s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease;
    box-shadow: 8px 10px 0 rgba(255,255,255,.035), 0 18px 32px rgba(0,0,0,.9), -1px -1px 13px rgba(255,255,255,.1);
}

.photo-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 65% center; filter: brightness(.78) contrast(1.06); }
.photo-card.is-tilting { transition-duration: .08s; }
.photo-card:hover { box-shadow: 10px 21px 35px rgba(0,0,0,.92), -1px -1px 15px rgba(255,255,255,.13); }

.photo-card::before {
    content: "";
    position: absolute;
    inset: 2%;
    z-index: 2;
    background: linear-gradient(-45deg, rgba(255,255,255,.86) 0 38%, transparent 62%) 100% 100% / 24px 24px no-repeat;
    filter: blur(1.5px) drop-shadow(0 0 9px rgba(255,255,255,.9));
    pointer-events: none;
}

.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .18;
    background: linear-gradient(118deg, transparent 31%, rgba(255,255,255,.24) 46%, transparent 53%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-position: -90% 0, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 180% 100%, 120px 120px;
    animation: photo-reflection 14s ease-in-out infinite;
}

@keyframes photo-reflection {
    0%, 42%, 100% { background-position: -90% 0, 0 0; opacity: .16; }
    64% { background-position: 190% 0, 16px -9px; opacity: .34; }
    79% { background-position: 190% 0, 4px 8px; opacity: .2; }
}

.tape { position: absolute; z-index: 3; width: 43px; height: 13px; opacity: .26; background: repeating-linear-gradient(90deg, rgba(255,255,255,.72) 0 1px, rgba(210,210,210,.24) 1px 3px); mix-blend-mode: screen; filter: blur(.15px); }
.tape-top { top: -5px; left: 28px; transform: rotate(-2deg); }
.tape-bottom { right: 20px; bottom: -6px; transform: rotate(4deg); }

.thumbnails { position: absolute; z-index: 2; top: 15px; left: calc(100% + 25px); display: flex; flex-direction: column; gap: 6px; align-items: center; transform: translate3d(var(--gallery-x, 0px), var(--gallery-y, 0px), 0); transform-origin: center; transition: transform .25s ease-out; }
.thumbnails::before { content: ""; position: absolute; z-index: -1; inset: -14px -11px; border-radius: 50%; background: rgba(255,255,255,.07); filter: blur(14px); opacity: .55; pointer-events: none; }
.thumbnails img { width: 34px; height: 38px; object-fit: cover; object-position: center; filter: grayscale(.2) brightness(.7) contrast(1.12); border: 1px solid rgba(255,255,255,.3); opacity: .88; }
.thumbnails img { transform-origin: left center; box-shadow: 0 3px 7px rgba(0,0,0,.7); }
.thumbnails img:nth-child(1) { width: 31px; height: 35px; opacity: .82; transform: translateX(-9px) rotate(-9deg); }
.thumbnails img:nth-child(2) { opacity: .65; transform: translateX(-5px) rotate(-6deg); }
.thumbnails img:nth-child(3) { width: 30px; height: 34px; opacity: .52; transform: translateX(-2px) rotate(-3deg); }
.thumbnails img:nth-child(4) { opacity: .85; transform: translateX(1px) rotate(0deg); }

.registration-mark { position: absolute; z-index: 3; display: block; width: 14px; height: 1px; background: rgba(255,255,255,.36); box-shadow: 0 0 5px rgba(255,255,255,.12); pointer-events: none; animation: registration-fade 4.8s ease-in-out infinite alternate; }
.registration-mark::after { content: ""; position: absolute; top: -4px; left: 5px; width: 1px; height: 9px; background: inherit; }
.reg-a { top: 11px; left: -17px; transform: rotate(-8deg); animation-delay: -.8s; }
.reg-b { top: 78px; left: -21px; width: 9px; transform: rotate(90deg); animation-delay: -2.2s; }
.reg-c { bottom: 12px; left: -8px; width: 16px; transform: rotate(5deg); animation-delay: -3.1s; }
.reg-d { right: 11px; bottom: 9px; width: 11px; transform: rotate(-2deg); animation-delay: -1.4s; }

@keyframes registration-fade {
    from { opacity: .25; }
    to { opacity: .72; }
}

.identity { margin-top: var(--section-gap); display: flex; flex-direction: column; align-items: center; text-align: center; }
.identity h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 9vw, 40px); font-weight: 400; letter-spacing: 1.5px; line-height: 1; }
.identity p { margin-top: 8px; color: rgba(255,255,255,.52); font-size: 10px; letter-spacing: .9px; }
.glitch-text { position: relative; display: inline-block; white-space: nowrap; }
.glitch-text::before,
.glitch-text::after { content: attr(data-glitch); position: absolute; inset: 0; z-index: 2; width: 100%; opacity: 0; pointer-events: none; }
.glitch-text.is-glitching { animation: text-jolt 200ms steps(2, end); }
.glitch-text.is-glitching::before { color: inherit; opacity: 1; transform: translateX(-.5px); text-shadow: -1px 0 rgba(255,43,91,.55), 1px 0 rgba(89,184,255,.56); }
.glitch-text.is-glitching::after { color: rgba(89,184,255,.62); opacity: .62; clip-path: inset(57% 0 9% 0); transform: translateX(1px); mix-blend-mode: screen; }

@keyframes text-jolt {
    0% { transform: translateX(0); }
    45% { transform: translateX(-1px); }
    100% { transform: translateX(1px); }
}

.socials { --circle-size: 68px; width: min(100%, 350px); display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: var(--section-gap); }
.socials a { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 6px; padding-top: 12px; color: rgba(255,255,255,.72); font-size: 8px; letter-spacing: .15px; text-decoration: none; }
.socials a::before { content: "+"; position: absolute; z-index: 2; top: 5px; color: rgba(255,255,255,.42); font: 200 15px/1 Georgia, serif; pointer-events: none; }
.socials a::after { content: ""; position: absolute; z-index: 0; top: 12px; width: var(--circle-size); height: var(--circle-size); border-radius: 50%; box-shadow: 0 5px 16px rgba(0,0,0,.65); filter: blur(1.1px) brightness(.7); pointer-events: none; animation: icon-photo-drift 10s ease-in-out infinite alternate; }
.socials a:nth-child(1)::after { background: url("images/1.jpg") center/cover; }
.socials a:nth-child(2)::after { background: url("images/2.jpg") center/cover; }
.socials a:nth-child(3)::after { background: url("images/3.jpg") center/cover; }
.socials a:nth-child(4)::after { background: url("images/4.jpg") center/cover; }
.socials a:nth-child(2)::after { animation-delay: -2.3s; }
.socials a:nth-child(3)::after { animation-delay: -5.1s; }
.socials a:nth-child(4)::after { animation-delay: -7.4s; }

@keyframes icon-photo-drift {
    from { background-position: 48% 49%; }
    to { background-position: 53% 52%; }
}
.socials img { position: relative; z-index: 1; width: var(--circle-size); height: var(--circle-size); padding: 18px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; object-fit: contain; background: transparent; box-shadow: inset 0 0 17px rgba(255,255,255,.10); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease; }
.socials a span { position: relative; z-index: 1; }
.socials b { position: absolute; z-index: 2; top: 73px; color: rgba(255,255,255,.42); font: 200 15px/1 Georgia, serif; pointer-events: none; }
.socials a:hover img, .socials a:focus-visible img { transform: translateY(-3px) scale(1.08); border-color: #fff; box-shadow: inset 0 0 17px rgba(255,255,255,.32), 0 0 18px rgba(255,255,255,.16); filter: brightness(1.13); outline: none; }

@media (max-width: 360px) {
    .page { padding-right: 18px; padding-left: 18px; }
    .visual-cluster { width: 195px; }
    .photo-card { width: 195px; }
    .thumbnails { top: 8px; left: calc(100% + 22px); }
    .socials { gap: 6px; }
    .socials { --circle-size: 58px; }
    .socials img { padding: 15px; }
    .socials b { top: 63px; }
}

@media (max-width: 600px) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .page {
        --section-gap: clamp(36px, 5.5svh, 48px);
        width: 100%;
        max-width: 100vw;
        height: 100svh;
        min-height: 100svh;
        padding: 24px 18px 18px;
        overflow: hidden;
    }

    .visual-cluster { margin-top: calc(clamp(35px, 6svh, 48px) + 120px); }
    .socials { margin-top: 75px; }
}

@media (max-width: 600px) and (max-height: 700px) {
    .visual-cluster { margin-top: calc(clamp(35px, 6svh, 48px) + 70px); }
    .socials { margin-top: clamp(24px, 4svh, 35px); }
}

@media (min-width: 768px) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .page {
        --section-gap: clamp(38px, 4vh, 54px);
        padding: 48px clamp(42px, 6vw, 96px) 30px;
        width: 100%;
        max-width: 100vw;
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
    }

    .page::before { opacity: .28; }
    .page::after {
        opacity: .032;
        animation-duration: 9s;
        animation-timing-function: steps(2, end);
    }

    .quote {
        display: none;
        top: 72px;
        right: clamp(68px, 6vw, 104px);
        color: rgba(255,255,255,.54);
        font-size: 14px;
        line-height: 1.28;
        letter-spacing: .45px;
    }

    .marker { font-size: 22px; }

    .visual-cluster {
        --desktop-photo-size: min(clamp(280px, 23.5vw, 360px), 34svh);
        width: var(--desktop-photo-size);
        margin-top: min(
            calc(clamp(60px, 8vh, 96px) + 150px),
            max(0px, calc(100svh - var(--desktop-photo-size) - 345px))
        );
    }

    .visual-cluster::before {
        top: -44px;
        right: -54px;
        bottom: -44px;
        left: -54px;
        width: auto;
        height: auto;
    }

    .photo-card { width: 100%; padding: 5px; }
    .photo-card::before { background-size: 34px 34px; }
    .tape { width: 58px; height: 16px; }
    .tape-top { top: -6px; left: 42px; }
    .tape-bottom { right: 28px; bottom: -7px; }

    .thumbnails { top: 7%; left: calc(100% + 42px); gap: 10px; }
    .thumbnails img { width: 46px; height: 52px; }
    .thumbnails img:nth-child(1) { width: 42px; height: 47px; transform: translateX(-12px) rotate(-9deg); }
    .thumbnails img:nth-child(2) { transform: translateX(-7px) rotate(-6deg); }
    .thumbnails img:nth-child(3) { width: 41px; height: 46px; transform: translateX(-3px) rotate(-3deg); }
    .thumbnails img:nth-child(4) { transform: translateX(2px) rotate(0deg); }

    .registration-mark { transform-origin: center; }
    .reg-a { top: 17px; left: -24px; }
    .reg-b { top: 36%; left: -29px; }
    .reg-c { bottom: 15px; left: -13px; }
    .reg-d { right: 17px; bottom: 13px; }

    .identity h1 { font-size: clamp(42px, 4vw, 56px); }
    .identity p { margin-top: 10px; font-size: 12px; letter-spacing: 1.1px; }

    .socials { --circle-size: 82px; width: min(100%, 440px); gap: 14px; }
    .socials a { gap: 7px; padding-top: 12px; font-size: 10px; }
    .socials a::before { top: 3px; font-size: 17px; }
    .socials img { padding: 22px; }
    .socials b { top: 89px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .marker, .page::before, .page::after, .visual-cluster::before, .photo-card::after, .registration-mark, .socials a::after { animation: none; }
    .photo-card { transition: none; }
    .thumbnails { transition: none; }
    .loader-mark, .loader-track::after { animation: none; }
    .loader-track::after { transform: translateX(0); }
    .glitch-text.is-glitching { animation: none; }
}