/* =========================================================
   AVAX STAKING PAGE ADDITIONS (keeps your existing theme)
   ========================================================= */

html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.revealed {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------
   GLOBAL BACKGROUND (SVG) — no animation, smaller desktop
   --------------------------------------------------------- */
.eth-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.eth-bg__wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 520px at 70% 50%, rgba(4,255,196,.12), transparent 60%),
    radial-gradient(760px 520px at 62% 58%, rgba(99,102,241,.08), transparent 62%);
  opacity: .9;
}

/* Move a little more left + smaller on desktop */
.eth-bg__svg{
  position: absolute;
  right: 6vw;
  top: 15vh;
  width: min(34vw, 440px);
  height: auto;
  transform: rotate(-14deg);
  opacity: 1;
}

.eth-bg__svg--glow{
  color: rgba(4,255,196,.60);
  opacity: .11;
  filter:
    blur(12px)
    drop-shadow(0 0 18px rgba(4,255,196,.34))
    drop-shadow(0 0 56px rgba(4,255,196,.16));
  mix-blend-mode: screen;
  transform: rotate(-14deg) translate3d(-6px, 8px, 0);
}

.eth-bg__svg--sharp{
  color: rgba(4,255,196,.42);
  opacity: .12;
  filter:
    contrast(1.06)
    brightness(1.08)
    drop-shadow(0 10px 42px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(4,255,196,.18));
}

@media (max-width: 640px){
  .eth-bg__svg{
    right: -2vw;
    top: 10vh;
    width: min(76vw, 500px);
  }
  .eth-bg__svg--glow{ opacity:.09; }
  .eth-bg__svg--sharp{ opacity:.10; }
}

/* Keep content above the background */
header, section, footer { position: relative; z-index: 10; }

/* ---------------------------------------------------------
   Small UI components (chips/pills/buttons)
   --------------------------------------------------------- */
.eth-chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .45rem .70rem;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: .2s ease;
  color: rgba(226,232,240,.9);
  white-space: nowrap;
}
.eth-chip:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-chip.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.eth-pill{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: .38rem .65rem;
  font-size: .85rem;
  transition: .2s ease;
}
.eth-pill:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-pill.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.eth-lock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: .60rem .70rem;
  font-size: .9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:.2s ease;
}
.eth-lock:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-lock.is-active{
  border-color: rgba(4,255,196,.60);
  background: rgba(4,255,196,.10);
  color: #fff;
}

/* Charts */
.eth-price-chart{ position: relative; height: 220px; }
@media (max-width: 640px){ .eth-price-chart{ height: 190px; } }

.stake-chart-wrap{ position: relative; height: 340px; }
@media (max-width: 640px){ .stake-chart-wrap{ height: 280px; } }

.stake-tooltip{
  position:absolute;
  z-index: 5;
  min-width: 160px;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3, 8, 16, .80);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: translate(-50%, -110%);
  pointer-events: none;
}
.stake-tooltip strong{
  display:block;
  font-size: .95rem;
  color: #fff;
}
.stake-tooltip .muted{
  margin-top: .15rem;
  font-size: .82rem;
  color: rgba(148,163,184,.95);
}

/* Step icons */
.eth-step-ico{
  height: 46px;
  width: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(4,255,196,.12);
  border: 1px solid rgba(4,255,196,.28);
}
.eth-step-ico i{
  font-size: 22px;
  color: rgba(4,255,196,.95);
}

/* HERO: soften big text + avoid overflow */
@media (max-width: 640px) {
  .title-glow {
    font-size: 2.15rem !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }
}

/* Chips wrap safety */
.eth-chip { max-width: 100%; flex: 0 1 auto; white-space: nowrap; }

@media (max-width: 640px) {
  [data-days], [data-calc-unit] {
    padding: .42rem .62rem;
    font-size: .82rem;
  }
  .flex.flex-wrap.items-center.gap-2,
  .flex.flex-wrap.items-center.gap-4 {
    gap: .5rem !important;
  }
  .mt-7.grid.sm\\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .eth-price-chart { height: 170px !important; }
  .eth-lock { padding: .55rem .65rem; font-size: .86rem; white-space: nowrap; }
  .mt-2.grid.grid-cols-3.gap-2 { grid-template-columns: 1fr 1fr !important; }
  .mt-2.grid.grid-cols-3.gap-2 .eth-lock[data-lock="3m"] { grid-column: 1 / -1; }
  .eth-pill { padding: .36rem .60rem; font-size: .82rem; }
  .lg\\:col-span-2.glass.neon-border.rounded-2xl.p-6.reveal,
  .glass.neon-border.rounded-2xl.p-6.reveal { padding: 1rem !important; }
  .stake-chart-wrap { height: 240px !important; overflow: hidden; }
  .stake-tooltip { min-width: 140px !important; max-width: 220px !important; padding: .55rem .65rem !important; }
}

canvas { max-width: 100% !important; }
@media (max-width: 640px) {
  .lock-grid { grid-template-columns: 1fr 1fr !important; }
  .lock-grid .eth-lock[data-lock="3m"] { grid-column: 1 / -1; }
}