* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  background: #0a0a0a;
  color: #eaeaea;
  line-height: 1.6;
}
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  border-bottom: 1px solid #111;
}
.brand { color: #eaeaea; text-decoration: none; font-weight: 700; letter-spacing: .08em; display: flex; align-items:center; gap:.5rem; }
.brand .logo { font-weight: 900; }
.brand .divider { opacity:.3; }
.brand .ticker { color: #9be4ff; }
.menu { display: flex; gap: 1rem; }
.menu a { color: #cfcfcf; text-decoration: none; }
.menu a:hover { color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid #333; color: #eaeaea; padding: .4rem .6rem; border-radius: 6px; }
@media (max-width: 900px) {
  .menu { display: none; position: absolute; top: 52px; right: 10px; background: #0d0d0d; border: 1px solid #222; padding: .75rem; border-radius: 10px; flex-direction: column; }
  .menu-btn { display: inline-block; }
}
.hero {
  position: relative; min-height: 86vh; display: grid; place-items: center;
  background: #050505 url('assets/hero.jpg') center/cover no-repeat fixed;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.7) 40%, rgba(0,0,0,.9)); }
.hero-inner { position: relative; text-align: center; padding: 2rem; max-width: 900px; }
.glitch { position: relative; font-size: clamp(2.4rem, 6vw, 6rem); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip-path: inset(0 0 0 0); }
.glitch::before { transform: translate(2px, -2px); text-shadow: -1px 0 #00e5ff; mix-blend-mode: screen; }
.glitch::after { transform: translate(-2px, 2px); text-shadow: 1px 0 #ff3eec; mix-blend-mode: screen; }
.tagline { margin-top: .5rem; opacity: .9; font-size: 1.1rem; }
.cta { margin: 1.2rem 0; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn { border: 1px solid #2a2a2a; background: #0d0d0d; color: #eaeaea; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.btn:hover { border-color: #3a3a3a; transform: translateY(-1px); }
.btn.primary { background: #0b1e26; border-color: #0c2b36; }
.btn.primary:hover { background: #0e2a34; }
.btn.ghost { background: transparent; }
.btn.small { padding: .45rem .7rem; font-size: .9rem; }
.contract-wrap { margin-top: .8rem; display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.04); border: 1px solid #222; padding: .5rem .75rem; border-radius: 8px; }
.contract-wrap code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: .95rem; color: #9be4ff; }
section { padding: 4rem 1rem; max-width: 1100px; margin: 0 auto; }
section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.buy-grid, .tok-grid { display: grid; gap: 1rem; }
.buy-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 1rem; }
.disclaimer { opacity: .8; font-size: .95rem; margin-top: .8rem; }
.lore blockquote { margin: 1rem 0; padding: 1rem; background: #0d0d0d; border-left: 3px solid #00e5ff; border-radius: 8px; }
.tokenomics .tok-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tok { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 1.2rem; text-align: center; }
.tok .num { display: block; font-size: 1.4rem; font-weight: 800; }
.tok .label { display: block; opacity: .85; }
.how ol { padding-left: 1.2rem; }
.trailer .video-wrap { aspect-ratio: 16/9; background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; display: grid; place-items: center; }
.video-placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
.roadmap .timeline { list-style: none; padding: 0; margin: 0; }
.roadmap .timeline li { position: relative; padding-left: 1.25rem; margin: .7rem 0; }
.roadmap .timeline li::before { content: '▹'; position: absolute; left: 0; color: #9be4ff; }
.oath { text-align: center; }
.oath-text { font-size: 1.15rem; background: #0d0d0d; border: 1px solid #1a1a1a; display: inline-block; padding: 1rem 1.2rem; border-radius: 10px; }
.community .links { display: flex; gap: .6rem; flex-wrap: wrap; }
.hashes { opacity: .85; }
.faq details { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 10px; padding: .8rem 1rem; margin: .6rem 0; }
.legal { text-align: center; font-size: .95rem; opacity: .8; border-top: 1px solid #151515; padding-top: 2rem; }
/* Modal */
.modal { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); z-index: 100; }
.modal[aria-hidden="false"] { display: grid; }
.modal-inner { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 1rem; width: min(1080px, 92vw); }
.modal-close { background: transparent; border: 0; color: #eaeaea; font-size: 1.2rem; float: right; cursor: pointer; }
.tiny { font-size: .9rem; opacity: .8; }
/* Stats */
.stats .stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stats .stat { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.stats .label { opacity: .8; font-size: .95rem; }
.stats .stat span:last-child { font-weight: 800; font-size: 1.2rem; }
.stats .optional { opacity: .9; }
/* Chart */
.chart .chart-wrap { border: 1px solid #1a1a1a; border-radius: 12px; overflow: hidden; background: #0d0d0d; }
#ds-embed { width: 100%; height: min(70vh, 720px); border: 0; }
/* Share cards */
.share .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.share .grid a { text-decoration: none; }
.share img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #1a1a1a; }


/* === Enhanced Background System === */
:root {
  --bg-noise: url('assets/bg_noise.png');
  --bg-scan: url('assets/scanlines.png');
  --bg-grid: url('assets/grid_overlay.png');
  --bg-stripes: url('assets/glitch_stripes.png');
  --glow-cyan: #00e5ff;
  --glow-pink: #ff3eec;
}

/* Global layered background */
body {
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,229,255,0.07), transparent 60%),
    radial-gradient(800px 500px at 80% 110%, rgba(255,62,236,0.06), transparent 60%),
    var(--bg-noise),
    var(--bg-scan);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: cover, cover, 512px 512px, 512px 512px;
}

/* Section variants with subtle parallax */
section.bg-a, section.bg-b, section.bg-c {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
section.bg-a::before,
section.bg-b::before,
section.bg-c::before {
  content:"";
  position: absolute; inset: 0;
  background-image: var(--bg-grid), var(--bg-stripes);
  background-size: 512px 512px, 720px 720px;
  background-repeat: repeat, repeat;
  opacity: .12;
  mix-blend-mode: lighten;
  transform: translateZ(0);
  animation: drift 24s linear infinite;
  z-index: -1;
}
section.bg-b::before { animation-duration: 28s; opacity: .10; }
section.bg-c::before { animation-duration: 32s; opacity: .14; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-30px, -20px, 0) rotate(0.001deg); }
  100% { transform: translate3d(0,0,0); }
}

/* Hero glitch slices */
.hero::before, .hero::after {
  content:""; position: absolute; left:0; right:0; height: 12%; filter: saturate(120%);
  background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(255,62,236,.18));
  mix-blend-mode: screen; opacity: .35; pointer-events: none;
}
.hero::before { top: 18%; animation: sliceH 6s ease-in-out infinite; }
.hero::after  { top: 58%; animation: sliceH 7.5s ease-in-out infinite; }

@keyframes sliceH {
  0%,100% { clip-path: inset(0 0 60% 0); transform: translateX(0); }
  50%     { clip-path: inset(40% 0 0 0); transform: translateX(6px); }
}

/* Card subtle hover glow */
.card:hover, .tok:hover, .stat:hover {
  box-shadow: 0 0 0 1px rgba(155,228,255,.12), 0 8px 30px rgba(0,0,0,.35);
}

/* Chart container enhanced */
.chart .chart-wrap {
  position: relative;
}
.chart .chart-wrap::after {
  content:""; position: absolute; inset: 0;
  background-image: var(--bg-noise);
  opacity: .06; pointer-events: none;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  section.bg-a::before, section.bg-b::before, section.bg-c::before {
    animation: none !important;
  }
}


/* Hero wordmark image */
.hero-wordmark {
  width: min(900px, 86vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(0,229,255,.35)) drop-shadow(0 0 18px rgba(255,62,236,.25));
}

/* Extend layered background to all sections by default */
section { position: relative; isolation: isolate; overflow: hidden; }
section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bg-grid), var(--bg-stripes);
  background-size: 512px 512px, 720px 720px;
  background-repeat: repeat, repeat;
  opacity: .10;
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: -1;
}
section::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bg-noise), var(--bg-scan);
  background-size: 512px 512px, 512px 512px;
  background-repeat: repeat, repeat;
  opacity: .10;
  pointer-events: none;
  z-index: -1;
}

/* Keep hero overlay on top of new section effects */
.hero .hero-overlay { z-index: 0; }
.hero .hero-inner { position: relative; z-index: 1; }


/* Address badge fixes: wrap long contracts neatly */
.buy code, .contract-wrap code {
  display: inline-block;
  max-width: 100%;
  padding: .18rem .42rem;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid #222;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
  font-size: clamp(.70rem, 2.6vw, .95rem);
  line-height: 1.25;
}
/* Ensure card text can wrap fully */
.buy .card p {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* === Global Moving Banners === */
body::before, body::after {
  content: "";
  position: fixed;
  left: -10%;
  width: 120%;
  height: 18px;
  background: linear-gradient(90deg,
    rgba(0,229,255,0.0) 0%,
    rgba(0,229,255,0.35) 20%,
    rgba(255,62,236,0.35) 50%,
    rgba(155,228,255,0.35) 80%,
    rgba(255,62,236,0.0) 100%);
  filter: blur(0.2px) saturate(120%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  animation: banner-sweep 18s linear infinite;
  opacity: .35;
}
body::before { top: 18%; }
body::after  { top: 68%; animation-duration: 22s; }

@keyframes banner-sweep {
  0%   { transform: translateX(-10%) translateY(0); }
  50%  { transform: translateX(10%) translateY(0); }
  100% { transform: translateX(-10%) translateY(0); }
}

/* Section micro-bands (top and bottom lines with gentle motion) */
section .band, section .band-bottom {
  position: absolute; left: -5%; width: 110%; height: 6px;
  background: linear-gradient(90deg, rgba(0,229,255,0), rgba(0,229,255,.35), rgba(255,62,236,.35), rgba(0,0,0,0));
  mix-blend-mode: screen; pointer-events: none; opacity: .28;
  filter: saturate(120%);
  animation: band-move 14s ease-in-out infinite;
}
section .band { top: 0; }
section .band-bottom { bottom: 0; animation-duration: 16s; }

@keyframes band-move {
  0%,100% { transform: translateX(-3%); }
  50%     { transform: translateX(3%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  section .band, section .band-bottom {
    animation: none !important;
  }
}


/* Thicker, slice-like moving banners similar to hero glitch slices */
body::before, body::after {
  height: 38px; /* thicker */
  animation: slice-banner 14s ease-in-out infinite;
  clip-path: inset(0 0 60% 0);
}
body::after {
  height: 46px;
  top: 72%;
  animation-duration: 18s;
  clip-path: inset(40% 0 0 0);
}

@keyframes slice-banner {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(8px); }
}

/* Section micro-bands updated to mimic slice effect */
section .band, section .band-bottom {
  height: 14px; /* thicker */
  animation: slice-band 12s ease-in-out infinite;
  clip-path: inset(0 0 60% 0);
}
section .band-bottom {
  height: 14px;
  animation-duration: 16s;
  clip-path: inset(40% 0 0 0);
}

@keyframes slice-band {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(6px); }
}


/* === Vertical slice motion (up/down) for moving banners === */
:root {
  --banner1-top: 18vh;
  --banner2-top: 68vh;
  --banner-amp: 6vh;   /* amplitude for vertical movement */
  --band-amp: 12px;    /* amplitude for section micro-bands */
}

body::before, body::after {
  /* keep previous gradient/visuals from earlier rules */
  top: var(--banner1-top);
  transform: translateY(0);
  animation: v-slice-banner 12s ease-in-out infinite;
  clip-path: inset(0 0 60% 0);
}
body::after {
  top: var(--banner2-top);
  animation-duration: 16s;
  clip-path: inset(40% 0 0 0);
}

@keyframes v-slice-banner {
  0%,100% { transform: translateY(calc(-1 * var(--banner-amp))); }
  50%     { transform: translateY(var(--banner-amp)); }
}

/* Section micro-bands move vertically within each section */
section {
  position: relative;
}
section .band, section .band-bottom {
  top: 12px;
  transform: translateY(0);
  animation: v-slice-band 10s ease-in-out infinite;
}
section .band-bottom {
  bottom: 12px;
  top: auto;
  animation-duration: 12s;
}

@keyframes v-slice-band {
  0%,100% { transform: translateY(calc(-1 * var(--band-amp))); }
  50%     { transform: translateY(var(--band-amp)); }
}

/* Reduced-motion users: disable vertical movement */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  section .band, section .band-bottom {
    animation: none !important;
    transform: none !important;
  }
}


/* === Oath: Sacred Drama Upgrade === */
#oath {
  position: relative;
  overflow: hidden;
}
#oath::before {
  content: "";
  position: absolute; inset: -10%;
  background-image: url("assets/oath_rune_chaotic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.14; /* faint but present */
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  /* Parallax-like drift */
  transform: translateY(-4vh);
  will-change: transform;
}
/* subtle parallax on scroll */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-parallax) #oath::before {
    animation: oathDrift 24s ease-in-out infinite alternate;
  }
}
@keyframes oathDrift {
  from { transform: translateY(-6vh); }
  to   { transform: translateY( 6vh); }
}

#oath .oath-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
#oath blockquote {
  margin: 1.25rem auto;
  font-size: clamp(1.05rem, 1.2rem + 0.5vw, 1.45rem);
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: #EAF7FF;
  text-shadow:
    0 0 6px rgba(0,229,255,0.25),
    0 0 10px rgba(255,62,236,0.2);
  opacity: 0.96;
}
#oath h2 {
  text-align: center;
  margin-bottom: .6rem;
}

/* Golden dividers */
.oath-divider {
  height: 2px;
  margin: 1rem auto;
  width: min(760px, 90%);
  background: linear-gradient(90deg, rgba(255,215,130,0) 0%, rgba(255,215,130,0.6) 20%, rgba(255,235,170,0.9) 50%, rgba(255,215,130,0.6) 80%, rgba(255,215,130,0) 100%);
  box-shadow:
    0 0 8px rgba(255,215,130,0.35),
    0 0 18px rgba(255,62,236,0.12);
  border-radius: 2px;
}
.oath-divider.top { margin-top: .8rem; }
.oath-divider.bottom { margin-top: 1rem; }


/* Oath transcript + copy */
.oath-transcript {
  margin: .8rem auto 0 auto;
  text-align: center;
  max-width: 900px;
}
.oath-transcript pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: #e9f7ff;
  opacity: .92;
  margin: 0 auto .7rem auto;
  padding: .6rem .8rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
#copy-oath.btn.small {
  font-size: .85rem;
  padding: .4rem .8rem;
  border-radius: 6px;
}
.copy-ok {
  display: none;
  margin-left: .6rem;
  font-size: .9rem;
  color: #9ff;
}


/* === Global Randomized Flicker Overlay === */
#flicker-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* above banners (3), below modals if any */
  mix-blend-mode: screen;
}

/* Base wash that occasionally breathes (very subtle) */
#flicker-overlay::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,229,255,0.05), transparent 70%),
    radial-gradient(40% 40% at 60% 70%, rgba(255,62,236,0.05), transparent 70%),
    linear-gradient(0deg, rgba(255,215,130,0.03), rgba(0,0,0,0));
  opacity: .0;
  animation: overlayBreath 9s ease-in-out infinite;
  filter: saturate(120%);
}

@keyframes overlayBreath {
  0%, 100% { opacity: .00; }
  50%      { opacity: .10; }
}

/* Individual flicker "sparks" (thin bars / shards) */
.spark {
  position: absolute;
  background: linear-gradient(90deg, rgba(0,229,255,0.75), rgba(255,62,236,0.55));
  opacity: 0;
  filter: saturate(130%);
  mix-blend-mode: screen;
  transform-origin: center;
  will-change: transform, opacity;
  border-radius: 2px;
  box-shadow:
    0 0 6px rgba(0,229,255,0.35),
    0 0 10px rgba(255,62,236,0.25);
}

/* Core flicker pattern: short random pulses + micro-jitter */
@keyframes sparkFlicker {
  0%   { opacity: 0; transform: translate3d(0,0,0)  rotate(var(--r)); }
  4%   { opacity: .7; transform: translate3d(0,0,0)  rotate(var(--r)); }
  8%   { opacity: .2; transform: translate3d(1px,-1px,0) rotate(calc(var(--r) + 0.4deg)); }
  12%  { opacity: .65; transform: translate3d(-1px,0,0) rotate(calc(var(--r) - 0.3deg)); }
  20%  { opacity: .15; transform: translate3d(0,1px,0)  rotate(var(--r)); }
  35%  { opacity: .5; transform: translate3d(1px,1px,0) rotate(calc(var(--r) + 0.25deg)); }
  60%  { opacity: .1; transform: translate3d(0,0,0)  rotate(var(--r)); }
  100% { opacity: 0; transform: translate3d(0,0,0)  rotate(var(--r)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #flicker-overlay::before, .spark {
    animation: none !important;
    opacity: .0 !important;
  }
}


/* Enhanced spark flicker keyframes */
@keyframes sparkFlicker {
  0%   { opacity: 0; transform: translate3d(0,0,0) rotate(var(--r)); }
  3%   { opacity: .75; }
  6%   { opacity: .25; transform: translate3d(1px,-1px,0) rotate(calc(var(--r) + 0.6deg)); }
  10%  { opacity: .7; transform: translate3d(-1px,1px,0) rotate(calc(var(--r) - 0.5deg)); }
  18%  { opacity: .2; }
  26%  { opacity: .65; transform: translate3d(0,0,0) rotate(var(--r)); }
  35%  { opacity: .3; transform: translate3d(1px,0,0) rotate(calc(var(--r) + 0.3deg)); }
  50%  { opacity: .6; }
  65%  { opacity: .15; transform: translate3d(0,1px,0) rotate(calc(var(--r) - 0.4deg)); }
  80%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--r)); }
}


