/* mujun.art - Luxurious Paradox Noir */
/* Horizontal scroll gallery - the art of contradiction */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --void: #0d0d12;
    --deep-ground: #1a1a22;
    --warm-accent: #c4a265;
    --cool-accent: #6b7d8a;
    --body-text: #9a9088;
    --whisper: #5a5450;
    --bubble-film: #d4cfc6;
    --collage-sienna: #8a5a3a;
    --collage-dark: #3a3a42;
    --scroll-progress: 0;
    --font-display: 'Zilla Slab', serif;
    --font-body: 'Source Sans 3', sans-serif;
}

/* ============================================
   Reset and Base
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100vh;
    background: var(--void);
}

body {
    height: 100vh;
    overflow: hidden;
    background: var(--void);
    color: var(--body-text);
    font-family: var(--font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   Grain Overlay
   ============================================ */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 999;
    background: transparent;
}

.progress-bar__fill {
    height: 100%;
    width: 0%;
    background: var(--warm-accent);
    opacity: 0.6;
    transition: width 0.1s linear;
}

/* ============================================
   Gallery - Horizontal Scroll Container
   ============================================ */
.gallery {
    display: flex;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery::-webkit-scrollbar {
    display: none;
}

/* ============================================
   Room - Base Panel
   ============================================ */
.room {
    min-width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-ground);
    flex-shrink: 0;
    margin-right: 2vw;
    overflow: hidden;
}

.room:last-child {
    margin-right: 0;
}

.room__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.room__number {
    position: absolute;
    bottom: 3vh;
    right: 4vw;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.12em;
    color: var(--whisper);
}

.room__caption {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 4.8rem);
    letter-spacing: 0.04em;
    line-height: 1.08;
    text-transform: uppercase;
    position: absolute;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.room__caption--warm {
    color: var(--warm-accent);
}

.room__caption--cool {
    color: var(--cool-accent);
}

.room__caption--gold {
    color: var(--warm-accent);
}

.room__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.04em;
    line-height: 1.08;
    text-transform: uppercase;
    margin-bottom: 4vh;
}

.room__title--cool {
    color: var(--cool-accent);
}

.room.is-visible .room__caption {
    opacity: 1;
}

/* ============================================
   Room 1: The Entrance Hall
   ============================================ */
.room--entrance {
    background: var(--void);
}

.entrance-title {
    display: flex;
    align-items: baseline;
    gap: 0;
    position: relative;
    opacity: 0;
}

.room--entrance.is-visible .entrance-title {
    opacity: 1;
}

.entrance-title__mu {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: lowercase;
    color: var(--warm-accent);
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.entrance-title__line {
    display: inline-block;
    width: 1px;
    height: clamp(3rem, 8vw, 7rem);
    background: var(--warm-accent);
    opacity: 0;
    margin: 0 clamp(0.5rem, 1.5vw, 1.5rem);
    transition: opacity 1s ease-out 0.8s;
    align-self: center;
}

.entrance-title__jun {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: lowercase;
    color: var(--cool-accent);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.5s ease-out 0.5s, transform 1.5s ease-out 0.5s;
}

.entrance-title__dot {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 3rem);
    color: var(--whisper);
    opacity: 0;
    transition: opacity 1s ease-out 1.2s;
    margin-left: 0.1em;
}

.room--entrance.is-visible .entrance-title__mu {
    opacity: 1;
    transform: translateX(0);
}

.room--entrance.is-visible .entrance-title__line {
    opacity: 0.4;
}

.room--entrance.is-visible .entrance-title__jun {
    opacity: 1;
    transform: translateX(0);
}

.room--entrance.is-visible .entrance-title__dot {
    opacity: 1;
}

.entrance-bubble {
    position: absolute;
    bottom: 30vh;
    left: 50%;
    transform: translateX(-50%);
}

.bubble--entrance {
    animation: bubble-drift 28s ease-in-out infinite;
}

/* ============================================
   Collage Fragments - Shared Styles
   ============================================ */
.collage {
    position: relative;
    width: 80vw;
    height: 60vh;
}

.collage-fragment {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    box-shadow: 4px 4px 12px rgba(196, 162, 101, 0.08);
}

