/* HERO
   Secao inicial: fundo, titulo, acoes e o emblema com orbitas. */

.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 83% 48%,#5c132224,transparent 46%),radial-gradient(ellipse at 45% 100%,#8f182415,transparent 50%),#0b0b0f
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(90deg,#0b0b0f15,transparent 70%),linear-gradient(0deg,#0b0b0f,transparent 25%)
}
.hero-grid {
  position:absolute;
  z-index:-2;
  width:130%;
  height:550px;
  left:-15%;
  bottom:-290px;
  background:linear-gradient(#b83b3620 1px,transparent 1px),linear-gradient(90deg,#b83b3620 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(450px) rotateX(58deg);
  mask-image:radial-gradient(ellipse,#000,transparent 65%)
}
.hero-haze {
  position:absolute;
  inset:0;
  z-index:-3;
  background:radial-gradient(ellipse at 79% 55%,#be1c3020,transparent 43%);
  animation:breath 9s ease-in-out infinite alternate
}
#embers {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2
}
.hero-layout {
  min-height:650px;
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:center;
  position:relative;
  padding-block:72px 62px;
  gap:12px
}
.hero-copy {
  position:relative;
  z-index:3
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  letter-spacing:.23em;
  font-weight:600;
  color:var(--gold);
  line-height:1.7;
  margin:0 0 24px
}
.tiny-diamond {
  display:inline-block;
  width:5px;
  height:5px;
  transform:rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 14px #cf996b55;
  flex:none
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font:500 clamp(56px,5.6vw,85px)/1.11 var(--serif);
  letter-spacing:-.075em;
  margin:0 0 25px;
  white-space:nowrap
}
h1 em,h2 em,h3 em {
  font-style:normal;
  color:var(--gold-light)
}
h1 em {
  color:#e24c51;
  text-shadow:0 0 55px #d9263235
}
h1::after {
  content:"";
  display:block;
  width:56px;
  height:1px;
  background:linear-gradient(90deg,var(--red),transparent);
  margin-top:30px
}
.hero-description {
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  color:#ddd4cb;
  margin-bottom:14px
}
.hero-detail {
  max-width:385px;
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:31px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px
}
.button {
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:53px;
  padding:16px 23px;
  font-size:10px;
  letter-spacing:.08em;
  font-weight:600;
  white-space:nowrap;
  transition:background .25s,box-shadow .25s,transform .25s;
  overflow:hidden
}
.button-primary {
  background:linear-gradient(115deg,#b72132,#841a27);
  border:1px solid #dd445547;
  box-shadow:0 8px 30px #9a112627,inset 0 1px #ff9b9b12
}
.button-primary::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-140%) skew(-25deg);
  background:linear-gradient(90deg,transparent,#ffffff18,transparent);
  transition:transform .6s
}
.button-primary:hover {
  background:linear-gradient(115deg,#cf2d40,#982134);
  box-shadow:0 8px 45px #b72b4045;
  transform:translateY(-2px)
}
.button-primary:hover::after {
  transform:translateX(140%) skew(-25deg)
}
.button>svg {
  width:17px;
  height:17px
}
.button-arrow {
  margin-left:18px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:10px;
  color:#c4b4a0;
  transition:color .2s
}
.text-link:hover {
  color:var(--gold-light)
}
.text-link svg {
  width:17px
}
.hero-tags {
  display:flex;
  gap:24px;
  margin-top:30px;
  font-size:9px;
  color:#b1a7aa
}
.hero-tags span {
  display:flex;
  gap:7px;
  align-items:center
}
.hero-tags svg {
  width:13px;
  height:13px;
  color:#b79a77
}
.hero-emblem {
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-width:510px;
  justify-self:end;
  display:grid;
  place-items:center;
  transform:translate3d(var(--emblem-x,0px),var(--emblem-y,0px),0);
  transition:transform .7s ease-out;
  isolation:isolate
}
.hero-emblem::before {
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle,#68263232,transparent 68%);
  box-shadow:0 0 100px 40px #b3202912
}
.sigil-orbit {
  position:absolute;
  inset:3%;
  border-radius:50%;
  border:1px solid #9c665626
}
.orbit-one::before,.orbit-one::after {
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:#d3986d;
  box-shadow:0 0 18px #d5403f
}
.orbit-one::after {
  top:auto;
  bottom:-4px;
  background:#b23037
}
.orbit-one {
  animation:orbit 65s linear infinite
}
.orbit-two {
  inset:11%;
  border:1px dashed #a0665647;
  animation:orbit 100s linear infinite reverse
}
.orbit-three {
  inset:19%;
  border-color:#b7956326;
  box-shadow:0 0 35px #a9312316,inset 0 0 35px #a9312316
}
.orbit-three::after {
  content:"";
  position:absolute;
  inset:14%;
  transform:rotate(45deg);
  border:1px solid #bd9c6620
}
.rune {
  position:absolute;
  font:9px var(--serif);
  letter-spacing:.35em;
  color:#b48666;
  opacity:.72
}
.rune-north {
  top:0;
  left:50%;
  transform:translateX(-50%)
}
.rune-west {
  left:-2%;
  top:49%;
  transform:rotate(-90deg)
}
.rune-east {
  right:-2%;
  top:49%;
  transform:rotate(90deg)
}
.emblem-logo {
  position:relative;
  z-index:1;
  width:78%;
  height:auto;
  filter:drop-shadow(0 4px 2px #080609) drop-shadow(0 0 34px #b74a2338);
  animation:emblem-glow 6s ease-in-out infinite alternate
}
.emblem-beam {
  position:absolute;
  z-index:-1;
  width:1px;
  top:2%;
  bottom:-1%;
  background:linear-gradient(0deg,transparent,#c1384344,transparent);
  box-shadow:0 0 50px 5px #b82b2c12;
  transform:rotate(35deg)
}
.emblem-base {
  position:absolute;
  bottom:4%;
  left:18%;
  right:18%;
  height:3px;
  background:linear-gradient(90deg,transparent,#d83b3855,transparent);
  box-shadow:0 0 35px 4px #ac253027
}
.emblem-coordinate {
  position:absolute;
  bottom:-7%;
  font:8px var(--sans);
  letter-spacing:.3em;
  color:#867470
}
.hero-bottom {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:28px;
  font-size:8px;
  color:#bba28d;
  letter-spacing:.2em
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:12px
}
.scroll-cue>span {
  width:18px;
  height:27px;
  border:1px solid #81625366;
  border-radius:12px;
  position:relative
}
.scroll-cue>span::after {
  content:"";
  position:absolute;
  top:5px;
  left:7px;
  width:2px;
  height:5px;
  background:var(--gold);
  animation:scroll-tick 2s ease-in-out infinite
}
.hero-bottom p {
  margin:0;
  color:#8d7c7c
}
.hero-bottom b {
  font-weight:400;
  color:#bea797
}
.hero-index {
  font:17px var(--condensed);
  letter-spacing:.1em;
  color:var(--gold)
}
.hero-index i {
  color:#64534c;
  font-style:normal;
  margin:0 8px
}