/* TISM — black + neon lime, high-energy meme lander */
:root {
  --bg: #050605;
  --bg-2: #0a0f0a;
  --ink: #f4ffe8;
  --muted: #9bb08a;
  --lime: #ccff00;
  --lime-deep: #a8d400;
  --lime-soft: rgba(204, 255, 0, 0.14);
  --line: rgba(204, 255, 0, 0.22);
  --danger: #ff4d4d;
  --font-display: "Bungee", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --max: 1120px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(204, 255, 0, 0.16), transparent 55%),
    radial-gradient(ellipse 40% 30% at 100% 40%, rgba(204, 255, 0, 0.06), transparent 50%),
    radial-gradient(ellipse 35% 25% at 0% 70%, rgba(168, 212, 0, 0.05), transparent 45%),
    linear-gradient(180deg, #020302 0%, var(--bg) 40%, var(--bg-2) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--lime);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #e8ff66;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.grid-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(204, 255, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 255, 0, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 75%);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  background: rgba(5, 6, 5, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

.brand-mark img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--lime);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 1rem;
  margin: 0;
  width: 100%;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.18s var(--ease);
}

.nav a:hover {
  color: var(--lime);
}

.nav .nav-social {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--lime);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1;
}

.nav .nav-social:hover {
  background: var(--lime-soft);
  border-color: var(--lime);
  color: var(--lime);
}

.nav .nav-social svg {
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .nav {
    gap: 0.4rem 0.65rem;
  }

  .nav .nav-social span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav .nav-social {
    padding: 0.45rem;
  }
}

/* Hero — centered animated logo; lime banner as atmosphere bg */
.hero {
  position: relative;
  z-index: 1;
  min-height: min(100svh, 900px);
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 7vh, 5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 5vh, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-banner {
  position: absolute;
  inset: -4%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(1.05) brightness(0.3) contrast(1.05);
  transform: scale(1.12);
  animation: banner-drift 12s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

@keyframes banner-drift {
  0% {
    transform: scale(1.12) translate3d(-2.5%, 0, 0) rotate(-0.4deg);
  }
  50% {
    transform: scale(1.18) translate3d(1.5%, -1.5%, 0) rotate(0.3deg);
  }
  100% {
    transform: scale(1.14) translate3d(2.5%, 0.5%, 0) rotate(0.5deg);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rise 0.9s 0.1s var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-ticker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0f00;
  background: var(--lime);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
}

.hero-brand {
  position: relative;
  display: inline-block;
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--lime);
  -webkit-text-stroke: 1px rgba(204, 255, 0, 0.5);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(10, 15, 0, 0.65);
  animation: title-bob 2.8s ease-in-out infinite;
}

@keyframes title-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.03);
  }
}

.hero-logo-wrap {
  position: relative;
  width: min(72vw, 300px);
  margin: 0.4rem auto 0.85rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 255, 0, 0.5) 0%, transparent 68%);
  animation: logo-glow 2.4s ease-in-out infinite;
  z-index: 0;
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  border: 3px solid var(--lime);
  animation: logo-pop 2.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
  will-change: transform;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 0 36px rgba(204, 255, 0, 0.35);
}

@keyframes logo-pop {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg) scale(1);
  }
  40% {
    transform: translateY(-12px) rotate(1.5deg) scale(1.045);
  }
  70% {
    transform: translateY(-4px) rotate(-0.5deg) scale(1.02);
  }
}