/* Slow flicker effect adjustments */
@keyframes sparkFlicker {
  0%   { opacity: 0; transform: translate3d(0,0,0) rotate(var(--r)); }
  8%   { opacity: .65; }
  16%  { opacity: .25; transform: translate3d(1px,-1px,0) rotate(calc(var(--r) + 0.4deg)); }
  28%  { opacity: .6; transform: translate3d(-1px,1px,0) rotate(calc(var(--r) - 0.3deg)); }
  40%  { opacity: .2; }
  55%  { opacity: .5; transform: translate3d(0,0,0) rotate(var(--r)); }
  70%  { opacity: .3; transform: translate3d(1px,0,0) rotate(calc(var(--r) + 0.25deg)); }
  85%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--r)); }
}


/* Lower opacity sparks for more subtle effect */
.spark {
  opacity: 0.25 !important;
}

@keyframes sparkFlicker {
  0%   { opacity: 0; }
  8%   { opacity: .45; }
  16%  { opacity: .15; }
  28%  { opacity: .4; }
  40%  { opacity: .1; }
  55%  { opacity: .35; }
  70%  { opacity: .15; }
  85%  { opacity: .4; }
  100% { opacity: 0; }
}


/* === Oath Rune: Fragmentation + Burst Glow (CSS only) === */
#oath { position: relative; overflow: hidden; }
#oath::before { /* existing background from previous work remains */ }

