/* ========== SHIZO Styles ========== */
:root{
  --bg:#0b0b12;
  --ink:#fefefe;
  --acid:#e1ff00;
  --hot:#ff2277;
  --zap:#35f1ff;
  --muted:#9aa0ac;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Bangers', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}
h1,h2,h3{letter-spacing:.5px;margin:.2em 0}
.logo{font-size:clamp(52px,8vw,160px);line-height:.9}
.h{font-size:clamp(36px,6vw,96px)}
.tagline{font-family:'Rubik Mono One', monospace;font-size:clamp(12px,2.2vw,20px)}
.strike{text-decoration:line-through;text-decoration-thickness:3px}

/* Pages */
.page{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  background-size:cover;
  background-position:center;
  isolation:isolate;
  padding:8vh 5vw;
}
.page::after{/* vignette */
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.content{
  position:relative;
  max-width:min(1200px,94vw);
  text-align:center;
  z-index:3;
}

/* Character */
.sprite{
  position:absolute;
  right:2vw; bottom:0; max-height:96vh;
  object-fit:contain; z-index:2;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
  animation:float 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg)}
  50%{ transform:translateY(-10px) rotate(-.6deg)}
}
.upside .sprite{ transform:scaleX(-1) rotate(180deg) } /* upside gag */

.top-header{
  margin-bottom: 10rem;
}

button, a {
  cursor: none !important;
}

/* Buttons */
.cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:1rem}
.btn{
  --bgc: #14141c;
  --bd: #2c2c3a;
  background: linear-gradient(180deg,var(--bgc),#0a0a10);
  border:2px solid var(--bd);
  color:var(--ink);
  padding:.9rem 1.2rem;
  border-radius:16px;
  text-decoration:none;
  font-size:clamp(16px,2.2vw,22px);
  letter-spacing:.5px;
  box-shadow:0 10px 0 #0006, inset 0 0 0 1px rgba(255,255,255,.03);
  transform:translateZ(0);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px) scale(1.02) }
