:root {
    /* design typography audit words: sparingly numbers Interactions can feel tactile cinematic: bends specular highlight Interprets surreal image-making Grotes* Grotesk** notes */
    --mirror-black: #050507;
    --chrome-pearl: #E7E3DA;
    --iris-violet: #6F4DFF;
    --darkroom-red: #B52234;
    --halogen-gold: #F2B84B;
    --cyan-glare: #70F7FF;
    --smoked-glass: #23222B;
    --scene-progress: 0;
    --cursor-x: 50%;
    --cursor-y: 50%;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--mirror-black);
}

body {
    margin: 0;
    color: var(--chrome-pearl);
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(112, 247, 255, 0.13), transparent 22rem),
        radial-gradient(circle at 78% 12%, rgba(111, 77, 255, 0.22), transparent 30rem),
        linear-gradient(120deg, #050507 0%, #0b0910 45%, #050507 100%);
    font-family: "Space Grotesk", Inter, sans-serif;
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.12;
    background-image:
        repeating-radial-gradient(circle at 17% 23%, rgba(231, 227, 218, 0.28) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(92deg, transparent 0 7px, rgba(231, 227, 218, 0.05) 7px 8px);
    mix-blend-mode: screen;
}

.corner-mark,
.reel-counter {
    position: fixed;
    z-index: 60;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(0.62rem, 0.8vw, 0.82rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(231, 227, 218, 0.72);
    text-shadow: 0 0 12px rgba(112, 247, 255, 0.24);
}

.corner-mark--tl { top: 1.2rem; left: 1.2rem; }
.corner-mark--tr { top: 1.2rem; right: 1.2rem; color: var(--cyan-glare); }
.corner-mark--bl { bottom: 1.2rem; left: 1.2rem; }

.reel-counter {
    right: 1.2rem;
    bottom: 1.2rem;
    display: flex;
    gap: 0.8rem;
    color: var(--halogen-gold);
}

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2rem, 5vw, 5rem);
}

.scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(231, 227, 218, 0.05) 14.2%, transparent 14.5% 84%, rgba(231, 227, 218, 0.04) 84.2%, transparent 84.5%),
        radial-gradient(ellipse at 50% 100%, rgba(35, 34, 43, 0.8), transparent 42%);
}

.stage-lines {
    position: absolute;
    inset: 9vh 8vw;
    border: 1px solid rgba(231, 227, 218, 0.12);
    border-radius: 52% 48% 46% 54%;
    transform: skewX(-8deg);
}

.stage-lines::before,
.stage-lines::after {
    content: "";
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(112, 247, 255, 0.16);
    border-radius: inherit;
}

.stage-lines::after {
    inset: 22%;
    border-color: rgba(111, 77, 255, 0.24);
}

.oval-mirror {
    width: min(42vw, 24rem);
    min-width: 17rem;
    height: min(76vh, 42rem);
    border-radius: 50% / 43%;
    padding: 0.52rem;
    transform: perspective(900px) rotateY(-16deg) rotateZ(2deg);
    background: linear-gradient(120deg, #E7E3DA, #23222B 24%, #70F7FF 36%, #050507 50%, #E7E3DA 74%, #6F4DFF);
    box-shadow: 0 0 0 1px rgba(231, 227, 218, 0.25), 0 1.5rem 5rem rgba(0,0,0,0.75), 0 0 4rem rgba(111,77,255,0.32);
}

.mirror-glass {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 64% 38%, rgba(112, 247, 255, 0.25), transparent 22%),
        linear-gradient(100deg, rgba(231, 227, 218, 0.22), rgba(35, 34, 43, 0.82) 36%, rgba(5, 5, 7, 0.94) 62%, rgba(111, 77, 255, 0.26));
}

.warped-domain {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(0.62) skewY(-9deg) rotate(-5deg);
    font-family: "Bodoni Moda", serif;
    font-size: clamp(2.5rem, 7vw, 7.6rem);
    white-space: nowrap;
    color: rgba(231, 227, 218, 0.72);
    filter: blur(0.4px);
    text-shadow: 0 0 1rem rgba(112,247,255,0.45);
}

