/* =========================================================
   YU YU HAKUSHO — Brasil
   ========================================================= */
:root {
  --bg: #06080a;
  --bg-2: #0c1014;
  --ink: #f3efe8;
  --muted: #9aa4aa;
  --line: rgba(255, 255, 255, .12);
  --red: #e3121b;
  --spirit: #3cd6ff;
  --spirit-glow: rgba(60, 214, 255, .55);
  --teal: #2de0b0;
  --accent: var(--spirit);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kanji: "Noto Serif JP", "Yu Mincho", serif;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--spirit); outline-offset: 3px; }
::selection { background: var(--spirit); color: #000; }

/* grão de filme por cima de tudo */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  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)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07; animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -3%) }
  60% { transform: translate(-2%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) }
}

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92; margin: 0; }
h2 { font-size: clamp(44px, 8vw, 128px); }
.eyebrow {
  margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--spirit);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
}
.btn--spirit { background: var(--spirit); color: #001017; box-shadow: 0 0 0 0 var(--spirit-glow); }
.btn--spirit:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -6px var(--spirit-glow); }
.btn--ghost { border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); background: rgba(255, 255, 255, .04); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   LOADER
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(circle at 50% 45%, #0b1a22 0%, var(--bg) 60%);
  transition: opacity .8s var(--ease), visibility .8s;
  padding: 24px; text-align: center;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__orb { width: 140px; height: 140px; display: grid; place-items: center; margin-bottom: 18px; }
.loader__orb span {
  width: calc(14px + var(--p, 0) * 1.1px); height: calc(14px + var(--p, 0) * 1.1px); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #dff8ff 30%, #8fe8ff 62%, var(--spirit) 100%);
  box-shadow: 0 0 calc(20px + var(--p, 0) * .8px) var(--spirit), 0 0 calc(var(--p, 0) * 1.6px) var(--spirit-glow);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { filter: brightness(1.4); transform: scale(1.06); } }
.loader__count { margin: 0; font: 400 64px/1 var(--display); }
.loader__hint { margin: 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.loader__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.flash { position: fixed; inset: 0; z-index: 101; background: #e9fbff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0 } 12% { opacity: 1 } 100% { opacity: 0 } }

/* =========================================================
   CURSOR (só em mouse)
   ========================================================= */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none;
    width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--spirit) 45%, transparent 70%);
    box-shadow: 0 0 18px var(--spirit);
    mix-blend-mode: screen;
    transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s;
  }
  .cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: .55; }
  .cursor.charging { transition: none; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  transition: background .4s, backdrop-filter .4s, transform .5s var(--ease);
}
.nav.scrolled { background: rgba(6, 8, 10, .72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.nav.hide { transform: translateY(-100%); }
.nav__logo img { height: 40px; width: auto; filter: drop-shadow(0 2px 10px rgba(227, 18, 27, .4)); }
.nav__links { display: flex; gap: 6px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 10px 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
  transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--spirit);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: #fff; }
.nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); }
.nav__links .nav__cta { margin-left: 8px; border: 1px solid var(--spirit); border-radius: 999px; color: var(--spirit); }
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover { background: var(--spirit); color: #001017; }
.nav__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--spirit)); }

.sound { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 3px; height: 30%; background: currentColor; border-radius: 2px; transition: height .3s; }
.sound[aria-pressed="true"] { color: var(--spirit); border-color: rgba(60, 214, 255, .5); }
.sound[aria-pressed="true"] .sound__bars i { animation: eq 1s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 25% } 50% { height: 100% } }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .nav { height: 64px; gap: 10px; }
  .nav__logo img { height: 32px; }
  .burger { display: block; }
  .sound { margin-left: auto; }
  .sound__label { display: none; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; margin: 0; padding: 96px var(--gutter) 40px;
    flex-direction: column; justify-content: center; gap: 0;
    background: rgba(6, 8, 10, .96); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  .nav__links a { font: 400 clamp(40px, 11vw, 64px)/1.15 var(--display); padding: 6px 0; color: #fff; transform: translateY(20px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
  .nav__links a::after { display: none; }
  .nav__links .nav__cta { margin: 18px 0 0; border: 0; color: var(--spirit); }
  .menu-open .nav__links { opacity: 1; visibility: visible; }
  .menu-open .nav__links a { transform: none; opacity: 1; }
  .menu-open .nav__links a:nth-child(2) { transition-delay: .05s } .menu-open .nav__links a:nth-child(3) { transition-delay: .1s }
  .menu-open .nav__links a:nth-child(4) { transition-delay: .15s } .menu-open .nav__links a:nth-child(5) { transition-delay: .2s }
  .menu-open .nav__links a:nth-child(6) { transition-delay: .25s }
  .menu-open { overflow: hidden; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.hero__bg { position: absolute; inset: -2%; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.05); } }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(6, 8, 10, .4) 22%, transparent 45%),
    radial-gradient(55% 75% at 82% 88%, rgba(6, 8, 10, .92), rgba(6, 8, 10, .5) 55%, transparent 80%);
}
.hero__content { position: relative; z-index: 2; margin-left: auto; width: min(44%, 680px); padding: 0 var(--gutter) clamp(72px, 13vh, 150px) 0; }
.hero__title { font-size: clamp(52px, 6.4vw, 120px); line-height: .88; }
.hero__title span { display: block; }
.hero__title span:last-child { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero__lead { max-width: 480px; margin: 22px 0 30px; font-size: clamp(16px, 1.25vw, 18px); color: rgba(255, 255, 255, .82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .reveal:nth-child(2) { transition-delay: .1s } .hero .reveal:nth-child(3) { transition-delay: .2s } .hero .reveal:nth-child(4) { transition-delay: .3s }
.hero__egg { position: absolute; left: var(--gutter); bottom: 32px; z-index: 2; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .75); transition: opacity .5s; }
.hero__egg b { color: var(--spirit); font-weight: 600; }
.hero__scroll { position: absolute; left: 50%; bottom: 24px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 20px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: scrolly 1.8s var(--ease) infinite; }
@keyframes scrolly { 0% { opacity: 0; transform: translateY(0) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(14px) } }
@media (hover: none), (max-width: 760px) { .hero__egg { display: none; } }
/* telas mais estreitas / retrato: texto embaixo, sobre os personagens */
@media (max-aspect-ratio: 4/3), (max-width: 1000px) {
  .hero__bg img { object-position: 24% 30%; }
  .hero__content { margin: 0; width: auto; max-width: 720px; padding: 0 var(--gutter) clamp(56px, 10vh, 120px); }
  .hero__title { font-size: clamp(54px, 12vw, 120px); }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 4%, rgba(6, 8, 10, .75) 40%, rgba(6, 8, 10, .05) 72%); }
  .hero__scroll { display: none; }
}

/* raio do Leigan */
.beam { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }
.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px) } 20%, 80% { transform: translate(4px, -2px) }
  30%, 50%, 70% { transform: translate(-7px, 3px) } 40%, 60% { transform: translate(7px, -3px) }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: var(--bg); }
