@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap');

:root{
  --gold:#d8b56f;
  --gold-light:#ffe2a3;
  --red:#9e1919;
  --red-bright:#ff3a2f;
  --black:#050505;
  --line:rgba(216,181,111,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;cursor:none}
body{background:var(--black);color:#dedede;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;cursor:none}
a,button{cursor:none}
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 18px rgba(255,65,40,.9)}
.cursor-ring{width:34px;height:34px;border-radius:50%;border:1px solid rgba(216,181,111,.75);box-shadow:0 0 18px rgba(255,0,0,.35),inset 0 0 10px rgba(216,181,111,.18);transition:.18s}
.cursor-ring.hover{width:52px;height:52px;border-color:rgba(255,58,47,.95)}

.bg{position:fixed;inset:0;z-index:-7;overflow:hidden;background:#020202}
#bgVideo{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.12) brightness(.75)}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(90,0,0,.16),rgba(0,0,0,.82) 58%,#000 100%),linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.95))}
.hell-light{position:absolute;left:50%;bottom:-18%;width:80vw;height:45vh;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,38,20,.22),transparent 68%);animation:hellPulse 4s ease-in-out infinite}
@keyframes hellPulse{0%,100%{opacity:.45;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.08)}}

.smoke{position:fixed;pointer-events:none;z-index:-2;filter:blur(32px);opacity:.2;background:radial-gradient(circle at 20% 75%,rgba(160,160,160,.34),transparent 35%),radial-gradient(circle at 60% 75%,rgba(210,210,210,.20),transparent 42%),radial-gradient(circle at 90% 80%,rgba(150,150,150,.22),transparent 38%)}
.smoke-1{inset:auto -12% -24% -12%;height:48vh;animation:smokeRise 18s ease-in-out infinite alternate}
.smoke-2{inset:20% -20% auto -20%;height:40vh;opacity:.12;animation:smokeDrift 28s ease-in-out infinite alternate}
.smoke-3{inset:auto -10% 10% -10%;height:36vh;opacity:.1;animation:smokeRise 22s ease-in-out infinite alternate-reverse}
@keyframes smokeRise{from{transform:translateY(50px) translateX(-35px) scale(1)}to{transform:translateY(-90px) translateX(35px) scale(1.18)}}
@keyframes smokeDrift{from{transform:translateX(-80px) scale(1.08)}to{transform:translateX(80px) scale(1.22)}}

.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(90,0,0,.38),rgba(0,0,0,.98) 62%),#020202;transition:opacity 1.2s ease,visibility 1.2s ease}
.gate.hidden{opacity:0;visibility:hidden}
.gate-panel{max-width:920px;padding:64px 42px;position:relative;background:linear-gradient(rgba(0,0,0,.48),rgba(0,0,0,.78));border:1px solid var(--line);box-shadow:0 0 90px rgba(130,0,0,.42),inset 0 0 55px rgba(216,181,111,.035)}
.gate-panel:before,.gate-panel:after{content:"";position:absolute;inset:14px;pointer-events:none;border:1px solid rgba(158,25,25,.32)}
.gate-panel h1{font-family:Cinzel,serif;font-size:clamp(2.4rem,7vw,5.7rem);color:var(--gold);line-height:.95;text-shadow:0 0 14px rgba(255,226,163,.6),0 0 44px rgba(255,58,47,.32)}
.eyebrow,.section-title p{color:var(--red-bright);font-weight:bold;letter-spacing:5px;text-transform:uppercase}
.sigil{width:min(480px,85%);height:1px;margin:28px auto;background:linear-gradient(90deg,transparent,var(--gold),var(--red-bright),var(--gold),transparent);box-shadow:0 0 22px rgba(255,58,47,.6)}
.gate-text{line-height:1.8;color:#cfcfcf}

.diablo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:34px;padding:0 42px;color:#fff;text-decoration:none;font-size:.9rem;font-weight:800;letter-spacing:2px;border:1px solid rgba(255,226,163,.28);background:linear-gradient(135deg,rgba(80,5,5,.95),rgba(145,22,22,.95) 50%,rgba(52,3,3,.95));box-shadow:0 0 28px rgba(255,0,0,.28),inset 0 0 22px rgba(255,255,255,.05);position:relative;overflow:hidden;transition:.25s}
.diablo-btn:before{content:"";position:absolute;inset:0;transform:translateX(-115%);background:linear-gradient(90deg,transparent,rgba(255,226,163,.34),transparent);transition:.55s}
.diablo-btn:hover{transform:translateY(-4px) scale(1.02);filter:brightness(1.18);box-shadow:0 0 36px rgba(255,0,0,.48),inset 0 0 28px rgba(255,255,255,.08)}
.diablo-btn:hover:before{transform:translateX(115%)}
.secondary{background:linear-gradient(135deg,rgba(20,20,20,.96),rgba(55,20,20,.95),rgba(6,6,6,.96))}

.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:36px}
.hero-inner{max-width:1120px}
.logo{margin-top:18px;font-family:Cinzel,serif;font-size:clamp(3.05rem,10vw,8.7rem);font-weight:900;line-height:.88;color:var(--gold);text-shadow:0 0 10px rgba(255,226,163,.9),0 0 30px rgba(255,170,58,.75),0 0 70px rgba(255,58,47,.45),0 0 120px rgba(120,0,0,.55);animation:logoPulse 1.7s infinite,logoShake 3.5s infinite}
@keyframes logoPulse{0%{filter:brightness(.88)}18%{filter:brightness(1.55)}38%{filter:brightness(1.02)}58%{filter:brightness(1.9)}78%{filter:brightness(1.1)}100%{filter:brightness(.9)}}
@keyframes logoShake{0%{transform:translate(0,0) rotate(0)}1%{transform:translate(-3px,2px) rotate(-.18deg)}2%{transform:translate(3px,-2px) rotate(.18deg)}3%{transform:translate(-2px,3px) rotate(-.12deg)}4%{transform:translate(2px,-3px) rotate(.12deg)}5%,100%{transform:translate(0,0) rotate(0)}}
.subtitle{margin-top:30px;color:#d7d7d7;letter-spacing:2px;font-size:1.25rem}
.hero-actions{margin-top:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:18px}

.scroll-indicator{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);width:64px;height:64px;z-index:25;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--gold-light);font-size:2.5rem;background:radial-gradient(circle,rgba(110,5,5,.7),rgba(4,4,4,.96));border:1px solid rgba(216,181,111,.48);clip-path:polygon(50% 0%,88% 18%,100% 55%,50% 100%,0 55%,12% 18%);box-shadow:0 0 24px rgba(255,0,0,.5),inset 0 0 18px rgba(255,226,163,.14);animation:scrollFloat 1.35s ease-in-out infinite,scrollGlow 2s ease-in-out infinite;transition:opacity .5s ease,transform .3s ease,box-shadow .3s ease}
.scroll-indicator span{transform:translateY(-6px);text-shadow:0 0 16px rgba(255,58,47,.8)}
.scroll-indicator.hide{opacity:0;pointer-events:none}
@keyframes scrollFloat{0%{bottom:28px}50%{bottom:44px}100%{bottom:28px}}
@keyframes scrollGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}

