/* Typography compliance note: IBM Plex Mono at very small size against a subtle background strip. The codes are real regulatory frameworks (ESRB). IBM Plex Mono" (Google Fonts), Source Serif 4" (Google Fonts). Intersection Observer API. When elements enter the viewport (threshold: 0.15). Intersection Observer. The scroll-based parallax on the hero uses `requestAnimationFrame` for smooth 60fps updates. The ticker animation is pure CSS `@keyframes`. Total JavaScript should be under 80 lines. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
body { background: #0d1117; color: #e8e2d6; font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 400; line-height: 1.72; letter-spacing: 0.005em; }
main { width: 100%; }
section { width: 100%; min-height: 100vh; position: relative; overflow: hidden; }

.filing-room { display: flex; align-items: center; justify-content: flex-start; padding: 5vw; background: #0d1117; }
.perspective-container { position: absolute; inset: 0; perspective: 1200px; transform-style: preserve-3d; }
.document-panel { position: absolute; background: #1c2028; border: 2px solid #3a3d45; box-shadow: 0 25px 80px rgba(0,0,0,0.4); opacity: 0.72; font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.65rem, 0.8vw, 0.85rem); letter-spacing: 0.08em; text-transform: uppercase; color: #0d1117; display: flex; align-items: flex-end; padding: 1.1rem; }
.document-panel span { opacity: 0.55; }
.panel-1 { width: 38vw; height: 56vh; top: 13vh; left: 3vw; background: rgba(212,168,67,0.38); border-color: #d4a843; transform: rotate(2deg) translateZ(-5px); }
.panel-2 { width: 42vw; height: 62vh; top: 20vh; left: 25vw; background: rgba(67,168,212,0.28); border: 1px dashed #43a8d4; transform: rotate(-1deg) translateZ(-10px); }
.panel-3 { width: 36vw; height: 52vh; top: 8vh; left: 52vw; background: rgba(212,67,135,0.22); border: 3px double #d44387; transform: rotate(0.5deg) translateZ(-15px); }
.hero-rules { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 72px, rgba(58,61,69,0.45) 73px, transparent 74px); }
.hero-content { position: relative; z-index: 5; width: 94vw; }
.meta-line, .wall-label { font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.65rem, 0.8vw, 0.85rem); letter-spacing: 0.08em; text-transform: uppercase; color: #9a9488; margin-bottom: 1.2rem; }
.domain-title { font-family: "Archivo Black", Impact, "Arial Black", sans-serif; font-size: clamp(3rem, 12vw, 11rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; text-transform: uppercase; color: #e8e2d6; max-width: 10ch; text-shadow: 8px 8px 0 #1c2028; }
.search-field { display: inline-flex; gap: 0.35rem; margin-top: 2rem; padding: 0.8rem 1rem; border: 1px solid #3a3d45; background: #1c2028; color: #9a9488; font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.65rem, 0.8vw, 0.85rem); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 25px 80px rgba(0,0,0,0.4); }
.search-cursor { color: #d4a843; animation: blink 1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.annotation-layer { display: flex; flex-direction: column; justify-content: center; background: #0d1117; }
.annotation-layer:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, transparent 62%, rgba(58,61,69,0.35) 62.2%, transparent 62.4%); }
.annotation-band { width: 100%; position: relative; box-shadow: 0 25px 80px rgba(0,0,0,0.4); }
.band-near { z-index: 3; padding: 3rem 7vw; background: rgba(28,32,40,0.92); border-top: 6px solid #e8e2d6; }
.band-middle { z-index: 2; margin-top: -1.4rem; margin-left: 7vw; width: 93vw; padding: 4rem 7vw; background: rgba(13,17,23,0.96); border: 1px solid #3a3d45; }
.band-far { z-index: 1; margin-top: -0.8rem; min-height: 120px; display: flex; align-items: center; background: #1c2028; border-top: 6px solid #e8e2d6; }
.section-number { display: block; font-family: "Archivo Black", Impact, "Arial Black", sans-serif; font-size: clamp(2.6rem, 7vw, 7rem); line-height: 0.8; letter-spacing: -0.04em; color: #d4a843; margin-bottom: 1rem; }
.annotation-statement { max-width: 78vw; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.28; color: #e8e2d6; }
.annotation-excerpt { max-width: 86vw; color: #9a9488; font-size: clamp(0.95rem, 1.1vw, 1.15rem); line-height: 1.85; }
.regulatory-ticker { display: flex; white-space: nowrap; animation: ticker 40s linear infinite; }
.regulatory-ticker span { flex: 0 0 auto; padding-right: 2rem; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #43a8d4; }
@keyframes ticker { to { transform: translateX(-50%); } }

.collage-wall { padding: 3rem 0; background: #0d1117; }
.brutal-rule { height: 6px; width: 115vw; margin-left: -7vw; background: #e8e2d6; }
.wall-label { padding: 2rem 5vw 0; color: #43a8d4; }
.collage-container { position: relative; width: 100%; height: 86vh; }
.fragment { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.2rem; background: #1c2028; border: 2px solid #3a3d45; box-shadow: 0 25px 80px rgba(0,0,0,0.4); font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.8rem, 1vw, 1rem); letter-spacing: 0.04em; text-transform: uppercase; color: #e8e2d6; transform: rotate(var(--r, 0deg)); }
.fragment-1 { --r: -3deg; top: 10vh; left: 5vw; width: 25vw; max-width: 380px; height: 30vh; min-height: 180px; flex-direction: column; gap: 0.6rem; border: 3px double #d4a843; color: #d4a843; z-index: 7; mix-blend-mode: screen; }
.fragment-1 span { font-family: "Archivo Black", Impact, "Arial Black", sans-serif; font-size: clamp(4rem, 12vw, 10rem); line-height: 0.8; }
.fragment-1 small { font-size: 0.68rem; color: #9a9488; }
.fragment-2 { --r: 1.5deg; top: 6vh; left: 35vw; width: 31vw; max-width: 420px; min-height: 210px; border: 1px dashed #43a8d4; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 600; font-style: italic; line-height: 1.18; text-transform: none; z-index: 8; mix-blend-mode: multiply; }
.fragment-3 { --r: 2deg; top: 36vh; left: 16vw; width: 18vw; height: 24vh; background: rgba(212,168,67,0.34); border-color: #d4a843; z-index: 2; mix-blend-mode: multiply; }
.fragment-4 { --r: 3deg; top: 43vh; left: 48vw; width: 15vw; min-width: 130px; height: 18vh; background: #43a8d4; color: #0d1117; border-style: dashed; border-color: #43a8d4; font-weight: 700; z-index: 9; }
.fragment-5 { --r: -1.5deg; top: 18vh; left: 70vw; width: 18vw; height: 36vh; background: rgba(212,67,135,0.28); border-color: #d44387; z-index: 3; mix-blend-mode: screen; }
.fragment-6 { --r: 3.5deg; top: 61vh; left: 24vw; width: 13vw; min-width: 120px; height: 16vh; background: transparent; border: 3px double #d4a843; color: #d4a843; font-weight: 700; z-index: 6; }
.fragment-7 { --r: 1deg; top: 39vh; left: 6vw; width: 17vw; height: 23vh; border-color: #43a8d4; background: rgba(67,168,212,0.12); z-index: 5; mix-blend-mode: screen; flex-direction: column; gap: 1rem; }
.fragment-8 { --r: -12deg; top: 62vh; left: 67vw; width: 19vw; height: 21vh; border: 4px double #d4a843; border-radius: 50%; clip-path: polygon(5% 15%,10% 5%,20% 2%,35% 0%,50% 1%,65% 3%,80% 8%,92% 15%,97% 25%,99% 40%,100% 55%,98% 70%,95% 82%,88% 92%,75% 97%,60% 99%,45% 100%,30% 98%,18% 94%,8% 88%,2% 75%,0% 60%,1% 45%,3% 30%,8% 18%); color: #d4a843; z-index: 4; }
.fragment-9 { --r: 2.2deg; top: 12vh; left: 80vw; width: 15vw; min-width: 130px; height: 18vh; color: #d44387; border-color: #d44387; z-index: 10; }
.fragment-10 { --r: -2deg; top: 69vh; left: 43vw; width: 16vw; height: 16vh; border-color: #d44387; background: rgba(212,67,135,0.1); z-index: 6; mix-blend-mode: multiply; }
.fragment-11 { --r: -1deg; top: 72vh; left: 9vw; width: 28vw; height: 13vh; border: 1px dashed #43a8d4; color: #43a8d4; z-index: 6; }
.barcode { width: 100%; height: 60%; background: repeating-linear-gradient(90deg, transparent 0, transparent 3px, #43a8d4 3px, #43a8d4 5px, transparent 5px, transparent 10px); opacity: 0.55; }
.barcode.rose { height: 100%; background: repeating-linear-gradient(90deg, transparent 0, transparent 2px, #d44387 2px, #d44387 5px, transparent 5px, transparent 12px); }

.deep-archive { display: flex; align-items: center; padding: 5rem 0; border-top: 6px solid #e8e2d6; background: #0d1117; }
.archive-content { width: 100%; display: grid; grid-template-columns: minmax(300px, 42ch) 1fr; gap: 5vw; padding: 0 0 0 6vw; }
.reading-column { max-width: 42ch; }
.reading-column h2 { font-family: "Archivo Black", Impact, "Arial Black", sans-serif; font-size: clamp(2.2rem, 6vw, 6rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; text-transform: uppercase; color: #e8e2d6; margin-bottom: 2rem; }
.reading-column p { margin-bottom: 1.8rem; color: #9a9488; }
.reading-column p:first-of-type { color: #e8e2d6; }
.license-card-stack { position: relative; min-height: 640px; border-left: 1px solid #3a3d45; }
.license-card { position: absolute; width: clamp(110px, 12vw, 170px); height: clamp(160px, 18vw, 250px); background: #1c2028; border: 2px solid #3a3d45; box-shadow: 0 25px 80px rgba(0,0,0,0.4); display: flex; align-items: flex-start; padding: 1rem; font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.65rem, 0.8vw, 0.85rem); letter-spacing: 0.08em; color: #9a9488; }
.card-1 { top: 0; left: 10%; border-color: #d4a843; background: rgba(212,168,67,0.1); transform: rotate(-4deg); z-index: 1; }
.card-2 { top: 60px; left: 28%; border-style: dashed; border-color: #43a8d4; background: rgba(67,168,212,0.08); transform: rotate(2deg); z-index: 2; }
.card-3 { top: 132px; left: 47%; border: 3px double #d44387; background: rgba(212,67,135,0.08); transform: rotate(-3deg); z-index: 3; }
.card-4 { top: 220px; left: 62%; border-color: #d4a843; transform: rotate(1.5deg); z-index: 4; }
.card-5 { top: 315px; left: 42%; border-style: dashed; border-color: #43a8d4; transform: rotate(-2.5deg); z-index: 2; }
.card-6 { top: 405px; left: 19%; border-color: #d44387; transform: rotate(3deg); z-index: 5; }

.stamp-section { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; background: #1c2028; border-top: 6px solid #e8e2d6; }
.stamp-graphic { --r: -12deg; width: 280px; height: 280px; border: 4px double #d4a843; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(var(--r)); opacity: 0.78; clip-path: polygon(5% 15%,10% 5%,20% 2%,35% 0%,50% 1%,65% 3%,80% 8%,92% 15%,97% 25%,99% 40%,100% 55%,98% 70%,95% 82%,88% 92%,75% 97%,60% 99%,45% 100%,30% 98%,18% 94%,8% 88%,2% 75%,0% 60%,1% 45%,3% 30%,8% 18%); }
.stamp-graphic span { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.2rem); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #d4a843; }
.footer-info { font-family: "IBM Plex Mono", Consolas, monospace; font-size: clamp(0.65rem, 0.8vw, 0.85rem); letter-spacing: 0.08em; text-transform: uppercase; color: #9a9488; text-align: center; padding: 0 2rem; }

.reveal-left, .reveal-right, .reveal-up, .reveal-scale { opacity: 0; transition: opacity 0.8s cubic-bezier(0.175,0.885,0.32,1.275), transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275); }
.reveal-left { transform: translateX(-40px) rotate(var(--r, 0deg)); }
.reveal-right { transform: translateX(40px) rotate(var(--r, 0deg)); }
.reveal-up { transform: translateY(60px) rotate(var(--r, 0deg)); }
.reveal-scale { transform: scale(0.7) rotate(var(--r, 0deg)); }
.is-visible .reveal-left, .is-visible .reveal-right, .is-visible .reveal-up, .is-visible .reveal-scale, .fragment.is-visible, .annotation-band.is-visible, .reading-column.is-visible, .license-card-stack.is-visible, .stamp-graphic.is-visible, .footer-info.is-visible { opacity: 1; }
.is-visible .reveal-left, .is-visible .reveal-right, .is-visible .reveal-up, .is-visible .reveal-scale { transform: translate(0,0) scale(1) rotate(var(--r, 0deg)); }

@media (max-width: 768px) {
    .filing-room { padding: 2rem; align-items: flex-end; }
    .domain-title { font-size: clamp(2.4rem, 17vw, 6rem); max-width: 9ch; }
    .document-panel { opacity: 0.55; }
    .annotation-band, .band-middle { width: 100%; margin: 0; padding: 2rem; }
    .band-far { min-height: 92px; }
    .annotation-statement { max-width: 100%; }
    .collage-container { height: auto; display: flex; overflow-x: auto; gap: 1.2rem; padding: 2rem 1.5rem 4rem; }
    .fragment { position: relative; inset: auto !important; flex: 0 0 260px; width: 260px !important; max-width: none; height: 220px !important; min-height: 0; }
    .archive-content { display: block; padding: 3rem 1.5rem; }
    .license-card-stack { min-height: 520px; margin-top: 3rem; }
    .stamp-graphic { width: 210px; height: 210px; }
    .footer-info { max-width: 34ch; }
    .card-1 { left: 2%; }
    .card-2 { left: 28%; }
    .card-3 { left: 52%; }
    .card-4 { left: 18%; top: 250px; }
    .card-5 { left: 45%; top: 310px; }
    .card-6 { left: 8%; top: 365px; }
}