/* =========================================================
   BASE — reset, mundos, portal (rachadura) e transição
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,sans-serif;line-height:1.55;overflow-x:hidden;background:#0a0507}
html[data-world="anime"] body{background:#18171d}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Mundos ---------- */
.world{display:none;min-height:100vh;position:relative;overflow-x:clip}
html[data-world="glitch"] #glitchpop,
html[data-world="anime"] #animego,
.world.is-snapshot{display:block}
section[id],[id^="gp-"],[id^="ag-"]{scroll-margin-top:90px}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Menu mobile (compartilhado) ---------- */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:10px}
.nav-toggle span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   PORTAL — a rachadura no canto superior esquerdo
   ========================================================= */
.portal{position:fixed;top:0;left:0;z-index:1200;width:200px;height:84px;display:block;text-decoration:none;
  transform-origin:0 0;cursor:pointer;outline:none}
.portal-gash{position:absolute;inset:0;
  clip-path:polygon(0 6px,22px 4px,38px 14px,60px 10px,84px 20px,108px 17px,130px 27px,152px 25px,172px 35px,192px 36px,200px 44px,196px 50px,178px 58px,156px 52px,134px 58px,110px 48px,86px 52px,62px 40px,40px 44px,20px 30px,0 34px);
  transition:clip-path .5s cubic-bezier(.2,1.4,.3,1)}
.portal:hover .portal-gash,.portal:focus-visible .portal-gash{
  clip-path:polygon(0 0,22px 0,38px 7px,60px 3px,84px 12px,108px 9px,130px 19px,152px 17px,172px 27px,192px 28px,200px 36px,196px 58px,178px 66px,156px 60px,134px 66px,110px 56px,86px 60px,62px 48px,40px 52px,20px 38px,0 42px)}
.portal-peek{position:absolute;inset:0;display:none}
html[data-world="glitch"] .peek-anime,html[data-world="anime"] .peek-glitch{display:block}
.pk-name{position:absolute;left:24px;top:19px;transform:rotate(7.6deg);transform-origin:0 50%;white-space:nowrap;line-height:1}

