/* Tarnish Online — epic landing polish
   Inspired by playgrandsoul.base44.app motion/typography (fonts via Google Fonts).
   Does NOT include Grand Soul brand art or logos. */

:root {
  --font-heading: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-display: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --gold-gs: #d4af37;
  --gold-bright-gs: #f5e7b8;
}

/* Display titles: ceremonial carved capitals (Grand Soul heading) */
.section-head h2,
.eyebrow,
.ea-kicker,
.signup-title,
.pillars .pillar h3,
.topbar-nav > a,
.nav-trigger,
.btn {
  font-family: var(--font-heading);
}

/* Lore / long taglines: elegant editorial serif */
.hero .tagline,
.section-head p,
.signup-lead,
.hero-quote,
.ea-desc,
.keyart-caption {
  font-family: var(--font-display);
}

.text-glow-gold {
  text-shadow:
    0 0 24px rgba(212, 175, 55, 0.45),
    0 0 8px rgba(212, 175, 55, 0.3);
}

.gold-gradient-text {
  background: linear-gradient(180deg, #f5e7b8, #d4af37 45%, #9c7a1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Continuous light-sweep on primary CTAs (Grand Soul light-sweep) */
@keyframes tarnish-light-sweep {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

.btn-primary {
  overflow: hidden;
}
.btn-primary::before {
  opacity: 0.55 !important;
  animation: tarnish-light-sweep 2.8s ease-in-out infinite;
  transition: none !important;
  transform: none !important;
}
.btn-primary:hover::before {
  opacity: 0.9 !important;
}

/* Soul particles rising (Grand Soul soul-drift) — gold/cyan for Tarnish */
@keyframes tarnish-soul-drift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.75; }
  90% { opacity: 0.55; }
  100% { transform: translateY(-120vh) translateX(var(--drift, 20px)); opacity: 0; }
}

.embers .ember,
.soul-field .soul {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  animation-name: tarnish-soul-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: radial-gradient(circle, var(--gold-bright-gs) 0%, var(--gold-gs) 45%, transparent 70%);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
  width: 4px;
  height: 4px;
  opacity: 0;
}

.soul-field .soul.cyan {
  background: radial-gradient(circle, #abe9ff 0%, #63d9ff 50%, transparent 72%);
  box-shadow: 0 0 10px rgba(99, 217, 255, 0.5);
}

/* Hero / keyart slow zoom */
@keyframes tarnish-slow-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.keyart-frame,
.hero-art-frame {
  overflow: hidden;
}
.keyart-frame img,
.hero-art-frame img {
  transform-origin: center center;
  animation: tarnish-slow-zoom 28s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .embers .ember,
  .soul-field .soul,
  .keyart-frame img,
  .hero-art-frame img {
    animation: none !important;
  }
}

/* Feature / pillar icon tiles */
.icon-tile {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  background:
    linear-gradient(145deg, rgba(201, 169, 97, 0.12), transparent 55%),
    rgba(8, 13, 25, 0.9);
  color: var(--gold-bright-gs, #f0e3b4);
}
.icon-tile svg {
  width: 22px;
  height: 22px;
}
.pillar:hover .icon-tile {
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}