/* CosmicSloth.love: the shared look. A night sky of Yanik's own art, with CosmicBakery's type and comic bubbles. */
:root{
  --night:#0e0b20; --night2:#1b1742; --deep:#07060f;
  --cream:#fbf3e2; --ink:#241f1a; --purple:#7b45c4;
  --pink:#ee519a; --yellow:#f8de45; --sky:#5ebeec; --green:#27b35b; --orange:#ee6a3d; --red:#e8394a;
  --hand:"Caveat",cursive; --body:"Outfit",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{background:var(--night)}
body{
  min-height:100vh; min-height:100dvh; color:var(--cream); font-family:var(--body); font-size:17px; line-height:1.5;
  background:radial-gradient(130% 90% at 50% 30%, var(--night2) 0%, var(--night) 58%, var(--deep) 100%) fixed;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}

/* the sky: his stars, sparkles, suns and galaxies. Only round things turn. */
.cosmos{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:opacity .8s ease}
.cosmos .c{position:absolute; left:var(--x); top:var(--y); width:var(--s); translate:-50% -50%; rotate:var(--r);
  opacity:0; animation:appear .9s var(--in) ease forwards}
.cosmos img{width:100%; height:auto}
.cosmos .turn img{animation:turn var(--t) linear infinite; animation-delay:var(--dl)}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes appear{to{opacity:var(--o,1)}}
body.reading .cosmos{opacity:.32}

main{position:relative; z-index:2}

/* comic bubble, the CosmicBakery one */
.bubble{
  position:relative; display:inline-block; background:#fff; border:3px solid var(--ink); color:var(--purple);
  font-family:var(--hand); font-weight:700; line-height:1.08; font-size:clamp(26px,6.4vw,44px);
  padding:14px 26px 12px; text-align:center; max-width:min(88vw,560px); text-wrap:balance;
  border-radius:230px 20px 210px 22px/22px 210px 20px 230px; box-shadow:6px 7px 0 var(--pink);
}
.bubble::after{content:""; position:absolute; left:50%; bottom:-13px; width:20px; height:20px; background:#fff;
  border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); translate:-50% 0; rotate:45deg}
.bubble.up::after{bottom:auto; top:-13px; rotate:225deg}
.bubble.plain::after{display:none}
.pop{animation:pop .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0; scale:.4; rotate:-6deg} to{opacity:1; scale:1; rotate:0deg}}