/* Duplicate rune layers for fragmentation */
#oath .oath-layers,
#oath .oath-layers::before,
#oath .oath-layers::after {
  position: absolute;
  inset: -12%;
  background-image: url("assets/oath_rune_chaotic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
  opacity: 0.10; /* base faint layer */
}

/* Two clipped shards to simulate fragmentation */
#oath .oath-layers::before {
  opacity: 0.12;
  clip-path: polygon(0% 0%, 62% 0%, 58% 12%, 70% 18%, 100% 22%, 100% 100%, 0% 100%);
  transform: translate3d(-6px, -4px, 0) skewX(-1deg);
}
#oath .oath-layers::after {
  opacity: 0.08;
  clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 76% 60%, 70% 78%, 54% 74%, 0% 80%);
  transform: translate3d(5px, 3px, 0) skewX(1deg);
}

/* Burst glow layer: occasional bright pulse + subtle jitter */
#oath::after {
  content: "";
  position: absolute;
  inset: -14%;
  background-image: url("assets/oath_rune_chaotic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.05; /* mostly invisible, will pulse brighter */
  filter: drop-shadow(0 0 12px rgba(0,229,255,0.35))
          drop-shadow(0 0 18px rgba(255,62,236,0.30))
          drop-shadow(0 0 10px rgba(255,215,130,0.25));
}

