@font-face{font-family:MageraSerif;src:url('/templates/tibiacom/martel.ttf') format('truetype');font-display:swap}
:root{--gold:#d7ae52;--gold2:#f3d98d;--blue:#2f70b9;--ink:#050608;--muted:#a9adb5}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#020304}
body.magera-intro{margin:0;min-height:100vh;background:#020304;color:#f4f4f4;font-family:MageraSerif,Georgia,serif;overflow-x:hidden}
body.magera-intro.is-loading{overflow:hidden}
a{color:inherit}
.cinematic{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#020304;z-index:0}
.cinematic__art{position:absolute;inset:-5%;background:linear-gradient(180deg,rgba(0,0,0,.08),#020304 82%),url('/templates/tibiacom/images/header/background-artwork.jpg') center 14%/cover no-repeat;opacity:.52;filter:saturate(.9) contrast(1.08);transform:scale(1.04)}
.cinematic__figure{position:absolute;top:0;bottom:0;width:min(52vw,760px);background-size:contain;background-repeat:no-repeat;opacity:.18;filter:saturate(.7) contrast(1.15)}
.cinematic__figure--left{left:-14vw;background-image:url('/templates/tibiacom/images/magera-parallax.png');background-position:left center;transform:translate3d(calc(var(--mx,0)*-12px),calc(var(--my,0)*-8px),0)}
.cinematic__figure--right{right:-16vw;background-image:url('/templates/tibiacom/images/magera-parallax2.png');background-position:right center;transform:translate3d(calc(var(--mx,0)*12px),calc(var(--my,0)*8px),0)}
.cinematic__glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(40,93,166,.22),transparent 30%),radial-gradient(circle at 50% 60%,rgba(211,167,70,.08),transparent 36%)}
.cinematic__vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 10%,rgba(0,0,0,.4) 56%,#010203 100%)}
.noise{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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='.42'/%3E%3C/svg%3E")}
.particles{position:absolute;inset:0}
.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold2);box-shadow:0 0 9px rgba(243,217,141,.7);opacity:0;animation:drift var(--dur,9s) linear var(--delay,0s) infinite}
@keyframes drift{0%{transform:translate3d(0,18px,0);opacity:0}15%{opacity:.7}80%{opacity:.3}100%{transform:translate3d(var(--dx,20px),-120px,0);opacity:0}}
.intro-shell{position:relative;z-index:2}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px 44px;text-align:center}
.hero__eyebrow{display:flex;align-items:center;gap:14px;color:rgba(232,220,191,.72);font:600 10px/1.2 Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;margin-bottom:20px}
.hero__eyebrow span{width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero__eyebrow span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.hero__logo{display:block;width:560px;max-width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.8)) drop-shadow(0 0 28px rgba(69,116,181,.18));animation:logoIn 1.35s cubic-bezier(.2,.72,.23,1) both}
@keyframes logoIn{from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(7px)}to{opacity:1;transform:none}}
.hero__tagline{width:100%;max-width:520px;margin:8px 0 32px;color:#c9cbd0;font:500 12px/1.5 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.loader{display:grid;justify-items:center;gap:15px;transition:opacity .6s ease,transform .6s ease}
.loader__ring{position:relative;width:140px;height:140px}
.loader__ring svg{width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 10px rgba(52,112,189,.22))}
.loader__ring circle{fill:none;stroke-width:3}
.loader__track{stroke:rgba(255,255,255,.08)}
.loader__progress{stroke:url(#none);stroke:var(--gold);stroke-linecap:round;stroke-dasharray:364.425;stroke-dashoffset:364.425;transition:stroke .3s ease}
.loader__ring:before,.loader__ring:after{content:"";position:absolute;inset:9px;border:1px solid rgba(67,123,191,.14);border-radius:50%;animation:spin 11s linear infinite}
.loader__ring:after{inset:1px;border-color:rgba(215,174,82,.08);animation-direction:reverse;animation-duration:17s}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 0 20px rgba(64,124,195,.25)}
.loader__value strong{font:400 30px/1 Arial,sans-serif;letter-spacing:-.04em}
.loader__value small{font:600 9px/1 Arial,sans-serif;margin:8px 0 0 3px;color:var(--gold)}
.loader__phrase{height:22px;margin:0;color:#d8d9dd;font:500 11px/1.5 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.loader__line{width:180px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.loader__line span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold2));box-shadow:0 0 10px var(--gold);transition:width .08s linear}
.is-ready .loader{opacity:0;transform:translateY(-8px);pointer-events:none}
.scroll-cue{height:0;opacity:0;display:grid;justify-items:center;gap:8px;color:rgba(255,255,255,.5);font:600 9px/1 Arial,sans-serif;letter-spacing:.28em;transition:opacity .8s ease .2s,height .8s ease}
.scroll-cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:pulseLine 1.8s ease-in-out infinite}
.is-ready .scroll-cue{height:64px;opacity:1}
@keyframes pulseLine{0%,100%{opacity:.25;transform:scaleY(.7);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
.legacy{position:relative;min-height:100vh;padding:100px 24px 120px;display:flex;justify-content:center;background:linear-gradient(180deg,transparent,#020304 12%,#030405 100%);opacity:0;transform:translateY(30px);transition:opacity 1s ease .25s,transform 1s ease .25s}
.is-ready .legacy{opacity:1;transform:none}
.legacy__frame{width:min(980px,100%);position:relative;text-align:center;padding:64px clamp(22px,5vw,70px);border:1px solid rgba(216,174,82,.18);background:linear-gradient(180deg,rgba(10,13,17,.88),rgba(3,4,6,.94));box-shadow:0 40px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.025)}
.legacy__frame:before,.legacy__frame:after{content:"";position:absolute;width:90px;height:90px;border-color:rgba(215,174,82,.48)}
.legacy__frame:before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
.legacy__frame:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.legacy__ornament{width:58px;height:58px;margin:-94px auto 28px;display:grid;place-items:center;border:1px solid rgba(215,174,82,.38);background:#05070a;color:var(--gold2);font-size:22px;transform:rotate(45deg);box-shadow:0 0 26px rgba(215,174,82,.08)}
.legacy__ornament span{display:block;transform:rotate(-45deg)}
.legacy__kicker{margin:0 0 15px;color:var(--gold);font:600 10px/1.4 Arial,sans-serif;letter-spacing:.3em}
.legacy h1{margin:0 auto 38px;max-width:800px;font-size:clamp(28px,4vw,50px);font-weight:400;line-height:1.18;letter-spacing:-.025em;color:#f1eee7}
.legacy h1 em{font-style:normal;color:#86aeda}
.legacy__copy{display:grid;gap:18px;max-width:790px;margin:0 auto;text-align:left}
.legacy__copy p{margin:0;color:#afb3bc;font:400 clamp(14px,1.4vw,16px)/1.9 Arial,sans-serif}
.legacy__copy strong{color:#e8e6df;font-weight:600}
.legacy__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:48px auto;background:rgba(215,174,82,.14);border:1px solid rgba(215,174,82,.14)}
.legacy__stats article{min-height:130px;padding:24px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080a0d}
.legacy__stats strong{color:var(--gold2);font:600 clamp(22px,3vw,34px)/1 Arial,sans-serif;letter-spacing:-.04em}
.legacy__stats span{margin-top:11px;color:#8f949d;font:600 9px/1.55 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
blockquote{margin:46px auto 38px;max-width:730px;color:#d9d8d2;font-size:clamp(17px,2.2vw,25px);line-height:1.7;font-style:italic}
blockquote:before{content:"✦";display:block;color:var(--gold);font-size:12px;margin-bottom:16px;font-style:normal}
.legacy__cta{display:grid;justify-items:center;gap:13px;margin-top:38px}
.ready-button{position:relative;min-width:min(340px,88vw);padding:20px 34px;display:flex;align-items:center;justify-content:center;gap:22px;text-decoration:none;border:1px solid rgba(215,174,82,.48);background:linear-gradient(135deg,rgba(216,174,82,.1),rgba(47,112,185,.08));color:#f7f1e1;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ready-button:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.12),transparent 80%);transform:translateX(-120%);transition:transform .7s ease}
.ready-button:hover{transform:translateY(-2px);border-color:var(--gold2);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 30px rgba(215,174,82,.09)}
.ready-button:hover:before{transform:translateX(120%)}
.ready-button span{font:600 13px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.ready-button b{font:400 22px/1 Arial,sans-serif;color:var(--gold2);transition:transform .25s ease}
.ready-button:hover b{transform:translateX(5px)}
.legacy__cta small{color:#71767f;font:600 8px/1 Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase}
@media (max-width:760px){.hero{padding:40px 18px 38px}.hero__eyebrow span{width:22px}.hero__logo{width:100%;max-width:500px}.legacy{padding:84px 14px}.legacy__frame{padding:54px 20px}.legacy__stats{grid-template-columns:1fr 1fr}.legacy__stats article{min-height:112px}.cinematic__figure{opacity:.1;width:78vw}.legacy__copy p{line-height:1.75}}
@media (max-width:420px){.hero__eyebrow{font-size:8px;gap:8px}.hero__tagline{max-width:330px;font-size:8px;letter-spacing:.13em;line-height:1.7}.loader__ring{width:124px;height:124px}.legacy h1{font-size:29px}.legacy__stats strong{font-size:24px}.ready-button{padding:18px 24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.particle,.loader__ring:before,.loader__ring:after,.scroll-cue i,.hero__logo{animation:none!important}.cinematic__figure{transform:none!important}.ready-button,.loader,.legacy{transition:none!important}}

/* MAGERA_EFFECTS_V4 */
.hero__logo-stage{position:relative;width:560px;max-width:100%;isolation:isolate}
.hero__logo-stage .hero__logo{position:relative;z-index:2;width:100%;max-width:none}
.hero__logo-stage:before{content:"";position:absolute;z-index:0;inset:7% -8% 0;border:1px solid rgba(45,133,245,.18);border-radius:50%;filter:drop-shadow(0 0 10px rgba(52,132,238,.2));transform:rotate(-5deg) scaleY(.68);animation:mageraOrbit 8s ease-in-out infinite}
.hero__logo-stage:after{content:"";position:absolute;z-index:0;inset:12% -4% 7%;border-top:1px solid rgba(238,193,87,.16);border-bottom:1px solid rgba(57,137,240,.12);border-radius:50%;transform:rotate(5deg) scaleY(.58);animation:mageraOrbit 11s ease-in-out -2s infinite reverse}
.hero__orbit{position:absolute;z-index:1;inset:16% 4% 13%;border-radius:50%;box-shadow:0 0 34px rgba(41,118,219,.12),inset 0 0 28px rgba(216,174,82,.04);animation:mageraAura 4.8s ease-in-out infinite}
.hero__eye-glow{position:absolute;z-index:4;left:24.5%;top:29%;width:2.6%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 12%,#9feaff 18%,#19a7ff 38%,rgba(0,123,255,.45) 58%,transparent 76%);box-shadow:0 0 6px #e9fbff,0 0 13px #31baff,0 0 28px rgba(0,119,255,.92),0 0 48px rgba(0,99,255,.45);mix-blend-mode:screen;animation:dragonEyePulse 3.6s ease-in-out infinite}
.hero__eye-glow:after{content:"";position:absolute;left:50%;top:50%;width:460%;height:1px;transform:translate(-50%,-50%) rotate(-10deg);background:linear-gradient(90deg,transparent,rgba(95,201,255,.1),rgba(231,251,255,.95),rgba(95,201,255,.1),transparent);filter:blur(.2px);animation:dragonEyeBeam 3.6s ease-in-out infinite}
.hero__energy-dot{position:absolute;z-index:3;width:7px;height:7px;border-radius:50%;background:#78d8ff;box-shadow:0 0 5px #fff,0 0 13px #1f9cff,0 0 25px rgba(31,156,255,.7);opacity:.25;animation:energyDot 5s ease-in-out infinite}
.hero__energy-dot--1{left:7%;top:37%;animation-delay:-.8s}

.hero__energy-dot--2{right:5%;top:30%;width:6px;height:6px;background:#f6cf68;box-shadow:0 0 5px #fff7d6,0 0 13px #f3b631,0 0 25px rgba(243,182,49,.58);animation-delay:-2.2s}
.hero__energy-dot--3{right:14%;bottom:18%;width:5px;height:5px;animation-delay:-3.5s}
@keyframes dragonEyePulse{0%,72%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.7)}78%{opacity:1;transform:translate(-50%,-50%) scale(1.55)}84%{opacity:.72;transform:translate(-50%,-50%) scale(.92)}90%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes dragonEyeBeam{0%,72%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scaleX(.25)}79%,90%{opacity:.95;transform:translate(-50%,-50%) rotate(-10deg) scaleX(1)}}
@keyframes mageraOrbit{0%,100%{opacity:.35;transform:rotate(-5deg) scaleY(.68) scaleX(.98)}50%{opacity:.8;transform:rotate(4deg) scaleY(.7) scaleX(1.03)}}
@keyframes mageraAura{0%,100%{opacity:.32;transform:scale(.97)}50%{opacity:.78;transform:scale(1.025)}}
@keyframes energyDot{0%,100%{opacity:.12;transform:translate3d(0,5px,0) scale(.6)}45%{opacity:.95;transform:translate3d(12px,-8px,0) scale(1.15)}70%{opacity:.35;transform:translate3d(22px,-3px,0) scale(.8)}}
.legacy__ornament{width:64px;height:64px;margin-top:-96px;overflow:visible}
.legacy__ornament img{display:block;width:52px;height:52px;transform:rotate(-45deg);filter:drop-shadow(0 0 8px rgba(238,194,87,.24))}
@media (max-width:420px){.hero__eye-glow{width:3.2%}.hero__energy-dot{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.hero__logo-stage:before,.hero__logo-stage:after,.hero__orbit,.hero__eye-glow,.hero__eye-glow:after,.hero__energy-dot{animation:none!important}}



/* MAGERA_EFFECTS_V5_FIX */
/* The original fantasy font renders the cedilla like extra letters; use a serif with proper PT-BR glyphs here. */
.legacy h1,.legacy h1 em{font-family:Georgia,"Times New Roman",serif!important;font-variant-ligatures:normal!important}
.hero__logo-stage{overflow:visible}
.hero__eye-glow{
  left:21.9%!important;top:27%!important;width:14px!important;height:14px!important;aspect-ratio:auto!important;
  opacity:.92!important;background:radial-gradient(circle,#fff 0 13%,#d9f8ff 14% 22%,#53d0ff 28%,#168eff 45%,rgba(0,94,255,.48) 62%,transparent 76%)!important;
  box-shadow:0 0 7px #fff,0 0 15px #61ddff,0 0 28px #0b91ff,0 0 52px rgba(0,111,255,.92),0 0 82px rgba(0,79,255,.42)!important;
  animation:dragonEyePulseV5 3.2s cubic-bezier(.4,0,.2,1) infinite!important;
}
.hero__eye-glow:before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(126,220,255,.25),rgba(15,126,255,.08) 42%,transparent 70%);filter:blur(2px);animation:dragonEyeAuraV5 3.2s ease-in-out infinite}
.hero__eye-glow:after{width:88px!important;height:2px!important;background:linear-gradient(90deg,transparent,rgba(71,181,255,.22),#effdff,rgba(71,181,255,.22),transparent)!important;box-shadow:0 0 9px rgba(55,185,255,.85);animation:dragonEyeBeamV5 3.2s ease-in-out infinite!important}
@keyframes dragonEyePulseV5{0%,58%,100%{transform:translate(-50%,-50%) scale(.82);filter:brightness(1)}66%{transform:translate(-50%,-50%) scale(1.9);filter:brightness(1.65)}73%{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.15)}80%{transform:translate(-50%,-50%) scale(1.48);filter:brightness(1.5)}}
@keyframes dragonEyeAuraV5{0%,58%,100%{opacity:.22;transform:translate(-50%,-50%) scale(.65)}66%,80%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes dragonEyeBeamV5{0%,60%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scaleX(.12)}66%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)}}

.hero__orbit{inset:5% -1% 4%!important;border:1px solid rgba(55,139,255,.18);box-shadow:0 0 34px rgba(32,122,255,.14),inset 0 0 32px rgba(215,174,82,.035)!important;animation:orbitBreathV5 4.6s ease-in-out infinite!important}
.hero__orbit:before,.hero__orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#70d8ff;box-shadow:0 0 5px #fff,0 0 12px #2ca6ff,0 0 24px rgba(44,166,255,.8)}
.hero__orbit:before{left:7%;top:24%;animation:orbFloatA 4.2s ease-in-out infinite}
.hero__orbit:after{right:8%;bottom:25%;background:#f2c85e;box-shadow:0 0 5px #fff7d2,0 0 12px #e8b63f,0 0 24px rgba(232,182,63,.7);animation:orbFloatB 5.1s ease-in-out infinite}
.hero__energy-dot--1{left:14%!important;top:58%!important;animation:orbFloatC 4.7s ease-in-out infinite!important}
.hero__energy-dot--2{right:15%!important;top:18%!important;animation:orbFloatB 5.4s ease-in-out -1.5s infinite!important}
.hero__energy-dot--3{right:30%!important;bottom:7%!important;animation:orbFloatA 4.9s ease-in-out -2.1s infinite!important}
@keyframes orbitBreathV5{0%,100%{opacity:.28;transform:scale(.98)}50%{opacity:.68;transform:scale(1.018)}}
@keyframes orbFloatA{0%,100%{opacity:.18;transform:translate(0,8px) scale(.7)}45%{opacity:1;transform:translate(28px,-12px) scale(1.25)}72%{opacity:.45;transform:translate(46px,-4px) scale(.9)}}
@keyframes orbFloatB{0%,100%{opacity:.2;transform:translate(0,-4px) scale(.7)}48%{opacity:1;transform:translate(-24px,11px) scale(1.2)}75%{opacity:.5;transform:translate(-44px,3px) scale(.9)}}
@keyframes orbFloatC{0%,100%{opacity:.15;transform:translate(0,0) scale(.65)}50%{opacity:.92;transform:translate(18px,-18px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){
  .hero__eye-glow{animation:none!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
  .hero__eye-glow:before,.hero__eye-glow:after,.hero__orbit,.hero__orbit:before,.hero__orbit:after,.hero__energy-dot{animation:none!important}
}


/* MAGERA_EFFECTS_V6_EYE_ALIGNMENT */
.hero__eye-glow{left:24.6%!important;top:42.2%!important;width:12px!important;height:12px!important}
.hero__eye-glow:before{width:44px!important;height:44px!important}
.hero__eye-glow:after{width:72px!important}


/* MAGERA_EFFECTS_V7_EYE_FIX */
.hero__eye-glow{left:25.2%!important;top:45%!important;width:10px!important;height:10px!important}
.hero__eye-glow:before{width:38px!important;height:38px!important}
.hero__eye-glow:after{width:60px!important}


/* MAGERA_EFFECTS_V8_EYE_FINAL */
.hero__eye-glow{
  left:25.8%!important;
  top:40%!important;
  width:10px!important;
  height:10px!important;
}