/* the big sticker button */
.btn{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-block; text-align:center;
  font-family:var(--hand); font-weight:700; font-size:clamp(26px,6.6vw,34px); line-height:1;
  background:var(--yellow); color:var(--ink); border:3px solid var(--ink); border-radius:999px;
  padding:14px 30px 12px; box-shadow:5px 6px 0 var(--pink); transition:transform .15s, box-shadow .15s;
}
.btn:active{transform:translate(3px,4px); box-shadow:2px 2px 0 var(--pink)}
.btn:focus-visible{outline:3px solid var(--sky); outline-offset:4px}
.btn[disabled]{opacity:.6; cursor:wait}
.link{all:unset; cursor:pointer; font-family:var(--hand); font-weight:700; font-size:23px; color:var(--cream); opacity:.78;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.link:focus-visible{outline:2px solid var(--sky); outline-offset:4px}

/* everything after the door happens here */
#step{min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:9vh 7vw 12vh; text-align:center; gap:18px}
#step:empty{display:none}
.fade{opacity:0; animation:fade .6s ease both}
@keyframes fade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.stack{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:8px}

/* the Spark: a torn notebook page, dropped in from above */
.spark{width:min(84vw,400px); margin:2px auto 0; animation:deal 1.05s cubic-bezier(.2,.86,.24,1) both}
@keyframes deal{0%{opacity:0; transform:translateY(-36vh) scale(.22) rotate(-18deg)} 55%{opacity:1}
  80%{transform:translateY(8px) scale(1.02) rotate(2deg)} 100%{opacity:1; transform:none}}
.msg{font-family:var(--hand); font-weight:700; font-size:clamp(25px,6.6vw,34px); line-height:1.18; max-width:21ch; text-wrap:balance}
.msg .ln{display:block}
.tail{font-family:var(--hand); font-weight:500; font-size:clamp(21px,5.4vw,27px); line-height:1.2; opacity:.75; max-width:24ch; text-wrap:balance}
.w{display:inline-block; opacity:0; animation:inkin .4s both}
@keyframes inkin{from{opacity:0; transform:translateY(.18em); filter:blur(3px)} to{opacity:1; transform:none; filter:none}}

/* the ask */
.uhoh{font-family:var(--hand); font-weight:700; font-size:clamp(76px,22vw,140px); line-height:.85; color:var(--yellow);
  rotate:-4deg; text-shadow:5px 6px 0 var(--pink); animation:stamp .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{from{opacity:0; scale:1.8; rotate:-12deg} to{opacity:1; scale:1; rotate:-4deg}}
.big{font-family:var(--hand); font-weight:700; font-size:clamp(30px,8vw,46px); line-height:1.05; max-width:17ch; text-wrap:balance}
.kinda{font-family:var(--hand); font-weight:700; font-size:clamp(36px,9.5vw,54px); color:var(--pink); rotate:-5deg; margin-top:-6px}
.num{font-size:14px; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.num b{font-family:var(--hand); font-size:30px; letter-spacing:0; color:var(--yellow); text-transform:none; margin-left:4px}
.small{font-size:16px; opacity:.82; max-width:30ch; text-wrap:balance}
.job{font-family:var(--hand); font-weight:700; font-size:clamp(30px,8vw,44px); line-height:1.08; max-width:16ch}
.say{font-size:16px; max-width:30ch; opacity:.9}
.say .q{display:block; font-family:var(--hand); font-weight:700; font-size:clamp(26px,7vw,34px); line-height:1.12; color:var(--sky); margin-top:6px}

/* joining the gallery */
.form{width:min(92vw,420px); display:flex; flex-direction:column; gap:14px; text-align:left}
.pick{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:190px; border:3px dashed rgba(251,243,226,.5); border-radius:18px; cursor:pointer; padding:16px; text-align:center}
.pick input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.pick b{font-family:var(--hand); font-size:32px; color:var(--yellow); line-height:1}
.pick span{font-size:14px; opacity:.72}
.pick.has{border-style:solid; padding:14px}
.pick img{max-height:260px; border:6px solid #fff; border-bottom-width:24px; rotate:-2deg; box-shadow:0 10px 24px rgba(0,0,0,.45)}
.field label{display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; margin-bottom:5px}
.field input{width:100%; font:inherit; font-size:18px; color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:10px 12px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:16px; cursor:pointer}
.check input{width:22px; height:22px; margin-top:2px; accent-color:var(--pink); flex:none}
.err{color:#ffb4c8; font-size:15px; min-height:1.3em}
.form .btn{align-self:center}
.form .link{align-self:center}

/* the gallery */
.stats{font-family:var(--hand); font-weight:700; font-size:26px; line-height:1.15}
.stats b{color:var(--yellow); font-size:1.5em}
.stats span{display:block; font-size:.8em; opacity:.7}
.wall{columns:2 140px; column-gap:14px; width:min(96vw,1100px); margin-top:10px}
@media (min-width:760px){.wall{columns:4 190px}}
.pol{break-inside:avoid; background:#fff; padding:7px 7px 28px; margin:0 0 18px; position:relative;
  box-shadow:0 10px 26px rgba(0,0,0,.5); rotate:var(--tilt)}
.pol img{width:100%; aspect-ratio:3/4; object-fit:cover; background:#d9d4cc}
.pol figcaption{position:absolute; left:8px; right:8px; bottom:3px; font-family:var(--hand); font-weight:700; font-size:18px;
  color:var(--ink); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pol.new::before{content:"new"; position:absolute; top:-10px; right:-8px; z-index:2; background:var(--pink); color:#fff;
  font-family:var(--hand); font-weight:700; font-size:18px; padding:1px 10px; border-radius:999px; rotate:8deg}

/* comparison badge while Yanik picks a door: remove at launch */
.vtag{position:fixed; left:0; bottom:0; z-index:50; background:rgba(0,0,0,.55); color:var(--cream); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-top-right-radius:10px; text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- round 2 (2026-09-12): the Spark headline, the members flying in, the testimonials ---------- */
.headline{font-family:var(--hand); font-weight:700; font-size:clamp(30px,8vw,46px); line-height:1.05; max-width:18ch;
  color:var(--yellow); text-wrap:balance}

/* the members' snapshots, tossed onto the table around the Cosmic Sloth */
.photos{position:fixed; inset:0; z-index:1; pointer-events:none}
.toss{position:absolute; left:var(--x); top:var(--y); width:var(--w); translate:-50% -50%; rotate:var(--r);
  background:#fff; padding:5px 5px 17px; box-shadow:0 8px 20px rgba(0,0,0,.55); animation:toss .8s cubic-bezier(.2,.9,.3,1) both}
.toss img{width:100%; aspect-ratio:3/4; object-fit:cover; background:#d9d4cc}
@keyframes toss{from{transform:translate(var(--fx),var(--fy)) rotate(-50deg) scale(.5); opacity:0} 30%{opacity:1} to{transform:none; opacity:1}}
.photos.away .toss{animation:none; opacity:0; transform:translate(calc(var(--fx) * -1.4), calc(var(--fy) * -.35)) rotate(40deg);
  transition:transform .9s cubic-bezier(.6,0,.9,.4), opacity .9s ease}
.crew{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:min(84vw,520px)}
/* the Cosmic Sloth as on CosmicBakery: still, just a gentle float and rock */
.floaty{width:min(300px,56vw,30vh); animation:float 5.4s ease-in-out infinite; filter:drop-shadow(0 0 26px rgba(255,236,190,.25))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)}}

/* text-message testimonials in the kinda-cult invite */
.notes{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; width:min(94vw,760px); margin:6px 0}
.pol.note{width:min(42vw,220px); margin:0; padding:7px}
.pol.note img{aspect-ratio:auto; object-fit:contain; background:#fff}
@media (prefers-reduced-motion:reduce){ .floaty{animation:none} }

/* ---------- round 3: a little Cosmic Sloth says the line, the Spark opens up close ---------- */
.says{display:flex; align-items:center; gap:16px; max-width:min(92vw,560px)}
.says .mini{width:min(96px,22vw); flex:none; animation:float 5.4s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(255,236,190,.25))}
.says .bubble{font-size:clamp(20px,5vw,30px); text-align:left; padding:12px 20px 10px}
.bubble.left::after{left:-13px; top:50%; bottom:auto; translate:0 -50%; rotate:135deg}
button.spark{all:unset; display:block; cursor:zoom-in; width:min(84vw,400px); margin:2px auto 0; animation:deal 1.05s cubic-bezier(.2,.86,.24,1) both}
button.spark:focus-visible{outline:3px solid var(--sky); outline-offset:6px}
.zoomhint{font-size:14px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-top:-8px}
body.zooming{overflow:hidden}
.zoom{position:fixed; inset:0; z-index:60; background:rgba(7,6,15,.94); animation:fade .25s both}
.zoomwrap{width:100%; height:100%; overflow:auto; display:flex; -webkit-overflow-scrolling:touch}
.zoomwrap img{margin:auto; display:block; max-width:min(94vw,760px); max-height:88dvh; width:auto; height:auto; cursor:zoom-in}
.zoomwrap.zoomed img{max-width:none; max-height:none; width:min(230vw,2000px); cursor:zoom-out}
.zclose{position:fixed; top:14px; right:14px; z-index:61; cursor:pointer; font-family:var(--hand); font-weight:700; font-size:24px;
  color:var(--ink); background:var(--yellow); border:3px solid var(--ink); border-radius:999px; padding:6px 18px 4px; box-shadow:4px 5px 0 var(--pink)}
.zclose:focus-visible{outline:3px solid var(--sky); outline-offset:4px}
.zhint{position:fixed; left:0; right:0; bottom:14px; text-align:center; font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; pointer-events:none}
.pol.note.named{padding-bottom:30px}
.notes{width:min(94vw,980px)}
.pol.note{width:min(42vw,210px)}

/* ---------- round 4: polaroids with names in black felt marker, a denser pile on phones ---------- */
:root{--marker:"Permanent Marker","Caveat",cursive}
.toss{padding:calc(var(--w) * .06) calc(var(--w) * .06) 0}
.toss .pname{display:block; height:calc(var(--w) * .28); line-height:calc(var(--w) * .3); padding:0 3px;
  font-family:var(--marker); font-size:calc(var(--w) * .13); color:#161616; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; rotate:-2deg}
.toss.off{animation:tossoff .75s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes tossoff{to{transform:translate(var(--ox),var(--oy)) rotate(50deg) scale(.7); opacity:0}}
.pol{padding-bottom:38px}
.pol figcaption{font-family:var(--marker); font-weight:400; font-size:19px; color:#161616; bottom:6px; rotate:-2deg}
.pol.note.named{padding-bottom:38px}
/* phones: a smaller middle, so the pile can surround it */
@media (max-width:760px){
  .crew{gap:10px; max-width:76vw}
  .crew .bubble{font-size:clamp(20px,5.6vw,26px); padding:10px 16px 8px}
  .crew .floaty{width:min(150px,38vw,20vh)}
  .crew .btn{font-size:25px; padding:11px 22px 9px}
}
/* the upload form's new bits */
.field textarea{width:100%; font:inherit; font-size:17px; line-height:1.4; color:var(--ink); background:var(--cream);
  border:3px solid var(--ink); border-radius:12px; padding:10px 12px; resize:vertical}
.field .hint{display:block; font-size:13px; opacity:.65; margin-top:5px}

/* ---------- round 5: the Kinda Cult letter (all classes start with lt- so nothing collides) ---------- */
.lt{display:flex; flex-direction:column; align-items:center; gap:18px; width:min(92vw,620px); text-align:center}
.lt-rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.lt-rv.lt-in{opacity:1; transform:none}
.lt-p{font-size:clamp(17px,4.6vw,20px); line-height:1.55; max-width:32ch; text-wrap:pretty}
.lt-hand{font-family:var(--hand); font-weight:700; font-size:clamp(28px,7.4vw,38px); line-height:1.1; color:var(--yellow); max-width:18ch; text-wrap:balance}
.lt-big{font-family:var(--hand); font-weight:700; font-size:clamp(32px,8.6vw,48px); line-height:1.05; max-width:16ch; text-wrap:balance}
.lt-dark{font-size:clamp(15px,4vw,18px); letter-spacing:.16em; text-transform:uppercase; opacity:.5}
.lt-quote{font-size:clamp(28px,7.6vw,42px); rotate:-2deg; margin:6px 0 14px}
.lt-gap{height:clamp(10px,3vh,26px)}
.lt-art{margin:6px 0}
.lt-art img{width:min(80vw,400px)}
.lt-art.lt-mid img{width:min(70vw,340px)}
.lt-art.lt-wide img{width:min(92vw,540px)}
.lt-art.lt-small img{width:min(46vw,210px)}
.lt-tilt-r{rotate:4deg} .lt-tilt-l{rotate:-5deg}
button.lt-art{background:none; border:0; padding:0; color:inherit; font:inherit; cursor:zoom-in}
button.lt-art:focus-visible{outline:3px solid var(--sky); outline-offset:6px}
.lt-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; text-align:left}
.lt-list li{position:relative; padding-left:1.25em; font-family:var(--hand); font-weight:700; font-size:clamp(26px,7vw,34px); line-height:1.15}
.lt-no li::before{content:"✗"; position:absolute; left:0; color:var(--pink)}
.lt-maybe li{font-size:clamp(22px,6vw,29px)}
.lt-maybe li::before{content:"✦"; position:absolute; left:0; color:var(--yellow); font-size:.8em; top:.12em}
.lt-job{display:flex; flex-direction:column; align-items:center; margin:10px 0 4px}
.lt-jobn{font-family:var(--hand); font-weight:700; font-size:clamp(26px,7vw,34px); color:var(--purple); background:#fff;
  border:3px solid var(--ink); border-radius:12px; padding:2px 16px 0; rotate:-3deg; box-shadow:4px 5px 0 var(--pink)}
.lt-jobt{font-family:var(--hand); font-weight:700; font-size:clamp(70px,20vw,124px); line-height:1; color:var(--yellow);
  text-shadow:5px 6px 0 var(--pink); margin-top:12px}
.lt-jobt.lt-jobt-long{font-size:clamp(30px,8vw,46px); line-height:1.08; max-width:17ch; text-shadow:3px 4px 0 var(--pink)}
.lt-or{font-family:var(--hand); font-size:22px; opacity:.7; margin:-6px 0}
.lt .notes{width:min(94vw,640px)}
.lt .pol.note{width:min(43vw,270px)}
.lt .form{margin-top:6px}
/* snapshots in a row no longer stretch to the tallest one (that was the empty white space) */
.notes{align-items:flex-start}
.pol.note:not(.named){padding-bottom:7px}
@media (prefers-reduced-motion:reduce){ .lt-rv{opacity:1; transform:none; transition:none} }
/* round 5b: the text-message testimonials stay readable on phones (one per row), and the long
   Job #2 line gets a lighter shadow so the words don't double up */
@media (max-width:600px){
  .lt .notes{flex-direction:column; align-items:center; gap:22px}
  .lt .pol.note{width:min(84vw,380px)}
  .lt .pol.note.named{width:min(66vw,300px)}
}
.lt-jobt.lt-jobt-long{text-shadow:2px 2px 0 var(--pink)}
/* round 6: "Congratulations! You're now part of the Cosmic Sloth Kinda Cult." as a big, fun shout */
.lt-shout{position:relative; font-family:var(--hand); font-weight:700; font-size:clamp(36px,9.6vw,56px); line-height:1.04;
  color:var(--yellow); text-shadow:3px 4px 0 var(--pink); max-width:14ch; text-wrap:balance; rotate:-3deg; margin:8px 0 18px}
.lt-shout::before, .lt-shout::after{content:"✦"; position:absolute; font-size:.5em; text-shadow:none}
.lt-shout::before{left:-.8em; top:-.1em; color:var(--sky)}
.lt-shout::after{right:-.7em; bottom:.1em; color:var(--pink)}
.lt-shout.lt-in{animation:lt-cheer 1.6s ease-in-out .6s 2}
@keyframes lt-cheer{0%,100%{scale:1; rotate:-3deg} 25%{scale:1.07; rotate:-1deg} 55%{scale:.98; rotate:-5deg} 80%{scale:1.03; rotate:-2deg}}
@media (prefers-reduced-motion:reduce){ .lt-shout.lt-in{animation:none} }

/* round 7: the blinking neon sign to the Cosmic Bakery gift shop (classes start with gift-) */
.gift{display:inline-flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; margin:18px 0 6px; rotate:-2deg; transition:scale .2s ease}
.gift:hover, .gift:focus-visible{scale:1.05}
.gift:focus-visible{outline:3px solid var(--sky); outline-offset:8px; border-radius:18px}
.gift-tube{display:flex; flex-direction:column; align-items:center; padding:12px 28px 10px; border:3px solid #7ee8ff; border-radius:18px;
  background:rgba(8,6,20,.72); box-shadow:0 0 6px #7ee8ff, 0 0 18px rgba(126,232,255,.55), inset 0 0 12px rgba(126,232,255,.35)}
.gift-small{font-family:var(--hand); font-weight:700; font-size:22px; line-height:1; color:#bff4ff; text-shadow:0 0 6px #7ee8ff, 0 0 14px #7ee8ff}
.gift-big{font-family:var(--hand); font-weight:700; font-size:clamp(42px,11.5vw,60px); line-height:1.02; color:#ffd1ec;
  text-shadow:0 0 4px #fff, 0 0 10px var(--pink), 0 0 22px var(--pink), 0 0 42px var(--pink)}
.gift-big i{font-style:normal; animation:gift-flicker 3.4s infinite}
.gift-big i:nth-of-type(2){animation-duration:4.7s; animation-delay:1.1s}
.gift-open{font-family:var(--body); font-weight:700; font-size:15px; letter-spacing:.32em; padding-left:.32em; margin-top:4px; color:#fff6b0;
  text-shadow:0 0 6px var(--yellow), 0 0 14px var(--yellow); animation:gift-blink 1.3s steps(1) infinite}
.gift-under{font-size:14px; letter-spacing:.04em; color:var(--cream); opacity:.75}
@keyframes gift-flicker{0%,18%,22%,24%,58%,61%,100%{opacity:1} 20%,23%,59%{opacity:.18}}
@keyframes gift-blink{0%{opacity:1} 50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){ .gift-big i, .gift-open{animation:none} }

/* ---------- round 8: longer names shrink and wrap onto two lines instead of being cut off ---------- */
.toss .pname{white-space:normal; display:flex; align-items:center; justify-content:center; line-height:1.02; text-overflow:clip}
.toss .pname.nm-m{font-size:calc(var(--w) * .105)}
.toss .pname.nm-l{font-size:calc(var(--w) * .085)}
.pol{padding-bottom:10px}
.pol.note.named{padding-bottom:10px}
.pol figcaption{position:static; margin:6px 2px 0; white-space:normal; text-overflow:clip; line-height:1.05; min-height:1.15em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pol figcaption.nm-m{font-size:16px}
.pol figcaption.nm-l{font-size:13.5px}