/* ── CosmicSloth.love — shared foundation ───────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@300;400;700&display=swap');

:root{
  --paper:#FAF7F0;
  --ink:#17151a;
  --dark:#141019;
  --pink:#EE519A;  --yellow:#DFE122; --orange:#F37423;
  --cyan:#7ECFE7;  --green:#91C640;  --purple:#B392C3;
  --hand:'Caveat', cursive;
  --body:'Kalam', cursive;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* paper grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ── scenes ─────────────────────────────────────────────────────── */
/* flex column + margin:auto centres WITHOUT clipping the top when content
   overflows — grid/flex `center` makes the overflowing head unreachable. */
.scene{
  position:fixed; inset:0; z-index:10;
  display:none; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:5vh 6vw; overflow-y:auto; overflow-x:hidden;
  opacity:0; transition:opacity .7s ease;
}
.scene.mounted{display:flex}
.scene > .inner, .scene > .stage{
  margin-block:auto; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.scene.on{opacity:1}

/* ── the sloth ──────────────────────────────────────────────────── */
.sunstack{position:relative; display:block; border:0; background:none; padding:0; cursor:pointer}
.sunstack img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; user-select:none; -webkit-user-drag:none;
}
.sunstack img{position:absolute}

/* ── hand type ──────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--hand); font-weight:700;
  text-transform:uppercase; letter-spacing:.045em;
  line-height:1.12; text-wrap:balance;
}
.whisper{
  font-family:var(--hand); font-weight:500;
  opacity:.62; text-wrap:balance;
}
.prose{font-family:var(--body); font-weight:300; line-height:1.62; text-wrap:pretty}

/* hand-drawn button */
.inkbtn{
  font-family:var(--hand); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:clamp(19px,5.2vw,26px);
  background:none; border:0; color:var(--ink); cursor:pointer;
  padding:.5em .2em; position:relative; display:inline-block;
}
.inkbtn svg{position:absolute; left:-4%; right:-4%; bottom:.05em; width:108%; height:.62em; overflow:visible}
.inkbtn path{fill:none; stroke:var(--pink); stroke-width:3.5; stroke-linecap:round}
.inkbtn:active{transform:translateY(1px) rotate(-.4deg)}

/* ── scene 3 · oracle ───────────────────────────────────────────── */
/* these three always own their background — never inherit a version's dark state */
#oracle{padding:4vh 6vw 6vh; background:var(--paper); color:var(--ink)}
#oracle .ohead{
  font-family:var(--hand); font-weight:700; font-size:clamp(20px,5.2vw,28px);
  text-align:center; line-height:1.15; max-width:21ch; margin-bottom:.7em; text-wrap:balance;
}
/* the Spark is DEALT onto the table — it arrives as an object, with the
   shadow only appearing at the moment it lands */
#oracle .card{
  position:relative; background:#fff; padding:9px 9px 0;
  transform:rotate(-1.1deg); max-width:min(72vw,320px);
  animation:dealcard 1s cubic-bezier(.2,.86,.24,1) both;
}
@keyframes dealcard{
  0%  {opacity:0; transform:rotate(13deg) translate(38px,-120px) scale(1.14)}
  55% {opacity:1}
  78% {transform:rotate(-3.4deg) translate(0,6px) scale(1);
       box-shadow:0 1px 2px rgba(0,0,0,.10), 0 26px 44px -18px rgba(0,0,0,.42)}
  100%{opacity:1; transform:rotate(-1.1deg) translate(0,0) scale(1);
       box-shadow:0 1px 2px rgba(0,0,0,.09), 0 14px 34px -14px rgba(0,0,0,.3)}
}
#oracle .card img{width:100%; max-height:42vh; object-fit:contain; display:block}
#oracle .card .cap{
  font-family:var(--hand); font-weight:600; font-size:15px;
  text-align:center; padding:.55em 0 .7em; opacity:.5;
}
#oracle .msg{
  font-family:var(--hand); font-weight:600;
  font-size:clamp(20px,5.4vw,27px); line-height:1.28; text-align:center;
  max-width:27ch; margin:1.1em auto .2em;
}
#oracle .msg .ln{display:block}
/* written out a word at a time, so somebody is clearly on the other end */
#oracle .msg .w{display:inline-block; opacity:0; animation:inkin .42s both}
@keyframes inkin{
  from{opacity:0; transform:translateY(.16em) rotate(-2deg); filter:blur(2px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}
@keyframes fadeup{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
#oracle .msg em{
  font-style:normal; display:block; font-size:.82em;
  opacity:.58; margin-top:.45em;
}
#oracle .next{margin-top:1.6em; animation:fadeup .8s both}

/* ── scene 4 · the reveal ───────────────────────────────────────── */
#reveal{padding:6vh 7vw; background:var(--paper); color:var(--ink)}
#reveal .uhoh{
  font-family:var(--hand); font-weight:700; font-size:clamp(56px,19vw,120px);
  line-height:.86; letter-spacing:-.02em; transform:rotate(-2.5deg);
  animation:stamp .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes stamp{from{opacity:0; transform:rotate(-9deg) scale(1.7)} to{opacity:1; transform:rotate(-2.5deg) scale(1)}}
#reveal .joined{
  font-family:var(--hand); font-weight:700; text-transform:uppercase;
  font-size:clamp(23px,6.4vw,34px); line-height:1.08; text-align:center;
  margin-top:.5em; max-width:19ch; text-wrap:balance;
  animation:fadeup .7s .5s both;
}
#reveal .kinda{
  font-family:var(--hand); font-weight:600; font-size:clamp(26px,7vw,38px);
  color:var(--pink); transform:rotate(-3deg); margin:.35em 0 .1em;
  animation:fadeup .7s .95s both;
}
#reveal .doctrine{
  max-width:31ch; text-align:center; font-size:clamp(14.5px,3.9vw,17px);
  margin-top:1.3em; animation:fadeup .8s 1.25s both;
}
#reveal .doctrine p+p{margin-top:.85em}
#reveal .scan{
  margin-top:2em; max-width:min(64vw,250px); transform:rotate(1.6deg);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.42); animation:fadeup .8s 1.5s both;
}
#reveal .scan img{width:100%; display:block}
#reveal .next{margin-top:2em; animation:fadeup .8s 1.8s both}