@keyframes logo-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero-lead {
  margin: 0 0 1.35rem;
  max-width: 26rem;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: var(--ink);
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner img,
  .hero-logo,
  .hero-logo-wrap::before,
  .hero-brand {
    animation: none !important;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background: var(--lime);
  color: #0a0f00;
  border-color: var(--lime);
}

.btn-primary:hover {
  background: #e2ff4a;
  color: #0a0f00;
}

.btn-solid {
  background: var(--ink);
  color: #0a0f00;
  border-color: var(--ink);
}

.btn-solid:hover {
  background: #fff;
  color: #0a0f00;
}

.btn-ghost {
  background: transparent;
  color: var(--lime);
  border-color: var(--lime);
}

.btn-ghost:hover {
  background: var(--lime-soft);
  color: var(--lime);
}

.btn-social {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

.btn-social:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: var(--lime-soft);
}

.btn-ico {
  font-size: 0.95rem;
  line-height: 1;
}

/* Sections */
.section {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 10vh, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.section-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}

.section h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Lightning yellow pulse on “Legend” only */
.legend-glow {
  position: relative;
  display: inline-block;
  color: #f5ff6a;
  background: linear-gradient(
    100deg,
    #a8d400 0%,
    #ccff00 25%,
    #ffff99 50%,
    #ccff00 75%,
    #a8d400 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    legend-shine 2.4s linear infinite,
    legend-flash 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(204, 255, 0, 0.55))
    drop-shadow(0 0 16px rgba(255, 255, 100, 0.35));
}

/* Home title: lightning yellow + gentle float (slower than elsewhere) */
.hero-brand.legend-glow {
  -webkit-text-stroke: 0;
  text-shadow: none;
  paint-order: normal;
  animation:
    title-bob 3.6s ease-in-out infinite,
    legend-shine 4.2s linear infinite,
    legend-flash 3.2s ease-in-out infinite;
}

.hero-brand.legend-glow::after {
  width: 28%;
  height: 70%;
  top: 12%;
  filter: blur(2px);
  animation: legend-bolt 4.4s ease-in-out infinite;
}

.legend-glow::after {
  content: "";
  position: absolute;
  left: -8%;
  top: 10%;
  width: 35%;
  height: 80%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 200, 0.85),
    transparent
  );
  transform: skewX(-18deg) translateX(-120%);
  animation: legend-bolt 2.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(1px);
  border-radius: 2px;
}

@keyframes legend-shine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes legend-flash {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(204, 255, 0, 0.45))
      drop-shadow(0 0 10px rgba(255, 255, 120, 0.25));
  }
  40% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 80, 0.95))
      drop-shadow(0 0 28px rgba(204, 255, 0, 0.7));
  }
  55% {
    filter: drop-shadow(0 0 3px rgba(204, 255, 0, 0.4));
  }
  70% {
    filter: drop-shadow(0 0 14px rgba(255, 255, 150, 0.9))
      drop-shadow(0 0 32px rgba(204, 255, 0, 0.55));
  }
}

@keyframes legend-bolt {
  0%,
  55%,
  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(-130%);
  }
  60% {
    opacity: 1;
    transform: skewX(-18deg) translateX(-20%);
  }
  72% {
    opacity: 0.9;
    transform: skewX(-18deg) translateX(180%);
  }
  78% {
    opacity: 0;
    transform: skewX(-18deg) translateX(220%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .legend-glow,
  .legend-glow::after {
    animation: none !important;
  }

  .legend-glow {
    -webkit-text-fill-color: #ccff00;
    color: #ccff00;
    background: none;
    filter: none;
  }
}

.section-lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.section-lead a {
  font-weight: 600;
}

/* About — cinematic chart / legend atmosphere */
.about {
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 55% at 15% 20%, rgba(204, 255, 0, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(168, 212, 0, 0.08), transparent 50%),
    linear-gradient(165deg, #050805 0%, #0a100a 45%, #040504 100%);
}

.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about .section-inner {
  position: relative;
  z-index: 1;
}

.about-bg-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(204, 255, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 255, 0, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 20%, transparent 78%);
  animation: about-grid-drift 22s linear infinite;
  opacity: 0.9;
}

.about-bg-chart {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 8%;
  height: 48%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ccff00' stop-opacity='0.35'/%3E%3Cstop offset='100%25' stop-color='%23ccff00' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 260 L80 250 L160 255 L240 220 L320 230 L400 180 L480 195 L560 140 L640 155 L720 100 L800 115 L880 70 L960 90 L1040 40 L1120 55 L1200 20 L1200 320 L0 320 Z' fill='url(%23g)'/%3E%3Cpath d='M0 260 L80 250 L160 255 L240 220 L320 230 L400 180 L480 195 L560 140 L640 155 L720 100 L800 115 L880 70 L960 90 L1040 40 L1120 55 L1200 20' fill='none' stroke='%23ccff00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.75'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  opacity: 0.55;
  filter: drop-shadow(0 0 18px rgba(204, 255, 0, 0.2));
  animation: about-chart-pulse 5.5s ease-in-out infinite;
}

.about-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

.about-bg-glow--a {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: -12%;
  right: -8%;
  background: radial-gradient(circle, rgba(204, 255, 0, 0.28), transparent 68%);
  animation: about-orb 9s ease-in-out infinite;
}

.about-bg-glow--b {
  width: min(46vw, 360px);
  height: min(46vw, 360px);
  bottom: 5%;
  left: -10%;
  background: radial-gradient(circle, rgba(168, 212, 0, 0.22), transparent 70%);
  animation: about-orb 11s ease-in-out infinite reverse;
}

.about-bg-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(204, 255, 0, 0.04) 48%,
    rgba(255, 255, 210, 0.07) 50%,
    rgba(204, 255, 0, 0.04) 52%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: about-scan 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes about-grid-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-42px, -42px, 0);
  }
}