@keyframes runeBurst {
  0%, 18%   { opacity: 0.05; transform: translate3d(0,0,0) }
  19%       { opacity: 0.26; transform: translate3d(-1px, 0, 0) }
  20%       { opacity: 0.18; transform: translate3d(1px, 0, 0) }
  21%       { opacity: 0.30; transform: translate3d(0, -1px, 0) }
  25%       { opacity: 0.12; transform: translate3d(0, 0, 0) }
  50%       { opacity: 0.06; }
  66%       { opacity: 0.05; }
  67%       { opacity: 0.24; transform: translate3d(1px, 0, 0) }
  68%       { opacity: 0.16; transform: translate3d(-1px, 0, 0) }
  70%       { opacity: 0.26; transform: translate3d(0, 1px, 0) }
  74%       { opacity: 0.10; transform: translate3d(0, 0, 0) }
  100%      { opacity: 0.05; }
}

@media (prefers-reduced-motion: no-preference) {
  #oath::after {
    animation: runeBurst 14s ease-in-out infinite;
  }
  /* Keep the original drift on #oath::before from earlier build */
}

/* Ensure content sits above layers */
#oath .oath-inner, #oath h2 { position: relative; z-index: 1; }


/* Subtle overlapping randomized rune bursts */
#oath::after,
#oath .burst2 {
  position: absolute;
  inset: -14%;
  background-image: url("assets/oath_rune_chaotic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.05;
  filter: drop-shadow(0 0 10px rgba(0,229,255,0.25))
          drop-shadow(0 0 14px rgba(255,62,236,0.20))
          drop-shadow(0 0 8px rgba(255,215,130,0.18));
}