.reflected-fragment,
.jp-fragment {
    font-family: "Noto Serif JP", serif;
    color: rgba(242, 184, 75, 0.72);
    letter-spacing: 0.22em;
}

.reflected-fragment {
    position: absolute;
    right: 18%;
    bottom: 19%;
    writing-mode: vertical-rl;
}

.cyan-glare,
.table-glare {
    position: absolute;
    inset: -20% auto -20% 12%;
    width: 0.22rem;
    background: linear-gradient(transparent, #70F7FF, #E7E3DA, #70F7FF, transparent);
    box-shadow: 0 0 2rem #70F7FF;
    transform: rotate(17deg);
    animation: glareTravel 4.8s ease-in-out infinite;
}

.scene-note {
    position: absolute;
    max-width: 18rem;
    left: 10vw;
    bottom: 20vh;
    transform: rotate(-4deg);
    padding: 1rem 1.2rem;
    background: rgba(35, 34, 43, 0.52);
    border: 1px solid rgba(231, 227, 218, 0.18);
    backdrop-filter: blur(16px);
}

.frame-number,
.mono-strip,
.card-stamp {
    font-family: "IBM Plex Mono", monospace;
    color: var(--darkroom-red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.floor-reflection,
.final-reflection {
    position: absolute;
    bottom: 4vh;
    font-family: "Bodoni Moda", serif;
    font-size: clamp(4rem, 14vw, 14rem);
    opacity: 0.11;
    transform: scaleY(-0.22) skewX(-18deg);
    filter: blur(3px);
    color: var(--chrome-pearl);
}

.aperture {
    background: radial-gradient(circle at 50% 51%, rgba(111, 77, 255, 0.16), transparent 34%), var(--mirror-black);
}

.iris-grid {
    position: absolute;
    width: min(86vmin, 45rem);
    height: min(86vmin, 45rem);
    transform: rotate(calc(var(--scene-progress) * 180deg));
    transition: transform 0.24s ease-out;
}

.iris-ring {
    position: absolute;
    inset: 5%;
    border: 1px solid rgba(231, 227, 218, 0.22);
    border-radius: 50%;
    box-shadow: inset 0 0 2rem rgba(112, 247, 255, 0.12), 0 0 2rem rgba(111, 77, 255, 0.22);
}

.ring-two {
    inset: 19%;
    border-style: dashed;
    transform: rotate(26deg);
}

.iris-core {
    position: absolute;
    inset: 37%;
    border-radius: 50%;
    background: radial-gradient(circle, #050507 35%, #23222B 58%, #6F4DFF 72%, #70F7FF 100%);
    box-shadow: 0 0 4rem rgba(112, 247, 255, 0.45);
}

.iris-blade {
    position: absolute;
    top: 49%;
    left: 50%;
    width: 18rem;
    height: 5.2rem;
    transform-origin: 0 50%;
    border-radius: 0 80% 18% 0;
    background: linear-gradient(100deg, rgba(231, 227, 218, 0.78), rgba(35, 34, 43, 0.82) 44%, rgba(111, 77, 255, 0.38));
    border: 1px solid rgba(231, 227, 218, 0.22);
    box-shadow: inset 0 0.5rem 1rem rgba(255,255,255,0.08), 0 0 1.5rem rgba(111,77,255,0.22);
}

.iris-blade span {
    position: absolute;
    right: 1.2rem;
    top: 0.6rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.62rem;
    color: var(--mirror-black);
    text-transform: uppercase;
}

.blade-1 { transform: rotate(0deg) translateX(3.4rem); }
.blade-2 { transform: rotate(45deg) translateX(3.4rem); }
.blade-3 { transform: rotate(90deg) translateX(3.4rem); }
.blade-4 { transform: rotate(135deg) translateX(3.4rem); }
.blade-5 { transform: rotate(180deg) translateX(3.4rem); }
.blade-6 { transform: rotate(225deg) translateX(3.4rem); }
.blade-7 { transform: rotate(270deg) translateX(3.4rem); }
.blade-8 { transform: rotate(315deg) translateX(3.4rem); }

.wordmark {
    z-index: 2;
    margin: 0;
    font-family: "Bodoni Moda", serif;
    font-size: clamp(4rem, 14vw, 15rem);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.08em;
    color: var(--chrome-pearl);
    text-shadow: 0 0 2.2rem rgba(112,247,255,0.22), 0.08em 0.04em 0 rgba(111,77,255,0.24);
}

.wordmark em {
    display: block;
    margin-left: 28%;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px var(--chrome-pearl);
}

.aperture-caption,
.mono-strip {
    position: absolute;
    max-width: 22rem;
    right: 9vw;
    bottom: 18vh;
}

.mono-strip {
    left: 9vw;
    top: 22vh;
    right: auto;
    bottom: auto;
    color: var(--cyan-glare);
}

.corridor {
    place-items: stretch;
    justify-content: center;
    background: linear-gradient(180deg, #050507, #0f0e15 45%, #050507);
}

.corridor-title {
    position: absolute;
    left: 8vw;
    top: 18vh;
    transform: rotate(-3deg);
}

.corridor-title h2,
.bloom-copy h2,
.calling-card h2,
.final-mark h2 {
    margin: 0.2rem 0;
    font-family: "Bodoni Moda", serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.05em;
}

.contact-strip {
    align-self: end;
    margin-bottom: 16vh;
    display: flex;
    gap: 0.65rem;
    width: max-content;
    transform: rotate(2deg) translateX(-6vw);
    padding: 1rem;
    background: rgba(231, 227, 218, 0.08);
    border-top: 1px solid rgba(231, 227, 218, 0.22);
    border-bottom: 1px solid rgba(231, 227, 218, 0.22);
}

.contact-frame {
    position: relative;
    width: clamp(8rem, 16vw, 15rem);
    height: clamp(12rem, 26vw, 22rem);
    padding: 0.8rem;
    color: var(--chrome-pearl);
    background:
        radial-gradient(circle at 52% 38%, rgba(112, 247, 255, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(35,34,43,0.9), rgba(5,5,7,0.96));
    border: 1px solid rgba(231, 227, 218, 0.24);
    font-family: "Space Grotesk", sans-serif;
    text-align: left;
    overflow: hidden;
}

.contact-frame::before,
.contact-frame::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(231, 227, 218, 0.14);
}

.contact-frame::after {
    inset: auto 13% 16% auto;
    width: 38%;
    aspect-ratio: 1;
    border-color: #B52234;
    border-radius: 50%;
    transform: scale(0) rotate(-18deg);
    transition: transform 0.45s cubic-bezier(.17,.84,.44,1);
}

.contact-frame:hover::after,
.contact-frame.active::after {
    transform: scale(1) rotate(-18deg);
}

.contact-frame span {
    font-family: "IBM Plex Mono", monospace;
    color: var(--darkroom-red);
}

.contact-frame b {
    position: absolute;
    left: 0.8rem;
    bottom: 0.8rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-frame i {
    position: absolute;
    inset: 26% 28%;
    border-radius: 48% 52% 51% 49%;
    background: linear-gradient(110deg, rgba(231, 227, 218, 0.2), rgba(112, 247, 255, 0.12), transparent);
    transform: skew(-10deg);
}

.acetate-note {
    position: absolute;
    right: 9vw;
    top: 27vh;
    max-width: 22rem;
    padding: 1rem;
    color: rgba(231, 227, 218, 0.76);
    background: rgba(112, 247, 255, 0.08);
    border: 1px solid rgba(112, 247, 255, 0.24);
    transform: rotate(4deg);
}

.crop-marks,
.registration-cross {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(231, 227, 218, 0.2);
}

.crop-marks { right: 19vw; bottom: 11vh; }
.crop-marks::before,
.crop-marks::after,
.registration-cross::before,
.registration-cross::after {
    content: "";
    position: absolute;
    background: rgba(231, 227, 218, 0.38);
}
.crop-marks::before,
.registration-cross::before { width: 100%; height: 1px; top: 50%; left: 0; }
.crop-marks::after,
.registration-cross::after { width: 1px; height: 100%; left: 50%; top: 0; }

.bloom {
    background:
        radial-gradient(circle at 48% 46%, rgba(242, 184, 75, 0.38), transparent 24%),
        radial-gradient(circle at 54% 42%, rgba(112, 247, 255, 0.16), transparent 19%),
        #050507;
}

.light-stand {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 68vh;
    background: linear-gradient(#E7E3DA, #23222B);
}

.stand-left { left: 18vw; transform: rotate(-8deg); }
.stand-right { right: 17vw; transform: rotate(7deg); }
.light-stand span {
    position: absolute;
    top: 22%;
    left: -4rem;
    width: 8rem;
    height: 1px;
    background: var(--chrome-pearl);
}

.barn-door {
    position: relative;
    width: clamp(16rem, 34vw, 36rem);
    height: clamp(16rem, 34vw, 36rem);
    display: grid;
    place-items: center;
    transform: rotate(-12deg);
}

.barn-door::before,
.barn-door::after {
    content: "";
    position: absolute;
    width: 62%;
    height: 24%;
    background: linear-gradient(90deg, #23222B, #050507);
    border: 1px solid rgba(231, 227, 218, 0.22);
}

.barn-door::before { top: 18%; transform: skewX(-24deg); }
.barn-door::after { bottom: 18%; transform: skewX(24deg); }

.lamp-core {
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #E7E3DA 0 10%, #F2B84B 24%, rgba(181,34,52,0.45) 42%, transparent 68%);
    box-shadow: 0 0 5rem #F2B84B, 0 0 10rem rgba(242, 184, 75, 0.42);
}

.beam {
    position: absolute;
    height: 24vh;
    width: 120vw;
    background: linear-gradient(90deg, transparent, rgba(242,184,75,0.16), rgba(112,247,255,0.12), transparent);
    filter: blur(10px);
    transform-origin: center;
    animation: beamSweep 8s ease-in-out infinite alternate;
}
.beam-a { transform: rotate(-18deg); }
.beam-b { transform: rotate(22deg); animation-delay: -3s; }

.bloom-copy {
    position: absolute;
    left: 8vw;
    top: 16vh;
    max-width: 36rem;
}

.bloom-copy p { max-width: 23rem; color: rgba(231, 227, 218, 0.72); }

.cable {
    position: absolute;
    bottom: 6vh;
    left: 0;
    width: 100vw;
    height: 30vh;
    fill: none;
    stroke: rgba(231, 227, 218, 0.32);
    stroke-width: 2;
}

.table {
    background: radial-gradient(ellipse at 50% 65%, rgba(35,34,43,0.95), transparent 42%), #050507;
}

.reflection-table {
    position: relative;
    width: min(78vw, 62rem);
    height: min(62vh, 34rem);
    border-radius: 48% / 18%;
    background:
        linear-gradient(176deg, rgba(231,227,218,0.1), transparent 28%),
        radial-gradient(ellipse at 50% 50%, rgba(112,247,255,0.12), transparent 42%),
        #09090d;
    border: 1px solid rgba(231, 227, 218, 0.18);
    box-shadow: inset 0 1rem 4rem rgba(231,227,218,0.05), 0 4rem 7rem rgba(0,0,0,0.7);
    transform: perspective(900px) rotateX(58deg) rotateZ(-4deg);
}

.calling-card {
    position: absolute;
    left: 50%;
    top: 49%;
    width: min(34rem, 70vw);
    padding: 2rem;
    transform: translate(-50%, -50%) rotate(5deg) rotateX(-58deg);
    background: linear-gradient(135deg, rgba(231,227,218,0.93), rgba(112,247,255,0.22) 48%, rgba(35,34,43,0.95));
    color: var(--mirror-black);
    border: 1px solid rgba(231, 227, 218, 0.72);
    box-shadow: 0 2rem 4rem rgba(0,0,0,0.55);
}

.calling-card h2 { font-size: clamp(2.8rem, 6vw, 6rem); color: var(--mirror-black); }
.calling-card p { max-width: 25rem; }

.shard {
    position: absolute;
    padding: 0.5rem 1rem;
    color: rgba(231, 227, 218, 0.75);
    background: linear-gradient(120deg, rgba(231,227,218,0.18), rgba(112,247,255,0.08));
    border: 1px solid rgba(231, 227, 218, 0.2);
    font-family: "Bodoni Moda", serif;
}
.shard-one { left: 14%; top: 30%; transform: rotate(-19deg); }
.shard-two { right: 16%; top: 34%; transform: rotate(14deg); }
.shard-three { left: 39%; bottom: 16%; transform: rotate(7deg); }

.table-glare {
    height: 150%;
    left: 64%;
    opacity: 0.8;
}

.jp-fragment {
    position: absolute;
    right: 8vw;
    bottom: 18vh;
}

.final {
    background:
        radial-gradient(circle at 50% 48%, rgba(111,77,255,0.22), transparent 24%),
        radial-gradient(circle at 50% 48%, rgba(112,247,255,0.1), transparent 36%),
        #050507;
}

.final-mark {
    position: relative;
    width: min(84vw, 46rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    text-align: center;
    background: rgba(35, 34, 43, 0.42);
    border: 1px solid rgba(231, 227, 218, 0.2);
    box-shadow: 0 0 5rem rgba(111,77,255,0.22), inset 0 0 2rem rgba(112,247,255,0.07);
    backdrop-filter: blur(18px);
}

.mini-iris {
    width: 7rem;
    aspect-ratio: 1;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: conic-gradient(from 20deg, #E7E3DA, #23222B, #6F4DFF, #70F7FF, #E7E3DA, #050507, #B52234, #E7E3DA);
    box-shadow: inset 0 0 0 2rem #050507, 0 0 3rem rgba(112,247,255,0.36);
    animation: slowSpin 12s linear infinite;
}

.final-mark p {
    max-width: 32rem;
    margin: 1rem auto 2rem;
    color: rgba(231, 227, 218, 0.76);
}

.mail-card {
    display: inline-block;
    padding: 0.9rem 1.2rem;
    color: var(--mirror-black);
    background: var(--chrome-pearl);
    font-family: "IBM Plex Mono", monospace;
    text-decoration: none;
    box-shadow: 0.45rem 0.45rem 0 var(--darkroom-red), -0.45rem -0.45rem 0 rgba(112,247,255,0.5);
}

.cross-a { left: 12vw; top: 18vh; }
.cross-b { right: 12vw; bottom: 18vh; transform: rotate(45deg); }

@keyframes glareTravel {
    0%, 100% { transform: translateX(-8rem) rotate(17deg); opacity: 0.25; }
    45% { opacity: 1; }
    55% { transform: translateX(20rem) rotate(17deg); opacity: 0.95; }
}

@keyframes beamSweep {
    from { translate: -8vw -3vh; opacity: 0.35; }
    to { translate: 8vw 4vh; opacity: 0.75; }
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .corner-mark--bl,
    .corner-mark--tr { display: none; }
    .scene { padding: 4.5rem 1rem; }
    .oval-mirror { width: 72vw; }
    .scene-note,
    .aperture-caption,
    .mono-strip,
    .acetate-note,
    .bloom-copy { position: relative; inset: auto; transform: none; margin: 1rem; }
    .contact-strip { flex-direction: column; transform: none; margin: 20vh auto 4vh; }
    .contact-frame { width: 78vw; height: 12rem; }
    .iris-grid { width: 120vmin; height: 120vmin; opacity: 0.75; }
    .iris-blade { width: 11rem; height: 3.8rem; }
    .wordmark { font-size: clamp(4rem, 20vw, 8rem); }
    .reflection-table { transform: none; height: 64vh; border-radius: 2rem; }
    .calling-card { transform: translate(-50%, -50%) rotate(3deg); }
}