/* craft30.css — 30-min professional hardening pass */

/* FX under UI so grain never films buttons/nav */
.fx-grain,
.fx-vignette,
.fx-sheen {
  z-index: 2 !important;
}

.scroll-progress {
  z-index: 120;
}

.nav {
  z-index: 110;
}

.cursor {
  z-index: 130;
}

/* True free scroll — kill snap */
html {
  scroll-snap-type: none !important;
}

.hero,
.section,
.section.discover,
.section.system,
.section.token,
.section.roadmap,
.section.cta {
  scroll-snap-align: none !important;
}

/* Safe areas for floating chrome */
.dock {
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
}

.to-top {
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* Chapter watermarks match narrative order */
.system::after { content: "02"; }
.story::after {
  content: "03";
  position: absolute;
  right: var(--gutter);
  top: 4rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(212, 175, 55, 0.04);
  pointer-events: none;
  z-index: 0;
}
.token::after {
  content: "04";
  position: absolute;
  right: var(--gutter);
  top: 4rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(212, 175, 55, 0.04);
  pointer-events: none;
  z-index: 0;
}
.roadmap::after { content: "05"; }
.protocol::after { content: "06"; }

.story,
.token {
  position: relative;
}

.story > *:not(.patriot-bg),
.token > *:not(.patriot-bg) {
  position: relative;
  z-index: 1;
}

.system > .patriot-bg,
.story > .patriot-bg,
.token > .patriot-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Loader out of a11y tree when done */
.loader.is-done {
  visibility: hidden;
  pointer-events: none;
}

/* Content visibility for long scroll performance */
.section:not(.hero) {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Mobile: single-column critical grids */
@media (max-width: 640px) {
  .countdown,
  .stats,
  .token-meta {
    grid-template-columns: 1fr !important;
  }

  .pillars {
    grid-template-columns: 1fr !important;
  }

  .hero-seal {
    display: none !important;
  }

  .dock {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
  }

  .to-top {
    left: max(0.75rem, env(safe-area-inset-left));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .nav-wordmark__name {
    display: none;
  }

  .hero-title {
    font-size: clamp(2.6rem, 14vw, 3.4rem);
  }

  .section-title {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }
}

/* Flow board honesty */
.flow-board__live {
  opacity: 0.75;
  font-size: 0.78rem;
}

.flow-note {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* CA coming-soon state */
.ca-block.is-placeholder .ca-code {
  opacity: 0.55;
  filter: blur(0.3px);
}

.ca-block.is-placeholder .btn-copy {
  opacity: 0.7;
}

/* Stronger discover flag readability */
.discover .prose {
  max-width: 38rem;
}

.discover .prose strong {
  color: var(--gold-bright);
}

/* History interlude breathing room */
.history .timeline {
  margin-top: 2rem;
}

/* Token card edge polish */
.token-card__edge {
  background: linear-gradient(90deg, #002868, var(--gold), #bf0a30);
  opacity: 0.85;
}

/* Distinction empty bg hide if present */
.distinction__bg:empty {
  display: none;
}

/* Focus rings consistent gold */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline-offset: 4px;
}

/* Marquee reduced motion pause */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-play-state: paused !important;
  }

  .section:not(.hero) {
    content-visibility: visible;
  }
}

/* Custom cursor: don't fight if incomplete — hide until finished */
.cursor {
  display: none !important;
}

/* Phase active American accent strip */
.phase--active {
  background:
    linear-gradient(90deg, rgba(0, 40, 104, 0.25), transparent 40%),
    rgba(5, 8, 10, 0.42);
}

/* Protocol eagle cards clearer */
.protocol .protocol-card {
  background-color: rgba(5, 8, 10, 0.55);
}

/* CTA frame lift */
.cta__frame {
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 40%),
    rgba(5, 8, 10, 0.55);
}

/* Ornament rules softer on mobile */
@media (max-width: 640px) {
  .ornament__rule {
    max-width: 64px;
  }

  .ornament {
    padding: 0.75rem var(--gutter);
  }
}

/* Selection already gold — reinforce links */
a {
  text-underline-offset: 0.15em;
}

/* Hero fineprint stronger contrast */
.hero-fineprint {
  color: rgba(245, 244, 240, 0.62);
}

/* Window countdown cells */
.window .countdown-cell {
  background: rgba(5, 8, 10, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.18);
}

/* Stat hover already in polish — ensure no overflow */
.stats {
  align-items: stretch;
}

.stat {
  min-height: 100%;
}

/* WebP backgrounds (compressed) — override locked CSS files */
.patriot-bg--flag-heroic {
  background-image:
    linear-gradient(100deg, rgba(5, 8, 10, 0.88) 0%, rgba(5, 8, 10, 0.42) 40%, rgba(5, 8, 10, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 40, 104, 0.28), transparent 40%, rgba(191, 10, 48, 0.14)),
    url("assets/bg-flag-heroic.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, 60% 45% !important;
  background-repeat: no-repeat !important;
}

.patriot-bg--flag-deep {
  background-image:
    linear-gradient(180deg, rgba(5, 8, 10, 0.5), rgba(5, 8, 10, 0.78)),
    linear-gradient(90deg, rgba(0, 40, 104, 0.35), transparent 45%, rgba(191, 10, 48, 0.22)),
    url("assets/bg-flag-heroic.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, center 40% !important;
}

.patriot-bg--flag-soft-heroic {
  background-image:
    linear-gradient(90deg, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.5) 50%, rgba(5, 8, 10, 0.75) 100%),
    url("assets/bg-flag-heroic.webp") !important;
  background-size: auto, cover !important;
  background-position: 0 0, 85% 50% !important;
}

.patriot-bg--eagle-heroic {
  background-image:
    linear-gradient(105deg, rgba(5, 8, 10, 0.82) 0%, rgba(5, 8, 10, 0.32) 48%, rgba(5, 8, 10, 0.58) 100%),
    radial-gradient(ellipse at 78% 40%, rgba(212, 175, 55, 0.14), transparent 50%),
    url("assets/bg-eagle-heroic.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, 72% 38% !important;
}

.patriot-bg--cta {
  background-image:
    linear-gradient(180deg, rgba(5, 8, 10, 0.48), rgba(5, 8, 10, 0.9)),
    linear-gradient(90deg, rgba(0, 40, 104, 0.28), transparent 40%, rgba(191, 10, 48, 0.2)),
    radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.18), transparent 55%),
    linear-gradient(180deg, #0a121c, #05080a) !important;
  background-size: auto, auto, auto, auto !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
}

.patriot-bg--oil-rigs {
  background-image:
    linear-gradient(105deg, rgba(5, 8, 10, 0.88) 0%, rgba(5, 8, 10, 0.38) 48%, rgba(5, 8, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 8, 10, 0.35) 0%, transparent 40%, rgba(5, 8, 10, 0.55) 100%),
    radial-gradient(ellipse at 70% 55%, rgba(212, 175, 55, 0.12), transparent 55%),
    url("assets/bg-oil-rigs.webp") !important;
  background-size: auto, auto, auto, cover !important;
  background-position: 0 0, 0 0, 0 0, 65% 45% !important;
}

.patriot-bg--oil-barrels {
  background-image:
    linear-gradient(100deg, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.42) 50%, rgba(5, 8, 10, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 40, 104, 0.18), transparent 45%, rgba(191, 10, 48, 0.1)),
    url("assets/bg-oil-barrels.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, 70% 48% !important;
}

.distinction .patriot-bg--distinction {
  background-image:
    linear-gradient(180deg, rgba(5, 8, 10, 0.55), rgba(5, 8, 10, 0.78)),
    linear-gradient(90deg, rgba(0, 40, 104, 0.25), transparent 50%, rgba(191, 10, 48, 0.18)),
    url("assets/bg-eagle-flag.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, center 42% !important;
}

/* Neutralize older craft30 photo duplicates forcing wrong BGs */
.system .patriot-bg--oil-rigs,
.flow .patriot-bg--oil-rigs,
.story .patriot-bg--oil-rigs,
.roadmap .patriot-bg--oil-rigs,
.window .patriot-bg--oil-barrels,
.why .patriot-bg--oil-barrels,
.token .patriot-bg--oil-barrels,
.patriot-bg--cta,
.distinction .patriot-bg--distinction {
  /* unique-bgs.css is source of truth — keep selectors inert if mismatched */
}

.discover .patriot-bg--flag-heroic {
  background-image:
    linear-gradient(95deg, rgba(5, 8, 10, 0.92) 0%, rgba(5, 8, 10, 0.38) 44%, rgba(5, 8, 10, 0.48) 100%),
    linear-gradient(180deg, rgba(0, 40, 104, 0.38), transparent 36%, rgba(191, 10, 48, 0.2)),
    url("assets/bg-flag-heroic.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: 0 0, 0 0, 68% 38% !important;
}

.hero-media picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media picture .hero-photo,
.hero-media .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero-photo {
  /* keep wind; ensure webp sharp */
  image-rendering: auto;
}

/* Nav logo crisp */
.nav-logo,
.loader__seal img,
.footer-logo,
.cta__seal {
  image-rendering: -webkit-optimize-contrast;
}

/* Disabled copy button style */
.btn-copy:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Why section sub */
.why .section-sub {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Better mobile menu backdrop */
.mobile-menu {
  backdrop-filter: blur(18px) saturate(1.15);
  background: rgba(5, 8, 10, 0.94);
}

.mobile-menu a:not(.btn):focus-visible {
  color: var(--gold-bright);
}

/* Toast polish */
.toast {
  border: 1px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(10px);
}

/* Roadmap phases stretch */
.phases {
  align-items: stretch;
}

.phase {
  display: flex;
  flex-direction: column;
}

.phase ul {
  margin-top: auto;
}

/* History NOW badge feel */
.timeline li.now .year {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), transparent);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}

/* Loader brand spacing */
.loader__brand {
  letter-spacing: 0.35em;
}

.loader__sub {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.7;
}

/* Reduce double-motion: disable CSS patriot drift when JS translate is active on fine pointers */
@media (hover: hover) and (pointer: fine) {
  section.has-patriot-bg.in-view .patriot-bg--oil-rigs,
  section.has-patriot-bg.in-view .patriot-bg--oil-barrels,
  section.has-patriot-bg.in-view .patriot-bg--flag-heroic,
  section.has-patriot-bg.in-view .patriot-bg--eagle-heroic,
  section.has-patriot-bg.in-view .patriot-bg--flag-deep {
    animation: none !important;
  }
}

/* Print: strip FX */
@media print {
  .fx-grain,
  .fx-vignette,
  .fx-sheen,
  .dock,
  .to-top,
  .scroll-progress,
  .cursor,
  .loader,
  .nav-burger {
    display: none !important;
  }

  .patriot-bg {
    opacity: 0.15 !important;
  }
}

html.save-data .patriot-bg {
  background-image: none !important;
  background-color: rgba(5, 8, 10, 0.9) !important;
  animation: none !important;
  filter: none !important;
}

html.save-data .hero-photo {
  animation: photoIn 0.6s ease forwards !important;
}

/* Typography rhythm */
.section-sub {
  max-width: 40rem;
  line-height: 1.65;
}

.prose {
  line-height: 1.7;
}

.prose.muted {
  color: rgba(245, 244, 240, 0.55);
}

/* Nav burger bars gold on open */
.nav-burger.is-open span {
  background: var(--gold);
}

/* Chapter mark spacing under patriot */
.chapter-mark {
  margin-bottom: 1.25rem;
}

/* Hero CTAs gap */
.hero-ctas {
  gap: 0.85rem;
}

/* Token meta cells */
.token-meta__cell {
  border-color: rgba(212, 175, 55, 0.18);
}

/* Footer tag gold */
.footer-tag {
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* Discover grid balance */
.discover-grid {
  gap: clamp(2rem, 5vw, 3.5rem);
}

.discover-chips {
  gap: 0.75rem;
}

/* Pillar numbers gold glow on hover */
.pillar:hover .pillar-num {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

/* Protocol link arrow spacing */
.protocol-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-family: var(--font-cond, "Barlow Condensed", sans-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold);
}

/* CTA note */
.cta-note {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 1.5rem;
}

/* Scroll hint softer */
.scroll-hint {
  opacity: 0.7;
}

.scroll-hint.is-hidden {
  opacity: 0;
}

/* Brand lockup in hero */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gold-bright);
}

/* Token card live dot */
.live-dot {
  animation: blink 1.6s ease-in-out infinite;
}

/* Avoid layout shift on countdown */
.countdown-num {
  min-width: 2ch;
  display: inline-block;
  text-align: center;
}

/* Soft section dividers via ornament */
.ornament {
  opacity: 0.85;
}

@media (min-width: 981px) {
  .hero-content {
    max-width: 34rem;
  }
}

/* Denser rhythm between ornaments and sections */
.section + .ornament,
.ornament + .section,
.ornament + .marquee {
  margin-top: 0;
}

/* Window section frame */
.window .section-frame {
  max-width: var(--max, 1120px);
  margin: 0 auto;
}

.window .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Token buy link when CA soon */
#buy-link {
  min-width: 11rem;
  justify-content: center;
}

/* Disclaimer readability */
.disclaimer {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.78rem;
  color: rgba(245, 244, 240, 0.48);
}

/* Active phase live pulse */
.phase-live {
  color: var(--red-soft, #e01840);
  font-style: normal;
  animation: blink 1.8s ease-in-out infinite;
}

/* Story panel stamp */
.story-panel__stamp {
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.8;
}

/* Nav ghost button quieter */
.nav-actions .btn-ghost {
  border-color: rgba(212, 175, 55, 0.28);
}

/* Ensure main stacks above FX */
main {
  position: relative;
  z-index: 3;
}

.footer {
  position: relative;
  z-index: 3;
}

.mobile-menu {
  z-index: 200;
}

/* High-DPI logo sharpness */
@media (min-resolution: 2dppx) {
  .nav-logo,
  .loader__seal img {
    image-rendering: auto;
  }
}