.btn:active{ transform:translateY(1px) scale(.98) }
.btn::before{/* electric rim */
  content:'';
  position:absolute; inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(90deg,var(--acid),var(--hot),var(--zap),var(--acid));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter:saturate(1.2) blur(.3px);
  opacity:.7; transition:opacity .2s;
}
.btn:hover::before{opacity:1}
.btn-weird{ --bgc:#101018; --bd:#3a3040 }
.btn-buy{ --bgc:#1b0e15; --bd:#66203f; text-shadow:0 2px 0 #000; }
.btn-plain{ background:#16161e;border:1px dashed #3b3b60; font-family:'Rubik Mono One',monospace; }
.real-cta{ display:none } /* revealed by calm */

/* Glitch headline */
.glitch{
  position:relative; display:inline-block;
  text-shadow: 2px 0 0 var(--hot), -2px 0 0 var(--zap);
  animation:glitch .9s infinite;
}
@keyframes glitch{
  0%{ transform:translate(0)}
  15%{ transform:translate(.6px,-.6px)}
  30%{ transform:translate(-.5px,.5px)}
  45%{ transform:translate(.4px,.2px)}
  60%{ transform:translate(-.4px,-.2px)}
  100%{ transform:translate(0)}
}

/* Calm toggle */
.calm-toggle{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  width:52px;height:52px;border-radius:14px;border:0;cursor:pointer;
  background: radial-gradient(circle at 30% 30%, #ffefb6, #ffb800 70%) ;
  box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 -6px 12px rgba(0,0,0,.25);
}
.calm-toggle::after{content:'🧯'; font-size:28px}
.calm-toggle[aria-pressed="true"]{ filter:grayscale(.1) contrast(1.2) }

/* Footer */
.footer{ position:relative; padding:16px; display:flex; gap:16px; align-items:center; justify-content:space-between; background:rgba(0,0,0,.3); backdrop-filter:blur(4px)}
.footer .social a{ color:var(--muted); margin-right:14px; text-decoration:none }
.footer .social a:hover{ color:var(--ink) }
.marquee{
  font-family:'Rubik Mono One', monospace; font-size:12px; opacity:.6; overflow:hidden; white-space:nowrap;
}
.marquee span{ display:inline-block; padding-left:100%; animation:marq 20s linear infinite }
@keyframes marq{ to{ transform:translateX(-100%) } }

/* Modals */
.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s; z-index:999 }
.modal.show{ opacity:1; pointer-events:auto }
.modal-inner{ width:min(760px,92vw); max-height:86vh; overflow:auto; background:#0f0f18; border:1px solid #2a2a40; border-radius:18px; padding:20px 18px; box-shadow:0 40px 120px rgba(0,0,0,.6) }
.modal-close{ position:absolute; right:22px; top:10px; background:none; border:0; color:#fff; font-size:30px; cursor:pointer }
.whitepaper{ display:grid; place-items:center; gap:10px; padding:14px; }
.whitepaper .paper{ width:100%; height:480px; background:#fff; border-radius:12px; box-shadow:inset 0 0 0 2px #0002 }
.whitepaper .caption{ color:#bbb; font-family:'Rubik Mono One',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

/* States */
body.calm .glitch{ animation:none; text-shadow:none }
body.calm .runaway{ pointer-events:auto }
body.calm .real-cta{ display:inline-flex }
body.calm .btn-buy.runaway{ /* disable prank */ }
body.calm .page{ filter:none }
body.calm .sprite{ animation:float 12s ease-in-out infinite }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .glitch, .sprite, .marquee{ animation:none !important }
}

/* Responsive tweaks */
@media (max-width: 900px){
  .sprite{ opacity:.9; right:-4vw; max-height:60vh }
  .content{ padding-top:6vh }
}


/* === Custom SHIZO cursor (image provided) === */
body{ cursor: none; }
.custom-cursor{
  position: fixed; left:0; top:0; width:42px; height:42px;
  background: url('assets/cursor.png') no-repeat center / contain;
  pointer-events: none; z-index: 10000;
  transform: translate(-120px,-120px); /* offscreen until move */
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
  will-change: transform;
}
@media (pointer: coarse){
  body{ cursor: auto; }
  .custom-cursor{ display:none; }
}


/* === Hand-walk animation for first slide only === */
#page1 .sprite{
  right:auto;                /* override default right position */
  left:70vw;                 /* start on the right */
  animation:
    handwalkLR 18s linear infinite alternate,
    handbob .9s ease-in-out infinite;
}

/* left <-> right loop using 'left' property (not transform, to avoid conflicts) */
@keyframes handwalkLR{
  from{ left:70vw; }
  to{   left:4vw; }
}

/* subtle bobbing to mimic steps, using 'bottom' so it won't fight transforms */
@keyframes handbob{
  0%,100%{ bottom:0; }
  50%{    bottom:12px; }
}


/* === Manic dash for second slide (back-and-forth chaotic) === */
#page2 .sprite{
  right:auto;
  left:6vw;
  animation:
    manicLR 7.5s linear infinite,
    jitterY .55s ease-in-out infinite,
    huecrazy 3.2s ease-in-out infinite alternate;
}

/* chaotic left-right path (irregular waypoints) */
@keyframes manicLR{
  0%   { left:6vw; }
  8%   { left:86vw; }
  16%  { left:12vw; }
  24%  { left:72vw; }
  31%  { left:8vw; }
  40%  { left:94vw; }
  48%  { left:18vw; }
  58%  { left:76vw; }
  66%  { left:10vw; }
  74%  { left:88vw; }
  82%  { left:22vw; }
  90%  { left:80vw; }
  100% { left:6vw; }
}

/* quick vertical jitter to simulate frantic run */
@keyframes jitterY{
  0%,100%{ bottom:0 }
  50%{ bottom:16px }
}

/* slight color buzz (safe, no transform conflicts) */
@keyframes huecrazy{
  0%{ filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)) hue-rotate(0deg) saturate(1); }
  100%{ filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)) hue-rotate(20deg) saturate(1.15); }
}


