:root {
  --gold: 218 177 78;
  --gold-light: 255 226 148;
  --page-x: 50%;
  --page-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --move-x: 0px;
  --move-y: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #030303;
}

body {
  min-height: 100svh;
  color: #fff;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -8;
  background:
    radial-gradient(circle at var(--page-x) var(--page-y), rgba(var(--gold-light), .095), transparent 27rem),
    radial-gradient(ellipse at 50% 48%, rgba(var(--gold), .105) 0%, rgba(124, 82, 20, .055) 30%, transparent 66%),
    linear-gradient(145deg, #010101 0%, #080603 24%, #171006 51%, #070503 76%, #010101 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -7;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 12%, rgba(var(--gold), .022) 38%, rgba(var(--gold-light), .038) 50%, rgba(var(--gold), .018) 61%, transparent 88%),
    radial-gradient(circle at 12% 18%, rgba(126, 81, 17, .12), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(184, 130, 35, .08), transparent 29%);
  opacity: .92;
}

.stage {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  perspective: 1100px;
}

.logo-parallax {
  width: min(48vw, 680px);
  transform:
    translate3d(var(--move-x), var(--move-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(.18, .72, .19, 1);
  will-change: transform;
}

.logo-float {
  position: relative;
  animation: floatLogo 7s ease-in-out infinite;
  will-change: transform;
}

.logo-shell {
  position: relative;
  width: 100%;
  filter:
    drop-shadow(0 0 12px rgba(var(--gold-light), .15))
    drop-shadow(0 20px 45px rgba(0, 0, 0, .78));
  transform: translateZ(42px);
  transition: filter 420ms ease;
  cursor: default;
}

.logo-parallax:hover .logo-shell {
  filter:
    drop-shadow(0 0 17px rgba(var(--gold-light), .25))
    drop-shadow(0 0 34px rgba(var(--gold), .17))
    drop-shadow(0 20px 45px rgba(0, 0, 0, .78));
}

.logo-parallax:hover .logo {
  filter: brightness(1.035) saturate(1.045);
}

.logo-parallax:hover .logo-aura {
  opacity: .98;
}


.logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(1px);
  transition: filter 520ms ease;
}

.logo-shine {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      108deg,
      transparent 30%,
      rgba(255, 250, 221, 0) 41%,
      rgba(255, 250, 221, .78) 49%,
      rgba(255, 230, 156, .26) 54%,
      transparent 66%
    );
  background-size: 240% 100%;
  background-position: 160% 0;
  -webkit-mask: url("../img/logo-grupo-thot.png") center / 100% 100% no-repeat;
  mask: url("../img/logo-grupo-thot.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  animation: metallicSweep 9s cubic-bezier(.45, 0, .25, 1) infinite;
}

.logo-parallax:hover .logo-shine {
  animation: hoverSweep 1.25s cubic-bezier(.2, .72, .18, 1) 1 forwards;
}

.logo-aura {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 120%;
  transform: translate(-50%, -50%) translateZ(-30px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(var(--gold), .17) 0%, rgba(var(--gold), .06) 38%, transparent 72%);
  filter: blur(35px);
  opacity: .9;
  animation: auraPulse 5.5s ease-in-out infinite;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.18, .78, .18, 1);
}

.particles {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
}

.ambient {
  position: fixed;
  z-index: -6;
  width: 42vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(88px);
  pointer-events: none;
  opacity: .13;
}

.ambient--left {
  left: -29vmax;
  top: 6%;
  background: radial-gradient(circle, rgba(var(--gold), .8), transparent 65%);
}

.ambient--right {
  right: -31vmax;
  bottom: -9%;
  background: radial-gradient(circle, rgba(var(--gold-light), .55), transparent 67%);
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  box-shadow: inset 0 0 16vmax rgba(0, 0, 0, .88);
}

.grain {
  position: fixed;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  opacity: .026;
  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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  transform: rotate(.001deg);
  animation: grainShift .55s steps(2) infinite;
}

.corner {
  position: fixed;
  z-index: 2;
  width: clamp(74px, 9vw, 132px);
  height: clamp(74px, 9vw, 132px);
  pointer-events: none;
  opacity: .28;
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgba(var(--gold-light), .66), rgba(var(--gold), .08));
  box-shadow: 0 0 16px rgba(var(--gold), .12);
}

.corner::before {
  width: 100%;
  height: 1px;
}

.corner::after {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--gold-light), .66), rgba(var(--gold), .08));
}

.corner--top-left {
  left: max(1.25rem, env(safe-area-inset-left));
  top: max(1.25rem, env(safe-area-inset-top));
}

.corner--top-right {
  right: max(1.25rem, env(safe-area-inset-right));
  top: max(1.25rem, env(safe-area-inset-top));
  transform: scaleX(-1);
}

.corner--bottom-left {
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: scaleY(-1);
}

.corner--bottom-right {
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: scale(-1);
}

@keyframes floatLogo {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}

@keyframes auraPulse {
  0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: .96; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes metallicSweep {
  0%, 69% { background-position: 160% 0; opacity: 0; }
  74% { opacity: .42; }
  84% { background-position: -80% 0; opacity: .32; }
  89%, 100% { background-position: -80% 0; opacity: 0; }
}

@keyframes hoverSweep {
  0% { background-position: 160% 0; opacity: 0; }
  16% { opacity: .72; }
  72% { background-position: -80% 0; opacity: .5; }
  100% { background-position: -80% 0; opacity: 0; }
}

@keyframes grainShift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(2%, -1%, 0); }
  50% { transform: translate3d(-1%, 2%, 0); }
  75% { transform: translate3d(1%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 720px) {
  .logo-parallax {
    width: min(76vw, 560px);
  }

  .logo-aura {
    width: 100%;
    height: 170%;
    filter: blur(26px);
  }

  .corner {
    opacity: .18;
  }

  .ambient {
    opacity: .1;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .logo-parallax {
    width: min(52vw, 620px);
  }
}


@media (hover: none) {
  .logo-parallax:active .logo-shine {
    animation: hoverSweep 1.25s cubic-bezier(.2, .72, .18, 1) 1 forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .logo-parallax {
    transform: none !important;
  }
}