/* EldritchForge — paleta tirada do logo e do emblema: breu, osso e sangue */

@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fell"; src: url("../fonts/im-fell-english-sc.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixel"; src: url("../fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixel"; src: url("../fonts/silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --void: #050405;
  --void-2: #0d0a0b;
  --void-3: #161112;
  --void-4: #211819;
  --blood: #e6111b;
  --blood-2: #ff3b3f;
  --blood-deep: #7d0911;
  --blood-dark: #3a0508;
  --bone: #f0e6d8;
  --bone-2: #d8ccb9;
  --bone-dim: #8c8273;
  --ink: #ede5d9;
  --muted: #ab9f92;
  --line: #f0e6d81a;
  --line-2: #f0e6d833;
  --radius: 2px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --title: "Cinzel", "Trajan Pro", Georgia, serif;
  --old: "Fell", Georgia, "Times New Roman", serif;
  --pixel: "Pixel", ui-monospace, monospace;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* estrela de quatro pontas do emblema, para os cantos das molduras */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f0e6d8' d='M10 0l1.6 8.4L20 10l-8.4 1.6L10 20l-1.6-8.4L0 10l8.4-1.6z'/%3E%3C/svg%3E");
  --star-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e6111b' d='M10 0l1.6 8.4L20 10l-8.4 1.6L10 20l-1.6-8.4L0 10l8.4-1.6z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--body);
  overflow-x: hidden;
}
/* grão de filme por cima de tudo */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .055;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
img { max-width: 100%; display: block; }
a { color: var(--bone); text-decoration-color: var(--blood); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
a:hover { color: var(--blood-2); }
:focus-visible { outline: 2px solid var(--blood-2); outline-offset: 3px; }
::selection { background: var(--blood); color: var(--bone); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blood); color: var(--bone); padding: 8px 12px; z-index: 120; }
.skip:focus { left: 8px; }

/* ---------- títulos ---------- */
h1, h2, h3 { font-family: var(--title); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .02em; color: var(--bone); }
h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.35rem; }
h1 em, h2 em { font-style: normal; color: var(--blood); text-shadow: 0 0 24px #e6111b66; }
.eyebrow {
  font-family: var(--title); font-weight: 700; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--blood-2); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .9em;
}
.eyebrow::before { content: ""; width: 14px; height: 14px; background: var(--star-red) center / contain no-repeat; filter: drop-shadow(0 0 6px #e6111b); flex: none; }
@media (max-width: 520px) { .eyebrow { letter-spacing: .2em; font-size: .7rem; } }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 60ch; }

/* ---------- cabeçalho ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, #050405f2, #050405cc);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head::after { /* fio de sangue sob o cabeçalho */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blood) 30%, var(--blood) 70%, transparent);
  opacity: .5; transition: opacity .3s;
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); font-family: var(--title); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }
.brand:hover { color: var(--bone); }
.brand-mark { width: 38px; height: 38px; object-fit: contain; transition: transform .6s cubic-bezier(.2,.9,.2,1.3), filter .4s; }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.12); filter: drop-shadow(0 0 10px #e6111bcc); }
.brand.is-angry .brand-mark { animation: shudder .35s linear 2; filter: drop-shadow(0 0 14px #ff3b3f); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; font-family: var(--title); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 10px 12px;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--blood);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.7,0,.2,1); box-shadow: 0 0 8px var(--blood);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .lang { border: 1px solid var(--line-2); margin-left: 10px; }
.nav .lang::after { display: none; }
.nav .lang:hover { border-color: var(--blood); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--bone); font-family: var(--title); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; padding: 8px 14px; border-radius: var(--radius); cursor: pointer; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--void-2); border-bottom: 1px solid var(--blood-deep); padding: 8px var(--gutter) 18px;
  }
  .nav a { padding: 14px 8px; }
  .nav a::after { left: 8px; right: auto; width: 40px; }
  .nav .lang { margin: 10px 0 0; text-align: center; }
  .nav-open .nav { display: flex; }
}

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .7em; overflow: hidden; isolation: isolate;
  font-family: var(--title); font-weight: 700; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--bone); background: var(--blood-deep);
  padding: 14px 24px; border: 1px solid var(--blood); cursor: pointer; border-radius: var(--radius);
  box-shadow: 0 0 0 4px var(--void), 0 0 0 5px #e6111b55, 0 10px 30px -10px #e6111b88;
  transition: box-shadow .3s, color .2s, transform .15s;
}
.btn::before { /* sangue que sobe por dentro do botão */
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--blood), var(--blood-2));
  transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.btn:hover { color: var(--bone); box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--blood), 0 0 34px -2px #e6111bbb; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(2px); }