/* === Page2 behavior update: calm walk by default; manic when .loud === */
#page2 .sprite{
  right:auto;
  left:8vw;
  animation:
    calmLR 14s linear infinite alternate,
    handbob .9s ease-in-out infinite;
}
@keyframes calmLR{
  from{ left:8vw; }
  to{ left:82vw; }
}
/* when loud mode is active (triggered by button), switch to manic path */
#page2.loud .sprite{
  animation:
    manicLR 12s linear infinite,
    jitterY .55s ease-in-out infinite,
    huecrazy 3.2s ease-in-out infinite alternate;
}


/* ensure flip is visible even without mouse move until JS parallax updates */
#page2 .sprite.flipx{ transform: scaleX(-1); }


/* === Page1 floating/bouncing stickers === */
#page1 .flyers{
  position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;
}
#page1 img.flyer{
  position:absolute; top:0; left:0;
  width:clamp(64px, 9vw, 160px);
  user-select:none; pointer-events:none; opacity:0;
  transform:translate3d(-9999px,-9999px,0) rotate(0deg);
  transition: opacity .8s ease;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
  will-change: transform, opacity;
  mix-blend-mode: normal;
}
#page1 img.flyer.show{ opacity:.95; }
#page1 img.ghost{
  position:absolute; top:0; left:0;
  user-select:none; pointer-events:none;
  opacity:.45; filter:blur(0px) drop-shadow(0 6px 12px rgba(0,0,0,.35));
  animation: flyerGhost 1s ease-out forwards;
  transform-origin:center;
}
@keyframes flyerGhost{
  to{ opacity:0; filter:blur(6px); transform: translate3d(var(--gx), var(--gy), 0) rotate(var(--grot)) scale(1.08); }
}


/* === FIXED: Canvas flyers for page1 (stable, performant) === */
#page1 .flyers-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}


/* === Stronger dynamic title on first slide === */
#page1 .logo.glitch{
  display:inline-block;
  will-change: transform, filter;
  animation: shizoQuake .7s infinite, shizoZoom 4.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
  transform-origin:center;
}

/* violent micro-shake with slight rotation (uses translate/rotate sub-properties so it can stack with zoom) */
@keyframes shizoQuake{
  0%   { translate: 0 0; rotate: 0deg; }
  10%  { translate: -1px 1.2px; rotate: -.6deg; }
  20%  { translate: 1.4px -1px; rotate: .5deg; }
  30%  { translate: -1.6px .6px; rotate: -.8deg; }
  40%  { translate: 1.2px .8px; rotate: .6deg; }
  50%  { translate: -1px -1.2px; rotate: -.7deg; }
  60%  { translate: 1.6px .6px; rotate: .7deg; }
  70%  { translate: -.8px -.6px; rotate: -.5deg; }
  80%  { translate: 1.2px .8px; rotate: .4deg; }
  90%  { translate: -.6px .6px; rotate: -.3deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

/* slow zoom pulse */
@keyframes shizoZoom{
  0%,100%{ scale: 1 }
  20%{ scale: 1.02 }
  50%{ scale: 1.08 }
  80%{ scale: 1.03 }
}


/* === Breakable button effect (ABOUT MEME) === */
.btn-breakable{ position:relative; overflow:hidden }
.btn-split{
  position:fixed; z-index:9999; pointer-events:none;
  clip-path: inset(0 50% 0 0 round 16px); /* default left half */
  animation: splitLeft 1.1s ease-out forwards;
}
.btn-split.right{
  clip-path: inset(0 0 0 50% round 16px);
  animation: splitRight 1.1s ease-out forwards;
}
@keyframes splitLeft{
  0%{ transform: translate(0,0) rotate(0deg); opacity:1 }
  30%{ transform: translate(-10px,-8px) rotate(-6deg) }
  100%{ transform: translate(-120px, -160px) rotate(-22deg); opacity:0 }
}
@keyframes splitRight{
  0%{ transform: translate(0,0) rotate(0deg); opacity:1 }
  30%{ transform: translate(10px,8px) rotate(6deg) }
  100%{ transform: translate(140px, 170px) rotate(26deg); opacity:0 }
}
/* tiny crack flash */
.btn-breakable.crack::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.15) 49% 51%, transparent 51% 100%);
  mix-blend-mode: overlay; animation: crackFlash .22s ease-in-out 1;
}
@keyframes crackFlash{ from{opacity:.9} to{opacity:0} }