/* Animation for bursts */
@keyframes runeBurstSubtle {
  0%, 80%, 100% { opacity: 0.05; transform: translate3d(0,0,0); }
  82%           { opacity: 0.18; transform: translate3d(-1px,0,0); }
  83%           { opacity: 0.25; transform: translate3d(1px,0,0); }
  84%           { opacity: 0.15; transform: translate3d(0,-1px,0); }
  86%           { opacity: 0.22; transform: translate3d(0,1px,0); }
  90%           { opacity: 0.10; transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: no-preference) {
  #oath::after {
    animation: runeBurstSubtle 16s ease-in-out infinite;
    animation-delay: 3s; /* offset start */
  }
  #oath .burst2 {
    animation: runeBurstSubtle 19s ease-in-out infinite;
    animation-delay: 8s; /* desync start */
  }
}

/* Ensure oath text stays above */
#oath .oath-inner, #oath h2 { position: relative; z-index: 1; }


/* === Spark Afterglow + Random Pulse (Preview) === */
.spark {
  /* Base alphas for glow colors (cyan, magenta, gold) */
  --c1: .12;  --c2: .10;  --cg: .08;
  --c1low: .12; --c2low: .10; --cglow: .08;
  --c1high: .35; --c2high: .30; --cghigh: .24;
  filter: drop-shadow(0 0 6px rgba(0,229,255,var(--c1)))
          drop-shadow(0 0 9px rgba(255,62,236,var(--c2)))
          drop-shadow(0 0 7px rgba(255,215,130,var(--cg)));
}