.btn.ghost { background: transparent; border-color: var(--line-2); box-shadow: none; color: var(--bone); }
.btn.ghost::before { background: linear-gradient(0deg, #e6111b33, #e6111b11); }
.btn.ghost:hover { border-color: var(--blood); box-shadow: 0 0 24px -6px #e6111b99; }
.btn.is-soon, .btn[aria-disabled="true"] { cursor: default; opacity: .62; }
.btn.is-soon:hover { box-shadow: 0 0 0 4px var(--void), 0 0 0 5px #e6111b55; }
.btn.is-soon:hover::before { transform: translateY(101%); }
.btn.ghost.is-soon:hover { box-shadow: none; border-color: var(--line-2); }
.soon-tag {
  font-family: var(--body); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--void); color: var(--bone-2); padding: 2px 7px; border: 1px solid var(--line-2); white-space: nowrap;
}
.actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; }

/* ---------- tentáculos (canvas) ---------- */
canvas.tentacles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
canvas[data-tentacles="head"] { height: min(100%, 380px); bottom: auto; opacity: .55; }
canvas.lurker { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 25; pointer-events: none; }

/* ---------- herói ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  min-height: min(100svh, 980px); display: grid; place-items: center;
  padding: clamp(40px, 7vw, 80px) 0 clamp(120px, 16vw, 180px);
  background:
    radial-gradient(42% 38% at 50% 40%, #5a060c66, transparent 70%),
    radial-gradient(80% 50% at 50% 115%, #3a0508cc, transparent 70%),
    var(--void);
}
.hero::before { /* vinheta */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, #000 100%);
}
.hero::after { /* névoa vermelha no chão */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 40%; z-index: 1; pointer-events: none;
  background: radial-gradient(45% 60% at 30% 100%, #7d091155, transparent 70%), radial-gradient(40% 55% at 72% 100%, #7d091144, transparent 70%);
  animation: drift 16s ease-in-out infinite alternate;
}
.hero > .wrap { z-index: 3; }
.hero > .wrap::before { /* véu escuro atrás do texto, para os tentáculos não atrapalharem a leitura */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(900px, 120%); height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #050405e6, #050405a0 60%, transparent); pointer-events: none;
}
.hero-logo {
  width: min(500px, 80vw); height: auto; margin: 0 auto 8px;
  animation: breathe 6s ease-in-out infinite;
}
.hero h1 { font-size: clamp(1.55rem, 3.4vw, 2.5rem); max-width: 26ch; margin: 0 auto .4em; text-shadow: 0 4px 30px #000; }
.hero .lead { margin-inline: auto; text-shadow: 0 2px 12px #000; }
.hero .actions { justify-content: center; }
.hero-tall { min-height: min(92svh, 860px); }

/* lanterna: o mouse revela o que está escrito no escuro */
.secret {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; overflow: hidden;
  font-family: var(--title); font-weight: 900; font-size: clamp(3rem, 11vw, 9.5rem); line-height: .95; letter-spacing: .06em;
  color: #e6111b; opacity: .2; text-align: center; text-transform: uppercase;
  -webkit-mask-image: radial-gradient(circle 170px at var(--mx, -999px) var(--my, -999px), #000 0%, #0008 45%, transparent 100%);
  mask-image: radial-gradient(circle 170px at var(--mx, -999px) var(--my, -999px), #000 0%, #0008 45%, transparent 100%);
}
.hero-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #e6111b1f, transparent 70%);
}
.hero.is-lit .hero-light { opacity: 1; }
@media (hover: none) { .secret { display: none; } }

.descend {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--title); font-size: .7rem; letter-spacing: .4em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none;
  display: grid; justify-items: center; gap: 8px; white-space: nowrap;
}
.descend::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--blood), transparent); animation: drip 2.4s ease-in infinite; transform-origin: top; }
.descend:hover { color: var(--bone); }

/* ---------- fenda entre seções ---------- */
.rift {
  height: 40px; position: relative; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L180 20 L210 14 L240 24 L300 19 L420 21 L460 12 L490 27 L520 18 L580 20 L600 6 L620 34 L640 20 L700 22 L730 15 L760 25 L800 20 L930 19 L960 27 L990 13 L1020 21 L1200 20' fill='none' stroke='%23e6111b' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px #e6111b);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* ---------- seções ---------- */
section { padding: clamp(72px, 11vw, 128px) 0; position: relative; }
.band { background: linear-gradient(180deg, var(--void), var(--void-2) 25%, var(--void-2) 60%, var(--void)); }

/* surgimento ao rolar (só quando o JS está ligado) */
.js .rise { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease; }
.js .rise.is-in { opacity: 1; transform: none; filter: none; }
.js .rise.d1 { transition-delay: .12s; } .js .rise.d2 { transition-delay: .24s; } .js .rise.d3 { transition-delay: .36s; }

/* moldura: fio de osso, fio de sangue e estrelas nos cantos, como no emblema */
.frame {
  position: relative;
  background:
    var(--star) left 8px top 8px / 12px no-repeat,
    var(--star) right 8px top 8px / 12px no-repeat,
    var(--star) left 8px bottom 8px / 12px no-repeat,
    var(--star) right 8px bottom 8px / 12px no-repeat,
    linear-gradient(180deg, var(--void-3), var(--void-2));
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 5px var(--void), 0 0 0 6px #e6111b44, 0 30px 70px -20px #000;
}

/* ---------- jogo em destaque ---------- */
.game { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.game-art { padding: 26px; transition: box-shadow .5s; }
.game-art img { width: 100%; image-rendering: pixelated; animation: flicker 5s infinite; }
.game-art:hover { box-shadow: 0 0 0 5px var(--void), 0 0 0 6px var(--blood), 0 0 60px -10px #e6111b99; }
.game h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.badges li { font-family: var(--pixel); font-size: .72rem; padding: 4px 10px; border: 1px solid var(--line-2); color: var(--bone-2); background: #f0e6d808; }
.badges li.hot { border-color: var(--blood); color: var(--bone); background: #e6111b22; }
.pitch { font-family: var(--old); font-size: 1.55rem; line-height: 1.35; color: var(--bone); margin: 0 0 16px; }

@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; }
  .game-art { max-width: 360px; }
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 64px; padding: 0; list-style: none; }
.features li {
  position: relative; overflow: hidden; background: var(--void-2); border: 1px solid var(--line); padding: 24px 24px 26px;
  transition: border-color .4s, transform .4s, background .4s;
}
.features li::before { /* o tentáculo que espia pelo canto */
  content: ""; position: absolute; right: -4px; bottom: -4px; width: 84px; height: 84px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e6111b' d='M100 100 C78 92 62 80 56 62 C50 44 58 30 70 27 C80 25 86 33 82 41 C79 47 72 46 71 41 C75 43 78 39 75 35 C70 30 62 36 62 46 C62 62 78 76 100 84 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(70%, 70%) rotate(35deg); transform-origin: 100% 100%; opacity: 0;
  transition: transform .7s cubic-bezier(.3,1.4,.4,1), opacity .4s;
}
.features li:hover { border-color: #e6111b66; transform: translateY(-3px); background: var(--void-3); }
.features li:hover::before { transform: none; opacity: .85; }
.features strong { display: block; font-family: var(--title); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; color: var(--bone); margin-bottom: 6px; }
.features span { color: var(--muted); font-size: .97rem; position: relative; display: block; padding-right: 18px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.shot { margin: 0; padding: 6px; background: var(--void-2); border: 1px solid var(--line); transition: border-color .3s; }
.shot:hover { border-color: var(--blood); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery-empty { grid-column: 1 / -1; border: 1px dashed var(--line-2); padding: 32px; text-align: center; color: var(--muted); margin: 0; font-family: var(--old); font-size: 1.15rem; }

/* ---------- estúdio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.studio p { color: var(--muted); }
.sigil { position: relative; width: min(300px, 64vw); margin: 0 0 32px; }
.sigil img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 0 30px #e6111b44); transition: transform .25s ease-out; }
.sigil::before { /* brilho da forja atrás do emblema */
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, #e6111b55, transparent 65%); filter: blur(20px);
  animation: pulse 4.5s ease-in-out infinite;
}
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: p; }
.principles li {
  position: relative; padding: 18px 20px 18px 64px; background: var(--void-2); border: 1px solid var(--line);
  color: var(--muted); counter-increment: p; transition: border-color .3s, transform .3s;
}
.principles li::before {
  content: counter(p, upper-roman); position: absolute; left: 18px; top: 17px;
  font-family: var(--title); font-weight: 700; color: var(--blood); font-size: 1.1rem; width: 30px; text-align: center;
}
.principles li:hover { border-color: #e6111b55; transform: translateX(4px); }
.principles b { font-family: var(--title); font-weight: 700; letter-spacing: .03em; color: var(--bone); display: block; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } .studio .eye { display: block; margin-inline: auto; } }

/* ---------- apoie ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; margin: 48px 0 0; }
.tier { padding: 36px 28px 30px; display: flex; flex-direction: column; transition: transform .4s, box-shadow .4s; }
.tier:hover { transform: translateY(-6px); box-shadow: 0 0 0 5px var(--void), 0 0 0 6px var(--blood), 0 30px 70px -20px #e6111b55; }
.tier.chosen { box-shadow: 0 0 0 5px var(--void), 0 0 0 6px var(--blood), 0 0 70px -20px #e6111b88; }
.tier h3 { margin-bottom: .25em; }
.tier .price { font-family: var(--title); font-weight: 700; font-size: 1rem; letter-spacing: .1em; color: var(--blood-2); margin: 0 0 18px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 24px; color: var(--muted); }
.tier ul li { margin-bottom: 8px; padding-left: 22px; position: relative; }
.tier ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--star-red) center / contain no-repeat; }
.tier .btn { margin-top: auto; align-self: flex-start; white-space: nowrap; font-size: .74rem; padding: 12px 16px; }

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
.way { background: var(--void-2); border: 1px solid var(--line); border-top: 2px solid var(--blood-deep); padding: 26px; transition: border-color .3s; }
.way:hover { border-top-color: var(--blood); }
.way h3 { font-size: 1.25rem; }
.way p { color: var(--muted); margin-top: 0; }
.pix-key { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; background: var(--void); border: 1px dashed var(--blood-deep); padding: 10px 12px; word-break: break-all; margin: 0 0 6px; }
.pix-name { font-size: .9rem; color: var(--muted); margin: 0 0 14px; }
[data-pix].is-empty .pix-filled { display: none; }
[data-pix]:not(.is-empty) .pix-soon { display: none; }

/* ---------- newsletter ---------- */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(32px, 5vw, 56px); }
.newsletter form { display: grid; gap: 12px; }
.field { display: flex; gap: 14px; flex-wrap: wrap; }
.field input[type=email] {
  flex: 1 1 220px; min-width: 0; font: inherit; color: var(--bone); background: var(--void);
  border: 1px solid var(--line-2); padding: 12px 14px; border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
.field input[type=email]:focus { border-color: var(--blood); box-shadow: 0 0 20px -4px #e6111b88; outline: none; }
.consent { font-size: .88rem; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin-top: 4px; accent-color: var(--blood); }
form.is-empty .field, form.is-empty .consent { display: none; }
form:not(.is-empty) .form-soon { display: none; }
.form-soon { font-family: var(--old); font-size: 1.2rem; color: var(--bone); }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } }

/* ---------- contato: o olho ---------- */
.contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.eye { width: clamp(160px, 22vw, 240px); height: auto; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.eye .lid { transform-box: fill-box; transform-origin: center; transition: transform .11s ease-in; }
.eye.blink .lid { transform: scaleY(.04); }
.eye .pupil { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.eye:hover .pupil { transform: scaleX(2.6); }
.eye .halo { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.eye .charge-track { stroke: #e6111b; stroke-width: 7; opacity: .12; stroke-dasharray: 32.3 1; }
.eye .charge {
  stroke: var(--blood-2); stroke-width: 7; stroke-linecap: butt; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .35s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 0 8px #e6111b);
}
.eye:hover .charge-track { opacity: .25; }
.eye.charging .iris circle:first-child { filter: brightness(calc(1 + var(--charge, 0) * .5)); }
.eye.charging .pupil { transform: scaleX(calc(2.6 + var(--charge, 0) * 1.5)); }
.eye.awake { animation: shudder .3s linear 3; }
.eye.awake .pupil { transform: scaleX(4.5); }
.eye.awake .charge { stroke: #fff; filter: drop-shadow(0 0 16px #ff3b3f) drop-shadow(0 0 30px #e6111b); }
.studio .eye { margin: 0 0 28px; }
.contact .sigil { width: clamp(150px, 20vw, 220px); margin: 0; }
.eye.big { width: clamp(180px, 30vw, 300px); margin: 0 auto 24px; display: block; }
@media (max-width: 700px) { .contact { grid-template-columns: 1fr; justify-items: center; text-align: center; } .contact .sigil { margin-inline: auto; } .contact .actions { justify-content: center; } }

/* ---------- devlog ---------- */
.posts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; }
.post-card { position: relative; display: block; text-decoration: none; color: inherit; background: var(--void-2); border: 1px solid var(--line); border-left: 2px solid var(--blood-deep); padding: 24px 26px; transition: border-color .3s, transform .3s, background .3s; }
.post-card:hover { border-color: #e6111b66; border-left-color: var(--blood); transform: translateX(6px); color: inherit; background: var(--void-3); }
.post-card time { font-family: var(--title); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--blood-2); }
.post-card h3 { margin: 6px 0 6px; }
.post-card p { margin: 0; color: var(--muted); }

.article { max-width: 70ch; }
.article h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.article h2 { font-size: 1.7rem; margin-top: 1.7em; }
.article p, .article li { color: #d8cfc3; }
.article .meta { font-family: var(--title); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blood-2); font-size: .74rem; margin-bottom: 32px; }
.article blockquote { margin: 1.5em 0; padding: 4px 22px; border-left: 2px solid var(--blood); color: var(--bone-2); font-family: var(--old); font-size: 1.2rem; }

.page-head {
  position: relative; overflow: hidden; isolation: isolate; display: block;
  padding: clamp(64px, 10vw, 112px) 0 clamp(32px, 5vw, 56px);
  background: radial-gradient(70% 90% at 50% 0%, #3a050899, transparent 70%), var(--void);
}
.page-head > .wrap { z-index: 2; }
.page-body { padding-top: 24px; }

/* press kit */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.facts dt { font-family: var(--title); font-weight: 700; color: var(--bone); }
.facts dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 10px; } }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 24px 0; }
.logos figure { margin: 0; padding: 28px; display: grid; gap: 16px; justify-items: center; }
.logos img { width: 100%; max-width: 200px; height: auto; }
.logos figcaption { font-size: .9rem; text-align: center; }

/* ---------- rodapé ---------- */
.site-foot { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); padding: 56px 0 44px; background: radial-gradient(60% 100% at 50% 100%, #3a050866, transparent 70%), #030203; color: var(--muted); font-size: .95rem; }
.site-foot > .wrap { z-index: 2; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot-brand { display: flex; gap: 16px; align-items: flex-start; }
.foot-brand img { width: 56px; height: auto; flex: none; filter: drop-shadow(0 0 10px #e6111b55); }
.site-foot h4 { font-family: var(--title); color: var(--bone); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; font-size: .9rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--blood-2); }
.fine { margin-top: 36px; font-size: .82rem; color: var(--bone-dim); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* ritual: a página treme quando os tentáculos são invocados */
.summoned main { animation: quake .45s linear 2; }
.summoned .site-head::after { opacity: 1; box-shadow: 0 0 16px var(--blood); }

@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); } }
@keyframes drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 50% { opacity: .95; } 70% { opacity: .75; } }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 14px #e6111b44) drop-shadow(0 18px 40px #000); transform: scale(1); } 50% { filter: drop-shadow(0 0 30px #e6111b99) drop-shadow(0 18px 40px #000); transform: scale(1.012); } }
@keyframes pulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes shudder { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg) scale(1.1); } 75% { transform: rotate(8deg) scale(1.1); } }
@keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(2px, 2px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rise { opacity: 1; transform: none; filter: none; }
}