/* === ABOUT MEME: staged break (3 clicks) === */
.btn-breakable.break1{ animation: btnShake .5s ease-in-out 1; }
.btn-breakable.break2{ animation: btnShake .7s ease-in-out 1; }

/* shake keyframes */
@keyframes btnShake{
  0%{ transform: translate(0,0) rotate(0) }
  15%{ transform: translate(-2px, -1px) rotate(-1deg) }
  30%{ transform: translate(2px, 2px) rotate(1deg) }
  45%{ transform: translate(-2px, 1px) rotate(-.8deg) }
  60%{ transform: translate(2px, -2px) rotate(.8deg) }
  75%{ transform: translate(-1px, 1px) rotate(-.6deg) }
  100%{ transform: translate(0,0) rotate(0) }
}

/* mini split (visual fracture preview) */
.btn-split.mini{
  clip-path: inset(0 50% 0 0 round 16px);
  animation: splitMiniLeft .6s ease-out forwards;
}
.btn-split.mini.right{
  clip-path: inset(0 0 0 50% round 16px);
  animation: splitMiniRight .6s ease-out forwards;
}
@keyframes splitMiniLeft{
  0%{ transform: translate(0,0) rotate(0); opacity:.9 }
  100%{ transform: translate(-24px, -18px) rotate(-10deg); opacity:0 }
}
@keyframes splitMiniRight{
  0%{ transform: translate(0,0) rotate(0); opacity:.9 }
  100%{ transform: translate(28px, 20px) rotate(12deg); opacity:0 }
}


/* === Contract bar (page1 top-center) === */
.contract-bar{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; padding:10px 12px;
  background: rgba(10,10,16,.55);
  border:1px solid #2a2a40; border-radius:14px;
  backdrop-filter: blur(6px) saturate(1.15);
  z-index:4;
}
.contract-code{
  font-family:'Rubik Mono One', monospace;
  font-size:12px; letter-spacing:.04em; color:#b9c0d0;
  padding:.35rem .5rem; background:#0d0d15; border-radius:10px; border:1px dashed #3b3b60;
  max-width:min(66vw, 780px); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.copy-btn{ font-size:12px; padding:.6rem .7rem }
.buy-top{ padding:.7rem 1rem; font-weight:700 }
.copy-btn.copied{ color:#00e676; border-color:#2f6; box-shadow:0 0 0 2px rgba(0,230,118,.15) inset }
@media (max-width: 640px){
  .contract-bar{ top:14px; gap:8px; padding:8px 10px }
  .contract-code{ font-size:11px; max-width:74vw }
  .copy-btn{ padding:.5rem .6rem }
  .buy-top{ padding:.55rem .9rem }
}


/* === ABOUT MEME: physical hinge (2 clicks) === */
#aboutMeme.btn-breakable{
  transform-origin: right top;
}
#aboutMeme.hinge-hang{
  animation: hingeSag 900ms ease-out forwards, hingeSwing 1.6s ease-in-out 900ms infinite alternate;
}
@keyframes hingeSag{
  0%{ transform-origin:right top; transform: rotate(0deg) translateY(0); }
  100%{ transform-origin:right top; transform: rotate(24deg) translateY(6px); }
}
@keyframes hingeSwing{
  0%{ transform-origin:right top; transform: rotate(20deg) translateY(5px); }
  100%{ transform-origin:right top; transform: rotate(30deg) translateY(9px); }
}

/* Detached falling clone */
.btn-fall{
  position: fixed; z-index: 9999; pointer-events: none;
  transform-origin: right top;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  animation: hingeDrop 1.25s cubic-bezier(.25,.7,.5,1.1) forwards;
}
@keyframes hingeDrop{
  0%{ transform: rotate(26deg) translate(0,0); opacity:1 }
  35%{ transform: rotate(52deg) translate(6px, 18px) }
  70%{ transform: rotate(86deg) translate(12px, 60vh) }
  100%{ transform: rotate(110deg) translate(16px, 200vh); opacity:0 }
}