/* Pulsing via custom properties (discrete step changes for subtle pop) */
@keyframes glowPulse {
  0%, 100% {
    --c1: var(--c1low);
    --c2: var(--c2low);
    --cg: var(--cglow);
  }
  48%, 52% {
    --c1: var(--c1high);
    --c2: var(--c2high);
    --cg: var(--cghigh);
  }
}


/* Quicker fade for spark glowPulse */
@keyframes glowPulse {
  0%, 100% {
    --c1: var(--c1low);
    --c2: var(--c2low);
    --cg: var(--cglow);
  }
  40%, 60% {
    --c1: var(--c1high);
    --c2: var(--c2high);
    --cg: var(--cghigh);
  }
}


/* === Flash-then-fade variants === */
/* Quick flash: immediate bright, then decay */
@keyframes glowFlashQuick {
  0%  { --c1: var(--c1high); --c2: var(--c2high); --cg: var(--cghigh); }
  10% { --c1: var(--c1high); --c2: var(--c2high); --cg: var(--cghigh); }
  100% { --c1: var(--c1low); --c2: var(--c2low); --cg: var(--cglow); }
}

/* Longer glow: brief bright, slower decay */
@keyframes glowFlashLong {
  0%   { --c1: var(--c1high); --c2: var(--c2high); --cg: var(--cghigh); }
  20%  { --c1: var(--c1high); --c2: var(--c2high); --cg: var(--cghigh); }
  100% { --c1: var(--c1low); --c2: var(--c2low); --cg: var(--cglow); }
}