.room.is-visible .collage-fragment {
    opacity: 1;
}

.fragment-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.8rem);
    letter-spacing: 0.06em;
    color: var(--bubble-film);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================
   Room 2: Spear Room Fragments
   ============================================ */
.room--spear {
    background: var(--deep-ground);
}

.collage--spear {
    width: 80vw;
    height: 65vh;
}

.fragment--1 {
    width: 180px;
    height: 140px;
    top: 5%;
    left: 10%;
    background: var(--collage-sienna);
    opacity: 0.45;
    clip-path: polygon(3% 8%, 95% 2%, 98% 88%, 7% 95%);
    transform: rotate(2.3deg);
}

.fragment--2 {
    width: 220px;
    height: 100px;
    top: 25%;
    left: 30%;
    background: var(--cool-accent);
    opacity: 0.3;
    clip-path: polygon(5% 3%, 92% 7%, 97% 92%, 2% 97%);
    transform: rotate(-1.5deg);
}

.fragment--3 {
    width: 160px;
    height: 180px;
    top: 10%;
    left: 55%;
    background: var(--warm-accent);
    opacity: 0.35;
    clip-path: polygon(7% 5%, 93% 2%, 96% 85%, 4% 93%);
    transform: rotate(3.1deg);
}

.fragment--4 {
    width: 200px;
    height: 120px;
    top: 50%;
    left: 15%;
    background: var(--collage-dark);
    opacity: 0.5;
    clip-path: polygon(2% 6%, 97% 3%, 94% 91%, 5% 96%);
    transform: rotate(-2.7deg);
}

.fragment--5 {
    width: 140px;
    height: 160px;
    top: 40%;
    left: 45%;
    background: var(--collage-sienna);
    opacity: 0.35;
    clip-path: polygon(6% 4%, 91% 8%, 95% 89%, 3% 94%);
    transform: rotate(1.8deg);
}

.fragment--6 {
    width: 190px;
    height: 130px;
    top: 55%;
    left: 65%;
    background: var(--warm-accent);
    opacity: 0.4;
    clip-path: polygon(4% 7%, 96% 2%, 93% 93%, 6% 88%);
    transform: rotate(-3.4deg);
}

.fragment--7 {
    width: 120px;
    height: 200px;
    top: 15%;
    left: 78%;
    background: var(--cool-accent);
    opacity: 0.25;
    clip-path: polygon(8% 3%, 94% 6%, 91% 95%, 5% 92%);
    transform: rotate(2.6deg);
}

.fragment--8 {
    width: 170px;
    height: 110px;
    top: 70%;
    left: 40%;
    background: var(--collage-dark);
    opacity: 0.4;
    clip-path: polygon(3% 9%, 92% 4%, 96% 87%, 7% 93%);
    transform: rotate(-1.2deg);
}

/* ============================================
   Room 3: Shield Room Fragments
   ============================================ */
.room--shield {
    background: var(--deep-ground);
}

.collage--shield {
    width: 80vw;
    height: 65vh;
}

.fragment--s1 {
    width: 180px;
    height: 140px;
    top: 5%;
    right: 10%;
    left: auto;
    background: var(--cool-accent);
    opacity: 0.45;
    clip-path: polygon(97% 8%, 5% 2%, 2% 88%, 93% 95%);
    transform: rotate(-2.3deg);
}

.fragment--s2 {
    width: 220px;
    height: 100px;
    top: 25%;
    right: 30%;
    left: auto;
    background: var(--collage-sienna);
    opacity: 0.3;
    clip-path: polygon(95% 3%, 8% 7%, 3% 92%, 98% 97%);
    transform: rotate(1.5deg);
}

.fragment--s3 {
    width: 160px;
    height: 180px;
    top: 10%;
    right: 55%;
    left: auto;
    background: var(--cool-accent);
    opacity: 0.35;
    clip-path: polygon(93% 5%, 7% 2%, 4% 85%, 96% 93%);
    transform: rotate(-3.1deg);
}