@keyframes about-chart-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(6px) scaleY(0.98);
  }
  50% {
    opacity: 0.68;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes about-orb {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate3d(-18px, 22px, 0) scale(1.12);
    opacity: 1;
  }
}

@keyframes about-scan {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

.about .proof img {
  background: rgba(5, 8, 5, 0.45);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(204, 255, 0, 0.12),
    0 0 40px rgba(204, 255, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .about-bg-grid,
  .about-bg-chart,
  .about-bg-glow,
  .about-bg-scan {
    animation: none !important;
  }
}

.proof {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.proof img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.proof figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  width: 100%;
  max-width: 1024px;
}

/* Tokenomics */
.tokenomics {
  border-top: 1px solid var(--line);
}

.stats {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.stats li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.stat-label {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--lime);
  letter-spacing: 0.02em;
  text-align: right;
}

@media (min-width: 700px) {
  .stats {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

.ca-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ca-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.ca-address {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.72rem, 2vw, 0.92rem);
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1rem, 3vw, 2rem) 2.5rem;
}

.footer-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--lime);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.footer-brand-mark img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--lime);
}

.footer-brand-mark:hover {
  color: #e8ff66;
}

.footer-main {
  display: grid;
  gap: 0.65rem;
  justify-items: end;
  text-align: right;
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
}

.footer-note {
  margin: 0;
  max-width: 28rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--lime);
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-main {
    justify-items: center;
    text-align: center;
  }

  .footer-note {
    margin-left: 0;
  }

  .footer-links {
    justify-content: center;
  }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%) translateY(12px);
  padding: 0.7rem 1.15rem;
  background: var(--lime);
  color: #0a0f00;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================== Simple scroll effects ===================== */
html.js-scroll {
  scroll-behavior: smooth;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0%;
  height: 4px;
  max-width: 100%;
  background: linear-gradient(90deg, #a8d400, #ccff00);
  box-shadow: 0 0 12px rgba(204, 255, 0, 0.7);
  pointer-events: none;
}

.site-header {
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(5, 6, 5, 0.94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

.nav a.is-active {
  color: var(--lime) !important;
}

.nav a.is-active:not(.nav-social)::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.2rem;
  background: var(--lime);
}

/* Simple bidirectional fade + slide */
html.js-scroll .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.65s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

html.js-scroll .reveal.from-bottom:not(.is-visible) {
  opacity: 0;
  transform: translateY(36px);
}

html.js-scroll .reveal.from-top:not(.is-visible) {
  opacity: 0;
  transform: translateY(-36px);
}

html.js-scroll .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* About-specific start offsets */
html.js-scroll .reveal-about.from-bottom:not(.is-visible) {
  transform: translateY(40px);
}

html.js-scroll .reveal-about.from-top:not(.is-visible) {
  transform: translateY(-40px);
}

html.js-scroll .reveal-about.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js-scroll .about .proof.reveal-about.from-bottom:not(.is-visible) {
  transform: translateY(48px) scale(0.98);
}

html.js-scroll .about .proof.reveal-about.from-top:not(.is-visible) {
  transform: translateY(-48px) scale(0.98);
}

html.js-scroll .about .proof.reveal-about.is-visible {
  transform: translateY(0) scale(1);
  transition-duration: 0.85s;
}

.about-content {
  position: relative;
  z-index: 1;
}

.hero {
  overflow: hidden;
}

.hero-banner img {
  will-change: transform;
  transition: none !important;
}

.hero-content {
  opacity: 1;
}

/* keep home logo / title motions */
html.js-scroll .hero .hero-brand.legend-glow {
  animation:
    title-bob 3.6s ease-in-out infinite,
    legend-shine 4.2s linear infinite,
    legend-flash 3.2s ease-in-out infinite;
}

html.js-scroll .hero .hero-logo {
  animation: logo-pop 2.6s ease-in-out infinite;
}

html.js-scroll .hero .hero-logo-wrap::before {
  animation: logo-glow 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html.js-scroll {
    scroll-behavior: auto;
  }

  html.js-scroll .reveal,
  html.js-scroll .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-banner img {
    transform: none !important;
  }
}