/* === OVERRIDE: ABOUT MEME hinge to sag DOWN from top-center === */
#page1 #aboutMeme.btn-breakable{
  transform-origin: 50% 0% !important; /* center-top pivot */
}
#page1 #aboutMeme.hinge-hang{
  animation: hingeSagDown 900ms ease-out forwards, hingeSwingDown 1.8s ease-in-out 900ms infinite alternate !important;
}

/* new sag & swing keyframes */
@keyframes hingeSagDown{
  0%{ transform-origin:50% 0%; transform: rotate(0deg) translateY(0) }
  100%{ transform-origin:50% 0%; transform: rotate(88deg) translateY(2px) }
}
@keyframes hingeSwingDown{
  0%{ transform-origin:50% 0%; transform: rotate(86deg) translateY(2px) }
  100%{ transform-origin:50% 0%; transform: rotate(94deg) translateY(6px) }
}

/* OVERRIDE falling clone to drop straight down from top-center */
.btn-fall{
  transform-origin: 50% 0% !important;
  animation: hingeDropDown 1.25s cubic-bezier(.25,.7,.5,1.1) forwards !important;
}
@keyframes hingeDropDown{
  0%{ transform: rotate(92deg) translate(0,0); opacity:1 }
  40%{ transform: rotate(98deg) translate(6px, 35vh) }
  75%{ transform: rotate(110deg) translate(12px, 90vh) }
  100%{ transform: rotate(118deg) translate(18px, 200vh); opacity:0 }
}


/* === OVERRIDE: ABOUT MEME hangs from RIGHT-TOP corner, left side drops down === */
#page1 #aboutMeme.btn-breakable{
  transform-origin: 100% 0% !important; /* right top */
}
#page1 #aboutMeme.hinge-hang{
  animation: hingeSagRightDown 900ms ease-out forwards, hingeSwingRightDown 1.6s ease-in-out 900ms infinite alternate !important;
}

/* sag strongly downward from right-top */
@keyframes hingeSagRightDown{
  0%{ transform-origin:100% 0%; transform: rotate(0deg) translateY(0) }
  100%{ transform-origin:100% 0%; transform: rotate(92deg) translateY(3px) }
}
/* gentle swing while hanging */
@keyframes hingeSwingRightDown{
  0%{ transform-origin:100% 0%; transform: rotate(88deg) translateY(2px) }
  100%{ transform-origin:100% 0%; transform: rotate(98deg) translateY(6px) }
}

/* falling clone should also pivot from right-top and drop downward */
.btn-fall{
  transform-origin: 100% 0% !important;
  animation: hingeDropRightDown 1.25s cubic-bezier(.25,.7,.5,1.1) forwards !important;
}
@keyframes hingeDropRightDown{
  0%{ transform: rotate(96deg) translate(0,0); opacity:1 }
  40%{ transform: rotate(110deg) translate(6px, 35vh) }
  75%{ transform: rotate(122deg) translate(10px, 90vh) }
  100%{ transform: rotate(128deg) translate(14px, 200vh); opacity:0 }
}


/* === FINAL FIX: ABOUT MEME hangs on RIGHT-TOP, left side drops (no vertical shift of pivot) === */
#page1 #aboutMeme.btn-breakable{
  transform-origin: 100% 0% !important; /* anchor at right-top */
}
#page1 #aboutMeme.hinge-hang{
  /* rotate around right-top so left corner goes down */
  animation: hingeSagRightFix 800ms ease-out forwards, hingeSwingRightFix 2s ease-in-out 800ms infinite alternate !important;
}

/* Sag to ~78deg so left edge clearly points down; keep pivot fixed (no translate) */
@keyframes hingeSagRightFix{
  0%{   transform-origin:100% 0%; transform: rotate(0deg) }
  100%{ transform-origin:100% 0%; transform: rotate(78deg) }
}
/* Gentle swing around the same pivot */
@keyframes hingeSwingRightFix{
  0%{   transform-origin:100% 0%; transform: rotate(74deg) }
  100%{ transform-origin:100% 0%; transform: rotate(82deg) }
}

