/* Sabeti Lab · Holiday Cards — intros-builtin (split from app.css; see ARCHITECTURE.md) */
/* ═══════════ INTRO TREATMENTS ═══════════ */
/* pop: full card as background, cut-out layer floating in front */
.pop{position:absolute;left:0;top:0;will-change:transform,opacity}
.pop-bg,.pop-fg{position:absolute;left:0;top:0;will-change:transform,opacity}
.pop-bg{width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 40px 100px -20px rgba(0,0,0,.6)}
.pop-fg{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.pop-fg img{width:100%;height:100%}

/* float (2018) */
.stars{position:absolute;inset:-10%;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.6px),radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.6px),radial-gradient(rgba(180,200,255,.6) 1.4px,transparent 2px),radial-gradient(rgba(255,255,255,.7) .8px,transparent 1.4px);background-size:227px 193px,151px 137px,347px 311px,113px 97px;background-position:10px 20px,80px 60px,40px 120px,23px 71px;will-change:transform}
.planet{position:absolute;left:50%;top:100%;width:260vmax;height:260vmax;border-radius:50%;transform:translate(-50%,-3%);background:radial-gradient(circle at 50% 0%,#2f6ea8 0%,#0f2e58 10%,#050a18 22%,transparent 26%);box-shadow:0 -40px 160px 30px rgba(232,181,90,.3),0 -10px 60px 10px rgba(120,190,255,.45);will-change:transform}
.floater{position:absolute;left:50%;top:50%;will-change:transform,opacity;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.floater img{width:100%;height:auto}
.space-title{position:absolute;left:50%;top:calc(var(--bar) + 6vh);transform:translateX(-50%);width:min(900px,92vw);text-align:center;z-index:6;color:var(--accent);font-family:var(--sans);font-weight:500;font-size:clamp(20px,3.6vw,48px);letter-spacing:.14em;line-height:1.1;text-transform:uppercase;pointer-events:none}
.space-title span{display:inline-block;will-change:transform,opacity;opacity:0}

/* crawl (2015) */
.crawl-persp{position:absolute;inset:0;perspective:420px;perspective-origin:50% 100%;z-index:3;pointer-events:none;overflow:hidden}
.crawl-plane{position:absolute;left:0;bottom:0;width:min(820px,90vw);height:100%;transform-origin:50% 100%;transform:rotateX(27deg);overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(transparent 0,#000 30%,#000 100%)}
.sw-logo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:5;text-align:center;font-family:var(--sans);font-weight:500;color:transparent;-webkit-text-stroke:2px var(--accent);text-transform:uppercase;letter-spacing:.02em;line-height:.88;font-size:120px;opacity:0;will-change:transform,opacity;pointer-events:none;white-space:nowrap}
.sw-logo span{display:block}
.sw-logo span.sm{font-size:.3em;letter-spacing:.4em;line-height:1.3;-webkit-text-stroke:1px var(--accent)}
.crawl{position:absolute;left:0;right:0;bottom:0;color:var(--accent);font-weight:400;text-align:justify;font-size:clamp(22px,3.2vw,44px);line-height:1.35;will-change:transform}
.crawl h3{text-align:center;font-size:1.05em;letter-spacing:.08em;margin-bottom:.4em;text-transform:uppercase;font-weight:500}
.crawl h3 small{display:block;font-size:.5em;letter-spacing:.3em;margin-bottom:.4em;font-weight:400}
.crawl p{margin-bottom:.9em}
.crawl-fade{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(#000 10%,transparent);z-index:4;pointer-events:none}
.stars{will-change:transform,opacity,filter;transform-origin:50% 50%}
.jedi{position:absolute;bottom:0;will-change:transform,opacity;filter:drop-shadow(0 20px 40px rgba(0,0,0,.8))}
.jedi img{height:min(60vh,760px);width:auto}
.jedi.l{left:-4vw}.jedi.r{right:-2vw}
body.narrow .jedi img{height:min(34vh,420px)}
.longago{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);color:#4bd5ee;font-family:var(--serif);font-size:clamp(20px,2.6vw,34px);will-change:opacity;text-align:center;width:90vw}

/* beam (2014) */
.city{position:absolute;left:0;right:0;bottom:0;height:80vh;will-change:transform;display:flex;align-items:flex-end;gap:2%;padding:0 2%}
.city i{display:block;flex:1;min-height:40%;background:currentColor;border-radius:2px 2px 0 0;position:relative;opacity:.9}
.city i::after{content:"";position:absolute;inset:6% 18%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 6px,transparent 6px 16px)}
.city.far{color:#aeb6c2;height:62vh;filter:blur(1px)}.city.mid{color:#7f8998;height:70vh}.city.near{color:#4a5262;height:80vh}
.haze{position:absolute;left:0;right:0;bottom:0;height:60vh;background:linear-gradient(180deg,transparent,rgba(255,255,255,.7));pointer-events:none}
.beam{position:absolute;left:50%;bottom:0;width:min(92vw,1300px);transform:translateX(-50%);will-change:transform}
.beam img{width:100%;height:auto;filter:grayscale(1) contrast(1.05) drop-shadow(0 40px 40px rgba(0,0,0,.35));position:relative;z-index:1}
.girder-bar{position:absolute;left:-30vw;right:-30vw;top:53%;height:7%;background:linear-gradient(180deg,#5b626e 0,#3b414b 18%,#262a31 20%,#30353d 80%,#1b1e24 82%,#4a505a 100%);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.girder-bar::after{content:"";position:absolute;left:0;right:0;top:32%;height:36%;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.18) 46px 52px,transparent 52px 60px)}

/* crowd (2012) */
.stripes{position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 120px,rgba(165,232,109,.12) 120px 160px,transparent 160px 300px,rgba(0,229,255,.1) 300px 330px,transparent 330px 520px,rgba(255,255,255,.06) 520px 570px);will-change:transform}
.stripes.b{background:repeating-linear-gradient(65deg,transparent 0 220px,rgba(255,255,255,.05) 220px 260px)}
.crowd{position:absolute;left:50%;bottom:0;width:min(96vw,1500px);transform:translateX(-50%);will-change:transform}
.crowd img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.op{position:absolute;font-family:var(--sans);font-weight:500;font-size:clamp(48px,10vw,160px);letter-spacing:.02em;color:#fff;text-shadow:4px 4px 0 var(--accent);opacity:0;will-change:transform,opacity;line-height:1;z-index:4;transform:translate(-50%,-50%);white-space:nowrap}

/* zoom */
.zfront,.zinside{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform,opacity;max-width:none}
.zinside{opacity:0;border-radius:4px;box-shadow:0 40px 90px rgba(0,0,0,.5)}

/* open (3-D card) */
.book{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);perspective:2200px;will-change:transform}
.book .page{position:absolute;inset:0;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35);background:#fff center/cover no-repeat}
.book .cover{position:absolute;inset:0;transform-origin:0% 50%;transform-style:preserve-3d;will-change:transform}
.book .face{position:absolute;inset:0;border-radius:4px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff center/cover no-repeat;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.book .face.back{transform:rotateY(180deg)}

/* portrait (2008) */
.portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform,filter,opacity;filter:sepia(.9) contrast(.95)}
.portrait img{height:100%;width:auto}
.mark{position:absolute;right:clamp(10px,4vw,60px);bottom:-.08em;font-family:var(--serif);font-weight:300;font-size:clamp(120px,26vw,420px);line-height:1;letter-spacing:-.04em;opacity:.07;pointer-events:none;user-select:none;z-index:0;will-change:transform}

/* bunch (2020) */
.bunch{position:absolute;left:0;top:0;will-change:transform,opacity}
.bgrid{position:absolute;inset:0}
.btile{position:absolute;background-repeat:no-repeat;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12);will-change:transform,opacity;opacity:0}

/* pieces + tiles intros */
.piece{position:absolute;will-change:transform,opacity;pointer-events:none}
.piece img{width:100%;height:100%;object-fit:contain}
.tgrid{position:absolute;inset:0;will-change:opacity}
.tile{position:absolute;background-repeat:no-repeat;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.45);will-change:transform,opacity;outline:1px solid rgba(255,255,255,.06)}