/* Flyer palette, original collage, shared first-night typography and controls. */
:root{--pink:#f9a52b}
.trust-scene{background:#0a0a09;min-height:760px;isolation:isolate}
.collage-backdrop{position:absolute;inset:-6%;background:url('/october-16/assets/flyer.jpg') 52% 54%/auto 160%;opacity:.16;filter:saturate(.75);transform:scale(1.04);pointer-events:none}
.collage-window{position:absolute;inset:105px -2% 0 28%;transform:rotate(-3deg) scale(1.035);transform-origin:60% 55%;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 97%,transparent)}
.collage-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.trust-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080908 0%,#080908e8 20%,#0809087a 40%,transparent 66%),linear-gradient(0deg,#080908 0%,transparent 24%);pointer-events:none;z-index:1}
.collage-grain{position:absolute;inset:0;background:url('/assets/noise.svg');opacity:.18;pointer-events:none;z-index:3}
.scene-heading{position:absolute;top:32px;left:205px;right:125px;z-index:4;display:flex;justify-content:center;align-items:center;gap:20px;font:400 clamp(24px,3.2vw,58px)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.scene-heading b{font:inherit;font-size:.7em}
.scene-cross{position:absolute;z-index:3;color:#fff;font:32px/1 var(--mono);pointer-events:none}.cross-a{top:135px;left:6%}.cross-b{right:5%;bottom:80px}
.date-stamp{position:absolute;right:6%;top:145px;z-index:4;transform:rotate(6deg);padding:18px 24px;color:#111;background:#f2f0e8;box-shadow:7px 8px 0 #0a0a0970;clip-path:polygon(0 4%,97% 0,100% 95%,3% 100%);display:grid;gap:8px;pointer-events:none}.date-stamp span{font:10px/1.4 var(--mono);letter-spacing:.1em}.date-stamp strong{font:32px/1 var(--display);font-weight:400}
.trust-scene .hero-copy{z-index:4;left:6%;top:30%;width:58%;max-width:850px}.trust-scene .hero-copy h2{font-size:clamp(72px,8.5vw,150px);line-height:1.04;letter-spacing:-.018em;margin:24px 0}.trust-scene .hero-copy h2 span{color:var(--white)}.trust-scene .hero-copy p{color:#e6e3db}.trust-scene .eyebrow{color:var(--pink)}.trust-scene .ticket-button{max-width:300px}.trust-scene .dream-bottomline{z-index:4;left:6%;right:5%;bottom:26px}
.print-strip{grid-column:1/-1;overflow:hidden;background:#efede3;color:#111;padding:13px 0;margin:0;white-space:nowrap;position:relative;z-index:2}.print-strip span{font:22px/1.2 var(--display);letter-spacing:.06em}
.cut{transform-box:fill-box;transform-origin:center;will-change:auto}.motion-running .cut{will-change:transform;animation:cut-float 8s ease-in-out infinite alternate}.motion-running .cut-paper{animation-name:paper-drift;animation-duration:13s}.motion-running .cut-left{animation-delay:-4s;animation-duration:9s}.motion-running .cut-center{animation-delay:-2s;animation-duration:10s;animation-name:center-float}.motion-running .cut-right{animation-name:right-float;animation-duration:12s;animation-delay:-7s}.motion-running .cut-bottom{animation-delay:-6s;animation-duration:7s}.motion-running .collage-window{animation:collage-breathe 18s ease-in-out infinite alternate}.motion-running .collage-backdrop{animation:backdrop-drift 22s ease-in-out infinite alternate}
@keyframes cut-float{from{transform:translate(-10px,8px) rotate(-1deg)}to{transform:translate(18px,-21px) rotate(2deg)}}
@keyframes paper-drift{from{transform:translate(0,-7px) rotate(-.7deg)}to{transform:translate(-18px,13px) rotate(.7deg)}}
@keyframes center-float{from{transform:translate(7px,15px) rotate(1deg) scale(.995)}to{transform:translate(-13px,-20px) rotate(-1.2deg) scale(1.025)}}
@keyframes right-float{from{transform:translate(-8px,17px) rotate(-1deg)}to{transform:translate(16px,-13px) rotate(1.5deg)}}
@keyframes collage-breathe{from{transform:rotate(-3deg) scale(1.035)}to{transform:rotate(-1deg) scale(1.08)}}
@keyframes backdrop-drift{from{transform:scale(1.04) translate(-.5%,0)}to{transform:scale(1.09) translate(.5%,-1%)}}
@media(min-width:701px) and (max-height:850px){.trust-scene{min-height:680px}.trust-scene .hero-copy{top:27%}.trust-scene .hero-copy h2{font-size:clamp(72px,8vw,118px);margin:18px 0}}
@media(max-width:1050px){.scene-heading{left:180px;right:95px;font-size:34px;gap:12px}.trust-scene .hero-copy{width:70%}.trust-scene .hero-copy h2{font-size:86px}.collage-window{left:18%}.date-stamp{top:125px;right:5%;padding:15px 20px}.date-stamp strong{font-size:26px}}
@media(max-width:700px){.trust-scene{min-height:720px;height:calc(100svh - 73px - env(safe-area-inset-bottom))}.scene-heading{top:119px;left:22px;right:22px;font-size:clamp(23px,6.4vw,40px);gap:12px;justify-content:space-between}.collage-window{inset:170px -24% 48px -17%;mask-image:linear-gradient(0deg,transparent 0%,#000 30%,#000 94%,transparent)}.collage-backdrop{opacity:.1}.trust-scene:after{background:linear-gradient(0deg,#080908 0%,#080908d9 28%,#08090818 60%,transparent 80%)}.date-stamp{top:185px;right:18px;padding:12px 16px;gap:4px;transform:rotate(7deg)}.date-stamp span{font-size:8px}.date-stamp strong{font-size:23px}.trust-scene .hero-copy{top:auto;left:23px;right:18px;bottom:55px;width:auto}.trust-scene .hero-copy h2{font-size:clamp(52px,13.5vw,88px);margin:16px 0 12px;line-height:1.05}.trust-scene .hero-copy p{font-size:10px;line-height:1.7;margin:0 0 17px}.trust-scene .hero-copy>.eyebrow{font-size:8px}.trust-scene .ticket-button{max-width:245px}.trust-scene .ticket-note{font-size:7px}.trust-scene .dream-bottomline{left:23px;right:20px;bottom:20px}.dream-bottomline>span{display:none}.cross-a{top:167px;left:19px;font-size:25px}.cross-b{right:19px;bottom:160px;font-size:25px}.print-strip{padding:10px 0}.print-strip span{font-size:17px}}
@media(prefers-reduced-motion:reduce){.cut,.collage-window,.collage-backdrop{animation:none!important;will-change:auto!important}}

/* The decoded flyer stays underneath until the GPU has painted a complete frame. */
.collage-liquid{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.collage-svg{position:relative}
.motion-running[data-liquid="ready"] .collage-liquid{opacity:1}
.motion-running[data-liquid="ready"] .collage-base{opacity:0}
/* Keep the liquid base visible between smaller, independently moving pieces. */
.motion-running .cut-left,.motion-running .cut-center,.motion-running .cut-bottom{opacity:.58}
.motion-running .cut-orbit{animation:orbit-piece 11s ease-in-out infinite alternate;opacity:.95;transform-box:view-box}
.motion-running .orbit-a{transform-origin:472px 940px;--ox:46px;--oy:-54px;--turn:13deg;animation-duration:13s;animation-delay:-4s}
.motion-running .orbit-b{transform-origin:550px 1210px;--ox:-56px;--oy:42px;--turn:-22deg;animation-duration:10s;animation-delay:-7s}
.motion-running .orbit-c{transform-origin:1150px 920px;--ox:42px;--oy:60px;--turn:18deg;animation-duration:12s;animation-delay:-2s}
.motion-running .orbit-d{transform-origin:287px 1100px;--ox:-38px;--oy:-45px;--turn:30deg;animation-duration:9s;animation-delay:-5s}
.motion-running .orbit-e{transform-origin:1475px 1795px;--ox:55px;--oy:-48px;--turn:-15deg;animation-duration:14s;animation-delay:-9s}
.motion-running .cut-ribbon{animation:ribbon-slip 9s ease-in-out infinite alternate;animation-delay:-3s;opacity:.8}
.motion-running .cut-right{animation-name:portrait-drift;animation-duration:16s}
@keyframes orbit-piece{0%{transform:translate(calc(var(--ox) * -.6),calc(var(--oy) * -.6)) rotate(calc(var(--turn) * -.65)) scale(.96)}50%{transform:translate(calc(var(--ox) * .35),calc(var(--oy) * -.25)) rotate(0) scale(1.035)}100%{transform:translate(var(--ox),var(--oy)) rotate(var(--turn)) scale(1.09)}}
@keyframes ribbon-slip{from{transform:translate(-27px,10px) skewX(-2deg)}to{transform:translate(36px,-18px) skewX(3deg)}}
@keyframes portrait-drift{from{transform:translate(-16px,23px) rotate(-1.4deg)}to{transform:translate(22px,-26px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.collage-liquid{display:none}.collage-base,.cut{opacity:1!important}}