/* Drop phase: start from the same angle and fall down */
.btn-fall{
  transform-origin: 100% 0% !important;
  animation: hingeDropRightFix 1.2s cubic-bezier(.25,.7,.5,1.1) forwards !important;
}
@keyframes hingeDropRightFix{
  0%{   transform: rotate(80deg) translate(0,0); opacity:1 }
  50%{  transform: rotate(96deg) translate(6px, 45vh) }
  100%{ transform: rotate(110deg) translate(12px, 200vh); opacity:0 }
}


/* === Fixed top-right social buttons === */
.top-social{
  position: fixed;
  top: 22px;               /* same top offset as contract bar */
  right: 100px;             /* right padding from edge */
  display: flex; gap: 10px;
  z-index: 5;
}
.top-social .soc{
  display: inline-grid; place-items:center;
  width: 57px; height: 57px; border-radius: 12px;
  background: rgba(10,10,16,.55);
  border:1px solid #2a2a40;
  backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.top-social .soc:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 24px rgba(0,0,0,.4); }
.top-social img{ width: 28px; height: 28px; image-rendering: auto; }
@media (max-width: 640px){
  .top-social{ top: 14px; right: 12px; gap: 8px }
  .top-social .soc{ width: 40px; height: 40px; border-radius: 10px }
  .top-social img{ width: 24px; height: 24px }
}


/* === OVERRIDE: make top-right social icons brighter and bigger === */
.top-social{
  z-index: 9; /* ensure above everything */
}
.top-social .soc{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
.top-social img{
  width: 32px;
  height: 32px;
  filter: brightness(1.15) contrast(1.1) saturate(1.1);
}
.top-social .soc:hover{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 32px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.1) inset;
}
@media (max-width: 640px){
  .top-social .soc{ width: 50px; height: 50px; border-radius: 12px }
  .top-social img{ width: 30px; height: 30px }
}


/* === OVERRIDE: unify button font to Tokenomics style === */
.btn{ font-family: 'Rubik Mono One', monospace !important; }


/* === Livelier hand-walk for page1 sprite (no transform conflicts) === */
#page1 .sprite{
  animation:
    handwalkLR 18s linear infinite alternate,
    handstep .9s cubic-bezier(.55,0,.45,1) infinite,
    handpulse 2.8s ease-in-out infinite;
}

/* step rhythm: sharp push-off, brief hang-time, landing */
@keyframes handstep{
  0%   { bottom:0; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) brightness(1) }
  12%  { bottom:12px; filter: drop-shadow(0 32px 48px rgba(0,0,0,.45)) brightness(1.03) }
  20%  { bottom:6px;  filter: drop-shadow(0 34px 52px rgba(0,0,0,.5))  brightness(1.02) }
  38%  { bottom:14px; filter: drop-shadow(0 30px 46px rgba(0,0,0,.44)) brightness(1.05) }
  50%  { bottom:4px;  filter: drop-shadow(0 36px 54px rgba(0,0,0,.52)) brightness(1.01) }
  70%  { bottom:13px; filter: drop-shadow(0 31px 47px rgba(0,0,0,.46)) brightness(1.04) }
  88%  { bottom:5px;  filter: drop-shadow(0 35px 53px rgba(0,0,0,.5))  brightness(1.02) }
  100% { bottom:0;   filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) brightness(1) }
}

/* slow energy pulse for a "living" feel */
@keyframes handpulse{
  0%,100%{ filter: hue-rotate(0deg) saturate(1) }
  50%    { filter: hue-rotate(-6deg) saturate(1.08) }
}