/* --- Red Pill toggle & local fracture overlay --- */
.redpill-controls {
  margin-top: .8rem;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  font-size: .95rem;
  opacity: .9;
}
.toggle input {
  appearance: none;
  width: 36px; height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
  outline: none;
  transition: background .2s ease;
}
.toggle input::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,229,255,.9), rgba(255,62,236,.8));
  top: 2px; left: 2px;
  transition: transform .2s ease;
  box-shadow: 0 0 6px rgba(0,229,255,.35), 0 0 10px rgba(255,62,236,.25);
}
.toggle input:checked { background: rgba(0,229,255,.2); }
.toggle input:checked::after { transform: translateX(16px); }
.toggle span { opacity: .9; }

#fracture-overlay {
  position: relative;
  height: 0; /* inline overlay container near the text */
}
#fracture-overlay .fracture-spark {
  position: absolute;
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, rgba(0,229,255,0.75), rgba(255,62,236,0.55));
  opacity: 0;
  border-radius: 2px;
  mix-blend-mode: screen;
  filter: saturate(130%);
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(0,229,255,0.35), 0 0 10px rgba(255,62,236,0.25);
}

/* Flash-fade for fracture sparks (super fast) */
@keyframes fractureFlash {
  0%   { opacity: .7; transform: translate3d(0,0,0) rotate(var(--r)); }
  20%  { opacity: .5; }
  100% { opacity: 0; transform: translate3d(0,10px,0) rotate(var(--r)); }
}

/* "Coming Soon" button style */
.btn.soon[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(10%) saturate(90%);
}


/* Full-screen fracture wash (brief flash) */
@keyframes fractureWash {
  0%   { opacity: 0; }
  10%  { opacity: .12; }
  100% { opacity: 0; }
}
#flicker-overlay.fracture-wash::before {
  animation: fractureWash .45s ease-out 1;
}


/* Stacked CTAs */
.cta-stack { display: flex; flex-direction: column; gap: .6rem; align-items: start; }
.cta-stack .btn { display: inline-block; }
.cta-stack .btn.soon[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Flashier full-screen fracture */
@keyframes fractureWash {
  0%   { opacity: 0; }
  10%  { opacity: .18; }
  100% { opacity: 0; }
}
#flicker-overlay.fracture-wash::before {
  animation: fractureWash .55s ease-out 1;
}

/* Screen shake to sell the tear */
@keyframes simShake {
  0% { transform: translate3d(0,0,0); }
  20% { transform: translate3d(-2px, 1px, 0); }
  40% { transform: translate3d(2px, -1px, 0); }
  60% { transform: translate3d(-1px, 2px, 0); }
  80% { transform: translate3d(1px, -2px, 0); }
  100% { transform: translate3d(0,0,0); }
}
.sim-shake {
  animation: simShake .35s ease-out 1;
}

/* Burst jitter specific to full-screen sparks */
@keyframes burstJitter {
  0%   { transform: translate3d(0,0,0) rotate(var(--r)); opacity: .9; }
  30%  { transform: translate3d(1px,-1px,0) rotate(calc(var(--r) + .6deg)); opacity: .6; }
  60%  { transform: translate3d(-1px,1px,0) rotate(calc(var(--r) - .6deg)); opacity: .3; }
  100% { transform: translate3d(0,2px,0) rotate(var(--r)); opacity: 0; }
}