.fragment--s4 {
    width: 200px;
    height: 120px;
    top: 50%;
    right: 15%;
    left: auto;
    background: var(--collage-dark);
    opacity: 0.5;
    clip-path: polygon(98% 6%, 3% 3%, 6% 91%, 95% 96%);
    transform: rotate(2.7deg);
}

.fragment--s5 {
    width: 140px;
    height: 160px;
    top: 40%;
    right: 45%;
    left: auto;
    background: var(--cool-accent);
    opacity: 0.35;
    clip-path: polygon(94% 4%, 9% 8%, 5% 89%, 97% 94%);
    transform: rotate(-1.8deg);
}

.fragment--s6 {
    width: 190px;
    height: 130px;
    top: 55%;
    right: 65%;
    left: auto;
    background: var(--collage-sienna);
    opacity: 0.4;
    clip-path: polygon(96% 7%, 4% 2%, 7% 93%, 94% 88%);
    transform: rotate(3.4deg);
}

.fragment--s7 {
    width: 120px;
    height: 200px;
    top: 15%;
    right: 78%;
    left: auto;
    background: var(--warm-accent);
    opacity: 0.25;
    clip-path: polygon(92% 3%, 6% 6%, 9% 95%, 95% 92%);
    transform: rotate(-2.6deg);
}

.fragment--s8 {
    width: 170px;
    height: 110px;
    top: 70%;
    right: 40%;
    left: auto;
    background: var(--collage-dark);
    opacity: 0.4;
    clip-path: polygon(97% 9%, 8% 4%, 4% 87%, 93% 93%);
    transform: rotate(1.2deg);
}

/* ============================================
   Room 4: The Paradox Chamber
   ============================================ */
.room--paradox {
    background: var(--void);
}

.paradox-collision {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 60vh;
    position: relative;
}

.collision-fragments {
    position: relative;
    width: 35%;
    height: 100%;
}

.collision-center {
    width: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.vertical-line {
    width: 1px;
    background: var(--warm-accent);
    opacity: 0.4;
}

.vertical-line--paradox {
    height: 50vh;
}

.vertical-line--exit {
    height: 30vh;
    margin: 3vh auto;
}

.fragment--p1 {
    width: 160px;
    height: 130px;
    position: absolute;
    top: 10%;
    right: 5%;
    background: var(--warm-accent);
    opacity: 0.4;
    clip-path: polygon(5% 4%, 93% 8%, 96% 90%, 3% 95%);
    transform: rotate(2deg);
}

.fragment--p2 {
    width: 140px;
    height: 150px;
    position: absolute;
    top: 40%;
    right: 15%;
    background: var(--collage-sienna);
    opacity: 0.35;
    clip-path: polygon(7% 6%, 91% 3%, 94% 88%, 5% 92%);
    transform: rotate(-1.5deg);
}

.fragment--p3 {
    width: 180px;
    height: 110px;
    position: absolute;
    top: 65%;
    right: 0;
    background: var(--collage-dark);
    opacity: 0.45;
    clip-path: polygon(3% 5%, 95% 2%, 97% 91%, 6% 96%);
    transform: rotate(3deg);
}

.fragment--p4 {
    width: 160px;
    height: 130px;
    position: absolute;
    top: 10%;
    left: 5%;
    background: var(--cool-accent);
    opacity: 0.4;
    clip-path: polygon(95% 4%, 7% 8%, 4% 90%, 97% 95%);
    transform: rotate(-2deg);
}

.fragment--p5 {
    width: 140px;
    height: 150px;
    position: absolute;
    top: 40%;
    left: 15%;
    background: var(--cool-accent);
    opacity: 0.35;
    clip-path: polygon(93% 6%, 9% 3%, 6% 88%, 95% 92%);
    transform: rotate(1.5deg);
}

.fragment--p6 {
    width: 180px;
    height: 110px;
    position: absolute;
    top: 65%;
    left: 0;
    background: var(--collage-dark);
    opacity: 0.45;
    clip-path: polygon(97% 5%, 5% 2%, 3% 91%, 94% 96%);
    transform: rotate(-3deg);
}

.bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.spawned-bubble {
    position: absolute;
    opacity: 0;
    animation: bubble-spawn 3s ease-out forwards;
}

/* ============================================
   Room 5: Gallery of Small Contradictions
   ============================================ */
.room--gallery-tiles {
    background: var(--deep-ground);
}

.room--gallery-tiles .room__content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tiles-strip {
    display: flex;
    gap: clamp(12px, 2vw, 24px);
    align-items: center;
}

.tile {
    width: clamp(120px, 14vw, 180px);
    height: clamp(120px, 14vw, 180px);
    position: relative;
    flex-shrink: 0;
}

.tile__inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--void);
}

.tile__collage {
    position: absolute;
    width: 100%;
    height: 100%;
}

.tile-fragment {
    position: absolute;
    opacity: 0.4;
}

/* Tile 1 - Clock backward */
.tf-1a { width: 60%; height: 50%; top: 10%; left: 5%; background: var(--warm-accent); opacity: 0.3; clip-path: polygon(5% 8%, 92% 3%, 95% 90%, 8% 95%); transform: rotate(3deg); }
.tf-1b { width: 45%; height: 55%; top: 30%; left: 40%; background: var(--collage-dark); opacity: 0.4; clip-path: polygon(8% 5%, 90% 10%, 93% 85%, 5% 92%); transform: rotate(-2deg); }
.tf-1c { width: 50%; height: 40%; top: 50%; left: 15%; background: var(--cool-accent); opacity: 0.25; clip-path: polygon(3% 7%, 95% 4%, 92% 88%, 6% 93%); transform: rotate(1.5deg); }

/* Tile 2 - Flame in water */
.tf-2a { width: 55%; height: 60%; top: 5%; left: 10%; background: var(--collage-sienna); opacity: 0.35; clip-path: polygon(7% 3%, 93% 8%, 90% 92%, 5% 88%); transform: rotate(-1.5deg); }
.tf-2b { width: 50%; height: 45%; top: 35%; left: 35%; background: var(--cool-accent); opacity: 0.3; clip-path: polygon(4% 6%, 91% 3%, 95% 90%, 8% 95%); transform: rotate(2.5deg); }
.tf-2c { width: 40%; height: 50%; top: 40%; left: 5%; background: var(--warm-accent); opacity: 0.25; clip-path: polygon(6% 4%, 92% 7%, 88% 93%, 3% 90%); transform: rotate(-3deg); }

/* Tile 3 - Shadow casting object */
.tf-3a { width: 50%; height: 55%; top: 8%; left: 15%; background: var(--collage-dark); opacity: 0.5; clip-path: polygon(5% 5%, 94% 3%, 92% 88%, 7% 92%); transform: rotate(2deg); }
.tf-3b { width: 60%; height: 40%; top: 40%; left: 25%; background: var(--warm-accent); opacity: 0.3; clip-path: polygon(3% 8%, 90% 5%, 93% 85%, 6% 90%); transform: rotate(-2.5deg); }
.tf-3c { width: 45%; height: 50%; top: 45%; left: 0%; background: var(--cool-accent); opacity: 0.25; clip-path: polygon(8% 3%, 93% 7%, 90% 92%, 4% 88%); transform: rotate(1deg); }

/* Tile 4 - Silence that speaks */
.tf-4a { width: 55%; height: 50%; top: 5%; left: 20%; background: var(--cool-accent); opacity: 0.35; clip-path: polygon(4% 6%, 92% 3%, 95% 88%, 7% 92%); transform: rotate(-1deg); }
.tf-4b { width: 45%; height: 55%; top: 30%; left: 5%; background: var(--collage-sienna); opacity: 0.3; clip-path: polygon(6% 4%, 90% 8%, 92% 85%, 3% 90%); transform: rotate(3deg); }
.tf-4c { width: 50%; height: 45%; top: 50%; left: 30%; background: var(--collage-dark); opacity: 0.4; clip-path: polygon(3% 7%, 94% 4%, 91% 90%, 5% 93%); transform: rotate(-2deg); }