.section{padding:118px 22px;position:relative}
.section-title{text-align:center;margin-bottom:46px}
.section-title h2,.patch-head h2,.quest-card h2{font-family:Cinzel,serif;color:var(--gold);font-size:clamp(2rem,4vw,3.05rem);text-shadow:0 0 28px rgba(255,0,0,.28)}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:22px;max-width:860px;margin:auto}
.countdown div{padding:28px 18px;text-align:center;background:linear-gradient(rgba(12,12,12,.92),rgba(3,3,3,.92));border:1px solid var(--line);box-shadow:0 0 35px rgba(120,0,0,.22),inset 0 0 22px rgba(216,181,111,.025)}
.countdown span{display:block;color:#ff4a3f;font-size:3.35rem;font-weight:900;text-shadow:0 0 20px rgba(255,0,0,.5)}
.countdown small{color:#bebebe;letter-spacing:1px}

.boss-frame{max-width:1180px;margin:auto}
.boss-poster{width:min(1120px,96%);display:block;margin:auto;border:2px solid rgba(216,181,111,.28);box-shadow:0 0 70px rgba(255,0,0,.34),0 0 120px rgba(0,0,0,.8),inset 0 0 30px rgba(255,255,255,.05);transition:.4s}
.boss-poster:hover{transform:scale(1.018);filter:brightness(1.08)}
.ornament{width:min(860px,78%);height:1px;margin:0 auto 18px;background:linear-gradient(90deg,transparent,rgba(216,181,111,.8),rgba(255,58,47,.7),rgba(216,181,111,.8),transparent);box-shadow:0 0 20px rgba(255,0,0,.45)}
.ornament.bottom{margin:18px auto 0}
.boss h3{text-align:center;margin-top:28px;font-family:Cinzel,serif;color:var(--gold-light);font-size:clamp(1.45rem,3vw,2.3rem)}
.skills{max-width:1100px;margin:34px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.skills article,.reward-grid article{padding:22px;background:linear-gradient(rgba(14,14,14,.92),rgba(4,4,4,.92));border:1px solid rgba(216,181,111,.16);box-shadow:0 0 24px rgba(120,0,0,.14)}
.skills strong{display:block;color:var(--gold);margin-bottom:8px}.skills span{color:#bdbdbd;font-size:.95rem;line-height:1.55}

.patch-panel{max-width:1100px;margin:auto;padding:58px;position:relative;background:linear-gradient(rgba(14,14,14,.96),rgba(3,3,3,.97));border:1px solid rgba(216,181,111,.18);box-shadow:0 0 70px rgba(120,0,0,.32),inset 0 0 45px rgba(216,181,111,.025)}
.patch-panel:before,.patch-panel:after{content:"";position:absolute;inset:14px;border:1px solid rgba(158,25,25,.22);pointer-events:none}
.patch-head{text-align:center}.patch-head p{color:var(--red-bright);font-weight:bold;letter-spacing:4px}.patch-head span{color:#bdbdbd}
.divider{height:1px;margin:34px auto;width:90%;background:linear-gradient(90deg,transparent,rgba(216,181,111,.65),rgba(255,58,47,.55),rgba(216,181,111,.65),transparent)}
.patch-block{padding:26px 0;border-top:1px solid rgba(255,255,255,.07)}.patch-block:first-of-type{border-top:none}
.patch-block h3{margin-bottom:14px;color:var(--gold-light);font-family:Cinzel,serif}.patch-block p,.patch-block li{line-height:1.85;color:#d2d2d2}.patch-block ul{padding-left:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px}

.reward-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}.reward-grid article{text-align:center;transition:.3s}.reward-grid article:hover{transform:translateY(-7px);box-shadow:0 0 32px rgba(255,0,0,.25)}.reward-grid span{color:var(--red-bright);font-size:2rem}.reward-grid h3{margin:12px 0;color:var(--gold);font-family:Cinzel,serif}.reward-grid p{color:#bfbfbf}
.rsvp{text-align:center}.quest-card{max-width:760px;margin:auto;padding:52px 32px;background:linear-gradient(rgba(14,14,14,.94),rgba(4,4,4,.95));border:1px solid rgba(216,181,111,.18);box-shadow:0 0 55px rgba(120,0,0,.25)}.quest-card p{margin-top:16px;line-height:1.7}
footer{padding:42px 20px;text-align:center;color:#8c8c8c;background:rgba(0,0,0,.72);border-top:1px solid rgba(255,255,255,.07)}
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s ease,transform 1s ease}.reveal.active{opacity:1;transform:translateY(0)}

@media(max-width:760px){html,body,a,button{cursor:auto}.cursor-dot,.cursor-ring{display:none}.countdown{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.patch-panel{padding:36px 24px}.gate-panel{padding:42px 24px}.diablo-btn{width:100%;max-width:360px;padding:0 20px}.hero-actions{flex-direction:column;align-items:center}.scroll-indicator{width:54px;height:54px;font-size:2rem}}


/* ===== Atualizações do convite ===== */
.weakness-card{
  max-width:860px;
  margin:34px auto 0;
  padding:28px;
  background:linear-gradient(rgba(40,5,5,.82),rgba(10,2,2,.92));
  border:1px solid rgba(255,58,47,.25);
  box-shadow:0 0 30px rgba(255,0,0,.18);
  text-align:center;
}
.weakness-card h4{
  font-family:Cinzel,serif;
  font-size:2rem;
  color:var(--gold-light);
  margin:8px 0 12px;
  text-shadow:0 0 18px rgba(255,0,0,.35);
}
.weakness-card p:last-child{
  line-height:1.7;
  color:#d8d8d8;
}
.quest-cost{
  margin:28px auto 4px;
  padding:22px;
  max-width:420px;
  background:linear-gradient(rgba(80,5,5,.75),rgba(10,10,10,.92));
  border:1px solid rgba(216,181,111,.25);
  box-shadow:0 0 24px rgba(255,0,0,.18);
}
.quest-cost span{
  display:block;
  color:var(--red-bright);
  font-size:.78rem;
  font-weight:bold;
  letter-spacing:3px;
}
.quest-cost strong{
  display:block;
  margin-top:8px;
  font-family:Cinzel,serif;
  font-size:2rem;
  color:var(--gold-light);
}
.quest-cost small{
  display:block;
  margin-top:4px;
  color:#cfcfcf;
}
.scroll-indicator{
  background:radial-gradient(circle,rgba(120,40,190,.85) 0%,rgba(80,20,140,.90) 35%,rgba(35,10,70,.95) 70%,rgba(4,4,4,.98) 100%) !important;
  border:1px solid rgba(190,140,255,.45) !important;
  box-shadow:0 0 18px rgba(180,70,255,.65),0 0 38px rgba(120,0,255,.45),inset 0 0 20px rgba(255,220,255,.10) !important;
}
.scroll-indicator span{
  text-shadow:0 0 8px rgba(255,255,255,.9),0 0 18px rgba(210,120,255,.9),0 0 34px rgba(140,40,255,.95) !important;
}
@keyframes scrollGlow{
  0%,100%{filter:brightness(1);box-shadow:0 0 18px rgba(150,50,255,.45),0 0 35px rgba(100,0,220,.30),inset 0 0 20px rgba(255,255,255,.08)}
  50%{filter:brightness(1.35);box-shadow:0 0 30px rgba(210,120,255,.85),0 0 70px rgba(140,40,255,.65),inset 0 0 24px rgba(255,255,255,.18)}
}