/* RATSDEN — feste nella tana */
:root{
  --ink:#070908;
  --ink-2:#0e1311;
  --ink-3:#151c19;
  --bone:#EDEAE0;
  --bone-dim:#a7ada5;
  --acid:#C8FF2E;
  --hot:#FF3D7F;
  --red:#FF3B30;
  --pine:#123832;
  --line:rgba(237,234,224,.14);
  --mx:50%; --my:45%;
  --beat:0;
  --display:'Unbounded', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --body:'Inter Tight', system-ui, sans-serif;
  --gut:clamp(16px, 4vw, 48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
html,body{margin:0;background:var(--ink);color:var(--bone)}
body{font-family:var(--body); font-size:17px; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
main{overflow-x:clip}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.small{font-size:11px; opacity:.6}
em{font-style:normal; color:var(--acid)}
::selection{background:var(--acid); color:var(--ink)}

/* ---------- intro ---------- */
.intro{position:fixed; inset:0; z-index:100; background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:clip-path .9s cubic-bezier(.7,0,.2,1); clip-path:circle(150% at 50% 50%)}
.intro.gone{clip-path:circle(0% at 50% 50%); pointer-events:none}
.intro-rat{width:120px; height:80px; color:var(--acid); animation:scurry 1.1s steps(2) infinite}
.intro-rat svg{width:100%; height:100%}
.intro-txt{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)}
.dots::after{content:''; animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes scurry{0%{transform:translateX(-6px) rotate(-2deg)}100%{transform:translateX(6px) rotate(2deg)}}

/* ---------- grain + cursor ---------- */
.grain{position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed; left:0; top:0; z-index:95; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--acid); mix-blend-mode:difference; pointer-events:none; transition:width .25s, height .25s, margin .25s; display:none}
.cursor.big{width:56px; height:56px; margin:-28px 0 0 -28px}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} body{cursor:none} a,button{cursor:none} }

