:root { font-family: Arial, Helvetica, sans-serif; background: #11120f; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.scene { --bg: #fff; --ink: #000; position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--bg); aspect-ratio: 8 / 5; container-type: inline-size; }
.atmosphere { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.logo { position: absolute; width: 76%; height: 54%; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; color: var(--ink); }
.correspondence { position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 1.8cqw; white-space: nowrap; font-size: 2.15cqw; line-height: 1.5; }
.correspondence span { text-transform: uppercase; letter-spacing: .15em; font-size: 1.65cqw; }
.correspondence a { text-decoration: none; text-underline-offset: .25em; }
.correspondence a:hover { text-decoration: underline; }
.landing-page { background: #f3f2ed; }
.landing-page .scene { width: 100%; height: 100svh; min-height: 260px; aspect-ratio: auto; }
.landing-page .logo { width: min(76%, 1060px); height: 54%; }
.landing-page .correspondence { bottom: max(34px, env(safe-area-inset-bottom)); gap: 18px; font-size: 13px; }
.landing-page .correspondence span { font-size: 9px; letter-spacing: .18em; }
.effect-silver .atmosphere { background: linear-gradient(180deg,#fafafa 0%,#eee 43%,#c9c9c9 53%,#eeeeee 66%,#fafafa 100%); }
.effect-grid .atmosphere { background-image: linear-gradient(#00000008 1px,transparent 1px),linear-gradient(90deg,#00000008 1px,transparent 1px); background-size: 7cqw 7cqw; background-position: center; }
.effect-spectrum .atmosphere { inset: -30%; background: radial-gradient(ellipse at 20% 25%,#faa5db 0%,transparent 42%),radial-gradient(ellipse at 80% 70%,#a4e4e9 0%,transparent 43%),linear-gradient(125deg,#ffc184,#f4e899 24%,#c7e99f 44%,#a7dfe9 63%,#c9a9e9 81%,#f3abcf); background-size: 135% 140%; animation: spectrum 22s ease-in-out infinite alternate; }
.effect-acid .atmosphere { inset: -25%; background: radial-gradient(ellipse at 25% 50%,#fdab7e 0%,transparent 55%),radial-gradient(ellipse at 82% 30%,#d7a3e6 0%,transparent 52%),#d7f590; animation: drift 24s ease-in-out infinite alternate; }
.effect-afterimage .atmosphere { inset: -30%; background: radial-gradient(ellipse at 20% 35%,#762958,transparent 57%),radial-gradient(ellipse at 80% 70%,#193b68,transparent 53%),linear-gradient(125deg,#411852,#302564,#50351f); animation: drift 26s ease-in-out infinite alternate; }
.effect-hotwax .atmosphere { inset: -25%; background: radial-gradient(ellipse at 22% 35%,#f5a46b,transparent 58%),radial-gradient(ellipse at 77% 66%,#b2a3ec,transparent 52%),#f0abd0; animation: drift 20s ease-in-out infinite alternate; }
.effect-candy .atmosphere { inset: -25%; background: radial-gradient(ellipse at 25% 30%,#f4cbad,transparent 52%),radial-gradient(ellipse at 80% 72%,#b9b2ec,transparent 50%),#efbdd9; animation: drift 26s ease-in-out infinite alternate; }
@keyframes spectrum { from { transform: rotate(-8deg) scale(1); background-position: 0% 20%; filter: hue-rotate(-18deg); } to { transform: rotate(12deg) scale(1.1); background-position: 100% 80%; filter: hue-rotate(38deg); } }
@keyframes drift { from { transform: translate(-6%, -4%) rotate(-5deg) scale(1); } to { transform: translate(6%, 4%) rotate(10deg) scale(1.08); } }
.motion-paused .atmosphere, .offscreen .atmosphere { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .atmosphere { animation: none !important; } }
@media (max-height: 440px) { .landing-page .correspondence { bottom: 14px; } .landing-page .logo { height: 54%; } }


.effect-gold .atmosphere { background: radial-gradient(ellipse at 50% 45%,#242016,#090b0b 75%); }
.effect-brass .atmosphere { background: linear-gradient(120deg,#b99c59,#c7ad70 47%,#b39a60); }
.effect-midmod-atomic .atmosphere { background: url('patterns/midmod_atomic.svg') center / 42cqw; opacity: .16; }
.effect-midmod-linen .atmosphere { background: url('patterns/midmod_linen.svg') center / 35cqw; opacity: .19; }
.effect-midmod-shapes .atmosphere { background: url('patterns/midmod_shapes.svg') center / 45cqw; opacity: .14; }
.effect-midmod-atomic::after,.effect-midmod-shapes::after,.effect-heritage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(13deg,#0000000b 0 1px,transparent 1px 4px),repeating-linear-gradient(103deg,#ffffff10 0 1px,transparent 1px 5px); opacity: .24; }
.effect-memphis .atmosphere { background: url('patterns/memphis.svg') center / 40cqw; opacity: .14; }
.effect-bubble .atmosphere { background: url('patterns/bubble.svg') center / 38cqw; opacity: .11; }
.effect-grid-light .atmosphere { background-image: linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px); background-size: 7cqw 7cqw; background-position: center; }
.effect-race-orange .atmosphere { background: linear-gradient(90deg,#b4b5ac 0 1.4%,transparent 1.4% 98.6%,#b4b5ac 98.6%); }
.effect-race-ice .atmosphere { background: linear-gradient(90deg,#b4cecc30 0 1.4%,transparent 1.4% 98.6%,#b4cecc30 98.6%); }
.effect-cycle .atmosphere { background: linear-gradient(125deg,var(--cycle-0),var(--cycle-1) 50%,var(--cycle-2)); }
.scene[data-concept="04c"] .correspondence { color: #16100d; }
.scene[data-concept="06a"] .correspondence { color: #783521; }
.landing-page .effect-midmod-atomic .atmosphere,.landing-page .effect-midmod-shapes .atmosphere { background-size: clamp(210px,30vw,440px); }
.landing-page .effect-midmod-linen .atmosphere { background-size: 280px; }
.landing-page .effect-memphis .atmosphere,.landing-page .effect-bubble .atmosphere { background-size: clamp(210px,26vw,360px); }


.surface { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.texture-paper,.texture-paper-light { background: url('textures/paper.svg') center / 160px; opacity: .18; }
.texture-linen,.texture-linen-light { background: url('textures/linen.svg') center / 160px; opacity: .16; }
.texture-deco,.texture-deco-light { background: url('textures/deco.svg') center / 45cqw; opacity: .09; }
.texture-halftone { background: url('textures/halftone.svg') center / 70px; opacity: .10; }
.texture-paper-light,.texture-linen-light,.texture-deco-light { filter: invert(1); }
.texture-scanlines { background: repeating-linear-gradient(0deg,#b4d3d41c 0 1px,transparent 1px 4px); opacity: .25; }
.landing-page .texture-deco,.landing-page .texture-deco-light { background-size: clamp(260px,32vw,500px); }
.scene[data-concept="02c"] .correspondence { color: #2d3d35; }


.scene[data-concept="03a"] .atmosphere { animation: profile-spectrum 6s ease-in-out infinite alternate; }
.scene[data-concept="03b"] .atmosphere { animation: profile-acid 6s ease-in-out infinite alternate; }
.scene[data-concept="03c"] .atmosphere { animation: profile-night 6s ease-in-out infinite alternate; }
@keyframes profile-spectrum { from { transform: rotate(-8deg) scale(1); background-position: 0% 20%; filter: hue-rotate(-18deg); } to { transform: rotate(12deg) scale(1.1); background-position: 100% 80%; filter: hue-rotate(38deg); } }
@keyframes profile-acid { from { transform: translate(-6%,-4%) rotate(-5deg) scale(1); filter: hue-rotate(-10deg); } to { transform: translate(6%,4%) rotate(10deg) scale(1.08); filter: hue-rotate(15deg); } }
@keyframes profile-night { from { transform: translate(-6%,-4%) rotate(-5deg) scale(1); filter: hue-rotate(-12deg); } to { transform: translate(6%,4%) rotate(10deg) scale(1.08); filter: hue-rotate(12deg); } }
.motion-paused .scene[data-concept^="03"] .atmosphere,.scene.offscreen[data-concept^="03"] .atmosphere { animation-play-state: paused; }
.reactive-ink { pointer-events: none; }
.ink-glow { filter: drop-shadow(0 0 1.5px #bde5d64d); }
@media (prefers-reduced-motion: reduce), (hover: none) { .reactive-ink { display: none; } }


.scene[data-logo="1"] .surface,.scene[data-logo="2"] .surface,.scene[data-logo="2"]::after { display: none; }
.effect-stars .atmosphere { background: url('patterns/stars.svg') center / 44cqw; opacity: .10; }
.effect-bauhaus .atmosphere { background: url('patterns/bauhaus.svg') center / 60cqw; opacity: .12; }
.scene[data-concept="10a"] .atmosphere,.scene[data-concept="10b"] .atmosphere,.scene[data-concept="12a"] .atmosphere,.scene[data-concept="12b"] .atmosphere { filter: invert(1); }
.landing-page .effect-stars .atmosphere { background-size: 330px; }
.landing-page .effect-bauhaus .atmosphere { background-size: clamp(280px,35vw,520px); }
@media (prefers-reduced-motion: reduce), (hover: none) { .persistent-ink { display: inline !important; } }


.scene[data-logo="3"] .persistent-ink { animation: center-tint 10s linear infinite; }
@keyframes center-tint { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.motion-paused .persistent-ink,.offscreen .persistent-ink { animation-play-state: paused !important; }
.effect-stars .atmosphere { background-image: url('patterns/stars_scattered.svg'); background-size: cover; background-repeat: no-repeat; opacity: .10; }
.landing-page .effect-stars .atmosphere { background-size: cover; }
.effect-bauhaus .atmosphere { opacity: .055; }
@media (prefers-reduced-motion: reduce) { .scene[data-logo="3"] .persistent-ink { animation: none !important; } }


.scene[data-logo="1"] .atmosphere {
  background: var(--ink);
  mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22petal%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M0-5C-14-12-13-24%200-32%2013-24%2014-12%200-5Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20id%3D%22rosette%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%3E%0A%20%20%20%20%20%20%3Ccircle%20r%3D%224%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%2845%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%2890%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%28135%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%28180%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%28225%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%28270%29%22%2F%3E%0A%20%20%20%20%20%20%3Cuse%20href%3D%22%23petal%22%20transform%3D%22rotate%28315%29%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cuse%20href%3D%22%23rosette%22%20x%3D%2245%22%20y%3D%2245%22%2F%3E%0A%20%20%3Cuse%20href%3D%22%23rosette%22%20x%3D%22135%22%20y%3D%22135%22%2F%3E%0A%3C%2Fsvg%3E%0A') center / clamp(100px, 20cqw, 180px) auto repeat;
  opacity: .10;
}
.scene[data-concept="01c"] .atmosphere { opacity: .075; }
@media (max-width: 640px) { .landing-page .logo { width: 84%; height: 48%; } .landing-page .correspondence { font-size: 12px; gap: 12px; bottom: max(28px,env(safe-area-inset-bottom)); } .landing-page .correspondence span { font-size: 8px; letter-spacing: .12em; } }
@media (max-width: 340px) { .landing-page .correspondence { flex-direction: column; align-items: center; gap: 5px; } }