/* Tile 5 - Stillness in motion */
.tf-5a { width: 60%; height: 45%; top: 10%; left: 5%; background: var(--warm-accent); opacity: 0.3; clip-path: polygon(7% 5%, 91% 8%, 94% 87%, 4% 92%); transform: rotate(2.5deg); }
.tf-5b { width: 40%; height: 60%; top: 25%; left: 45%; background: var(--cool-accent); opacity: 0.35; clip-path: polygon(5% 3%, 93% 6%, 90% 92%, 7% 88%); transform: rotate(-1.5deg); }
.tf-5c { width: 50%; height: 40%; top: 55%; left: 10%; background: var(--collage-dark); opacity: 0.4; clip-path: polygon(4% 8%, 92% 3%, 95% 85%, 6% 90%); transform: rotate(1deg); }

/* Tile 6 - Void that is full */
.tf-6a { width: 50%; height: 55%; top: 5%; left: 10%; background: var(--collage-dark); opacity: 0.45; clip-path: polygon(6% 4%, 93% 7%, 90% 90%, 3% 95%); transform: rotate(-2deg); }
.tf-6b { width: 55%; height: 40%; top: 35%; left: 30%; background: var(--collage-sienna); opacity: 0.3; clip-path: polygon(3% 5%, 91% 3%, 94% 88%, 7% 92%); transform: rotate(2deg); }
.tf-6c { width: 45%; height: 50%; top: 45%; left: 0%; background: var(--warm-accent); opacity: 0.25; clip-path: polygon(5% 7%, 92% 4%, 90% 90%, 4% 88%); transform: rotate(-1.5deg); }

.tile__label {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.55rem, 0.8vw, 0.75rem);
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--body-text);
    text-align: center;
    white-space: nowrap;
    z-index: 2;
}

.tile__border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tile__border rect {
    animation: border-reverse 12s linear infinite;
}

/* ============================================
   Room 6: The Meditation Room
   ============================================ */
.room--meditation {
    background: var(--void);
}

.meditation-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble--meditation {
    animation: bubble-drift 32s ease-in-out infinite;
}

.meditation-fragment {
    position: absolute;
    width: 80px;
    height: 80px;
    animation: meditation-rotate 40s linear infinite;
}

.fragment--m1 {
    width: 80px;
    height: 80px;
    background: var(--warm-accent);
    opacity: 0.35;
    clip-path: polygon(8% 5%, 92% 10%, 88% 90%, 5% 85%);
    position: relative;
}

/* ============================================
   Room 7: The Exit
   ============================================ */
.room--exit {
    background: var(--void);
}

.exit-title {
    display: flex;
    align-items: baseline;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.room--exit.is-visible .exit-title {
    opacity: 1;
}

.exit-title__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: lowercase;
    background: linear-gradient(90deg, var(--warm-accent), var(--cool-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.exit-title__dot {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 3rem);
    color: var(--whisper);
    margin-left: 0.1em;
}

.exit-instruction {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--whisper);
    margin-top: 4vh;
    opacity: 0;
    transition: opacity 1s ease-out 1s;
}

.room--exit.is-visible .exit-instruction {
    opacity: 1;
}

/* ============================================
   Animations
   ============================================ */
@keyframes bubble-drift {
    0% {
        transform: translate(0, 0) scale(0.95);
    }
    25% {
        transform: translate(15px, -20px) scale(1.02);
    }
    50% {
        transform: translate(10px, -35px) scale(1.05);
    }
    75% {
        transform: translate(-5px, -45px) scale(1.0);
    }
    100% {
        transform: translate(0, 0) scale(0.95);
    }
}

@keyframes bubble-spawn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    30% {
        opacity: 0.15;
    }
    100% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes border-reverse {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 784;
    }
}

@keyframes meditation-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fragment-enter {
    from {
        opacity: 0;
        transform: translateX(40px) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(var(--fragment-rotation, 0deg));
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .collage {
        width: 90vw;
        height: 50vh;
    }

    .tile {
        width: clamp(80px, 13vw, 120px);
        height: clamp(80px, 13vw, 120px);
    }

    .tiles-strip {
        gap: 8px;
    }

    .tile__label {
        font-size: 0.5rem;
    }

    .collage-fragment {
        transform: scale(0.7);
    }

    .paradox-collision {
        width: 95vw;
    }
}