:root {
  --bg: #05070a;
  --text: #f7f2ff;
  --muted: #d8c7ff;
  --violet: #8f36ff;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0px;
  --tilt-y: 0px;
  --pulse-x: 50%;
  --pulse-y: 50%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: #000;
}

body {
  overflow-x: hidden;
  color: var(--text);
}

a {
  color: inherit;
}

.interactive-page {
  min-height: 100svh;
  background: #000;
  isolation: isolate;
}

.interactive-page h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: var(--bg);
  cursor: crosshair;
  isolation: isolate;
}

.wallpaper-layer,
.light-field,
.globe-glow,
.scan-field,
.click-flare {
  position: absolute;
  inset: 0;
}

.wallpaper-layer {
  background-image: url("/assets/backgrounds/high-res/seycmore-papelaria-logo-wallpaper-1920.jpg");
  background-image:
    image-set(
      url("/assets/backgrounds/high-res/seycmore-papelaria-logo-wallpaper-4k.webp") type("image/webp") 2x,
      url("/assets/backgrounds/high-res/seycmore-papelaria-logo-wallpaper-1920.jpg") type("image/jpeg") 1x
    );
  background-position: center center;
  background-size: 100% 100%;
  filter: saturate(1.08) contrast(1.04);
  transform:
    translate3d(calc(var(--tilt-x) * -0.35), calc(var(--tilt-y) * -0.35), 0)
    scale(1.008);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.light-field {
  z-index: 1;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.16), rgba(180, 88, 255, 0.11) 12%, transparent 28%),
    radial-gradient(circle at 50% 68%, rgba(143, 54, 255, 0.12), transparent 26%);
  mix-blend-mode: screen;
  opacity: 0.78;
  pointer-events: none;
}

.globe-glow {
  z-index: 2;
  background:
    radial-gradient(circle at 75.4% 30.8%, rgba(214, 188, 255, 0.72) 0 0.16%, rgba(137, 72, 255, 0.32) 0.25%, transparent 0.75%),
    radial-gradient(circle at 78.2% 34.2%, rgba(186, 247, 255, 0.68) 0 0.14%, rgba(76, 255, 239, 0.28) 0.24%, transparent 0.68%),
    radial-gradient(circle at 82.8% 37.5%, rgba(203, 177, 255, 0.64) 0 0.13%, rgba(144, 67, 255, 0.28) 0.24%, transparent 0.64%),
    radial-gradient(circle at 86.4% 43.8%, rgba(189, 245, 255, 0.66) 0 0.16%, rgba(72, 226, 255, 0.28) 0.28%, transparent 0.72%),
    radial-gradient(circle at 81.2% 50.5%, rgba(214, 189, 255, 0.6) 0 0.13%, rgba(147, 74, 255, 0.25) 0.24%, transparent 0.65%),
    radial-gradient(circle at 76.6% 55.8%, rgba(178, 239, 255, 0.56) 0 0.12%, rgba(74, 255, 239, 0.22) 0.24%, transparent 0.62%),
    radial-gradient(circle at 84.8% 59.4%, rgba(208, 180, 255, 0.58) 0 0.14%, rgba(143, 54, 255, 0.24) 0.24%, transparent 0.67%),
    radial-gradient(circle at 89.8% 54.8%, rgba(184, 242, 255, 0.56) 0 0.12%, rgba(96, 196, 255, 0.22) 0.22%, transparent 0.62%),
    radial-gradient(circle at 72% 44%, rgba(83, 255, 239, 0.46) 0 0.1%, rgba(97, 199, 255, 0.2) 0.2%, transparent 0.58%),
    radial-gradient(circle at 91.4% 47.8%, rgba(74, 255, 239, 0.44) 0 0.1%, rgba(107, 184, 255, 0.2) 0.2%, transparent 0.58%),
    radial-gradient(ellipse at 81% 45%, rgba(143, 54, 255, 0.14) 0 12%, rgba(76, 255, 239, 0.08) 13% 23%, transparent 35%),
    radial-gradient(ellipse at 82% 48%, rgba(76, 255, 239, 0.1) 0 9%, transparent 27%);
  mix-blend-mode: screen;
  opacity: 0.88;
  pointer-events: none;
  transition: opacity 180ms ease;
  animation: globe-lights-breathe 5.8s ease-in-out infinite;
  will-change: opacity;
}

.globe-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 42%, rgba(250, 241, 255, 0.2) 0 8%, rgba(147, 68, 255, 0.16) 10% 22%, transparent 34%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.985);
  animation: globe-orbit-pulse 7.2s ease-in-out infinite;
  will-change: opacity, transform;
}

.scene:hover .globe-glow {
  opacity: 1;
}

.scan-field {
  z-index: 3;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 6px);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.09;
  pointer-events: none;
}

.click-flare {
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(circle at var(--pulse-x) var(--pulse-y), rgba(255, 255, 255, 0.9), rgba(206, 147, 255, 0.42) 3%, rgba(143, 54, 255, 0.2) 9%, transparent 24%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.scene.is-activated .click-flare {
  animation: click-flare 760ms ease-out;
}

.contact-panel {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 5vw, 72px);
  padding: clamp(26px, 4vw, 42px) 22px clamp(30px, 4.4vw, 50px);
  background: #000;
  color: var(--text);
  text-align: center;
}

.eyebrow {
  color: #ffffff;
  font: 850 clamp(0.82rem, 1.35vw, 1.02rem)/1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(143, 54, 255, 0.72);
}

.security-copy {
  max-width: 440px;
  color: var(--muted);
  font: 600 clamp(0.86rem, 1.35vw, 1.02rem)/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: var(--text);
  background: rgba(21, 8, 54, 0.72);
  font: 850 0.86rem/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(143, 54, 255, 0.36);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(143, 54, 255, 0.46);
  transform: translateY(-2px);
}

.spark {
  position: absolute;
  z-index: 4;
  width: 10px;
  height: 10px;
  left: var(--spark-x);
  top: var(--spark-y);
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.94),
    0 0 34px rgba(143, 54, 255, 0.86),
    0 0 58px rgba(95, 31, 255, 0.54);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: spark-pop 950ms ease-out forwards;
}

@keyframes globe-lights-breathe {
  0%,
  100% {
    opacity: 0.78;
  }

  50% {
    opacity: 1;
  }
}

@keyframes globe-orbit-pulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.985);
  }

  42%,
  58% {
    opacity: 0.74;
    transform: scale(1.018);
  }
}

@keyframes click-flare {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes spark-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy)))
      scale(0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallpaper-layer {
    transform: none;
    transition: none;
  }

  .click-flare,
  .globe-glow,
  .globe-glow::before,
  .spark {
    animation: none;
  }
}

@media (max-width: 860px) {
  .contact-panel {
    flex-direction: column;
    gap: 14px;
    padding: 24px 18px 34px;
  }
}