.marquee__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font: 400 clamp(28px, 4vw, 52px)/1 var(--display); text-transform: uppercase; }
.marquee b { font: 900 clamp(22px, 3vw, 38px)/1 var(--kanji); color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   SECTIONS (base)
   ========================================================= */
section { position: relative; }
.worlds, .chars, .gallery, .trailers, .watch { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.section-head { max-width: 1400px; margin: 0 auto clamp(40px, 6vw, 72px); }
.section-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.section-head__lead { max-width: 460px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }

/* =========================================================
   COMPARADOR
   ========================================================= */
.compare {
  position: relative; max-width: 1400px; margin: 0 auto; aspect-ratio: 4 / 3; max-height: 88vh; width: 100%;
  border-radius: clamp(14px, 2vw, 28px); overflow: hidden; touch-action: pan-y; user-select: none; cursor: ew-resize;
  box-shadow: 0 40px 120px -40px rgba(60, 214, 255, .35);
}
@media (min-aspect-ratio: 4/3) { .compare { aspect-ratio: auto; height: 88vh; } }
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; pointer-events: none; }
.compare__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag {
  position: absolute; top: 20px; z-index: 2; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px);
}
.compare__tag--l { left: 20px; color: #ff6a70; }
.compare__tag--r { right: 20px; color: var(--teal); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 24px var(--spirit), 0 0 4px var(--spirit); }
.compare__knob {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%;
  display: grid; place-items: center; background: rgba(6, 8, 10, .5); backdrop-filter: blur(10px); border: 2px solid #fff;
  box-shadow: 0 0 30px var(--spirit-glow); transition: scale .3s var(--ease);
}
.compare:hover .compare__knob, .compare.dragging .compare__knob { scale: 1.12; }
.compare__knob svg { width: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare.hint { transition: --pos 0s; }

.stats { max-width: 1400px; margin: clamp(48px, 7vw, 96px) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: 28px 20px 0 0; }
.stats dt { font: 400 clamp(52px, 7vw, 104px)/1 var(--display); }
.stats dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.stats .reveal:nth-child(2) { transition-delay: .1s } .stats .reveal:nth-child(3) { transition-delay: .2s } .stats .reveal:nth-child(4) { transition-delay: .3s }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }

/* =========================================================
   PERSONAGENS
   ========================================================= */
.chars { --accent: #19a37a; overflow: hidden; padding-bottom: 40px; }
.chars::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 55% 60%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  transition: background .8s;
}
.chars__kanji {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: 900 clamp(120px, 22vw, 360px)/1 var(--kanji); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08);
  transition: opacity .5s;
}
.seg { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.seg button[aria-selected="true"] { color: #001017; }
.seg__pill { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--accent); transition: transform .5s var(--ease), width .5s var(--ease), background .6s; }

.chars__layout { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(0, 1.25fr) 1fr; gap: clamp(20px, 3vw, 56px); align-items: center; }
.chars__list { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.chars__list button {
  display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 14px 0; text-align: left; border-bottom: 1px solid var(--line);
  font: 400 clamp(30px, 3.6vw, 56px)/1 var(--display); text-transform: uppercase; color: rgba(255, 255, 255, .28);
  transition: color .4s, padding .4s var(--ease);
}
.chars__list button small { font: 600 12px/1 var(--sans); letter-spacing: .15em; color: var(--muted); }
.chars__list button:hover { color: rgba(255, 255, 255, .7); }
.chars__list button[aria-selected="true"] { color: #fff; padding-left: 14px; box-shadow: inset 3px 0 0 var(--accent); }

.chars__stage { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: clamp(14px, 2vw, 28px); overflow: hidden; background: #000; touch-action: pan-y; box-shadow: 0 50px 120px -40px color-mix(in srgb, var(--accent) 70%, transparent); transition: box-shadow .8s; }
.chars__stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform .9s var(--ease), filter .45s; }
.chars__stage img.swap { opacity: 0; transform: scale(1.06); filter: blur(6px); }
.chars__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 40%); pointer-events: none; }
.chars__swipe { display: none; position: absolute; bottom: 14px; left: 0; right: 0; z-index: 1; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.chars__info { transition: opacity .4s, transform .4s var(--ease); }
.chars__info.swap { opacity: 0; transform: translateY(14px); }
.chars__info .role { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.chars__info h3 { font-size: clamp(42px, 4.6vw, 76px); }
.chars__info .jp { margin: 8px 0 20px; font: 900 22px/1 var(--kanji); color: var(--muted); }
.chars__info p.desc { margin: 0 0 24px; color: rgba(255, 255, 255, .78); }
.chars__info dl { margin: 0; display: grid; gap: 0; }
.chars__info dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.chars__info dt { color: var(--muted); }
.chars__info dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 960px) {
  .chars__layout { grid-template-columns: 1fr; }
  .chars__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .chars__list::-webkit-scrollbar { display: none; }
  .chars__list button { width: auto; white-space: nowrap; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 22px; }
  .chars__list button small { display: none; }
  .chars__list button[aria-selected="true"] { padding-left: 18px; box-shadow: none; background: var(--accent); border-color: var(--accent); color: #001017; }
  .chars__stage { aspect-ratio: 4 / 5; }
  .chars__swipe { display: block; }
}

/* =========================================================
   SAGAS — scroll horizontal fixado
   ========================================================= */
.sagas { margin-top: clamp(96px, 12vw, 160px); }
.sagas__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sagas__head { position: absolute; top: 96px; left: var(--gutter); right: var(--gutter); z-index: 3; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.sagas__counter { margin: 0; font: 400 22px/1 var(--display); letter-spacing: .06em; }
.sagas__counter span { color: var(--spirit); }
.sagas__track { display: flex; height: 100%; will-change: transform; }
.saga { position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; }
.saga img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.saga.active img { transform: scale(1); }
.saga::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 8, 10, .92) 0%, rgba(6, 8, 10, .35) 45%, rgba(6, 8, 10, .2) 100%); }
.saga__text { position: absolute; left: var(--gutter); bottom: clamp(64px, 12vh, 120px); z-index: 2; max-width: 620px; }
.saga__num { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--spirit); }
.saga h3 { font-size: clamp(56px, 9vw, 150px); }
.saga__text p:last-child { margin: 18px 0 0; max-width: 480px; font-size: clamp(16px, 1.3vw, 18px); color: rgba(255, 255, 255, .82); }
.saga__kanji { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; z-index: 2; writing-mode: vertical-rl; font: 900 clamp(48px, 8vh, 96px)/1 var(--kanji); color: rgba(255, 255, 255, .9); text-shadow: 0 0 40px rgba(0, 0, 0, .6); }
.sagas__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; z-index: 3; height: 2px; background: var(--line); }
.sagas__bar span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--spirit); box-shadow: 0 0 12px var(--spirit); }

/* fallback: sem scroll fixado (mobile / movimento reduzido) */
.sagas.native .sagas__sticky { position: relative; height: auto; }
.sagas.native .sagas__head { position: relative; top: 0; padding: 0 var(--gutter) 24px; left: 0; right: 0; }
.sagas.native .sagas__track { overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gutter); scrollbar-width: none; height: auto; }
.sagas.native .sagas__track::-webkit-scrollbar { display: none; }
.sagas.native .saga { flex: 0 0 86vw; height: 78svh; max-height: 720px; border-radius: 20px; scroll-snap-align: center; }
.sagas.native .saga__text { left: 22px; right: 22px; bottom: 28px; }
.sagas.native .saga h3 { font-size: clamp(40px, 11vw, 72px); }
.sagas.native .sagas__sticky { padding-top: 88px; }
.sagas.native .saga__kanji { top: 24px; right: 18px; translate: none; font-size: 40px; }
.sagas.native .sagas__bar { position: relative; left: 0; right: 0; bottom: 0; margin: 20px var(--gutter) 0; }

/* =========================================================
   GALERIA
   ========================================================= */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: all .3s; }
.filters button:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.filters button.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(140px, 15vw, 240px); grid-auto-flow: dense; gap: clamp(8px, 1vw, 16px); }
.tile { position: relative; margin: 0; grid-column: span 4; grid-row: span 2; overflow: hidden; border-radius: clamp(10px, 1.2vw, 18px); background: var(--bg-2); cursor: zoom-in; opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tile.in { opacity: 1; transform: none; }
.tile.xl { grid-column: span 8; grid-row: span 3; }
.tile.wide { grid-column: span 6; grid-row: span 2; }
.tile.tall { grid-column: span 4; grid-row: span 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 45%); opacity: 0; transition: opacity .5s; }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; transform: translateY(12px); opacity: 0; transition: all .5s var(--ease); }
.tile figcaption small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--spirit); }
.tile:hover figcaption, .tile:focus-visible figcaption { transform: none; opacity: 1; }
.tile.out { display: none; }
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .tile, .tile.wide { grid-column: span 1; grid-row: span 1; }
  .tile.xl { grid-column: span 2; grid-row: span 2; }
  .tile.tall { grid-column: span 1; grid-row: span 2; }
  .tile figcaption { opacity: 1; transform: none; font-size: 13px; left: 12px; bottom: 10px; }
  .tile figcaption small { display: none; }
  .tile::after { opacity: 1; }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(3, 4, 5, .95); backdrop-filter: blur(10px); animation: fadein .35s ease; }