/* CTA row: Toshimart + contract pill aligned */
.cta-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.contract-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #EAF7FF;
  font-size: .9rem;
  line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  box-shadow:
    0 0 6px rgba(0,229,255,0.25),
    0 0 10px rgba(255,62,236,0.18);
}
.contract-pill:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.contract-pill .dot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: radial-gradient(circle, rgba(0,229,255,.9), rgba(255,62,236,.9));
  box-shadow: 0 0 6px rgba(0,229,255,.35), 0 0 8px rgba(255,62,236,.25);
}
.contract-pill .hash {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contract-pill .icon {
  width: 14px; height: 14px; opacity: .9; flex: 0 0 auto;
  fill: currentColor;
}

/* Copied confirmation */
.copy-ok {
  display: none;
  margin-left: .3rem;
  font-size: .85rem;
  color: #9ff;
}
.contract-pill.copied + .copy-ok {
  display: inline;
}

/* Responsive: stack nicely on narrow widths */
@media (max-width: 520px) {
  .cta-row { gap: .5rem; }
  .contract-pill .hash { max-width: 160px; }
}


/* Inline alignment for Toshimart + contract pill */
.cta-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;
}
.cta-stack { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }

/* Normalize heights and vertical alignment */
.cta-row .btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 .95rem;
  line-height: 1;
}
.contract-pill {
  height: 40px;
  padding: 0 .8rem;
}

/* Keep stack behavior on small screens */
@media (max-width: 560px) {
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn, .contract-pill { height: 38px; }
}


/* Ensure Toshimart button + contract pill + "Copied!" align perfectly */
.cta-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;
}
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
}

/* Normalize heights across elements */
.cta-row .btn,
.contract-pill,
.copy-ok {
  height: 40px;
  display: inline-flex;
  align-items: center;
}
.cta-row .btn { padding: 0 .95rem; line-height: 1; }
.contract-pill { padding: 0 .8rem; }
.copy-ok { margin-left: .25rem; font-size: .9rem; color: #9ff; display: none; }
.contract-pill.copied + .copy-ok { display: inline-flex; }

/* Make Uniswap button its own stack and match sizing */
.uniswap-stack .btn {
  height: 40px;
  padding: 0 .95rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Optional: set a minimum width so buttons feel consistent */
.cta-row .btn, .uniswap-stack .btn {
  min-width: 220px;
}

/* Responsive wrap */
@media (max-width: 560px) {
  .cta-row { flex-wrap: wrap; gap: .5rem; }
  .cta-row .btn, .contract-pill, .copy-ok, .uniswap-stack .btn { height: 38px; }
}


/* Tooltip container */
.tooltip-wrap {
  position: relative;
  display: inline-block;
}

/* Glitch-themed tooltip */
.glitch-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  background: rgba(10, 12, 18, 0.92);
  border: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(0,229,255,.7), rgba(255,62,236,.7)) 1;
  color: #EAF7FF;
  font-size: .85rem;
  line-height: 1.2;
  padding: .45rem .6rem;
  border-radius: 8px;
  box-shadow:
    0 0 8px rgba(0,229,255,.25),
    0 0 12px rgba(255,62,236,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease-out .2s, transform .18s ease-out .2s, visibility 0s linear .2s;
  white-space: nowrap;
  z-index: 5;
}

/* Tiny pixel caret */
.glitch-tooltip .caret {
  position: absolute;
  top: 100%;
  left: 14px;
  transform: translateY(1px);
  font-size: 12px;
  color: rgba(10, 12, 18, 0.92);
  text-shadow:
    0 -1px 0 rgba(0,229,255,.35),
    0 -2px 0 rgba(255,62,236,.25);
}

/* Show tooltip on hover with slight delay */
.tooltip-wrap:hover .glitch-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: .2s;
  animation: tooltipFlicker .28s steps(8, end) 1, tooltipJitter 1.2s ease-in-out infinite;
}

/* Flicker-in effect */
@keyframes tooltipFlicker {
  0% { opacity: 0; }
  30% { opacity: .2; }
  60% { opacity: .85; }
  80% { opacity: .6; }
  100% { opacity: 1; }
}

/* Gentle jitter while visible */
@keyframes tooltipJitter {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(-1px) translateX(1px); }
  50%  { transform: translateY(0) translateX(0); }
  75%  { transform: translateY(1px) translateX(-1px); }
  100% { transform: translateY(0) translateX(0); }
}

/* Reduced motion: disable flicker/jitter */
@media (prefers-reduced-motion: reduce) {
  .tooltip-wrap:hover .glitch-tooltip {
    animation: none !important;
  }
}