/* Macabra 2026 — art direction driven by the official poster.
   Loaded after site.css by poster-data.js so CMS behavior remains untouched. */

:root{
  --macabra-ink:#070405;
  --macabra-wine:#160a0d;
  --macabra-amber:#f49a08;
  --macabra-flame:#ffb20c;
  --macabra-violet:#9d34c7;
  --macabra-paper:#ead8b9;
}

/* Make the campaign feel physical rather than like a dark SaaS template. */
body{
  background:
    radial-gradient(80vw 42vw at 50% -10%,rgba(244,154,8,.10),transparent 70%),
    var(--macabra-ink);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9996;
  opacity:.11;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 14% 18%,rgba(244,154,8,.12),transparent 25%),
    radial-gradient(circle at 82% 48%,rgba(157,52,199,.10),transparent 25%);
  mix-blend-mode:screen;
}

/* Header: use the real GTRZ asset but make the bar feel like black tape from the poster. */
.header{
  background:linear-gradient(180deg,rgba(8,4,5,.96),rgba(15,7,9,.87));
  border-bottom-color:rgba(244,154,8,.22);
  box-shadow:0 12px 45px rgba(0,0,0,.28);
}
.header::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-5px;height:7px;
  opacity:.30;
  background:linear-gradient(90deg,transparent,rgba(244,154,8,.5),rgba(157,52,199,.45),transparent);
  clip-path:polygon(0 35%,8% 15%,17% 60%,28% 20%,41% 54%,53% 10%,67% 58%,77% 19%,91% 54%,100% 20%,100% 100%,0 100%);
}
.brand .gtrz-svg{width:116px;height:28px;filter:drop-shadow(0 0 12px rgba(244,154,8,.14))}
.brand-event{color:var(--macabra-flame);text-shadow:0 0 16px rgba(157,52,199,.18)}
.top-buy{background:linear-gradient(180deg,#ffba18,#ef8d06)!important;border-color:#ffc33a!important;box-shadow:0 9px 28px rgba(244,154,8,.20)!important}

/* HERO — the poster is the key visual, not a decorative card. */
.hero{
  min-height:100svh;
  background:
    linear-gradient(90deg,rgba(7,4,5,.96) 0%,rgba(11,5,7,.84) 38%,rgba(9,4,6,.42) 68%,rgba(7,4,5,.82) 100%),
    radial-gradient(50% 70% at 75% 40%,rgba(157,52,199,.23),transparent 72%),
    radial-gradient(42% 55% at 31% 20%,rgba(244,154,8,.18),transparent 72%),
    linear-gradient(130deg,#10080a,#2b1714 50%,#090506);
}
.hero::before{
  background-image:
    linear-gradient(rgba(244,154,8,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,154,8,.026) 1px,transparent 1px),
    radial-gradient(circle at 73% 41%,rgba(244,154,8,.08),transparent 35%);
  background-size:66px 66px,66px 66px,auto;
  mask-image:linear-gradient(to bottom,black 0 72%,transparent 98%);
}
.hero-grid{grid-template-columns:.92fr 1.08fr;gap:clamp(42px,6vw,90px)}
.hero-glow{
  width:640px;height:640px;right:-3vw;top:12vh;
  border-color:rgba(244,154,8,.12);
  box-shadow:0 0 0 82px rgba(157,52,199,.022),0 0 0 168px rgba(244,154,8,.012);
  opacity:.72;
}
.hero .eyebrow{
  width:max-content;
  padding:10px 15px 9px;
  margin-left:-8px;
  color:#ffd06a;
  background:linear-gradient(145deg,#171011,#080708 72%);
  border:1px solid rgba(244,154,8,.26);
  box-shadow:-9px 8px 0 rgba(157,52,199,.08),0 0 24px rgba(244,154,8,.07);
  clip-path:polygon(1% 17%,8% 3%,19% 10%,30% 0,43% 9%,57% 2%,70% 10%,84% 1%,99% 12%,97% 88%,87% 96%,73% 90%,59% 100%,45% 92%,31% 99%,17% 91%,2% 97%);
}
.hero .eyebrow::before{display:none}
.hero h1{
  color:var(--macabra-flame);
  letter-spacing:-.015em;
  text-shadow:
    0 3px 0 #8b3908,
    0 0 10px rgba(255,151,0,.32),
    0 0 28px rgba(157,52,199,.13);
  filter:saturate(1.08);
}
.hero h1 span{color:#f1dfc3;letter-spacing:.115em}
.hero-copy{color:#c8b7aa;max-width:570px}
.hero-meta{
  max-width:620px;
  gap:0;
  background:rgba(244,154,8,.24);
  border-color:rgba(244,154,8,.22);
  box-shadow:0 16px 50px rgba(0,0,0,.20);
}
.hero-meta div{background:linear-gradient(145deg,rgba(12,7,8,.94),rgba(28,13,16,.90));position:relative}
.hero-meta div::after{content:"";position:absolute;inset:5px;border:1px solid rgba(157,52,199,.08);pointer-events:none}
.hero-meta strong{color:#fff3dc}
.hero-poster-wrap{
  padding:0;
  transform:rotate(1.6deg) translateZ(0);
  perspective:1000px;
}
.hero-poster-wrap::before{
  inset:8% -4% 0 7%;
  background:radial-gradient(circle,rgba(244,154,8,.31),rgba(157,52,199,.18) 42%,transparent 74%);
  filter:blur(62px);
}
.hero-poster-wrap::after{
  inset:-10px -8px 6px 11px;
  border-color:rgba(244,154,8,.21);
  clip-path:polygon(1% 2%,98% 0,100% 96%,97% 99%,4% 100%,0 96%,1% 5%);
}
.hero-poster{
  width:min(640px,100%);
  aspect-ratio:1638/2048;
  object-fit:cover;
  clip-path:polygon(.7% 1.4%,98.5% .2%,99.8% 97.7%,97.3% 99.5%,2% 100%,.2% 96%,.5% 7%);
  box-shadow:
    0 42px 105px rgba(0,0,0,.62),
    0 0 0 1px rgba(244,154,8,.18),
    0 0 44px rgba(157,52,199,.12);
  transition:transform .6s cubic-bezier(.2,.75,.2,1),filter .6s ease;
}
.hero-poster-wrap:hover .hero-poster{transform:translateY(-7px) rotate(-.55deg);filter:saturate(1.04) contrast(1.015)}

/* Ticker becomes an analogue print strip. */
.runner{background:#070405;border-block-color:rgba(244,154,8,.24);box-shadow:0 -12px 45px rgba(0,0,0,.22)}
.runner-segment{color:#b69a82}.runner-segment span:after{color:#f3a00a}

/* RECIFE, PREPARA-TE — use the torn black-banner language from the poster. */
.manifesto{background:radial-gradient(50% 55% at 15% 50%,rgba(157,52,199,.16),transparent 68%),linear-gradient(180deg,#0c0608,#11080a)}
.manifesto-kicker{
  display:inline-block;
  color:#ffc03a;
  background:#100d0d;
  padding:13px 21px 11px;
  border:1px solid rgba(244,154,8,.32);
  text-shadow:0 0 15px rgba(244,154,8,.2);
  box-shadow:8px 7px 0 rgba(157,52,199,.10);
  clip-path:polygon(0 18%,5% 5%,13% 11%,22% 2%,31% 11%,42% 1%,53% 9%,64% 0,75% 8%,87% 1%,100% 16%,98% 87%,89% 95%,77% 90%,65% 100%,54% 92%,42% 99%,30% 91%,17% 99%,4% 91%);
}
.manifesto::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-38px;height:80px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.34));
  clip-path:polygon(0 50%,6% 25%,14% 53%,22% 16%,31% 54%,39% 28%,48% 62%,58% 22%,67% 57%,77% 18%,87% 52%,94% 23%,100% 48%,100% 100%,0 100%);
}

/* Sound section: replace the abstract SaaS-ish orbit with a branded skull crop from the poster. */
.sound{background:linear-gradient(180deg,#ead8b9,#dfc9a7);color:#201214}
.sound::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(0deg,rgba(61,34,29,.06) 0 1px,transparent 1px 5px);
  mix-blend-mode:multiply;
}
.wave{isolation:isolate}
.wave::before{
  content:"";
  position:absolute;
  width:min(430px,90%);aspect-ratio:1;
  border-radius:50%;
  background-image:var(--macabra-poster-image);
  background-size:195%;
  background-position:50% 29%;
  filter:saturate(.82) contrast(1.08) sepia(.08);
  opacity:.16;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle,black 0 56%,transparent 73%);
  mask-image:radial-gradient(circle,black 0 56%,transparent 73%);
  z-index:-1;
}
.wave-ring{border-color:rgba(72,37,30,.16);box-shadow:0 0 0 50px rgba(123,64,107,.026),0 0 0 100px rgba(214,111,13,.022)}
.wave-bars i{border-radius:1px;background:linear-gradient(180deg,#7e2d91,#c04e19,#e59a08);box-shadow:0 0 10px rgba(157,52,199,.07)}

/* Experience cards: offset print panels, not UI cards. */
.experience{background:linear-gradient(180deg,#080405,#0d0708)}
.experience-grid{gap:18px}
.exp-card{
  border:1px solid rgba(244,154,8,.19);
  background:
    linear-gradient(145deg,rgba(244,154,8,.026),transparent 45%),
    linear-gradient(160deg,#120a0c,#080506);
  clip-path:polygon(0 2%,3% 0,97% .7%,100% 4%,99% 97%,96% 100%,3% 99%,0 96%);
  box-shadow:12px 14px 0 rgba(157,52,199,.025);
}
.exp-card::before{border-radius:0;transform:rotate(18deg);border-color:rgba(157,52,199,.13);box-shadow:0 0 0 24px rgba(244,154,8,.018)}
.exp-num{color:rgba(244,154,8,.17)}
.exp-card h3{color:#f5dfbd}

/* DJs: editorial poster rows with rough edges. */
.djs-section{background:radial-gradient(45% 45% at 94% 15%,rgba(157,52,199,.15),transparent 70%),linear-gradient(180deg,#11080a,#070405)}
.dj-editorial{border-top-color:rgba(244,154,8,.25);padding-top:20px;margin-top:8px}
.dj-photo{
  border:1px solid rgba(244,154,8,.13);
  clip-path:polygon(.7% 1%,98.5% 0,100% 96%,97.5% 100%,2% 99%,0 96%,.4% 4%);
  box-shadow:16px 18px 0 rgba(157,52,199,.045);
}
.dj-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(7,4,5,.56)),radial-gradient(circle at 78% 20%,rgba(157,52,199,.16),transparent 35%);mix-blend-mode:screen}

/* Venue: let the official poster breathe instead of behaving like an image card. */
.info{background:linear-gradient(180deg,#0d0708,#180b0f 58%,#090506)}
.poster-mini{
  border-color:rgba(244,154,8,.22);
  clip-path:polygon(.6% 1.1%,98.7% 0,100% 97%,97.7% 100%,1.6% 99%,0 96%,.5% 4%);
  box-shadow:0 32px 90px rgba(0,0,0,.45),0 0 42px rgba(157,52,199,.07);
}
.poster-stamp{background:#0a0607;border-color:rgba(244,154,8,.58);color:#ffc13e;clip-path:polygon(1% 8%,98% 0,100% 90%,95% 100%,4% 96%,0 82%)}

/* Tickets: reminiscent of the three gravestone information blocks in the poster. */
.tickets{
  background:
    radial-gradient(circle at 78% 43%,rgba(157,52,199,.48),transparent 29%),
    radial-gradient(circle at 37% 72%,rgba(80,26,86,.22),transparent 33%),
    linear-gradient(135deg,#b94f08,#f49a08 55%,#da710b);
}
.ticket-side{
  position:relative;
  background:linear-gradient(150deg,rgba(13,7,8,.96),rgba(31,12,20,.94));
  border:1px solid rgba(255,192,49,.32);
  clip-path:polygon(4% 0,96% 1%,100% 7%,99% 95%,94% 100%,7% 99%,0 94%,1% 8%);
  box-shadow:14px 16px 0 rgba(80,26,86,.18),0 28px 80px rgba(48,17,4,.34);
}
.ticket-side::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(157,52,199,.20);pointer-events:none;
  clip-path:polygon(3% 0,97% 1%,100% 5%,99% 96%,95% 100%,5% 99%,0 95%,1% 5%);
}
.price{text-shadow:0 0 25px rgba(244,154,8,.18)}
.ticket-extras .ticket-extra{border-color:rgba(255,192,49,.20);background:rgba(12,7,8,.78)}

/* FAQ and closing: dark cemetery atmosphere using the poster itself as ambient texture. */
.faq-section{background:linear-gradient(180deg,#090506,#12080b)}
.final{
  background:
    linear-gradient(180deg,rgba(7,4,5,.60),rgba(7,4,5,.92)),
    var(--macabra-poster-image) center 72% / cover no-repeat,
    #070405;
}
.final::before{background:rgba(7,4,5,.18);border-color:rgba(244,154,8,.13);box-shadow:0 0 0 75px rgba(157,52,199,.026),0 0 0 150px rgba(244,154,8,.013)}
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,5,.38),rgba(7,4,5,.86));pointer-events:none}
.final .wrap{z-index:2}
.final-brand{text-shadow:0 3px 0 #8b3908,0 0 24px rgba(244,154,8,.22),0 0 48px rgba(157,52,199,.10)}
.footer-logo{width:145px;filter:drop-shadow(0 0 15px rgba(244,154,8,.09))}

/* Slightly more deliberate motion. */
.reveal{transform:translateY(24px) scale(.992);filter:blur(2px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s ease}
.reveal.in{transform:none;filter:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-poster-wrap{width:min(620px,94%);margin:0 auto;transform:rotate(.8deg)}
  .hero .eyebrow{margin-left:0}
  .hero-poster{width:100%}
}
@media (max-width:660px){
  .hero{padding-top:94px;background:radial-gradient(80% 50% at 50% 76%,rgba(157,52,199,.15),transparent 75%),linear-gradient(180deg,#10080a,#090506)}
  .hero-poster-wrap{width:100%;margin-top:4px}
  .hero-poster{clip-path:polygon(.8% 1%,98.4% 0,100% 97%,97% 100%,2% 99%,0 96%,.5% 4%)}
  .hero-meta{grid-template-columns:1fr 1fr}
  .hero-meta div:last-child{grid-column:1/-1}
  .manifesto-kicker{font-size:.58rem;padding:11px 15px 9px}
  .wave::before{width:310px}
  .ticket-side{clip-path:polygon(3% 0,97% 1%,100% 5%,99% 96%,95% 100%,5% 99%,0 95%,1% 5%)}
}

@media (prefers-reduced-motion:reduce){
  .hero-poster,.reveal{transition:none!important}
}