/* Cipherchain V4.20 */

/* ------------------------------
   Base Styles
   ------------------------------ */

:root{
  --bg: #0c0c0c;
  --bg-2: #111214;
  --panel: #15171a;
  --text: #e9edf1;
  --muted: #a9b0b7;
  --line: #262a2f;
  --accent: #f7931a;        /* Bitcoin orange */
  --accent-2: #ffb65a;
  --glow: rgba(247,147,26,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --ring: rgba(255,255,255,.06);
  --ring-strong: rgba(255,255,255,.12);
}

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

html, body { height: 100%; }

html, body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1a1d21 0%, transparent 60%),
              radial-gradient(900px 600px at 80% 120%, #13161a 0%, transparent 55%),
              var(--bg);
  line-height: 1.6;
}

.code, .mono, pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

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

/* Accessibility */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  left: 12px; top: 12px; width: auto; height: auto; padding: .5rem .75rem; background: var(--panel); border-radius: 8px; z-index: 9999;
}

/* Containers */
.container{ width: min(1100px, 92vw); margin-inline: auto; }
.narrow{ width: min(800px, 92vw); }

/* Buttons */
.btn{
  --btn-bg: linear-gradient(180deg, var(--accent), var(--accent-2));
  display: inline-block;
  padding: .9rem 1.15rem;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #0a0a0a;
  background: var(--btn-bg);
  box-shadow: 0 8px 22px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px var(--glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn:active{ transform: translateY(0); }

.btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid #2a2f36;
  box-shadow: none;
}
.btn-ghost:hover{ border-color: #3a4048; }

.btn-small{ padding: .55rem .9rem; font-size: .95rem; }

.navbar .btn.btn-small {
  color: #000;
}

.navbar .btn.btn-small:hover {
  color: #fff;
}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(130%) blur(6px);
  background: linear-gradient(180deg, rgba(12,12,12,.85), rgba(12,12,12,.55));
  border-bottom: 1px solid #161a1f;
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 0;
}
.brand{ display: inline-flex; align-items: center; gap: .6rem; }

/* Brand logo styling */
.brand-logo img {
  display: block;
  height: 36px;
  width: auto;
}

.nav{ display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav a:not(.btn){ color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:not(.btn):hover{ color: var(--text); }

/* Hero */
.hero{
  position: relative; isolation: isolate;
  padding: clamp(80px, 14vw, 140px) 0 80px;
  overflow: hidden;
}

/* Endless marquee background */
.hero-effects{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.marquee{
  position: absolute; inset: 0;
  mask-image: radial-gradient(1200px 800px at 50% 30%, #000 60%, transparent 100%);
  opacity: .6;
}
.marquee-inner{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 160%;
  display: flex; flex-direction: column;
  animation: scrollUp 32s linear infinite;
}
.row{
  color: #7f8791;
  font-family: inherit;
  white-space: pre-wrap; text-align: center;
  filter: drop-shadow(0 0 12px rgba(20,22,25,.25));
  margin: 0 0 24px 0;
}
@keyframes scrollUp{
  0%{ transform: translate(-50%, 0); }
  100%{ transform: translate(-50%, -50%); }
}

.hero-inner{ text-align: center; }
.hero-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 0 0 .6rem;
  letter-spacing: .2px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.hero-subtitle{
  color: var(--muted);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin: 0 auto 1.6rem;
  max-width: 800px;
}
.tagline{ margin-top: 1rem; color: #c3c9cf; opacity: .85; font-weight: 600; }
.actions{ display: inline-flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* Sections */
.section{ padding: 64px 0; border-top: 1px solid var(--line); }
.section h2{ font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .75rem; }
.section p{ color: var(--muted); }

/* Story */
.story p + p{ margin-top: .8rem; }
.story strong{ color: var(--text); }

/* Timeline */
.timeline-list{
  display: grid; grid-template-columns: 1fr; gap: 18px;
  counter-reset: step;
  border-left: 2px solid #23262b; padding-left: 24px; margin: 24px 0 0;
}
.timeline-list li{
  position: relative; list-style: none; background: linear-gradient(180deg, #14161a, #101215);
  border: 1px solid #1e2227; border-radius: 14px; padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.timeline-list li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; left: -34px; top: 16px;
  width: 24px; height: 24px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: linear-gradient(180deg, #22262b, #15171a);
  border: 1px solid #24282e; color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.timeline-list h3{ margin: 0 0 6px; font-size: 1.05rem; }
.timeline-list p{ margin: 0; }

/* Glow when in view */
.observe.in-view{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(247,147,26,.18), 0 8px 30px rgba(247,147,26,.08), var(--shadow);
  transform: translateY(-2px);
}

/* ===============================
   Cipher Rain Visual
   =============================== */
.cipher-visual{
  position: relative;
  width: 100%;
  height: clamp(320px, 48vw, 520px);
  background: linear-gradient(180deg, #0d0f12, #0b0c0f);
  border: 1px solid #1f2328;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
.code-rain-canvas{ position: absolute; inset: 0; display: block; }

/* Chain overlay */
.chain-overlay{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; pointer-events: none;
}
.chain-overlay .block{
  min-width: 120px; min-height: 86px; border-radius: 14px;
  background: linear-gradient(180deg, #15181d, #0f1114);
  border: 1px solid #2a2f36;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.35);
  display: grid; place-items: center; text-align: center;
}
.chain-overlay .block span{ color: #dfe6ee; font-weight: 800; letter-spacing: .3px; }
.chain-overlay .link{
  width: 36px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #2a2f36, #1f242b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Caption */
.fusion-caption{
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(18,20,24,.92), rgba(18,20,24,.82));
  border: 1px solid #3a424c; border-radius: 14px; padding: 12px 16px;
  color: #eaf0f6; font-weight: 800; text-align: center; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

/* Fusion points */
.fusion-points{ margin: 22px auto 0; width: min(860px, 92vw); padding-left: 1rem; }
.fusion-points li{ margin: .4rem 0; }

/* Features grid */
.features .grid{
  margin-top: 14px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card{
  background: linear-gradient(180deg, #14161a, #101215);
  border: 1px solid #1e2227; border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.card:hover{
  border-color: var(--ring-strong);
  transform: translateY(-2px);
}
.card h3{ margin: 0 0 6px; font-size: 1.05rem; }
.card p{ margin: 0; }

/* CTA */
.cta .lead{ font-size: 1.1rem; color: var(--text); }
.cta .tiny{ margin-top: .85rem; color: #8a9199; font-size: .9rem; }

/* Footer */
.site-footer{ border-top: 1px solid var(--line); background: linear-gradient(180deg, #0c0c0c, #0a0a0a); padding: 28px 0 40px; }
.footer-inner{ display: grid; gap: 8px; justify-items: center; text-align: center; }
.footer-tag{ color: #cbd2d9; font-weight: 300; font-style: italic;}
.footer-nav{ display: flex; gap: .9rem; flex-wrap: wrap; }
.footer-nav a{ color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-nav a:hover{ color: var(--text); }
copyright{ color: var(--muted); }

/* Responsive tweaks */
@media (max-width: 720px){
  /* Hide nav on home */
  .nav{ display: none; }

  /* Center the brand */
  .header-inner{
    justify-content: center;
  }
  .brand{
    justify-content: center;
    margin-inline: auto;
  }
  .timeline-list{ border-left: none; padding-left: 0; }
  .chain-overlay{ gap: 10px; }
  .chain-overlay .block{ min-width: 100px; min-height: 72px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-inner{ animation: none !important; }
}

/* === Chain block sparkle + text swap effects === */
.chain-overlay .block {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

.chain-overlay .block span {
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}

/* brief dim/blur during swap */
.chain-overlay .block.flashing span {
  opacity: .12;
  filter: blur(1px);
  transform: translateY(1px);
}

/* hover sparkle */
.chain-overlay .block:hover {
  border-color: #3a424c;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.45),
    0 0 24px rgba(247,147,26,.18);
  transform: translateY(-2px);
}

/* starburst glint */
.chain-overlay .block::after {
  content: "";
  position: absolute;
  top: -120%; left: -120%;
  width: 340%; height: 340%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    radial-gradient(closest-side, rgba(247,147,26,.45), rgba(247,147,26,0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(25deg) scale(0.85);
  pointer-events: none;
}

.chain-overlay .block:hover::after {
  animation: blockSparkle 900ms ease forwards;
}

@keyframes blockSparkle {
  0%   { opacity: 0; transform: translate(-10%, -10%) rotate(25deg) scale(0.8); }
  35%  { opacity: .75; }
  60%  { opacity: .35; }
  100% { opacity: 0; transform: translate(15%, 15%) rotate(25deg) scale(1.05); }
}

/* reduce motion: no sparkle anim, but keep slight glow */
@media (prefers-reduced-motion: reduce){
  .chain-overlay .block:hover::after { animation: none; opacity: .25; }
}