/* Shared look: the preview banner, the reveal overlay, drifting art, reduced motion. */
/* preview banner */
.mode{border:0; cursor:pointer; position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom,0px)); max-width:calc(100% - 32px);
  font:400 14px/1.3 var(--f-body); background:var(--ink); color:var(--paper); padding:7px 14px; border-radius:999px; box-shadow:0 6px 20px -8px rgba(var(--shadow-rgb),.4)}

/* reveal overlay */
.reveal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px));
  background:rgba(var(--paper-rgb),.96); text-align:center}
.reveal canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.reveal .in{position:relative; max-width:480px; animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.reveal .big{font:400 clamp(80px, 24vw, 140px)/.9 var(--f-script); margin:8px 0 10px}
@keyframes rise{from{opacity:0; transform:translateY(24px) scale(.96)}}

/* drifting art */
.drift{animation:drift 7s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateY(-6px) rotate(1.2deg)}}
@media (prefers-reduced-motion: reduce){ .drift, .reveal .in{animation:none} .lane .boat{transition:none} *{scroll-behavior:auto} }

/* "Let a screen in?" (engine/pass/letin.js), over the party page */
.letin{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(var(--paper-rgb),.94)}
.letin-card{max-width:440px; background:var(--paper)}
.letin-title{font:400 clamp(36px, 10vw, 48px)/1 var(--f-script); margin:0 0 10px}