/* peek: Anime GO visto de dentro da Glitch */
.peek-anime{background:
  repeating-linear-gradient(97deg,transparent 0 14px,rgba(255,255,255,.12) 14px 16px),
  linear-gradient(100deg,#6d28ff,#9b5cff 60%,#ff4fc1)}
.peek-anime .pk-name{font:italic 900 21px/1 Rubik,sans-serif;color:#fff;letter-spacing:.5px;
  -webkit-text-stroke:1px #1c1b22;text-shadow:2px 2px 0 #1c1b22;display:flex;align-items:center;gap:3px}
.peek-anime .pk-name svg{width:20px;height:16px;fill:#1fd16a;filter:drop-shadow(1px 1px 0 #1c1b22)}

/* peek: Glitch Pop visto de dentro do Anime GO */
.peek-glitch{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px),
  radial-gradient(120% 140% at 30% 50%,#5a0710,#0a0507 70%)}
.peek-glitch .pk-name{top:14px;font-size:22px;color:#fff;animation:pk-jit 2.4s steps(1) infinite}
.peek-glitch b{font:400 22px/1 "Permanent Marker",cursive;text-shadow:-2px 0 #00e5ff,2px 0 #ff2d3f}
.peek-glitch i{font:400 24px/1 "Rubik Glitch",sans-serif;font-style:normal;color:#ff3d7f;text-shadow:0 0 10px #ff3d7f}
@keyframes pk-jit{0%,86%,100%{transform:rotate(7.6deg)}88%{transform:rotate(7.6deg) translate(2px,-1px) skewX(-8deg)}92%{transform:rotate(7.6deg) translate(-2px,1px)}}

.portal-cracks{position:absolute;inset:0;width:200px;height:84px;overflow:visible;pointer-events:none}
.portal-cracks .edge{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.3;stroke-linejoin:round}
.portal-cracks .hair{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.8;stroke-dasharray:120;stroke-dashoffset:0;transition:stroke .3s}
.portal-cracks .spark{fill:#fff;opacity:.9}
html[data-world="glitch"] .portal-cracks{filter:drop-shadow(0 0 3px #b98bff) drop-shadow(0 0 8px rgba(155,92,255,.7))}
html[data-world="anime"] .portal-cracks{filter:drop-shadow(0 0 3px #ff3d7f) drop-shadow(0 0 8px rgba(224,30,43,.75))}
.portal .hair{animation:hair-glint 4.5s ease-in-out infinite}
@keyframes hair-glint{0%,70%,100%{stroke-opacity:.55}75%{stroke-opacity:1}80%{stroke-opacity:.4}85%{stroke-opacity:1}}
.portal:hover .portal-cracks{animation:portal-shake .35s linear}
.portal:hover .hair{stroke:#fff}
@keyframes portal-shake{25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
.portal-hint{position:absolute;left:150px;top:64px;font:700 10px/1 "Space Mono",monospace;letter-spacing:2px;text-transform:uppercase;
  color:#fff;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:.3s;pointer-events:none;
  background:rgba(0,0,0,.6);padding:5px 7px;border-radius:3px}
.portal:hover .portal-hint,.portal:focus-visible .portal-hint{opacity:1;transform:none}
html.is-shattering .portal{opacity:0;transition:opacity .2s}

@media (max-width:899px){
  .portal{transform:scale(.72)}
  .portal-hint{display:none}
}

/* =========================================================
   SHATTER — camada de estilhaços da transição
   ========================================================= */
.shatter{position:fixed;inset:0;z-index:5000;pointer-events:none;perspective:1400px;perspective-origin:50% 40%;overflow:hidden}
.shard{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden;overflow:hidden}
.shard-inner{position:absolute;left:0;right:0;top:0}
.shard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--ga,135deg),rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(255,255,255,.08) 60%,transparent);
  mix-blend-mode:screen}
.shatter-lines{position:fixed;inset:0;z-index:5001;pointer-events:none;width:100vw;height:100vh;overflow:visible}
.shatter-lines path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shatter-lines.to-anime{filter:drop-shadow(0 0 4px #b98bff) drop-shadow(0 0 14px #7b3cff)}
.shatter-lines.to-glitch{filter:drop-shadow(0 0 4px #ff3d7f) drop-shadow(0 0 14px #e01e2b)}
.shatter-flash{position:fixed;inset:0;z-index:5002;pointer-events:none;opacity:0}
.shatter-flash.to-anime{background:radial-gradient(circle at var(--ox) var(--oy),#fff 0,rgba(176,130,255,.75) 12%,rgba(123,60,255,.25) 35%,transparent 60%)}
.shatter-flash.to-glitch{background:radial-gradient(circle at var(--ox) var(--oy),#fff 0,rgba(255,61,127,.75) 12%,rgba(224,30,43,.25) 35%,transparent 60%)}
.shatter-title{position:fixed;inset:0;z-index:4999;display:grid;place-items:center;pointer-events:none;opacity:0}
.shatter-title span{font-size:clamp(48px,11vw,170px);line-height:1;white-space:nowrap}
.shatter-title.to-anime span{font-family:Rubik,sans-serif;font-style:italic;font-weight:900;color:#fff;-webkit-text-stroke:3px #1c1b22;text-shadow:8px 8px 0 #1c1b22}
.shatter-title.to-glitch span{font-family:"Rubik Glitch",sans-serif;color:#ff3d7f;text-shadow:-6px 0 #00e5ff,6px 0 #e01e2b,0 0 40px #ff3d7f}

/* intro após a troca */
.w-glitch.intro{animation:gp-intro .9s steps(1) both}
@keyframes gp-intro{
  0%{filter:hue-rotate(90deg) saturate(3);clip-path:inset(10% 0 60% 0);transform:translateX(-12px)}
  10%{filter:none;clip-path:inset(40% 0 20% 0);transform:translateX(14px)}
  20%{clip-path:inset(0 0 0 0);transform:translateX(-6px);filter:invert(1)}
  30%{filter:none;transform:none}
  45%{transform:translateX(4px) skewX(4deg);filter:hue-rotate(-60deg)}
  55%,100%{transform:none;filter:none;clip-path:none}
}
.w-anime.intro .ag-hero-copy{animation:ag-slam .7s cubic-bezier(.2,1.4,.3,1) both}
.w-anime.intro .ag-hero-panels{animation:ag-panels .9s cubic-bezier(.2,1,.3,1) both .1s}
.w-anime.intro::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.75) 0 .6deg,transparent .6deg 6deg);
  -webkit-mask:radial-gradient(circle at 50% 45%,transparent 18%,#000 60%);mask:radial-gradient(circle at 50% 45%,transparent 18%,#000 60%);
  animation:ag-speedburst .8s ease-out forwards}
@keyframes ag-slam{0%{transform:scale(1.35) skewX(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes ag-panels{0%{transform:translateX(30%) skewX(-20deg)}100%{transform:skewX(-8deg)}}
@keyframes ag-speedburst{0%{opacity:1;transform:scale(1.4) rotate(0)}100%{opacity:0;transform:scale(1) rotate(8deg)}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-height:88vh;max-width:min(92vw,720px);border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.7);animation:lb-in .35s cubic-bezier(.2,1.2,.3,1)}
.lightbox button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font-size:18px;cursor:pointer}
@keyframes lb-in{from{transform:scale(.85);opacity:0}}

/* ---------- Cross buttons ---------- */
.cross-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;white-space:nowrap;cursor:pointer}
.cross-btn svg{width:22px;height:18px;fill:currentColor}

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