* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050505; color: #fff; font-family: Arial, Helvetica, sans-serif; }
body { position: relative; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.screen-title { position: fixed; z-index: 10; top: 3vh; left: 4vw; font-size: clamp(20px, 2vw, 46px); font-weight: 900; letter-spacing: 0; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 4px 18px rgba(0,0,0,.55); }
.screen-note { position: fixed; z-index: 10; right: 3vw; bottom: 3vh; font-size: clamp(14px, 1vw, 22px); color: rgba(255,255,255,.72); }
.caption { font-weight: 900; line-height: 1.05; text-align: center; }

body[data-show="polaroid"] { background: radial-gradient(circle at center, #263642 0, #07090b 58%, #000 100%); }
body[data-show="polaroid"] .stage::before { content: ""; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.12) 46%, transparent 58%); animation: sweep 9s linear infinite; }
.photo-card { position: absolute; top: 50%; left: 50%; width: min(58vw, 880px); height: min(78vh, 920px); margin: 0; padding: 22px 22px 92px; background: #fff; box-shadow: 0 36px 90px rgba(0,0,0,.55); transform: translate(calc(-50% + var(--x, 0vw)), calc(-50% + var(--y, 0vh))) rotate(var(--r, 0deg)); animation: float-card 5.4s ease-in-out both; }
.photo-card img { border-radius: 2px; }
.photo-card .caption { position: absolute; right: 24px; bottom: 22px; left: 24px; color: #171717; font-size: clamp(24px, 3.1vw, 64px); }

body[data-show="cinema"] { background: #000; }
.bleed-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.bleed-slide.active { opacity: 1; }
.bleed-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.1) 48%, rgba(0,0,0,.72)); }
.bleed-slide img { filter: contrast(1.08) saturate(1.1); transform: scale(1.05); animation: kenburns 8s ease-in-out forwards; }
.hero-message { position: absolute; z-index: 2; bottom: 9vh; left: 5vw; max-width: 58vw; font-size: clamp(42px, 6.2vw, 132px); font-weight: 950; line-height: .95; text-shadow: 0 12px 34px #000; }

body[data-show="carousel"] { background: linear-gradient(180deg, #080808, #111 55%, #020202); perspective: 1800px; }
body[data-show="carousel"] .stage { display: grid; place-items: center; }
.ring { position: relative; width: min(72vw, 1200px); height: min(52vh, 650px); transform-style: preserve-3d; animation: spin 30s linear infinite; }
.carousel-card { --angle: calc(360deg / var(--count) * var(--i)); position: absolute; inset: 0; width: min(28vw, 420px); height: min(44vh, 520px); margin: auto; padding: 10px 10px 58px; background: #f8f8f4; box-shadow: 0 24px 70px rgba(0,0,0,.55); transform: rotateY(var(--angle)) translateZ(min(48vw, 760px)); }
.small-caption { position: absolute; right: 12px; bottom: 12px; left: 12px; color: #141414; font-size: clamp(16px, 1.4vw, 28px); font-weight: 900; text-align: center; }

body[data-show="mosaic"] { background: #080b0c; }
.mosaic { position: absolute; inset: -3vh -3vw; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 18vh; gap: 8px; opacity: .34; filter: saturate(.75) brightness(.7); }
.tile { overflow: hidden; }
.spotlight { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(0,0,0,.08), rgba(0,0,0,.72) 72%); }
.feature-card { position: relative; width: min(62vw, 980px); height: min(76vh, 820px); margin: 0; border: 8px solid rgba(255,255,255,.92); box-shadow: 0 36px 110px #000; animation: pop-card 5.6s ease both; }
.feature-card .caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 22px; background: rgba(255,255,255,.92); color: #161616; font-size: clamp(26px, 3.6vw, 78px); }

body[data-show="panels"] { background: #101010; }
body[data-show="panels"] .stage { display: grid; grid-template-columns: 1.15fr .85fr 1fr; height: 100vh; gap: 10px; padding: 10px; }
.panel { position: relative; overflow: hidden; background: #000; animation: panel-in 1s ease both; }
.panel:nth-child(2) { margin-block: 8vh; }
.panel:nth-child(3) { margin-block: 16vh 0; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 52%); }
.panel-caption { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; font-size: clamp(26px, 3.4vw, 74px); font-weight: 950; line-height: .98; text-shadow: 0 6px 24px #000; }

body[data-show="neon"] { background: #020204; }
body[data-show="neon"] .stage::before, body[data-show="neon"] .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 26%, rgba(0,230,255,.18) 27% 28%, transparent 29% 54%, rgba(255,44,145,.18) 55% 56%, transparent 57%); animation: scan 7s linear infinite; }
body[data-show="neon"] .stage::after { opacity: .55; animation-direction: reverse; }
body[data-show="neon"] .photo-card { width: min(64vw, 1040px); height: min(72vh, 780px); padding: 0; border: 3px solid #58f5ff; background: #000; box-shadow: 0 0 34px #00eaff, 0 0 100px rgba(255,44,145,.55); animation: neon-card 5.4s ease both; }
body[data-show="neon"] .photo-card img { filter: saturate(1.25) contrast(1.08); }
body[data-show="neon"] .photo-card .caption { color: #fff; text-shadow: 0 0 18px #ff2c91, 0 0 42px #00eaff; }

body[data-show="cover"] { background: #ece7dc; color: #141414; }
body[data-show="cover"] .stage { display: grid; place-items: center; background: linear-gradient(90deg, #ece7dc, #fafafa 46%, #ded8c9); }
body[data-show="cover"] .photo-card { position: relative; top: auto; left: auto; width: min(70vw, 1050px); height: min(86vh, 980px); padding: 0; background: #111; box-shadow: 0 24px 80px rgba(0,0,0,.35); animation: cover-card 6s ease both; }
body[data-show="cover"] .photo-card::before { content: "EVENT HIGHLIGHTS"; position: absolute; z-index: 3; top: 20px; right: 28px; left: 28px; color: #fff; font-size: clamp(38px, 6vw, 128px); font-weight: 950; line-height: .82; text-shadow: 0 5px 22px #000; }
body[data-show="cover"] .photo-card .caption { right: 30px; bottom: 28px; left: 30px; padding: 14px 22px; background: #fff; color: #111; font-size: clamp(24px, 3.5vw, 76px); text-transform: uppercase; }

body[data-show="film"] { background: #030303; }
body[data-show="film"] .stage { display: flex; align-items: center; }
.strip { display: flex; gap: 26px; will-change: transform; animation: roll 34s linear infinite; }
.frame { position: relative; flex: 0 0 min(34vw, 560px); height: min(62vh, 650px); margin: 0; padding: 18px 18px 74px; background: #f6f2e8; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.frame::before, .frame::after { content: ""; position: absolute; right: 0; left: 0; height: 18px; background: repeating-linear-gradient(90deg, #111 0 18px, transparent 18px 34px); }
.frame::before { top: -28px; }
.frame::after { bottom: -28px; }
.frame-caption { position: absolute; right: 18px; bottom: 16px; left: 18px; color: #161616; font-size: clamp(18px, 1.75vw, 34px); font-weight: 900; text-align: center; }

body[data-show="tiles"] { background: #111; }
.tile-grid { position: absolute; inset: 3vh 3vw; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }
.kinetic-tile { position: relative; overflow: hidden; margin: 0; background: #000; animation: tile-pop .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
.kinetic-tile:nth-child(4n) { grid-row: span 2; }
.kinetic-tile:nth-child(5n) { grid-column: span 2; }
.kinetic-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%); }
.tiny-caption { position: absolute; z-index: 2; right: 12px; bottom: 12px; left: 12px; color: #fff; font-size: clamp(13px, 1.2vw, 24px); font-weight: 850; text-shadow: 0 3px 16px #000; }

body[data-show="wall"] { background: #f4f4f0; color: #151515; }
.portrait-wall { position: absolute; inset: 4vh 4vw; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; }
.portrait { position: relative; overflow: hidden; margin: 0; background: #ddd; box-shadow: 0 12px 30px rgba(0,0,0,.18); animation: soft-in 1.2s ease both; animation-delay: var(--d); }
.portrait:nth-child(2n) { transform: translateY(3vh); }
.portrait:nth-child(3n) { transform: translateY(-2vh); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.72)); }
.portrait-caption { position: absolute; z-index: 2; right: 14px; bottom: 14px; left: 14px; color: #fff; font-size: clamp(16px, 1.45vw, 30px); font-weight: 850; line-height: 1.05; text-shadow: 0 4px 16px #000; }

body[data-show="ribbons"] { background: #071014; }
.ribbon { position: absolute; left: -5vw; display: flex; gap: 18px; width: 110vw; height: 30vh; transform: rotate(var(--angle)); animation: ribbon-slide var(--speed) linear infinite; }
.ribbon:nth-child(1) { top: 4vh; --angle: -5deg; --speed: 38s; }
.ribbon:nth-child(2) { top: 35vh; --angle: 4deg; --speed: 44s; animation-direction: reverse; }
.ribbon:nth-child(3) { top: 66vh; --angle: -3deg; --speed: 40s; }
.ribbon-card { position: relative; flex: 0 0 24vw; margin: 0; overflow: hidden; background: #000; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.ribbon-caption { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 8px 10px; background: rgba(0,0,0,.72); color: #fff; font-size: clamp(14px, 1.3vw, 26px); font-weight: 900; text-align: center; }
.center-message { position: fixed; z-index: 6; top: 50%; left: 50%; width: min(68vw, 1100px); transform: translate(-50%, -50%); color: #fff; font-size: clamp(44px, 6.5vw, 140px); font-weight: 950; line-height: .9; text-align: center; text-shadow: 0 14px 40px #000; }

@keyframes float-card { 0% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-40% + var(--y))) rotate(calc(var(--r) - 9deg)) scale(.86); } 14%, 78% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-58% + var(--y))) rotate(calc(var(--r) + 7deg)) scale(1.03); } }
@keyframes sweep { to { transform: translateX(60%); } }
@keyframes kenburns { to { transform: scale(1.18) translate3d(-2vw, -1vh, 0); } }
@keyframes spin { to { transform: rotateY(-360deg); } }
@keyframes pop-card { 0% { opacity: 0; transform: scale(.86); } 12%, 82% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes panel-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes scan { to { transform: translateX(25vw); } }
@keyframes neon-card { 0% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.82); } 13%, 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.06); } }
@keyframes cover-card { 0% { opacity: 0; transform: translateY(8vh) rotate(-2deg); } 14%, 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5vh) rotate(2deg); } }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-55%); } }
@keyframes tile-pop { from { opacity: 0; transform: scale(.78) rotate(2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes soft-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes ribbon-slide { from { transform: translateX(0) rotate(var(--angle)); } to { transform: translateX(-48vw) rotate(var(--angle)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }