/* ===== AUTISMIO — playful cartoon one-pager ===== */
:root{
  --blue:#2C7EF8;
  --blue-deep:#1B4FD8;
  --red:#EE1C25;
  --yellow:#FFD400;
  --green:#1EA84A;
  --green-btn:#20B24F;
  --cream:#FCF6EF;
  --ink:#000;
  --stroke:6px;
  --radius:32px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  font-weight:500;
  color:#0d0d0d;
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
svg .ink{stroke:#000;stroke-width:10;stroke-linejoin:round;stroke-linecap:round}
/* stroke/fill are inherited SVG properties, so setting them on the <svg> element
   carries the black outline into the shadow content cloned by <use>. */
.mascot-hero,.nft-mascot,.dd,.nft-bgdd,.bb-dd{
  stroke:#000;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;
}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-weight:700;
  letter-spacing:.5px;
  padding:.62em 1.25em;
  border-radius:999px;
  border:5px solid var(--ink);
  box-shadow:0 6px 0 var(--ink);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease;
  line-height:1.15;
  white-space:nowrap;
}
.btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.btn-green{background:var(--green-btn);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn-white{background:#fff;color:#000}
.btn.big{font-size:clamp(1rem,2.4vw,1.4rem);padding:.7em 1.5em;border-width:6px;box-shadow:0 8px 0 var(--ink)}
.btn.big:hover{box-shadow:0 4px 0 var(--ink)}

/* ---------- HERO: full chaos ---------- */
/* Large-area colour cuts run at ~2.5 flashes/sec (under the WCAG 3/sec
   photosensitivity threshold). Small elements strobe faster. `body.calm`
   and prefers-reduced-motion stop everything. */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  background:var(--blue);
  border-bottom:8px solid var(--ink);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(3rem,8vw,5rem) 0 clamp(6rem,16vw,11rem);
  animation:heroShake .18s steps(2) infinite;
}
@keyframes heroShake{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-3px,2px,0)}
  100%{transform:translate3d(2px,-2px,0)}
}

/* full-bleed colour strobe */
.strobe{position:absolute;inset:-10%;z-index:0;animation:strobeBG 1.6s steps(1) infinite}
@keyframes strobeBG{
  0%  {background:#2C7EF8}
  25% {background:#EE1C25}
  50% {background:#1EA84A}
  75% {background:#1B4FD8}
  100%{background:#2C7EF8}
}

/* spinning sunburst */
.rays{
  position:absolute;z-index:0;left:50%;top:50%;width:220vmax;height:220vmax;
  translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.30) 0deg 7deg, rgba(255,255,255,0) 7deg 14deg);
  animation:spin 9s linear infinite, throb 1.1s steps(2) infinite;
}
@keyframes spin{to{rotate:360deg}}
@keyframes spinRev{to{rotate:-360deg}}
@keyframes throb{0%{opacity:.85}100%{opacity:.35}}

/* occasional whiteout blink */
.whiteout{
  position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none;
  animation:blink 2.4s steps(1) infinite;
}
@keyframes blink{0%,92%{opacity:0}94%{opacity:.55}96%{opacity:0}98%{opacity:.35}100%{opacity:0}}

/* scrolling doodle strips */
.strip{position:absolute;z-index:1;left:0;right:0;height:clamp(48px,7vw,92px);overflow:hidden;pointer-events:none}
.strip-a{top:2%}
.strip-b{bottom:20%}
.strip .track{display:flex;gap:clamp(1rem,3vw,2.5rem);width:max-content;align-items:center;height:100%}
.strip-a .track{animation:marquee 5s linear infinite}
.strip-b .track{animation:marqueeRev 6.5s linear infinite}
.strip .mini{height:78%;width:auto;overflow:visible;flex:none;
  stroke:#000;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;
  animation:wobble .3s steps(2) infinite alternate}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes wobble{from{rotate:-14deg}to{rotate:14deg}}

/* hills */
.hills{position:absolute;left:0;right:0;bottom:-2px;z-index:1;pointer-events:none;
  animation:hillSlide 1.4s ease-in-out infinite alternate}
.hills svg{width:100%;height:clamp(120px,20vw,240px);display:block}
@keyframes hillSlide{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* the doodle field */
.sky-doodles{position:absolute;inset:0;z-index:1;pointer-events:none}
.dd{position:absolute;overflow:visible}
.d1 {width:clamp(70px,9vw,130px); top:4%;  left:4%;  animation:spin 2.2s linear infinite, throb .5s steps(2) infinite}
.d2 {width:clamp(80px,11vw,170px);top:9%;  left:19%; animation:orbit 3.4s linear infinite}
.d3 {width:clamp(70px,10vw,150px);top:31%; left:3%;  animation:orbitRev 4.1s linear infinite, flick .35s steps(2) infinite}
.d4 {width:clamp(80px,11vw,170px);top:7%;  right:14%;animation:orbit 3.9s linear infinite reverse}
.d5 {width:clamp(70px,9vw,140px); bottom:26%;right:6%;animation:orbitRev 3.1s linear infinite}
.d6 {width:clamp(32px,4vw,62px);  top:22%; left:33%; animation:spin 1.1s linear infinite, pop .34s steps(2) infinite}
.d7 {width:clamp(28px,3.5vw,54px);top:44%; left:12%; animation:spinRev .9s linear infinite, pop .28s steps(2) infinite}
.d8 {width:clamp(32px,4vw,62px);  top:33%; right:10%;animation:spin 1.4s linear infinite, flick .3s steps(2) infinite}
.d9 {width:clamp(26px,3.2vw,48px);bottom:33%;left:26%;animation:spinRev 1.2s linear infinite, pop .4s steps(2) infinite}
.d10{width:clamp(30px,3.8vw,58px);top:12%; left:52%; animation:spin .8s linear infinite, pop .22s steps(2) infinite}
.d11{width:clamp(28px,3.5vw,54px);bottom:30%;right:29%;animation:spinRev 1.05s linear infinite, flick .26s steps(2) infinite}
.d12{width:clamp(52px,7vw,105px); top:38%; left:22%; animation:spin 1.9s linear infinite, throb .45s steps(2) infinite}
.d13{width:clamp(52px,7vw,105px); top:25%; right:24%;animation:spinRev 2.3s linear infinite, throb .38s steps(2) infinite}
.d14{width:clamp(44px,6vw,88px);  bottom:36%;left:7%; animation:spin 1.6s linear infinite}
.d15{width:clamp(44px,6vw,88px);  bottom:40%;right:4%;animation:spinRev 1.35s linear infinite, flick .32s steps(2) infinite}
.d16{width:clamp(52px,7vw,108px); top:15%;  left:-16vw;animation:fly 3.6s linear infinite}
.d17{width:clamp(46px,6vw,92px);  top:56%;  left:-16vw;animation:fly 5.2s linear infinite;animation-delay:-1.8s}
.d18{width:clamp(58px,8vw,120px); top:36%;  left:-16vw;animation:flyBack 4.4s linear infinite;animation-delay:-2.6s}

@keyframes orbit   {from{transform:rotate(0deg) translateX(26px) rotate(0deg)}   to{transform:rotate(360deg) translateX(26px) rotate(-360deg)}}
@keyframes orbitRev{from{transform:rotate(0deg) translateX(22px) rotate(0deg)}   to{transform:rotate(-360deg) translateX(22px) rotate(360deg)}}
@keyframes pop     {0%{scale:.6}100%{scale:1.35}}
@keyframes flick   {0%{opacity:1}100%{opacity:.15}}
@keyframes fly     {from{transform:translateX(0) rotate(24deg)}    to{transform:translateX(132vw) rotate(24deg)}}
@keyframes flyBack {from{transform:translateX(132vw) rotate(-150deg)} to{transform:translateX(0) rotate(-150deg)}}

/* the mascot, plus two glitch afterimages */
.hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.mascot-stack{position:relative;display:grid;place-items:center}
.mascot-stack>svg{grid-area:1/1}
.mascot-hero{
  width:clamp(230px,34vw,430px);height:auto;overflow:visible;
  filter:drop-shadow(0 14px 0 rgba(0,0,0,.25));
  animation:mascotDance .42s steps(2) infinite alternate, hueFlip 1.15s steps(1) infinite;
}
@keyframes mascotDance{
  from{transform:translateY(-16px) rotate(-7deg) scale(.94)}
  to  {transform:translateY(14px)  rotate(7deg)  scale(1.08)}
}
@keyframes hueFlip{
  0%  {filter:none}
  20% {filter:hue-rotate(60deg)  saturate(1.8)}
  40% {filter:hue-rotate(180deg) saturate(2.2)}
  60% {filter:hue-rotate(280deg) saturate(1.9) contrast(1.3)}
  80% {filter:saturate(3) contrast(1.5)}
  100%{filter:none}
}
.mascot-ghost{
  width:clamp(230px,34vw,430px);height:auto;overflow:visible;
  opacity:.45;mix-blend-mode:hard-light;pointer-events:none;
}
.g1{animation:ghost1 .5s steps(2) infinite alternate;filter:hue-rotate(140deg)}
.g2{animation:ghost2 .62s steps(2) infinite alternate;filter:hue-rotate(280deg)}
@keyframes ghost1{from{transform:translate(-26px,10px) rotate(9deg) scale(1.06)}to{transform:translate(20px,-14px) rotate(-11deg) scale(.9)}}
@keyframes ghost2{from{transform:translate(24px,-12px) rotate(-13deg) scale(.92)}to{transform:translate(-22px,16px) rotate(10deg) scale(1.1)}}

/* wordmark: every letter dances and flips colour on its own clock */
.wordmark{
  margin:.15em 0 0;
  font-size:clamp(3.4rem,15vw,11rem);
  font-weight:700;letter-spacing:.01em;line-height:.95;
  -webkit-text-stroke:.085em var(--ink);
  paint-order:stroke fill;
  text-shadow:0 .06em 0 var(--ink);
  animation:wordPulse .55s steps(2) infinite alternate;
}
@keyframes wordPulse{from{scale:.97}to{scale:1.05}}
.wordmark span{
  display:inline-block;
  animation:letterJump .34s steps(2) infinite alternate,
            letterHue  1.2s steps(1) infinite;
  animation-delay:calc(var(--i) * -0.07s), calc(var(--i) * -0.15s);
}
@keyframes letterJump{
  from{transform:translateY(-14px) rotate(-9deg)}
  to  {transform:translateY(12px)  rotate(9deg)}
}
@keyframes letterHue{
  0%  {color:#EE1C25}
  25% {color:#1B4FD8}
  50% {color:#FFD400}
  75% {color:#1EA84A}
  100%{color:#EE1C25}
}
.wordmark .r{color:var(--red)}
.wordmark .b{color:var(--blue-deep)}
.wordmark .y{color:var(--yellow)}
.wordmark .g{color:var(--green)}

/* calm switch */
.calm-toggle{
  position:fixed;z-index:60;bottom:18px;right:18px;
  width:52px;height:52px;border-radius:50%;
  border:5px solid var(--ink);background:#fff;
  box-shadow:0 5px 0 var(--ink);
  font-size:1.35rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.calm-toggle:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.calm-toggle:focus-visible{outline:5px solid var(--yellow);outline-offset:3px}
body.calm .calm-toggle{background:var(--yellow)}

/* ---- kill switch: calm mode + reduce-motion stop everything ---- */
body.calm .hero *,
body.calm .hero{animation:none!important}
body.calm .strobe{background:var(--blue)}
body.calm .rays,
body.calm .whiteout{display:none}
body.calm .mascot-ghost{display:none}
body.calm .mascot-hero{filter:drop-shadow(0 14px 0 rgba(0,0,0,.18))}
body.calm .nft{transition:none}

@media (prefers-reduced-motion:reduce){
  .hero,.hero *{animation:none!important}
  .rays,.whiteout{display:none}
  .mascot-ghost{display:none}
  .strobe{background:var(--blue)}
}

/* ---------- section headings ---------- */
.sec-title{
  margin:0;text-align:center;font-weight:700;
  font-size:clamp(2rem,6.5vw,4.2rem);line-height:1;
  color:var(--blue-deep);
  -webkit-text-stroke:.06em var(--ink);
  paint-order:stroke fill;
  text-shadow:0 .05em 0 var(--ink);
}
.sec-title.white{color:#fff}

/* ---------- nfts ---------- */
.nfts{
  background:var(--blue);
  border-top:8px solid var(--ink);border-bottom:8px solid var(--ink);
  padding:clamp(2.5rem,7vw,5rem) 0;
}
.sec-sub{
  text-align:center;color:#fff;font-weight:600;margin:.9rem 0 0;
  font-size:clamp(1rem,2.2vw,1.3rem);text-shadow:0 3px 0 rgba(0,0,0,.45);
}
.nft-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(1.8rem,4vw,3rem);
}
@media (min-width:860px){ .nft-grid{grid-template-columns:repeat(2,1fr)} }

.nft{
  background:var(--cream);border:7px solid var(--ink);border-radius:34px;
  box-shadow:0 12px 0 var(--ink);overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nft:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 0 var(--ink)}

/* fast slideshow: hard cuts between stacked frames */
.nft-art{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-bottom:7px solid var(--ink);background:var(--blue-deep);
  cursor:crosshair;
}
.nft-art:focus-visible{outline:6px solid var(--yellow);outline-offset:-6px}
.frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
}
.frame.is-on{opacity:1}

.freeze-hint{
  position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);
  background:var(--yellow);color:#000;border:4px solid var(--ink);border-radius:999px;
  box-shadow:0 4px 0 var(--ink);
  font-weight:700;font-size:.78rem;letter-spacing:.09em;padding:.35em .9em;
  opacity:0;transition:opacity .15s ease;pointer-events:none;white-space:nowrap;
}
.nft-art:hover .freeze-hint{opacity:1}
.nft-art.is-held .freeze-hint{opacity:1;background:var(--green-btn);color:#fff}
.nft-art.is-held .freeze-hint::after{content:" ✓"}
@media (hover:none){ .freeze-hint{opacity:1} .nft-art{cursor:pointer} }

.nft-meta{padding:1.2rem 1.2rem 1.4rem;text-align:center}
.nft-meta h3{
  margin:0;font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:700;letter-spacing:.02em;
  color:var(--blue-deep);
  -webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;
}
.nft-meta p{margin:.5rem 0 .9rem;font-size:1rem;line-height:1.45;color:#333}
.pill{
  display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:.08em;
  padding:.4em 1em;border-radius:999px;border:4px solid var(--ink);
  box-shadow:0 4px 0 var(--ink);
}
.pill-yellow{background:var(--yellow);color:#000}

/* ---------- end cta ---------- */
.endcta{background:var(--cream);padding:clamp(2.2rem,6vw,3.6rem) 0;text-align:center}
.endcta .btn{margin-top:1.4rem}

/* ---------- footer ---------- */
.site-foot{
  background:var(--green);color:#fff;border-top:8px solid var(--ink);
  padding:2rem 0;text-align:center;font-weight:600;
}
.site-foot p{margin:.25rem 0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.site-foot .small{font-size:.85rem;opacity:.92;font-weight:500}