/* == Reverse Mouse button feedback (minimal, non-invasive) == */
.btn.active{ outline: 2px dashed #fff; outline-offset: 2px; }
.click-glow{ filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }


/* Logo burst transition */
.logo{ transition: font-size .35s ease; }


/* ===== Responsive enhancements for phones & tablets ===== */
@media (max-width: 1200px){
  .content{ padding-inline: 4vw; }
  .sprite{ max-height: 82vh; right:-2vw }
}
@media (max-width: 1024px){
  .content{ padding-top: 8vh; max-width: 94vw; }
  .sprite{ max-height: 72vh; right:-4vw }
  .top-social{ right: 24px }
}
@media (max-width: 820px){ /* large tablets / small landscape */
  .page{ min-height: 100svh; }
  .content{ padding-top: 9vh; max-width: 92vw; }
  .sprite{ max-height: 56vh; right:-8vw; opacity:.9 }
  .cta{ gap: 12px }
  .btn{ font-size: clamp(14px, 2.8vw, 20px); padding: .85rem 1.05rem }
  .contract-bar{ left:50%; transform: translateX(-50%); flex-wrap: wrap; max-width: 94vw }
  .contract-code{ max-width: 100% }
  .top-social{ right: 16px; top: 16px }
}
@media (max-width: 640px){ /* phones */
  .page{ min-height: 100svh; }
  .content{ padding-top: 10vh; max-width: 94vw }
  .sprite{ max-height: 42vh; right:-10vw; opacity:.85 }
  .cta{ gap: 10px }
  .btn{ width: auto; max-width: 92vw; font-size: clamp(14px, 4.2vw, 18px); padding: .8rem 1rem }
  .contract-bar{ gap: 8px; padding: 8px 10px; flex-wrap: wrap; max-width: 94vw }
  .contract-code{ font-size: 11px; max-width: 100% }
  .top-social{ right: 12px; top: 14px }
}
@media (max-width: 420px){ /* small phones */
  .logo{ font-size: clamp(40px, 14vw, 58px) }
  .sprite{ max-height: 36vh; right:-12vw }
  .btn{ max-width: 100% }
}
/* Touch devices: ensure native cursor & hide custom cursor (safety) */
@media (pointer: coarse){
  body{ cursor: auto; }
  .custom-cursor{ display: none; }
}


/* ===== Mobile & Tablet adaptive (reworked) ===== */
@media (max-width: 1024px){
  .page{ min-height: 100svh; }
  .content{ max-width: 92vw; padding-top: 8vh; }
  .sprite{ max-height: 58vh; right:-6vw; opacity:.95 }
  .cta{ gap: 12px }
  .btn{ font-size: clamp(14px, 2.4vw, 20px); padding: .85rem 1.05rem }
  .contract-bar{ left:50%; transform: translateX(-50%); flex-wrap: wrap; max-width: 94vw }
  .contract-code{ max-width: 100% }
  .top-social{ right: 18px; top: 16px }
}
@media (max-width: 768px){
  .content{ padding-top: 9vh; }
  .sprite{ max-height: 48vh; right:-10vw; opacity:.9 }
  .btn{ font-size: clamp(14px, 3.4vw, 18px) }
}
@media (max-width: 640px){ /* phones */
  .page{ min-height: 100svh; }
  .content{ max-width: 94vw; padding-top: 10vh; }
  .sprite{ max-height: 38vh; right:-12vw; opacity:.88 }
  .cta{ gap: 10px }
  .btn{ width: auto; max-width: 96vw; font-size: clamp(14px, 4vw, 18px); padding: .8rem 1rem }
  .contract-bar{ gap: 8px; padding: 8px 10px; flex-wrap: wrap; max-width: 94vw }
  .contract-code{ font-size: 11px; max-width: 100% }
  .top-social{ right: 12px; top: 14px }
  /* Remove glitch and any CSS-driven animations on title */
  .glitch{ animation: none !important; text-shadow: none; }
}


/* Touch: neutralize hover lifts */
@media (pointer: coarse){
  .btn:hover{ transform:none; }
}


/* === Disable all animations/transitions on phones & tablets (<=1024px) === */
@media (max-width: 1024px) {
  html.no-anim-mobile *, html.no-anim-mobile *::before, html.no-anim-mobile *::after,
  *, *::before, *::after {
    animation: none !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* Normalize common animation libraries */
  [data-aos], .aos-init, .aos-animate { opacity: 1 !important; transform: none !important; }
  .animated, .animate__animated { animation: none !important; }
  .marquee, .ticker, .scroller { animation: none !important; transform: none !important; }
}