/* ---------- bar ---------- */
.bar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:16px; padding:12px var(--gut); background:linear-gradient(var(--ink) 20%, transparent); }
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:900; letter-spacing:.04em; font-size:15px}
.brand-rat{width:36px; height:24px; color:var(--acid)}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:8px 10px; border-radius:99px; transition:background .2s,color .2s}
.nav a:hover,.nav a.on{background:var(--bone); color:var(--ink)}
.sound{display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(14,19,17,.7); color:var(--bone); border-radius:99px; padding:8px 14px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px)}
.sound[aria-pressed="true"]{background:var(--acid); color:var(--ink); border-color:var(--acid)}
.eq{display:flex; gap:2px; align-items:flex-end; height:12px}
.eq i{width:3px; height:30%; background:currentColor; border-radius:1px}
.sound[aria-pressed="true"] .eq i{animation:eq .5s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s!important}.eq i:nth-child(3){animation-delay:-.35s!important}.eq i:nth-child(4){animation-delay:-.1s!important}
@keyframes eq{from{height:20%}to{height:100%}}
@media (max-width:860px){ .nav{display:none} .sound{margin-left:auto} }
@media (max-width:420px){ .sound-lbl{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; isolation:isolate}
.hero-dark{position:absolute; inset:0; z-index:-2; background:
  radial-gradient(60% 50% at 50% 110%, rgba(18,56,50,.55), transparent 70%), var(--ink)}
.hero-lit{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(200,255,46,.16), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(237,234,224,.05) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 94px, rgba(237,234,224,.035) 94px 96px),
    linear-gradient(180deg, #1a211d, #0f1412);
  -webkit-mask-image:radial-gradient(circle calc(170px + var(--beat) * 60px) at var(--mx) var(--my), #000 0 35%, rgba(0,0,0,.55) 60%, transparent 100%);
          mask-image:radial-gradient(circle calc(170px + var(--beat) * 60px) at var(--mx) var(--my), #000 0 35%, rgba(0,0,0,.55) 60%, transparent 100%)}
.graffiti span{position:absolute; left:var(--x); top:var(--y); transform:rotate(var(--r)); font-family:var(--display); font-weight:900; font-size:clamp(18px,3.2vw,40px); color:var(--acid); text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap; opacity:.9; text-shadow:0 0 18px rgba(200,255,46,.4)}
.graffiti span:nth-child(even){color:var(--hot); text-shadow:0 0 18px rgba(255,61,127,.4); font-family:var(--mono); font-weight:700; font-size:clamp(13px,1.6vw,20px)}
.eyes{position:absolute; inset:0}
.eye{position:absolute; width:22px; height:8px; display:flex; justify-content:space-between; opacity:0; transition:opacity .6s}
.eye.on{opacity:1}
.eye::before,.eye::after{content:''; width:6px; height:6px; border-radius:50%; background:var(--hot); box-shadow:0 0 10px var(--hot), 0 0 2px #fff inset; animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

.hero-inner{position:relative; text-align:center; padding:110px var(--gut) 80px; width:100%}
.kicker{color:var(--bone-dim); margin:0 0 18px}
.title{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(52px, 14.2vw, 232px); line-height:.86; letter-spacing:-.045em; color:var(--bone); user-select:none; white-space:nowrap}
.title .ch{display:inline-block; font-variation-settings:'wght' var(--w,900); transition:transform .25s cubic-bezier(.3,1.6,.5,1), color .2s; transform:translateY(calc(var(--lift,0) * -1px)) scaleY(calc(1 + var(--beat) * .08))}
.title .ch.hot{color:var(--acid)}
.lead{font-size:clamp(18px,2.3vw,26px); line-height:1.35; margin:26px auto 30px; max-width:30ch}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hint{margin-top:42px; color:var(--bone-dim); opacity:.7; transition:opacity .6s}
.hint.gone{opacity:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:99px; padding:15px 24px; font:600 16px var(--body); text-decoration:none; transition:transform .2s, box-shadow .2s; cursor:pointer}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-acid{background:var(--acid); color:var(--ink); box-shadow:0 0 0 0 rgba(200,255,46,.5)}
.btn-acid:hover{box-shadow:0 10px 40px -8px rgba(200,255,46,.6)}
.btn-ghost{background:transparent; color:var(--bone); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--bone)}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{box-shadow:0 10px 40px -8px rgba(255,59,48,.7)}
.btn:focus-visible,.nav a:focus-visible,.sound:focus-visible{outline:2px solid var(--acid); outline-offset:3px}

/* ---------- ticker ---------- */
.ticker{overflow:hidden; background:var(--acid); color:var(--ink); transform:rotate(-2deg); margin:-10px -20px 0; position:relative; z-index:2; border-block:2px solid var(--ink)}
.ticker-track{display:flex; width:max-content; animation:tick 28s linear infinite; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(16px,2.2vw,26px); padding:12px 0}
.ticker-track span{padding:0 22px; white-space:nowrap}
.ticker-track span::after{content:'✱'; margin-left:44px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section:not(.hero){padding:clamp(80px,12vw,160px) var(--gut) 0; max-width:1400px; margin:0 auto}
.sec-head{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(30px,5vw,60px)}
.sec-num{color:var(--acid); border:1px solid var(--acid); border-radius:99px; padding:4px 10px; align-self:flex-start; margin-top:12px}
.sec-head h2{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(40px,8vw,112px); line-height:.9; letter-spacing:-.04em; text-transform:uppercase}
.outline{color:var(--acid)}
.reveal{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- ticket ---------- */
.ticket{display:grid; grid-template-columns:1fr 300px; border-radius:28px; overflow:hidden; transform-style:preserve-3d; transition:transform .3s ease-out; will-change:transform; filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.ticket-main{position:relative; padding:clamp(26px,4vw,56px); background:
  radial-gradient(120% 90% at 0% 0%, #7a1414 0%, #3d0a0a 45%, #1c0606 100%); overflow:hidden; isolation:isolate}
.ticket-main::after{content:''; position:absolute; right:-14px; top:0; bottom:0; width:28px; background:radial-gradient(circle at 50% 14px, var(--ink) 9px, transparent 10px) 0 0/28px 34px repeat-y; z-index:2}
.snow{position:absolute; inset:0; z-index:-1; background-image:
  radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 80px 120px, #fff 50%, transparent 51%),
  radial-gradient(2.5px 2.5px at 150px 60px, rgba(255,255,255,.8) 50%, transparent 51%),
  radial-gradient(1px 1px at 200px 160px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 250px 20px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size:280px 200px; animation:snow 14s linear infinite; opacity:.5}
@keyframes snow{to{background-position:40px 200px, -30px 200px, 20px 200px, -10px 200px, 30px 200px}}
.tag-red{color:#ffb4ae; margin:0 0 8px}
.ticket-name{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(34px,6vw,84px); line-height:.92; letter-spacing:-.04em; text-transform:uppercase}
.ticket-sub{margin:10px 0 0; color:#ffd2ce; font-size:18px}
.ticket-desc{max-width:58ch; color:#f3dcd9; margin:26px 0 30px}
.ticket-cta{display:flex; gap:12px; flex-wrap:wrap}
.count{display:flex; gap:clamp(8px,2vw,18px); margin-top:28px; flex-wrap:wrap}
.count .u{background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:12px 14px; min-width:78px; text-align:center}
.count .n{display:block; font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,48px); line-height:1; font-variant-numeric:tabular-nums}
.count .l{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.count .soon{font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,30px); padding:14px 18px; border:1.5px dashed rgba(255,255,255,.35); border-radius:16px}
.ticket-stub{background:var(--bone); color:var(--ink); padding:34px 28px 28px; display:flex; flex-direction:column; gap:16px}
.stub-row{display:flex; flex-direction:column; border-bottom:1px dashed rgba(7,9,8,.25); padding-bottom:12px}
.stub-row span{opacity:.55; font-size:10px}
.stub-row b{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em}
.stub-code{margin-top:auto; font-size:14px}
.barcode{height:54px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 14px)}
@media (max-width:820px){
  .ticket{grid-template-columns:1fr}
  .ticket-main::after{right:0; left:0; top:auto; bottom:-14px; width:auto; height:28px; background:radial-gradient(circle at 14px 50%, var(--ink) 9px, transparent 10px) 0 0/34px 28px repeat-x}
}

.games{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:24px}
.game{position:relative; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--ink-2); overflow:hidden; transition:transform .3s, border-color .3s}
.game:hover{transform:translateY(-4px) rotate(-.6deg); border-color:var(--red)}
.game .i{font-size:30px; display:block; margin-bottom:12px; transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.game:hover .i{transform:scale(1.25) rotate(-10deg)}
.game b{font-family:var(--display); font-weight:700; font-size:16px; display:block; margin-bottom:4px}
.game p{margin:0; color:var(--bone-dim); font-size:15px}

/* ---------- news ---------- */
.filters{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.filters button{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; background:none; color:var(--bone); border:1px solid var(--line); border-radius:99px; padding:8px 14px; cursor:pointer}
.filters button[aria-selected="true"]{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.news-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 380px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 26px; scrollbar-width:thin; scrollbar-color:var(--acid) transparent}
.news-card{scroll-snap-align:start; position:relative; display:flex; flex-direction:column; min-height:360px; padding:26px; border-radius:24px; background:var(--ink-2); border:1px solid var(--line); text-decoration:none; overflow:hidden; transition:transform .35s, background .35s}
.news-card:hover{transform:translateY(-6px)}
.news-card:nth-child(4n+1){background:var(--acid); color:var(--ink); border-color:var(--acid)}
.news-card:nth-child(4n+3){background:var(--pine); border-color:transparent}
.news-card .when{display:flex; justify-content:space-between; gap:8px}
.news-card .chip{border:1px solid currentColor; border-radius:99px; padding:2px 8px; font-size:10px}
.news-card h3{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.3vw,28px); line-height:1.05; letter-spacing:-.03em; margin:auto 0 12px; padding-top:60px}
.news-card p{margin:0 0 20px; opacity:.85; font-size:16px}
.news-card .go{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; display:flex; justify-content:space-between; border-top:1px solid currentColor; padding-top:14px; opacity:.9}
.news-card .big-date{position:absolute; right:-10px; top:40px; font-family:var(--display); font-weight:900; font-size:120px; line-height:1; opacity:.08; letter-spacing:-.06em; pointer-events:none}

/* ---------- archive tunnel ---------- */
.tunnel{list-style:none; margin:0; padding:0 0 0 clamp(20px,5vw,80px); position:relative}
.tunnel::before{content:''; position:absolute; left:clamp(6px,2vw,30px); top:0; bottom:0; width:2px; background:repeating-linear-gradient(var(--acid) 0 8px, transparent 8px 16px)}
.dig{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(20px,4vw,60px); align-items:center; padding:30px 0 50px}
.dig::before{content:''; position:absolute; left:calc(-1 * clamp(20px,5vw,80px) + clamp(6px,2vw,30px) - 7px); top:46px; width:16px; height:16px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 6px rgba(200,255,46,.15)}
.dig-img{aspect-ratio:3/2; border-radius:24px; overflow:hidden; background:var(--pine); display:grid; place-items:center; transform:rotate(-2deg); transition:transform .4s}
.dig:hover .dig-img{transform:rotate(1deg) scale(1.02)}
.dig-img img{width:80%; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.dig h3{font-family:var(--display); font-weight:900; font-size:clamp(34px,5vw,70px); letter-spacing:-.04em; line-height:.9; margin:8px 0 14px; text-transform:uppercase}
.dig p{color:var(--bone-dim); max-width:46ch}
.dig .meta{color:var(--acid)}
.dig.future .dig-img{background:repeating-linear-gradient(45deg, var(--ink-2) 0 14px, var(--ink-3) 14px 28px); transform:none}
.dig.future .dig-img span{font-family:var(--display); font-weight:900; font-size:clamp(28px,4vw,48px); color:var(--bone-dim)}
@media (max-width:720px){ .dig{grid-template-columns:1fr} }

/* ---------- rules ---------- */
.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); border-top:1px solid var(--line)}
.rule{padding:30px 24px 34px 0; border-bottom:1px solid var(--line); position:relative; transition:padding .3s}
.rule:hover{padding-left:16px}
.rule:hover h3{color:var(--acid)}
.rule span{color:var(--hot)}
.rule h3{font-family:var(--display); font-weight:700; font-size:clamp(20px,2vw,26px); line-height:1.1; letter-spacing:-.02em; margin:10px 0 10px; transition:color .3s}
.rule p{margin:0; color:var(--bone-dim)}

/* ---------- instagram ---------- */
.ig{padding-bottom:clamp(80px,10vw,140px)!important}
.ig-big{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; text-decoration:none; padding:clamp(50px,8vw,110px) 20px; border-radius:32px; position:relative; overflow:hidden; isolation:isolate; background:var(--ink-2); border:1px solid var(--line)}
.ig-big::before{content:''; position:absolute; inset:-40%; z-index:-1; background:conic-gradient(from 0deg, var(--acid), var(--hot), var(--red), var(--acid)); opacity:0; transition:opacity .5s; animation:spin 8s linear infinite}
.ig-big::after{content:''; position:absolute; inset:3px; z-index:-1; border-radius:29px; background:var(--ink-2)}
.ig-big:hover::before{opacity:1}
@keyframes spin{to{transform:rotate(1turn)}}
.ig-handle{font-family:var(--display); font-weight:900; font-size:clamp(34px,9vw,140px); letter-spacing:-.05em; line-height:1; word-break:break-all}
.ig-go{font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--acid)}

/* ---------- footer ---------- */
.foot{text-align:center; padding:40px var(--gut) 60px; border-top:1px solid var(--line); color:var(--bone-dim)}
.foot-rat{width:90px; height:60px; margin:0 auto 14px; color:var(--bone-dim); transition:color .3s; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; position:relative}
.foot-rat svg{width:100%; height:100%}
.foot-rat:hover{color:var(--acid)}
.foot-rat.charging{color:var(--hot); animation:shake .12s infinite}
@keyframes shake{0%{transform:translate(1px,0)}50%{transform:translate(-1px,1px)}100%{transform:translate(0,-1px)}}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:24px; z-index:96; transform:translate(-50%,calc(100% + 40px)); visibility:hidden; background:var(--acid); color:var(--ink); font-family:var(--mono); font-size:13px; padding:12px 18px; border-radius:99px; transition:transform .4s cubic-bezier(.3,1.5,.5,1); max-width:calc(100vw - 32px); text-align:center}
.toast.on{transform:translate(-50%,0); visibility:visible}

/* topi in fuga (easter egg) */
.runner{position:fixed; z-index:97; width:60px; height:40px; color:var(--acid); pointer-events:none}
.runner svg{width:100%; height:100%}

/* beat: la pagina pulsa quando la musica è accesa */
body.live .sec-num, body.live .brand-rat{filter:drop-shadow(0 0 calc(var(--beat) * 14px) var(--acid))}
body.live .ticker{transform:rotate(-2deg) scaleY(calc(1 + var(--beat) * .06))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}