.lightbox[hidden] { display: none; }
@keyframes fadein { from { opacity: 0 } }
.lightbox figure { margin: 0; max-width: 94vw; }
.lightbox img { max-width: 94vw; max-height: 82vh; max-height: 82svh; border-radius: 12px; object-fit: contain; animation: zoomin .45s var(--ease); touch-action: pan-y; }
@keyframes zoomin { from { opacity: 0; transform: scale(.94) } }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px 0; color: var(--muted); font-size: 14px; }
.lightbox figcaption span:first-child { color: #fff; font-weight: 600; }
.lightbox__close { position: absolute; top: 16px; right: 16px; width: 52px; height: 52px; border-radius: 50%; font-size: 20px; background: rgba(255, 255, 255, .08); z-index: 2; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; width: 60px; height: 60px; border-radius: 50%; font-size: 36px; line-height: 1; background: rgba(255, 255, 255, .08); z-index: 2; transition: background .3s; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--spirit); color: #001017; }
.lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; }
@media (max-width: 700px) { .lightbox__nav { top: auto; bottom: 16px; translate: none; width: 52px; height: 52px; } }

/* =========================================================
   TRAILERS
   ========================================================= */
.player { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: clamp(12px, 2vw, 24px); }
.player__screen { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(14px, 2vw, 24px); overflow: hidden; background: #000; }
.player__screen video, .player__poster, .player__frame, .player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__screen video { object-fit: contain; background: #000; opacity: 0; }
.player__poster { object-fit: cover; transition: opacity .4s; }
.player.playing .player__poster { opacity: 0; }
.player.playing.is-mp4 video { opacity: 1; }
.player__play { position: absolute; inset: 0; margin: auto; width: clamp(80px, 9vw, 120px); height: clamp(80px, 9vw, 120px); border-radius: 50%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .4); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.player__play svg { width: 40%; fill: #fff; margin-left: 6%; }
.player__play:hover { transform: scale(1.08); background: var(--spirit); }
.player__play:hover svg { fill: #001017; }
.player.playing .player__play { opacity: 0; pointer-events: none; }
.player__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.player__list button { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; width: 100%; padding: 10px; border-radius: 16px; text-align: left; border: 1px solid var(--line); transition: background .3s, border-color .3s; }
.player__list button:hover { background: rgba(255, 255, 255, .05); }
.player__list button[aria-current="true"] { border-color: var(--spirit); background: rgba(60, 214, 255, .08); }
.player__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.player__list strong { display: block; font: 400 24px/1 var(--display); text-transform: uppercase; }
.player__list small { color: var(--muted); font-size: 13px; }
.player__list em { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; font: 700 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; background: rgba(60, 214, 255, .14); color: var(--spirit); }
.player__list em.en { background: rgba(255, 255, 255, .08); color: var(--muted); }
@media (max-width: 900px) {
  .player { grid-template-columns: 1fr; }
  .player__list { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .player__list li { scroll-snap-align: start; }
  .player__list button { grid-template-columns: 96px 1fr; }
}

/* =========================================================
   ONDE ASSISTIR
   ========================================================= */
.watch { padding-bottom: clamp(96px, 12vw, 160px); }
.watch__panels { display: flex; gap: clamp(10px, 1.4vw, 20px); height: 82vh; height: 82svh; min-height: 520px; max-width: 1600px; margin: 0 auto; }
.panel { position: relative; flex: 1; overflow: hidden; border-radius: clamp(16px, 2vw, 28px); transition: flex 1s var(--ease); isolation: isolate; }
.panel__poster, .panel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__poster { transition: transform 1.4s var(--ease), opacity .6s; }
.panel__poster { object-position: center 20%; }
.panel__video { opacity: 0; transition: opacity .8s; }
.panel.playing .panel__video { opacity: 1; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .1)); transition: opacity .6s; }
.panel--anime { box-shadow: inset 0 0 0 1px rgba(227, 18, 27, .4); }
.panel--la { box-shadow: inset 0 0 0 1px rgba(45, 224, 176, .35); }
.panel__body { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 44px); z-index: 2; }
.panel__logo { height: clamp(56px, 8vw, 110px); width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: 18px; transition: transform .8s var(--ease); transform-origin: left bottom; }
.panel__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.panel__meta span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.panel__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: gap .4s var(--ease), transform .4s var(--ease); }
.panel__cta svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.panel--anime .panel__cta { background: var(--red); color: #fff; }
.panel--la .panel__cta { background: var(--teal); color: #00140e; }
@media (hover: hover) and (min-width: 901px) {
  .watch__panels:hover .panel { flex: .7; }
  .watch__panels .panel:hover { flex: 1.6; }
  .panel:hover .panel__poster { transform: scale(1.05); }
  .panel:hover .panel__logo { transform: scale(1.08); }
  .panel:hover .panel__cta { gap: 20px; }
}
@media (max-width: 900px) {
  .watch__panels { flex-direction: column; height: auto; min-height: 0; }
  .panel { flex: none; height: 72svh; min-height: 440px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; overflow: hidden; padding: 80px var(--gutter) 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer__kanji { font: 900 clamp(80px, 20vw, 320px)/1 var(--kanji); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); margin-bottom: 32px; white-space: nowrap; }
.footer p { margin: 0 0 6px; max-width: 640px; }
.footer__top { display: inline-block; margin-top: 24px; color: var(--ink); font-weight: 600; }

/* =========================================================
   MANGÁ
   ========================================================= */
.manga { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.manga__hint-touch { display: none; }
@media (hover: none) { .manga__hint-fine { display: none; } .manga__hint-touch { display: inline; } }
.manga__layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.page {
  position: relative; padding: clamp(14px, 2vw, 28px); padding-top: clamp(34px, 3.4vw, 48px); border-radius: 4px;
  background: #f1ebde; color: #111; rotate: -1.6deg;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .2);
  transition: rotate .8s var(--ease), opacity 1s var(--ease), transform 1s var(--ease);
}
.page:hover { rotate: 0deg; }
.page__read { position: absolute; top: 12px; right: clamp(14px, 2vw, 28px); font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b6255; }
.page__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.15fr 1fr 1fr; gap: clamp(6px, .8vw, 12px); aspect-ratio: 5 / 6; }
.panel-m { position: relative; margin: 0; overflow: hidden; background: #fff; border: 3px solid #111; cursor: crosshair; }
.p1 { grid-column: 1 / -1; } .p2 { grid-column: 3 / 7; } .p3 { grid-column: 1 / 3; grid-row: 2; }
.p4 { grid-column: 5 / 7; } .p5 { grid-column: 3 / 5; grid-row: 3; } .p6 { grid-column: 1 / 3; grid-row: 3; }
.panel-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-m .ink { filter: grayscale(1) contrast(1.9) brightness(1.12); z-index: 0; }
.panel-m::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .45; background: radial-gradient(circle, #000 28%, transparent 31%) 0 0 / 5px 5px; }
.panel-m .color { z-index: 2; clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path .9s var(--ease); }
.panel-m.on .color { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.panel-m::before { content: attr(data-n); position: absolute; top: 6px; right: 6px; z-index: 4; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sans); background: #111; color: #f1ebde; }
.sfx { position: absolute; z-index: 3; font: 900 clamp(28px, 4vw, 64px)/1 var(--kanji); color: #fff; -webkit-text-stroke: 2px #111; paint-order: stroke; pointer-events: none; transition: transform .6s var(--ease); }
.sfx--r { right: 6%; bottom: 8%; rotate: -8deg; } .sfx--l { left: 8%; top: 12%; rotate: 10deg; } .sfx--c { left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; font-size: clamp(22px, 3vw, 46px); }
.panel-m.on .sfx { transform: scale(1.15); }

.facts { margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.facts > div { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 400 clamp(40px, 4.6vw, 72px)/1 var(--display); }
.facts > div:first-child { grid-column: 1 / -1; }
.facts > div:first-child dt { color: var(--spirit); }
.facts dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.callout { padding: 18px 0 18px 20px; border-left: 2px solid var(--red); margin-bottom: 14px; }
.callout p { margin: 0; color: rgba(255, 255, 255, .8); }
.callout .callout__tag { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #ff6a70; }
@media (max-width: 900px) {
  .manga__layout { grid-template-columns: 1fr; }
  .page { rotate: 0deg; padding: 10px; padding-top: 32px; }
  .page__grid { aspect-ratio: 3 / 4; }
}

/* =========================================================
   TOGASHI
   ========================================================= */
.author { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.author__layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 110px); }
.author__sticky { position: sticky; top: 120px; }
.author__kanji {
  font: 900 clamp(60px, 8vw, 140px)/1 var(--kanji); letter-spacing: -.02em; margin: 0 0 12px; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
  background: linear-gradient(90deg, var(--red) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: background-position 2.2s var(--ease) .3s, opacity 1s var(--ease), transform 1s var(--ease);
}
.author__kanji.in { background-position: 0 0; }
.author__lead { max-width: 460px; margin: 22px 0 0; color: rgba(255, 255, 255, .8); font-size: 17px; }

.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 36px; --tl: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline::after { background: linear-gradient(var(--spirit), var(--red)); transform-origin: top; transform: scaleY(var(--tl)); box-shadow: 0 0 14px var(--spirit-glow); }
.tl { position: relative; display: grid; grid-template-columns: clamp(96px, 10vw, 150px) 1fr; gap: 20px; padding: 0 0 clamp(36px, 5vw, 64px); }
.tl::before { content: ""; position: absolute; left: -36px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255, 255, 255, .3); z-index: 1; transition: all .5s; }
.tl.lit::before { background: var(--spirit); border-color: var(--spirit); box-shadow: 0 0 16px var(--spirit); }
.tl__year { font: 400 clamp(40px, 4.4vw, 68px)/.9 var(--display); color: rgba(255, 255, 255, .25); transition: color .5s; }
.tl.lit .tl__year { color: #fff; }
.tl h3 { font-size: clamp(24px, 2.2vw, 34px); margin-bottom: 8px; }
.tl p { margin: 0; color: var(--muted); }
.tl--big h3 { color: var(--spirit); font-size: clamp(32px, 3.4vw, 52px); }
.tl--big p { color: rgba(255, 255, 255, .85); }
.tl--big img { width: 100%; margin-top: 18px; border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
  .author__layout { grid-template-columns: 1fr; }
  .author__sticky { position: static; }
  .tl { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
   YOUTUBE (carrega só no clique)
   ========================================================= */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(14px, 2vw, 24px); overflow: hidden; background: #000; cursor: pointer; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt img { transition: transform 1.2s var(--ease), filter .5s; filter: brightness(.75); }
.yt:hover img { transform: scale(1.04); filter: brightness(.9); }
.yt::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(64px, 8vw, 104px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 40% no-repeat;
  backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .4); transition: transform .4s var(--ease), background-color .3s; }
.yt:hover::before { transform: scale(1.1); background-color: var(--red); }
.yt__label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; font-size: 14px; color: rgba(255, 255, 255, .8); text-shadow: 0 2px 10px #000; }
.yt__label b { color: #fff; }
.yt.on { cursor: auto; } .yt.on::before, .yt.on .yt__label, .yt.on img { display: none; }
.yt--hero { max-width: 1400px; margin: 0 auto; }
.yt--small { margin-top: 24px; max-width: 520px; }

/* foto de pessoa com fallback em monograma */
.person-photo { position: relative; margin: 0; overflow: hidden; border-radius: clamp(14px, 2vw, 24px); aspect-ratio: 4 / 5;
  background: radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--c) 70%, #000), #050607 75%); }
.person-photo::after { content: attr(data-initials); position: absolute; left: 8%; bottom: 4%; font: 400 clamp(72px, 9vw, 150px)/.9 var(--display); color: rgba(255, 255, 255, .92); }
.person-photo__kanji { position: absolute; right: 6%; top: 6%; writing-mode: vertical-rl; font: 900 clamp(28px, 3vw, 48px)/1 var(--kanji); color: rgba(255, 255, 255, .22); }
.person-photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.person-photo.has-photo::after, .person-photo.has-photo .person-photo__kanji { display: none; }

.insta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--spirit); }
.insta::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 5px; background: radial-gradient(circle, transparent 3px, currentColor 3.5px, currentColor 5px, transparent 5.5px); }
.insta:hover { text-decoration: underline; }
.insta[hidden] { display: none; }

/* =========================================================
   DUBLAGEM
   ========================================================= */
.dub { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; overflow: hidden; }
.dub__bg { position: absolute; top: clamp(60px, 8vw, 120px); right: -4vw; font: 900 clamp(80px, 13vw, 220px)/1 var(--kanji); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07); white-space: nowrap; pointer-events: none; }
.director { max-width: 1400px; margin: clamp(56px, 8vw, 120px) auto 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.director .role { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #19c48f; }
.director h3 { font-size: clamp(56px, 7vw, 120px); }
.director__text > p:not(.role) { max-width: 560px; margin: 18px 0 0; color: rgba(255, 255, 255, .82); font-size: 17px; }
.cast__title { max-width: 1400px; margin: clamp(64px, 9vw, 120px) auto 24px; font-size: clamp(36px, 4vw, 60px); }
.cast { list-style: none; max-width: 1400px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.cast li { transition: transform .5s var(--ease), opacity 1s var(--ease); }
.cast li:hover { transform: translateY(-6px); }
.cast .person-photo::after { font-size: clamp(54px, 5vw, 80px); }
.cast h4 { margin: 14px 0 2px; font: 400 26px/1 var(--display); text-transform: uppercase; }
.cast p { margin: 0; color: var(--muted); font-size: 14px; }
.cast p b { color: var(--ink); font-weight: 600; }
.cast .insta { margin-top: 8px; font-size: 13px; }
.cast__note { max-width: 1400px; margin: 28px auto 0; color: var(--muted); }
@media (max-width: 900px) { .director { grid-template-columns: 1fr; } .director__photo { max-width: 420px; } }
@media (max-width: 520px) { .cast { grid-template-columns: 1fr 1fr; } .cast h4 { font-size: 20px; } }

/* =========================================================
   EDUARDO MIRANDA
   ========================================================= */
.miranda { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.miranda__layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.miranda__tag { margin: 18px 0 22px; font: 400 clamp(24px, 2.4vw, 36px)/1.1 var(--display); text-transform: uppercase; color: var(--red); }
.miranda__text > p:not(.eyebrow):not(.miranda__tag) { color: rgba(255, 255, 255, .82); font-size: 17px; max-width: 540px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.miranda__media { display: grid; grid-template-columns: .6fr 1fr; gap: 16px; align-items: end; }
.miranda__media .yt { grid-column: 1 / -1; }
.miranda__photo { aspect-ratio: 3 / 4; grid-column: 1; }
.miranda__photo:not(.has-photo) { display: none; }
@media (max-width: 900px) { .miranda__layout { grid-template-columns: 1fr; } .miranda__media { grid-template-columns: 1fr; } .miranda__photo { max-width: 320px; } }

/* =========================================================
   SLUGFEST
   ========================================================= */
.game { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.game::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), radial-gradient(60% 50% at 50% 45%, rgba(227, 18, 27, .18), transparent 70%); }
.hud { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(46px, 5vw, 64px) clamp(10px, 1.5vw, 22px) clamp(10px, 1.5vw, 22px); }
.hud__corner { position: absolute; width: 34px; height: 34px; border: 3px solid var(--spirit); filter: drop-shadow(0 0 8px var(--spirit)); }
.hud__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .hud__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .hud__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hud__top { position: absolute; top: 12px; left: clamp(40px, 5vw, 70px); right: clamp(40px, 5vw, 70px); display: flex; align-items: center; gap: 12px; font: 400 18px/1 var(--display); }
.hud__bar { flex: 1; height: 12px; border: 2px solid #fff; transform: skewX(-20deg); overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd23c, #ff6a1f); transform-origin: right; animation: hp 6s ease-in-out infinite; }
.hud__bar--r i { transform-origin: left; background: linear-gradient(270deg, #ffd23c, #ff6a1f); animation-delay: -3s; }
@keyframes hp { 0%, 100% { transform: scaleX(1) } 40% { transform: scaleX(.35) } 60% { transform: scaleX(.6) } }
.hud__ko { padding: 4px 10px; background: var(--red); color: #fff; font-size: 20px; transform: skewX(-12deg); }
.game__grid { max-width: 1400px; margin: clamp(32px, 4vw, 56px) auto 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.game__feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.game__feats li { padding: 22px; background: var(--bg); }
.game__feats b { display: block; font: 400 24px/1.05 var(--display); text-transform: uppercase; margin-bottom: 6px; }
.game__feats span { color: var(--muted); font-size: 14px; }
.game__start { margin: 0 0 18px; font: 400 clamp(36px, 4vw, 60px)/1 var(--display); text-transform: uppercase; color: var(--spirit); text-shadow: 0 0 20px var(--spirit-glow); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.game__stores { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .game__grid { grid-template-columns: 1fr; }
  .game__feats { grid-template-columns: 1fr; }
  .hud__top { font-size: 14px; gap: 8px; }
}

/* =========================================================
   GARIMPO
   ========================================================= */
.shop { padding: 0 var(--gutter) clamp(96px, 12vw, 160px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); width: min(100%, 640px); }
.search__prefix { padding-left: 12px; font-size: 13px; font-weight: 600; color: var(--spirit); white-space: nowrap; }
.search input { flex: 1; min-width: 140px; min-height: 44px; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }
.search button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.search [data-store="ml"] { background: #ffe600; color: #2d3277; }
.search [data-store="ebay"] { background: #fff; color: #111; }
@media (max-width: 600px) { .search { border-radius: 22px; } .search input { flex-basis: 100%; padding: 0 12px; } .search button { flex: 1; } }

.shop__grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.item { position: relative; overflow: hidden; border-radius: clamp(14px, 1.6vw, 22px); aspect-ratio: 4 / 5; isolation: isolate; }
.item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85) brightness(.8); }
.item:hover img { transform: scale(1.06); filter: saturate(1.1) brightness(.9); }
.item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 5%, rgba(0, 0, 0, .1) 60%); }
.item__num { position: absolute; top: 16px; left: 18px; font: 600 12px/1 var(--sans); letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
.item__jp { position: absolute; top: 14px; right: 16px; writing-mode: vertical-rl; font: 900 28px/1 var(--kanji); color: rgba(255, 255, 255, .55); }
.item__body { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.item h3 { font-size: clamp(32px, 3vw, 46px); }
.item p { margin: 8px 0 16px; color: rgba(255, 255, 255, .78); font-size: 14px; }
.item__links { display: flex; gap: 8px; }
.item__links a { flex: 1; display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .3s var(--ease); }
.item__links a:hover { transform: translateY(-2px); }
.item__links .ml { background: #ffe600; color: #2d3277; }
.item__links .eb { background: rgba(255, 255, 255, .92); color: #111; }
.shop__note { max-width: 1400px; margin: 24px auto 0; color: var(--muted); font-size: 14px; }
@media (max-width: 1000px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .shop__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .shop__grid::-webkit-scrollbar { display: none; }
  .item { scroll-snap-align: start; }
}

/* =========================================================
   JBC (mangá)
   ========================================================= */
.jbc { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; margin-top: 22px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.jbc img { width: 100%; border-radius: 6px; box-shadow: 0 16px 40px -10px #000; rotate: -3deg; transition: rotate .5s var(--ease); }
.jbc:hover img { rotate: 0deg; }
.jbc p { margin: 0; color: rgba(255, 255, 255, .8); }
.jbc .callout__tag { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--spirit); }
.jbc__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jbc__links .btn { min-height: 44px; padding: 0 18px; font-size: 12px; }
@media (max-width: 480px) { .jbc { grid-template-columns: 80px 1fr; padding: 14px; } }

/* =========================================================
   ESPECIAIS
   ========================================================= */
.specials { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.specials__layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.specials__screen { box-shadow: 0 40px 120px -40px rgba(227, 18, 27, .5); }
.specials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.special { width: 100%; text-align: left; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.special:hover { background: rgba(255, 255, 255, .04); transform: translateX(4px); }
.special[aria-current="true"] { border-color: var(--red); background: rgba(227, 18, 27, .1); }
.special__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.special__meta span { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .08); color: var(--muted); }
.special__meta .lang { background: rgba(60, 214, 255, .14); color: var(--spirit); }
.special strong { display: block; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; }
.special small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.special p { margin: 10px 0 0; color: rgba(255, 255, 255, .75); font-size: 14px; display: none; }
.special[aria-current="true"] p { display: block; }
.specials__note { max-width: 1400px; margin: 20px auto 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .specials__layout { grid-template-columns: 1fr; } }

/* =========================================================
   YUYU20
   ========================================================= */
.music { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; overflow: hidden; }
.music h2 { font-size: clamp(80px, 16vw, 260px); background: linear-gradient(90deg, #fff, var(--spirit) 60%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.music__layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.disc { position: relative; aspect-ratio: 1.45 / 1; }
.disc__cover { position: absolute; left: 0; top: 0; width: 69%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; z-index: 2; box-shadow: 20px 30px 60px -10px #000; }
.disc__vinyl { position: absolute; right: 0; top: 2%; width: 66%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 4px); box-shadow: 0 30px 60px -20px #000;
  display: grid; place-items: center; transition: translate 1.4s var(--ease); animation: spin 6s linear infinite; }
.disc__vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .12) 25%, transparent 30% 70%, rgba(255, 255, 255, .08) 75%, transparent 80%); }
.disc__vinyl img { width: 36%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid #0a0a0a; }
.disc.in .disc__vinyl { translate: 14% 0; }
@keyframes spin { to { rotate: 360deg; } }
.members { list-style: none; margin: 0 0 28px; padding: 0; }
.members li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.members li:first-child { border-top: 1px solid var(--line); }
.members b { display: block; font: 400 clamp(28px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; margin-bottom: 6px; }
.members span { color: var(--muted); }
.music__facts { margin: 0; display: grid; gap: 12px; }
.music__facts div { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: baseline; }
.music__facts dt { font: 400 26px/1 var(--display); color: var(--spirit); }
.music__facts dd { margin: 0; color: rgba(255, 255, 255, .8); }
.music__bottom { max-width: 1400px; margin: clamp(48px, 6vw, 80px) auto 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); }
.music__player iframe { width: 100%; height: 452px; border: 0; border-radius: 16px; background: #121212; }
.buy__title { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--spirit); }
.buy__title:not(:first-child) { margin-top: 28px; }
.buy__item { display: block; padding: 16px 18px; margin-bottom: 10px; border-radius: 16px; border: 1px solid var(--line); transition: border-color .3s, background .3s, transform .4s var(--ease); }
.buy__item:hover { border-color: var(--spirit); background: rgba(60, 214, 255, .06); transform: translateX(4px); }
.buy__item b { display: block; font: 400 24px/1.1 var(--display); text-transform: uppercase; }
.buy__item span { color: var(--muted); font-size: 14px; }
.buy__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.buy__chips a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; transition: all .3s; }
.buy__chips a:hover { background: var(--ink); color: var(--bg); }
.music__doc { max-width: 1400px; margin: clamp(32px, 4vw, 56px) auto 0; }
@media (max-width: 900px) {
  .music__layout, .music__bottom { grid-template-columns: 1fr; }
  .disc { max-width: 460px; }
  .music__player iframe { height: 380px; }
}

.shop { padding-top: clamp(96px, 14vw, 180px); }

/* =========================================================
   TOGASHI: foto
   ========================================================= */
.author__photo { width: min(240px, 55%); margin: 0 0 26px; }
.author__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(255, 255, 255, .08); filter: grayscale(.15) contrast(1.05); }
.author__photo figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* =========================================================
   LIVE ACTION
   ========================================================= */
.la { --la: var(--teal); padding-top: clamp(96px, 14vw, 180px); }
.la__hero { position: relative; height: 92vh; height: 92svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.la__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.la__shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 2%, rgba(6, 8, 10, .55) 40%, rgba(6, 8, 10, .15) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(6, 8, 10, .75), transparent 60%); }
.la__intro { position: relative; z-index: 1; max-width: 760px; padding: 0 var(--gutter) clamp(56px, 10vh, 110px); }
.la .eyebrow { color: var(--la); }
.la__logo { width: min(560px, 92%); margin: 6px 0 20px; filter: drop-shadow(0 4px 30px rgba(60, 214, 255, .35)); }
.la__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.la__meta span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(45, 224, 176, .14); color: var(--la); backdrop-filter: blur(6px); }
.la__meta span:first-child { background: #e50914; color: #fff; }
.la__lead { margin: 0; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255, 255, 255, .85); }
.la__block { padding: clamp(72px, 10vw, 140px) var(--gutter) 0; }
.la__block > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.la__title { font-size: clamp(40px, 5vw, 80px); margin-bottom: 12px; }
.la__title small { font: 600 13px/1 var(--sans); letter-spacing: .14em; color: var(--muted); vertical-align: middle; margin-left: 10px; }
.la__hint { margin-top: 0; margin-bottom: 28px; color: var(--muted); }
.la .section-head__lead { margin: 0 auto 32px; max-width: 1400px; }
.la .player__list button[aria-current="true"] { border-color: var(--la); background: rgba(45, 224, 176, .08); }

/* elenco em sanfona */
.cast-la { display: flex; gap: clamp(8px, 1vw, 14px); height: 78vh; height: 78svh; min-height: 480px; max-height: 780px; }
.cla { position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 0; border-radius: clamp(16px, 2vw, 26px); text-align: left; cursor: pointer; isolation: isolate; transition: flex .9s var(--ease), box-shadow .6s; }
.cla.open { flex: 3.4; box-shadow: inset 0 -4px 0 var(--c), 0 40px 100px -40px var(--c); }
.cla > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.85) brightness(.5); transform: scale(1.08); transition: filter .9s, transform 1.4s var(--ease); }
.cla.open .cla__char { filter: none; transform: scale(1); }
.cla::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .9) 5%, transparent 55%); }
.cla__num { position: absolute; top: 18px; left: 18px; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
.cla__short { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg; font: 400 clamp(24px, 2.4vw, 38px)/1 var(--display); text-transform: uppercase; transition: opacity .4s; }
.cla.open .cla__short { opacity: 0; }
.cla__body { position: absolute; left: clamp(18px, 2.4vw, 36px); right: clamp(18px, 2.4vw, 36px); bottom: clamp(18px, 2.4vw, 36px); display: grid; gap: 6px; opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .5s var(--ease); pointer-events: none; }
.cla.open .cla__body { opacity: 1; transform: none; transition-delay: .35s; }
.cla__jp { font: 900 clamp(18px, 1.8vw, 26px)/1 var(--kanji); color: var(--c); }
.cla strong { font: 400 clamp(40px, 4.6vw, 76px)/.95 var(--display); text-transform: uppercase; }
.cla em { font-style: normal; font-weight: 600; color: var(--c); }
.cla small { max-width: 420px; font-size: 15px; color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) {
  .cast-la { flex-direction: column; height: auto; min-height: 0; max-height: none; }
  .cla { flex: none; height: 96px; transition: height .8s var(--ease), box-shadow .6s; }
  .cla.open { flex: none; height: 72svh; }
  .cla__short { writing-mode: horizontal-tb; rotate: none; left: 18px; translate: none; bottom: 50%; transform: translateY(50%); }
  .cla__num { top: auto; bottom: 50%; left: auto; right: 18px; transform: translateY(50%); }
  .cla.open .cla__num { top: 18px; bottom: auto; transform: none; }
}

/* especiais: trailers do anime */
.specials__sub { max-width: 1400px; margin: clamp(64px, 8vw, 110px) auto 24px; }
#animePlayer { max-width: 1400px; margin: 0 auto; }
.specials { padding-bottom: clamp(96px, 12vw, 160px); }
.watch { padding-bottom: 0; }

/* live action: personagem -> ator */
.cla .cla__actor { opacity: 0; filter: none; transform: scale(1.12); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.cla.real .cla__actor { opacity: 1; transform: scale(1); }
.cla.real .cla__char { transform: scale(1.06); filter: blur(4px) brightness(.6); }
.cla__mode { position: absolute; top: 14px; right: 14px; display: none; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cla.open .cla__mode { display: flex; }
.cla__mode i { font-style: normal; padding: 5px 10px; border-radius: 999px; color: rgba(255, 255, 255, .6); transition: background .5s, color .5s; }
.cla:not(.real) .cla__mode i:first-child, .cla.real .cla__mode i:last-child { background: var(--c); color: #001017; }
.cla__irl { display: none; color: rgba(255, 255, 255, .7); font-weight: 400; }
.cla.real .cla__irl { display: inline; }
@media (max-width: 760px) { .cla.open .cla__num { display: none; } }

/* =========================================================
   EDUARDO MIRANDA — diagramação de capa de revista
   ========================================================= */
.miranda { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; overflow: hidden; }
.miranda__bg { position: absolute; top: clamp(60px, 9vw, 140px); left: 0; right: 0; display: grid; gap: 0; pointer-events: none; }
.miranda__bg span { display: block; width: max-content; font: 400 clamp(90px, 14vw, 230px)/.95 var(--display); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(227, 18, 27, .28); animation: marquee 60s linear infinite; }
.miranda__bg span:last-child { animation-direction: reverse; -webkit-text-stroke-color: rgba(255, 255, 255, .07); }
.miranda__grid { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.miranda__portrait { position: relative; margin: 0; }
.miranda__portrait::before { content: ""; position: absolute; inset: 0; translate: 22px 22px; border: 2px solid var(--red); border-radius: 26px; transition: translate .8s var(--ease); }
.miranda__portrait:hover::before { translate: 10px 10px; }
.miranda__portrait img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; box-shadow: 0 50px 100px -30px rgba(227, 18, 27, .45); filter: contrast(1.05); }
.miranda__stamp { position: absolute; right: -28px; bottom: 36px; width: clamp(110px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--red); color: #fff; rotate: -12deg; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); animation: stamp 8s ease-in-out infinite; }
.miranda__stamp small { font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.miranda__stamp b { font: 400 clamp(36px, 3.6vw, 52px)/1 var(--display); }
@keyframes stamp { 50% { rotate: -4deg; scale: 1.05; } }
.miranda h2 { font-size: clamp(64px, 9vw, 150px); }
.miranda__tag { margin: 14px 0 0; font: 400 clamp(24px, 2.4vw, 38px)/1.1 var(--display); text-transform: uppercase; color: var(--red); }
.miranda__lead { max-width: 560px; margin: 18px 0 32px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.miranda__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; counter-reset: st; }
.miranda__steps li { position: relative; padding: 22px 22px 24px; background: var(--bg); transition: background .4s; counter-increment: st; }
.miranda__steps li::before { content: "0" counter(st); position: absolute; top: 18px; right: 18px; font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--muted); }
.miranda__steps li:hover { background: rgba(227, 18, 27, .08); }
.miranda__steps b { display: block; margin-bottom: 8px; font: 400 clamp(30px, 2.8vw, 42px)/1 var(--display); text-transform: uppercase; color: var(--red); }
.miranda__steps span { color: rgba(255, 255, 255, .8); font-size: 15px; }
.miranda .insta { margin-top: 22px; }
.miranda__video { max-width: 1400px; margin: clamp(56px, 8vw, 110px) auto 0; box-shadow: 0 40px 120px -40px rgba(227, 18, 27, .5); }
@media (max-width: 900px) {
  .miranda__grid { grid-template-columns: 1fr; }
  .miranda__portrait { max-width: 420px; margin-right: 22px; }
  .miranda__stamp { right: -14px; }
}
@media (max-width: 520px) { .miranda__steps { grid-template-columns: 1fr; } }

/* =========================================================
   MINI PLAYER
   ========================================================= */
.mini { position: fixed; top: 84px; right: var(--gutter); z-index: 70; width: 340px; padding: 16px; border-radius: 20px;
  background: rgba(12, 15, 19, .88); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(60, 214, 255, .08);
  animation: mini-in .35s var(--ease); }
@keyframes mini-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.mini__now { display: flex; align-items: center; gap: 12px; }
.mini__eq { display: flex; align-items: flex-end; gap: 3px; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(60, 214, 255, .12); flex: none; }
.mini__eq i { flex: 1; height: 25%; border-radius: 2px; background: var(--spirit); }
.mini.playing .mini__eq i { animation: eq 1s ease-in-out infinite; }
.mini.playing .mini__eq i:nth-child(2) { animation-delay: -.3s; } .mini.playing .mini__eq i:nth-child(3) { animation-delay: -.6s; } .mini.playing .mini__eq i:nth-child(4) { animation-delay: -.15s; }
.mini__info { flex: 1; min-width: 0; }
.mini__info strong { display: block; font: 400 20px/1.1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__info small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__close { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); flex: none; transition: background .3s, color .3s; }
.mini__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mini__bar { position: relative; height: 6px; margin: 16px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); cursor: pointer; overflow: hidden; }
.mini__bar span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--spirit), #9cf0ff); border-radius: 6px; }
.mini__time { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini__ctrl { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mini__ctrl button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .3s, transform .2s; }
.mini__ctrl button:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.mini__ctrl button:disabled { opacity: .3; cursor: default; }
.mini__ctrl svg { width: 18px; fill: currentColor; }
.mini__ctrl .mini__play { width: 48px; height: 48px; background: var(--spirit); color: #001017; }
.mini__ctrl .mini__play:hover { background: #8fe8ff; transform: scale(1.05); }
.mini__play .i-pause, .mini.playing .mini__play .i-play { display: none; }
.mini.playing .mini__play .i-pause { display: block; }
.mini__vol { flex: 1; margin-left: 8px; display: flex; }
.mini__vol input { width: 100%; accent-color: var(--spirit); }
.mini__list { list-style: none; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.mini__list button { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; width: 100%; padding: 8px; border-radius: 10px; text-align: left; transition: background .3s; }
.mini__list button:hover { background: rgba(255, 255, 255, .05); }
.mini__list button[aria-current="true"] { background: rgba(60, 214, 255, .1); }
.mini__list span { grid-row: span 2; font-size: 11px; color: var(--muted); padding-top: 3px; }
.mini__list b { font-size: 14px; font-weight: 600; }
.mini__list button[aria-current="true"] b { color: var(--spirit); }
.mini__list small { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .mini { top: 72px; left: 12px; right: 12px; width: auto; } }

/* =========================================================
   EIZOU HAKUSHO
   ========================================================= */
.eizou { max-width: 1400px; margin: clamp(64px, 8vw, 110px) auto 0; }
.eizou__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.eizou__tag { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--spirit); }
.eizou__lead { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .78); }
.eizou__nav { display: flex; gap: 8px; flex: none; }
.eizou__arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); font-size: 28px; line-height: 1; transition: background .3s, color .3s, border-color .3s; }
.eizou__arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.eizou__rail { list-style: none; margin: 0; padding: 4px 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 330px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.eizou__rail li { scroll-snap-align: start; }
.ep { display: block; width: 100%; text-align: left; }
.ep__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; }
.ep__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .8s var(--ease), filter .4s; filter: brightness(.85); }
.ep__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; opacity: 0; scale: .8;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 42% no-repeat; transition: opacity .3s, scale .4s var(--ease); }
.ep:hover .ep__thumb img, .ep:focus-visible .ep__thumb img { transform: scale(1.08); filter: brightness(1); }
.ep:hover .ep__thumb::after, .ep:focus-visible .ep__thumb::after { opacity: 1; scale: 1; }
.ep__thumb em { position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: 6px; font: 600 12px/1 var(--sans); font-style: normal; background: rgba(0, 0, 0, .75); }
.ep__meta { display: grid; gap: 4px; padding: 12px 4px 0; }
.ep__meta small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ep__meta b { font: 400 22px/1.05 var(--display); text-transform: uppercase; }
@media (max-width: 700px) { .eizou__nav { display: none; } .eizou__rail { grid-auto-columns: 78%; } }

.vmodal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px; background: rgba(3, 4, 5, .94); backdrop-filter: blur(10px); animation: fadein .3s ease; }
.vmodal__box { width: min(1200px, 100%); }
.vmodal__frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); }
.vmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__title { margin: 14px 4px 0; color: var(--muted); font-size: 14px; }

/* =========================================================
   WEEKLY SHŌNEN JUMP Nº 51 (dentro do mangá)
   ========================================================= */
.wsj { max-width: 1400px; margin: clamp(80px, 10vw, 150px) auto 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.wsj__viewer { margin: 0; }
.wsj__frame { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #111; rotate: -2deg; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); transition: rotate .8s var(--ease), transform .8s var(--ease); }
.wsj__frame:hover { rotate: 0deg; transform: scale(1.02); }
.wsj__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 35%, transparent 70%, rgba(255, 255, 255, .06)); }
.wsj__frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.wsj__frame img.swap { opacity: 0; }
.wsj__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.wsj__thumbs button { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: .55; transition: opacity .3s, border-color .3s, transform .3s var(--ease); }
.wsj__thumbs button:hover { opacity: .9; transform: translateY(-3px); }
.wsj__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--red); }
.wsj__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.wsj__thumbs span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); }
.wsj__viewer figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.wsj__text .eyebrow { color: var(--red); }
.wsj h3 { font-size: clamp(48px, 6vw, 96px); }
.wsj h3 span { color: var(--red); }
.wsj__lead { max-width: 520px; margin: 18px 0 28px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.wsj__facts { margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.wsj__facts div { padding: 18px 20px; background: var(--bg); }
.wsj__facts dt { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.wsj__facts dd { margin: 0; color: rgba(255, 255, 255, .75); font-size: 14px; }
.wsj__facts b { display: block; margin-bottom: 2px; font: 400 26px/1.1 var(--display); color: #fff; }
.wsj__facts b[lang="ja"] { font: 900 20px/1.3 var(--kanji); }
@media (max-width: 900px) { .wsj { grid-template-columns: 1fr; } .wsj__frame { rotate: 0deg; } }
@media (max-width: 480px) { .wsj__facts { grid-template-columns: 1fr; } }

/* =========================================================
   HERO: movimento contínuo e sutil (loop sem emenda) + partículas em camadas
   ========================================================= */
.hero__bg img { animation: hero-drift 26s ease-in-out infinite; transform-origin: 40% 40%; }
@keyframes hero-drift {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  25% { transform: scale(1.075) translate3d(-1.1%, .5%, 0); }
  50% { transform: scale(1.09) translate3d(0, 1.1%, 0); }
  75% { transform: scale(1.075) translate3d(1.1%, .5%, 0); }
}
.hero__motes { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.hero__motes::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(140, 230, 255, .9) 0 1.2px, transparent 2px); background-size: 160px 160px; animation: motes-up 38s linear infinite; opacity: .35; }
.hero__motes--far::before { background-size: 110px 110px; background-image: radial-gradient(circle, rgba(140, 230, 255, .8) 0 .8px, transparent 1.4px); animation-duration: 64s; opacity: .25; }
@keyframes motes-up { to { background-position: 0 -160px; } }
.hero__motes--far::before { animation-name: motes-up-far; }
@keyframes motes-up-far { to { background-position: 0 -110px; } }

/* dica do Leigan colada no cursor (só no topo, só com mouse) */
.cursor-tip { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-tip { display: block; position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #dff8ff; background: rgba(6, 12, 16, .7); border: 1px solid rgba(60, 214, 255, .35); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .35s; }
  .cursor-tip.on { opacity: 1; }
  .cursor-tip b { color: var(--spirit); }
}
.hero__egg { display: none; }

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

/* homenagem: Barbeito em preto e branco */
.person-photo[data-person="jose-luiz-barbeito"] img { filter: grayscale(1) contrast(1.05); }

.specials { padding-bottom: 0; }

/* selo com o logo da Manchete */
.miranda__stamp { background: #0b0d10; border: 3px solid var(--red); gap: 2px; }
.miranda__stamp img { width: 46%; margin: 0 auto 2px; filter: drop-shadow(0 2px 8px rgba(255, 210, 0, .35)); }
.miranda__stamp b { color: #ffd200; font-size: clamp(26px, 2.6vw, 38px); }

/* tarja de emissora com o logo da Manchete */
.miranda__bug { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(8, 10, 14, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-left: 4px solid #ffd200; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); animation: bug-in 1s var(--ease) both .4s; }
.miranda__bug img { width: clamp(44px, 4vw, 58px); flex: none; filter: drop-shadow(0 2px 10px rgba(255, 210, 0, .35)); }
.miranda__bug span { display: grid; gap: 3px; }
.miranda__bug b { font: 400 clamp(20px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #ffd200; }
.miranda__bug small { font-size: 13px; color: rgba(255, 255, 255, .8); }
@keyframes bug-in { from { opacity: 0; transform: translateY(14px); } }

/* tudo que estiver marcado como oculto fica oculto de verdade */
[hidden] { display: none !important; }

.mini__note { margin: 10px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

/* personagens: passar o mouse revela o seiyuu */
.chars__stage .chars__real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.chars__stage.real .chars__real { opacity: 1; transform: none; }
.chars__stage.real #charImg { filter: blur(6px) brightness(.6); transform: scale(1.04); }
.chars__realtag { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: grid; gap: 2px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.chars__stage.real .chars__realtag { opacity: 1; transform: none; transition-delay: .25s; }
.chars__realtag small { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.chars__realtag b { font: 400 clamp(30px, 3vw, 44px)/1 var(--display); text-transform: uppercase; }
.chars__stage.real .chars__swipe { opacity: 0; }

/* botão de som chamando atenção (até o primeiro clique) */
.sound { position: relative; }
.sound.nudge { color: var(--spirit); border-color: rgba(60, 214, 255, .55); box-shadow: 0 0 18px -4px var(--spirit-glow); }
.sound.nudge::before, .sound.nudge::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--spirit); pointer-events: none; animation: ripple 2.6s ease-out infinite; }
.sound.nudge::after { animation-delay: 1.3s; }
.sound.nudge .sound__bars i { animation: eq 1.3s ease-in-out infinite; }
.sound.nudge .sound__bars i:nth-child(2) { animation-delay: -.4s; } .sound.nudge .sound__bars i:nth-child(3) { animation-delay: -.8s; } .sound.nudge .sound__bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45, 1.9); } }

/* =========================================================
   HERO: fundo e logo parados, cada personagem flutua no seu ritmo (loop sem emenda)
   ========================================================= */
.hero__bg img { position: absolute; inset: 0; animation: none; transform: scale(1.06); }
.hero__bg .hero__char { will-change: transform; animation: float-a 9s ease-in-out infinite; }
.hero__bg .hero__char--kuwabara { animation: float-a 11s ease-in-out infinite; }
.hero__bg .hero__char--kurama { animation: float-b 9.5s ease-in-out infinite -2s; }
.hero__bg .hero__char--yusuke { animation: float-c 8s ease-in-out infinite -4s; }
.hero__bg .hero__char--hiei { animation: float-b 7s ease-in-out infinite -1s; }
@keyframes float-a {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  33% { transform: scale(1.06) translate3d(-3px, -5px, 0); }
  66% { transform: scale(1.06) translate3d(3px, -2px, 0); }
}
@keyframes float-b {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50% { transform: scale(1.065) translate3d(4px, -6px, 0); }
}
@keyframes float-c {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  25% { transform: scale(1.06) translate3d(-4px, -3px, 0); }
  75% { transform: scale(1.063) translate3d(2px, -6px, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__bg .hero__char { animation: none; } }

/* personagens: o brilho de fundo some em degradê perto da base, sem linha */
.chars::before { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }

/* personagens: espaço para o brilho terminar sozinho, sem ser cortado pela borda da seção */
.chars { padding-bottom: clamp(150px, 14vw, 200px); }
.sagas { margin-top: clamp(0px, 2vw, 24px); }

/* =========================================================
   SELETOR DE IDIOMA
   ========================================================= */
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.lang button { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); opacity: .7; transition: background .3s, color .3s, opacity .3s; }
.lang button svg { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); flex: none; }
.lang button:hover { opacity: 1; color: #fff; }
.lang button[aria-pressed="true"] { opacity: 1; color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 1180px) { .lang { margin-left: auto; } .lang + .sound { margin-left: 0; } }
@media (max-width: 520px) { .lang button span { display: none; } .lang button { padding: 0 7px; } }

/* japonês: fonte própria e sem caixa-alta forçada */
html[data-lang="ja"] { --display: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif; --sans: "Noto Sans JP", "Inter", "Yu Gothic", sans-serif; }
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] h3 { font-weight: 900; letter-spacing: 0; line-height: 1.15; }
html[data-lang="ja"] .hero__title { font-size: clamp(42px, 5.4vw, 96px); }
html[data-lang="ja"] h2 { font-size: clamp(36px, 6vw, 96px); }

/* japonês: o nome já aparece em kanji no título, então some a linha repetida */
html[data-lang="ja"] .chars__info .jp { display: none; }

/* japonês: títulos grandes um pouco menores (ideogramas são mais largos) */
html[data-lang="ja"] .wsj h3 { font-size: clamp(32px, 3.6vw, 56px); }
html[data-lang="ja"] .saga h3 { font-size: clamp(38px, 5.6vw, 88px); }
html[data-lang="ja"] .director h3, html[data-lang="ja"] .miranda h2, html[data-lang="ja"] .author h2 { font-size: clamp(38px, 4.6vw, 76px); }
html[data-lang="ja"] .chars__list button { font-size: clamp(22px, 2.4vw, 38px); }
html[data-lang="ja"] .chars__info h3, html[data-lang="ja"] .cla strong { font-size: clamp(28px, 3vw, 48px); }
html[data-lang="ja"] .marquee span { font-size: clamp(22px, 3vw, 40px); font-weight: 900; }
html[data-lang="ja"] .music h2 { font-size: clamp(64px, 12vw, 200px); }
html[data-lang="ja"] .game h2, html[data-lang="ja"] .la__title { font-size: clamp(32px, 4vw, 64px); }

/* HERO v2: cada personagem numa camada com profundidade própria (data-depth); logo fora do parallax */
.hero__layer { position: absolute; inset: 0; will-change: transform; }
.hero__logo { position: absolute; z-index: 1; top: clamp(120px, 17vh, 190px); right: clamp(20px, 4vw, 72px); width: min(44vw, 720px); height: auto; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }
@media (max-aspect-ratio: 4/3), (max-width: 1000px) {
  .hero__logo { top: 78px; right: auto; left: 50%; width: min(66vw, 440px); transform: translateX(-50%); }
  /* celular: a arte começa abaixo do logo, para ele não cobrir o rosto do Kuwabara */
  .hero__bg { top: calc(78px + min(66vw, 440px) * .36 + 14px); }
  .hero__bg > img:first-child { display: none; }
}

.tl--big img.tl__wide { aspect-ratio: 16 / 9; }

/* celular/retrato: o grupo dos 4 (x 59–1297 na arte de 1920) encolhe para caber inteiro na largura, logo abaixo do logo */
@media (max-aspect-ratio: 4/3), (max-width: 1000px) {
  .hero__bg { left: 0; right: 0; }
  /* o texto vem embaixo do grupo (não por cima do Hiei) */
  .hero { height: auto; min-height: 100svh; padding-top: calc(78px + min(66vw, 440px) * .36 + 14px + 1080 / 1238 * 100vw * 1.02); }
  .hero__content { padding-bottom: 72px; }
  .hero__bg .hero__layer img { inset: 0 auto auto calc(-59 / 1238 * 100vw); width: calc(1920 / 1238 * 100vw); max-width: none; height: auto; object-fit: initial;
    -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 78%, transparent); }
}