/* ── scene 5 · the assignment ───────────────────────────────────── */
#assign{padding:6vh 7vw; background:var(--paper); color:var(--ink)}
#assign .job{
  font-family:var(--hand); font-weight:700; text-transform:uppercase;
  font-size:clamp(22px,6vw,32px); line-height:1.14; text-align:center;
  max-width:17ch; text-wrap:balance;
}
#assign .xout{position:relative; display:inline-block}
#assign .xout svg{
  position:absolute; left:-7%; top:44%; width:114%; height:.5em; overflow:visible;
}
#assign .xout path{fill:none; stroke:var(--pink); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:220; stroke-dashoffset:220; animation:draw .55s 1s forwards ease-out}
@keyframes draw{to{stroke-dashoffset:0}}
#assign .amend{
  font-family:var(--hand); font-weight:600; font-size:clamp(19px,5vw,25px);
  transform:rotate(-2deg); margin-top:.5em; opacity:0; animation:fadeup .6s 1.5s forwards;
}
#assign .prose{max-width:30ch; text-align:center; margin-top:1.5em; font-size:clamp(14.5px,3.9vw,17px)}
#assign .say{
  font-family:var(--hand); font-weight:700; font-size:clamp(25px,7vw,38px);
  line-height:1.2; text-align:center; max-width:16ch; margin:1.3em auto .2em;
  color:var(--ink); text-wrap:balance;
}
#assign .say em{font-style:normal; display:block; font-size:.62em; opacity:.55; margin-bottom:.3em}
#assign .thatsit{font-family:var(--hand); font-weight:600; font-size:clamp(18px,4.8vw,23px); opacity:.55; margin-top:.9em}
#assign .ctas{display:grid; gap:1.3em; margin-top:2.4em; justify-items:center}
#assign .ctas .inkbtn{font-size:clamp(16px,4.3vw,20px); line-height:1.28; max-width:23ch}
#assign .ctas .inkbtn path{stroke-width:2.8}
#assign .counter{
  margin-top:3em; text-align:center; padding-top:1.8em;
  border-top:1px dashed rgba(23,21,26,.22); width:min(80vw,320px);
}
#assign .counter b{
  display:block; font-family:var(--hand); font-weight:700;
  font-size:clamp(42px,13vw,64px); line-height:1; color:var(--pink);
}
#assign .counter span{
  display:block; font-family:var(--hand); font-weight:600; text-transform:uppercase;
  font-size:clamp(13px,3.4vw,15px); letter-spacing:.05em; margin-top:.3em;
}
#assign .counter i{display:block; font-style:normal; font-size:13px; opacity:.45; margin-top:.5em}

/* ── transition phrases (shared look, per-version staging) ─────── */
.phrase{
  font-family:var(--hand); font-weight:700; text-transform:uppercase;
  text-align:center; line-height:1.14; letter-spacing:.03em;
  font-size:clamp(21px,6.2vw,34px); max-width:15ch; text-wrap:balance;
}

/* version badge — REMOVE BEFORE LAUNCH */
.vtag{
  position:fixed; bottom:0; left:0; z-index:90;
  font-family:var(--body); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:5px 9px 5px 8px; opacity:.28;
  border-top-right-radius:9px; text-decoration:none;
}
.vtag:active{opacity:.85}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}