/* ═══════════════════════════════════════════════════════════════
   EphyroMC — Home Page Styles
   Dipende da: assets/css/style.css (variabili e utilities globali)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 50px);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(142,108,200,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 65%, rgba(201,150,58,0.07) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-0) 0%, rgba(7,9,20,0.85) 55%, var(--bg-0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Sottile animazione background: lenta pulsazione del radial viola */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 30%, rgba(142,108,200,0.09) 0%, transparent 65%);
  animation: hero-ambient 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-ambient {
  from { opacity: 0.4; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.08); }
}

.hero-mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── Hero entrance animations (una sola volta al caricamento) ── */
@keyframes hero-enter-logo {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); filter: drop-shadow(0 0 0px rgba(201,150,58,0)); }
  to   { opacity: 1; transform: translateY(0) scale(1);        filter: drop-shadow(0 0 48px rgba(201,150,58,0.38)) drop-shadow(0 0 16px rgba(201,150,58,0.2)); }
}

@keyframes hero-enter-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Logo */
.hero-logo {
  width: clamp(240px, 52vw, 540px);
  filter:
    drop-shadow(0 0 48px rgba(201,150,58,0.38))
    drop-shadow(0 0 16px rgba(201,150,58,0.2));
  animation:
    hero-enter-logo 900ms cubic-bezier(0.16, 1, 0.3, 1) both,
    hero-float 7s ease-in-out 1s infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* Tagline */
.hero-tagline {
  font-family: var(--ff-head);
  font-size: clamp(11px, 2.2vw, 17px);
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-2);
  animation: hero-enter-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}

.hero-tagline em {
  font-style: italic;
  font-family: var(--ff-body);
  color: var(--gold);
  font-size: 1.18em;
  letter-spacing: 0.1em;
}

/* Server status row */
.hero-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-head);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  animation: hero-enter-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

/* CTA buttons */
.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
  animation: hero-enter-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 680ms both;
}

/* ─────────────────────────────────────────────
   CARD HOVER — aggiunge un glow lento dopo hover
───────────────────────────────────────────── */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,150,58,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* Q-items: SVG icon size */
.q-icon svg { display: block; }

/* ─────────────────────────────────────────────
   REDUCED MOTION — home overrides
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-tagline,
  .hero-status,
  .hero-actions { animation: none; opacity: 1; }
  .hero-bg::after { animation: none; }
}

/* ─────────────────────────────────────────────
   WORLD SECTION
───────────────────────────────────────────── */
#s-world {
  padding: 120px 0;
  background: var(--bg-1);
}

.world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ─────────────────────────────────────────────
   ECONOMY SECTION
───────────────────────────────────────────── */
#s-econ {
  padding: 100px 0;
  background: var(--bg-0);
}

.econ-inner { text-align: center; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 52px;
}

/* Card base */
.card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  padding: 36px 26px;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,150,58,0.48);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 28px rgba(201,150,58,0.08);
}

.card:hover::before { opacity: 1; }

.card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 18px;
  display: block;
}

.card-title {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.card-text {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.72;
}

/* ─────────────────────────────────────────────
   QUESTS SECTION
───────────────────────────────────────────── */
#s-quests {
  padding: 120px 0;
  background: var(--bg-2);
}

.quests-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Quest list */
.q-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.q-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 15px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  transition: background var(--ease);
}

.q-item:hover { background: rgba(201,150,58,0.05); }

.q-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.q-title {
  font-family: var(--ff-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 4px;
}

.q-desc { font-size: 14px; color: var(--text-3); line-height: 1.6; }

/* ─────────────────────────────────────────────
   ENDGAME SECTION
───────────────────────────────────────────── */
#s-end {
  padding: 120px 0;
  background: var(--bg-1);
}

#s-end::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(142,108,200,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.end-head { text-align: center; margin-bottom: 60px; }

.end-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.end-card {
  background: var(--bg-card2);
  border: 1px solid rgba(142,108,200,0.18);
  border-radius: 8px;
  padding: 38px 34px;
  position: relative;
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
}

/* Featured end card spans full width */
.end-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}

.end-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(0,0,0,0.55), 0 0 32px rgba(142,108,200,0.1);
}

.end-badge {
  font-family: var(--ff-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(142,108,200,0.1);
  border: 1px solid rgba(142,108,200,0.22);
  padding: 3px 12px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 11px;
}

.end-title {
  font-family: var(--ff-head);
  font-size: clamp(17px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 11px;
  letter-spacing: 0.02em;
}

.end-text { font-size: 15px; color: var(--text-2); line-height: 1.77; }

.end-art  { width: 150px; height: 150px; flex-shrink: 0; }

/* ─────────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────────── */
#s-cta {
  padding: 120px 0;
  background: var(--bg-0);
}

#s-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(201,150,58,0.06) 0%, transparent 72%);
  pointer-events: none;
}

.cta-inner { text-align: center; position: relative; z-index: 1; }
.cta-inner .s-title { font-size: clamp(26px, 4.5vw, 52px); }

.cta-steps {
  display: flex;
  justify-content: center;
  max-width: 660px;
  margin: 44px auto;
  list-style: none;   /* rimuove 1. 2. 3. dell'<ol> */
  padding: 0;
}

.cta-step {
  flex: 1;
  padding: 22px 16px;
  text-align: center;
  position: relative;
}

.cta-step + .cta-step::before {
  content: '→';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-dim);
  font-size: 16px;
}

.cta-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 auto 10px;
}

.cta-step-lbl {
  font-family: var(--ff-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.cta-step-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }

.cta-note {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 18px;
  font-style: italic;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — HOME
───────────────────────────────────────────── */

/* Tablet (≤ 860px) */
@media (max-width: 860px) {
  /* World */
  .world-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Economy cards */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  /* Quests */
  .quests-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Endgame featured */
  .end-card--featured {
    grid-template-columns: 1fr;
  }

  .end-art { width: 100px; height: 100px; }

  /* CTA steps */
  .cta-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 320px;
  }

  .cta-step + .cta-step::before {
    content: '↓';
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  /* Sections padding */
  #s-world,
  #s-quests,
  #s-end,
  #s-cta { padding: 80px 0; }

  #s-econ { padding: 72px 0; }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .hero-content { padding: 0 16px 120px; gap: 16px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }

  .end-cards { grid-template-columns: 1fr; }
  .end-card--featured { grid-column: auto; }

  #s-world,
  #s-quests,
  #s-end,
  #s-cta { padding: 60px 0; }

  .container { padding: 0 20px; }
}