/*
Theme Name: Antonio's Terminal
Theme URI: https://antoniosinternational.com
Author: Antonio's International
Author URI: https://antoniosinternational.com
Description: A dark, data-dense block theme for the Antonio's International coin price guide. Space-station dashboard: ice-blue light on brushed-silver surfaces, starfield background, slowly spinning instruments, tabular numbers.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antonios-terminal
Tags: dark, block-styles, full-site-editing, wide-blocks, custom-colors
*/

/* ---------------------------------------------------------------------------
   1. Design tokens exposed for the coin-price-guide plugin
   --------------------------------------------------------------------------- */
:root {
  --cpg-bg: var(--wp--preset--color--base, #060A14);
  --cpg-surface: var(--wp--preset--color--surface, #0B1220);
  --cpg-surface-2: var(--wp--preset--color--surface-2, #111B2E);
  --cpg-line: var(--wp--preset--color--line, #1C2A44);
  --cpg-line-strong: var(--wp--preset--color--line-strong, #2E4166);
  --cpg-text: var(--wp--preset--color--text, #E8EEF8);
  --cpg-muted: var(--wp--preset--color--muted, #94A3BE);
  --cpg-dim: var(--wp--preset--color--dim, #5E6C88);
  --cpg-accent: var(--wp--preset--color--accent, #5AB4FF);
  --cpg-accent-2: var(--wp--preset--color--accent-2, #C7D2E3);
  --cpg-warn: var(--wp--preset--color--warn, #FFB547);
  --cpg-danger: var(--wp--preset--color--danger, #FF5C7A);
  --cpg-font-ui: var(--wp--preset--font-family--space-grotesk, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  --cpg-font-mono: var(--wp--preset--font-family--jetbrains-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --cpg-radius: 6px;

  /* Theme-internal helpers (safe for the plugin to read, not required) */
  --cpg-radius-sm: 4px;
  --cpg-accent-rgb: 90, 180, 255;
  --cpg-accent-2-rgb: 199, 210, 227;
  --cpg-glow: 0 0 0 1px rgba(90, 180, 255, 0.35), 0 0 24px rgba(90, 180, 255, 0.18);
  --cpg-glow-soft: 0 0 0 1px rgba(90, 180, 255, 0.22), 0 14px 36px rgba(6, 10, 20, 0.55), 0 0 32px rgba(90, 180, 255, 0.14);
  --cpg-silver: linear-gradient(135deg, #E6ECF5 0%, #9AA8BD 45%, #D9E1EE 55%, #7E8CA3 100%);
  --cpg-silver-soft: linear-gradient(135deg, rgba(230, 236, 245, 0.9) 0%, rgba(154, 168, 189, 0.7) 45%, rgba(217, 225, 238, 0.9) 55%, rgba(126, 140, 163, 0.7) 100%);
  --cpg-star: 232, 238, 248;
  --cpg-panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --cpg-ease: 160ms ease-out;
  --cpg-header-h: 56px;
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--cpg-bg);
  /* Layers, front to back: hairline grid, three star fields, nebula haze */
  background-image:
    linear-gradient(rgba(var(--cpg-star), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cpg-star), 0.035) 1px, transparent 1px),
    radial-gradient(circle at 88px 64px, rgba(var(--cpg-star), 0.85) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 372px 236px, rgba(var(--cpg-accent-rgb), 0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 214px 452px, rgba(var(--cpg-star), 0.7) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 480px 88px, rgba(var(--cpg-star), 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 40px 318px, rgba(var(--cpg-accent-2-rgb), 0.75) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 26px 44px, rgba(var(--cpg-star), 0.5) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 154px 122px, rgba(var(--cpg-star), 0.42) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 250px 210px, rgba(var(--cpg-star), 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 92px 262px, rgba(var(--cpg-accent-rgb), 0.5) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 300px 40px, rgba(var(--cpg-star), 0.38) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 60px 120px, rgba(var(--cpg-star), 0.28) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 170px 30px, rgba(var(--cpg-star), 0.22) 0 0.5px, transparent 1px),
    radial-gradient(circle at 130px 180px, rgba(var(--cpg-star), 0.3) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 20px 90px, rgba(var(--cpg-star), 0.2) 0 0.5px, transparent 1px),
    radial-gradient(1100px 720px at -8% -12%, rgba(var(--cpg-accent-rgb), 0.13) 0%, rgba(var(--cpg-accent-rgb), 0) 62%),
    radial-gradient(900px 640px at 104% 28%, rgba(var(--cpg-accent-2-rgb), 0.06) 0%, rgba(var(--cpg-accent-2-rgb), 0) 60%),
    radial-gradient(700px 520px at 40% 110%, rgba(var(--cpg-accent-rgb), 0.06) 0%, rgba(var(--cpg-accent-rgb), 0) 60%);
  background-size:
    32px 32px, 32px 32px,
    560px 560px, 560px 560px, 560px 560px, 560px 560px, 560px 560px,
    340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px,
    auto, auto, auto;
  background-position: 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  color: var(--cpg-text);
  font-family: var(--cpg-font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

.wp-site-blocks > footer {
  margin-block-start: 0;
}

::selection {
  background: var(--cpg-accent);
  color: var(--cpg-bg);
}

:focus-visible {
  outline: 2px solid var(--cpg-accent-2);
  outline-offset: 2px;
}

a {
  transition: color var(--cpg-ease), border-color var(--cpg-ease), background-color var(--cpg-ease);
}

:where(p) a:not(.wp-element-button) {
  text-decoration: underline;
  text-decoration-color: rgba(90, 180, 255, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:where(p) a:not(.wp-element-button):hover {
  text-decoration-color: currentColor;
}

code, kbd, samp, pre, .mono, .num, .tag, .eyebrow, .section-index, .spec-key, .copyright {
  font-family: var(--cpg-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

/* Shared micro-components ---------------------------------------------- */
.eyebrow {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpg-muted);
  margin: 0;
}

.eyebrow-live {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow-live::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cpg-accent);
  box-shadow: 0 0 0 3px rgba(90, 180, 255, 0.18), 0 0 12px rgba(90, 180, 255, 0.6);
  animation: at-pulse 2.4s ease-in-out infinite;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpg-accent);
  background: rgba(90, 180, 255, 0.06);
  border: 1px solid rgba(90, 180, 255, 0.32);
  border-radius: var(--cpg-radius-sm);
  padding: 6px 10px;
  margin: 0;
  line-height: 1.2;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cpg-accent);
  box-shadow: 0 0 8px rgba(90, 180, 255, 0.7);
}

.panel {
  position: relative;
  background: var(--cpg-surface);
  border: 1px solid var(--cpg-line);
  border-radius: var(--cpg-radius);
  box-shadow: var(--cpg-panel-highlight);
  padding: 24px;
  transition: border-color var(--cpg-ease), box-shadow var(--cpg-ease);
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 0 solid var(--cpg-accent-2);
  border-image: var(--cpg-silver) 1;
  opacity: 0.95;
  pointer-events: none;
}

.panel::before {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.panel::after {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.panel:hover {
  border-color: var(--cpg-line-strong);
  box-shadow: var(--cpg-glow-soft), var(--cpg-panel-highlight);
}

.panel-glow {
  box-shadow: var(--cpg-glow), var(--cpg-panel-highlight);
}

.panel > .eyebrow {
  margin-bottom: 10px;
}

.panel-title {
  margin: 0 0 6px;
  font-size: var(--wp--preset--font-size--large);
}

/* Buttons ---------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  position: relative;
  border-color: transparent;
  transition: background-color var(--cpg-ease), color var(--cpg-ease), border-color var(--cpg-ease), box-shadow var(--cpg-ease), transform var(--cpg-ease);
}

/* Brushed-metal rim: a 1px gradient ring masked to the border box */
.wp-element-button::before,
.wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--cpg-silver);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  box-shadow: var(--cpg-glow);
  transform: translateY(-1px);
}

.wp-element-button:hover::before,
.wp-block-button__link:hover::before {
  opacity: 1;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--cpg-accent);
  border: 1px solid transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(90, 180, 255, 0.08);
  color: var(--cpg-accent);
  border-color: transparent;
}

/* Section framing -------------------------------------------------------- */
.section {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.section-head {
  align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cpg-line);
  position: relative;
}

.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 1px;
  background: var(--cpg-silver);
}

.section-head .eyebrow {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Spinning module marker */
.section-head .eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid var(--cpg-accent-2);
  border-image: var(--cpg-silver) 1;
  animation: at-spin 12s linear infinite;
  will-change: transform;
}

.section-head > .wp-block-group > * + * {
  margin-block-start: 0;
}

.section-title {
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
}

.section-index {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpg-dim);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3. Header
   --------------------------------------------------------------------------- */
.site-header,
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 200;
}

.header-bar {
  background: rgba(11, 18, 32, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--cpg-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.header-inner {
  min-height: var(--cpg-header-h);
  align-items: center;
  flex-wrap: nowrap;
}

.wp-block-group.header-inner > * + * {
  margin-block-start: 0;
}

.brand {
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

.wp-block-group.brand > * + * {
  margin-block-start: 0;
}

.logo-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--cpg-radius-sm);
  background: rgba(90, 180, 255, 0.08);
  box-shadow: 0 0 18px rgba(90, 180, 255, 0.16), inset 0 0 12px rgba(90, 180, 255, 0.1);
  position: relative;
  transition: box-shadow var(--cpg-ease);
}

/* Brushed silver rim (static) */
.logo-mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--cpg-silver);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Outer orbit ring: the only part of the mark that rotates */
.logo-mark::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(199, 210, 227, 0.28);
  background: radial-gradient(circle at 50% 0, var(--cpg-accent) 0 1.5px, rgba(90, 180, 255, 0) 3px);
  animation: at-spin 40s linear infinite;
  pointer-events: none;
  will-change: transform;
}

.brand:hover .logo-mark {
  box-shadow: var(--cpg-glow), inset 0 0 12px rgba(90, 180, 255, 0.14);
}

.logo-mark__text {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cpg-accent);
  margin: 0;
  line-height: 1;
}

.logo-mark__text a,
p.logo-mark__text a {
  color: inherit;
  text-decoration: none;
}

.wp-block-group.brand-text > * + * {
  margin-block-start: 0;
}

.wordmark {
  font-family: var(--cpg-font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--cpg-text);
  margin: 0;
  white-space: nowrap;
}

.wordmark a,
p.wordmark a {
  color: inherit;
  text-decoration: none;
}

.wordmark a:hover {
  color: var(--cpg-accent);
}

.brand-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--cpg-dim);
  margin-top: 3px;
}

/* Navigation */
.site-nav {
  gap: 4px;
}

.site-nav .wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  border-radius: var(--cpg-radius-sm);
  transition: color var(--cpg-ease), background-color var(--cpg-ease);
}

.site-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 1px;
  background: var(--cpg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cpg-ease);
}

.site-nav .wp-block-navigation-item__content:hover::after,
.site-nav .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.site-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--cpg-text);
}

.wp-block-navigation .wp-block-navigation-item__content {
  color: inherit;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--cpg-text);
  padding: 6px;
  border: 1px solid var(--cpg-line);
  border-radius: var(--cpg-radius-sm);
  background: rgba(17, 27, 46, 0.6);
}

.wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(6, 10, 20, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 96px 24px 40px;
}

.wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 238, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 238, 248, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 4px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 15px;
  letter-spacing: 0.12em;
  padding: 14px 0;
  border-bottom: 1px solid var(--cpg-line);
  width: 100%;
  display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
  content: "// ";
  color: var(--cpg-accent);
}

.wp-block-navigation__responsive-container-close {
  top: 12px;
  right: 16px;
}

/* ---------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(44px, 6vw, 72px);
  border-bottom: 1px solid var(--cpg-line);
  background:
    linear-gradient(90deg, rgba(90, 180, 255, 0.7), rgba(199, 210, 227, 0.3) 40%, transparent 75%) top / 100% 1px no-repeat,
    linear-gradient(rgba(90, 180, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(90, 180, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(900px 520px at 8% 0%, rgba(90, 180, 255, 0.18) 0%, rgba(90, 180, 255, 0) 60%),
    radial-gradient(700px 420px at 92% 100%, rgba(199, 210, 227, 0.07) 0%, rgba(199, 210, 227, 0) 60%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.78) 0%, rgba(6, 10, 20, 0.2) 100%);
}

/* Orbital rings, off the top-right, counter-rotating. A brighter node on
   each ring makes the rotation legible. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(90, 180, 255, 0.16);
  pointer-events: none;
  will-change: transform;
}

.hero::before {
  width: 720px;
  height: 720px;
  top: -330px;
  right: -140px;
  background:
    radial-gradient(circle at 50% 0, rgba(90, 180, 255, 0.95) 0 2.5px, rgba(90, 180, 255, 0.35) 4px, rgba(90, 180, 255, 0) 12px);
  animation: at-orbit 60s linear infinite;
}

.hero::after {
  width: 1120px;
  height: 1120px;
  top: -530px;
  right: -340px;
  border-color: rgba(90, 180, 255, 0.12);
  background:
    radial-gradient(circle at 50% 100%, rgba(199, 210, 227, 0.95) 0 2px, rgba(199, 210, 227, 0.3) 3.5px, rgba(199, 210, 227, 0) 10px);
  animation: at-orbit-reverse 90s linear infinite;
}

.wp-block-group.hero-inner > * + * {
  margin-block-start: 0;
}

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

/* Core's flow-layout rules zero block margins at (0,1,1); restate the hero
   rhythm at higher specificity. */
.hero-inner .hero-title {
  margin-bottom: 22px;
}

.hero-inner .hero-desc {
  margin-bottom: 30px;
}

.wp-block-group.hero-inner > .hero-meta {
  margin-top: 22px;
}

/* Gyroscope widget ------------------------------------------------------ */
.gyro {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: max(24px, calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2 + 40px));
  width: 260px;
  height: 260px;
  margin: 0;
  transform: translateY(-50%);
  perspective: 820px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.wp-block-group.gyro > * + *,
.wp-block-group.gyro-ring > * + * {
  margin-block-start: 0;
}

.gyro-ring {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(199, 210, 227, 0.62);
  box-shadow: inset 0 0 0 1px rgba(199, 210, 227, 0.06), 0 0 18px rgba(90, 180, 255, 0.08);
  transform-style: preserve-3d;
  will-change: transform;
}

.gyro-ring-1 {
  animation: at-gyro-x 18s linear infinite;
}

/* Satellite riding ring 1 */
.gyro-ring-1::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cpg-accent);
  box-shadow: 0 0 0 3px rgba(90, 180, 255, 0.18), 0 0 14px rgba(90, 180, 255, 0.9);
}

.gyro-ring-2 {
  inset: 30px;
  border-color: rgba(199, 210, 227, 0.5);
  animation: at-gyro-y 26s linear infinite;
}

.gyro-ring-3 {
  inset: 30px;
  border-style: dashed;
  border-color: rgba(90, 180, 255, 0.55);
  box-shadow: none;
  animation: at-gyro-z 34s linear infinite;
}

.gyro-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, var(--cpg-accent) 45%, rgba(90, 180, 255, 0.6) 100%);
  box-shadow: 0 0 0 4px rgba(90, 180, 255, 0.16), 0 0 24px rgba(90, 180, 255, 0.85), 0 0 60px rgba(90, 180, 255, 0.4);
  transform: translateZ(1px);
}

.hero .eyebrow {
  margin-bottom: 22px;
}

.hero-title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 19ch;
  margin: 0 0 22px;
}

.hero-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--cpg-accent), var(--cpg-accent-2));
  box-shadow: 0 0 12px rgba(90, 180, 255, 0.5);
}

.hero-desc {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--cpg-muted);
  max-width: 58ch;
  margin: 0 0 30px;
}

.hero-search {
  max-width: 680px;
}

.wp-block-group.hero-search > * + * {
  margin-block-start: 0;
}

.hero-meta {
  margin-top: 22px;
  gap: 8px 22px;
  flex-wrap: wrap;
}

.wp-block-group.hero-meta > * + * {
  margin-block-start: 0;
}

.hero-meta .meta-item {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpg-dim);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta .meta-item::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--cpg-accent-2);
  opacity: 0.8;
}

/* Page-level hero (interior pages, 404) */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--cpg-line);
  background:
    radial-gradient(800px 420px at 6% 0%, rgba(90, 180, 255, 0.12) 0%, rgba(90, 180, 255, 0) 60%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.7) 0%, rgba(6, 10, 20, 0.1) 100%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(90, 180, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 180, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 10% 0%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 100% at 10% 0%, #000 20%, transparent 80%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 180, 255, 0.7), rgba(199, 210, 227, 0.25) 40%, transparent 75%);
}

.wp-block-group.page-hero-inner > * + * {
  margin-block-start: 0;
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.page-title {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 24ch;
}

.page-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--cpg-accent), var(--cpg-accent-2));
}

.page-content {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.page-content .wp-block-post-content > :not(.alignwide):not(.alignfull) {
  max-width: 760px;
  margin-left: 0 !important;
}

.wp-block-group.page-body > * + * {
  margin-block-start: 0;
}

.page-content .wp-block-post-content > .alignwide {
  max-width: var(--wp--style--global--wide-size);
}

.page-content .wp-block-post-content > .alignfull {
  max-width: none;
}

.page-content .wp-block-post-content h2 {
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--cpg-line);
  font-size: var(--wp--preset--font-size--x-large);
}

.page-content .wp-block-post-content h3 {
  margin-top: 1.8em;
  font-size: var(--wp--preset--font-size--large);
}

.page-content .wp-block-post-content p,
.page-content .wp-block-post-content li {
  color: var(--cpg-muted);
  font-size: 1.0625rem;
}

.page-content .wp-block-post-content strong {
  color: var(--cpg-text);
  font-weight: 500;
}

.page-content .wp-block-post-content table {
  border-collapse: collapse;
  width: 100%;
}

.page-content .wp-block-post-content th {
  background: var(--cpg-surface-2);
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpg-muted);
  text-align: left;
}

.page-content .wp-block-post-content td,
.page-content .wp-block-post-content th {
  border: 1px solid var(--cpg-line);
  padding: 10px 12px;
}

.page-content .wp-block-post-content td {
  font-family: var(--cpg-font-mono);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   5. Home sections
   --------------------------------------------------------------------------- */
/* Station status strip (home only) */
.status-strip {
  border-bottom: 1px solid var(--cpg-line);
  background: rgba(11, 18, 32, 0.72);
  padding-top: 7px;
  padding-bottom: 7px;
}

.status-inner {
  gap: 4px 28px;
  align-items: center;
}

.wp-block-group.status-inner > * + * {
  margin-block-start: 0;
}

.status-item {
  font-family: var(--cpg-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cpg-dim);
  margin: 0;
  line-height: 1.6;
  white-space: nowrap;
}

.status-item-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cpg-muted);
}

.status-item-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cpg-accent);
  box-shadow: 0 0 8px rgba(90, 180, 255, 0.8);
  animation: at-blink 1.6s steps(2, jump-none) infinite;
}

/* Floating widgets: stat tiles and country cards come from the plugin;
   .panel is the theme's own. Float uses the individual `translate`
   property so a hover `transform` can tilt without fighting the keyframe. */
.cpg-stat,
.cpg-card,
.panel {
  animation: at-float 8s ease-in-out infinite;
  will-change: translate;
}

.cpg-card { animation-duration: 9s; }
.panel { animation-duration: 7.5s; }

.cpg-stat:nth-child(2), .cpg-card:nth-child(2) { animation-delay: -2.1s; }
.cpg-stat:nth-child(3), .cpg-card:nth-child(3) { animation-delay: -4.3s; }
.cpg-stat:nth-child(4), .cpg-card:nth-child(4) { animation-delay: -6.2s; }
.panel-method { animation-delay: -3s; }

.cpg-stat,
.cpg-card {
  transition: border-color var(--cpg-ease), transform 220ms ease-out, box-shadow 220ms ease-out;
}

.cpg-stat:hover,
.cpg-card:hover,
.panel:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--cpg-glow-soft);
  border-color: rgba(90, 180, 255, 0.55);
}

.cpg-stat::after {
  background: linear-gradient(90deg, var(--cpg-accent), rgba(199, 210, 227, 0.6) 45%, transparent 75%);
}

/* Guard: the plugin's coin view is <article class="cpg cpg-view cpg-coin">,
   which shares the .cpg-coin class with the plugin's spinning coin-disc
   component. Keep the disc's shape, shine and 3D turn off the article. */
article.cpg-view.cpg-coin {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transform-style: flat;
  animation: none;
}

article.cpg-view.cpg-coin::before,
article.cpg-view.cpg-coin::after {
  content: none;
}

.stats-strip {
  padding-top: clamp(24px, 3vw, 36px);
  padding-bottom: 0;
}

.stats-strip > .wp-block-group > * + * {
  margin-block-start: 0;
}

.section-countries {
  position: relative;
}

.section-market {
  position: relative;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.55) 30%, rgba(11, 18, 32, 0.55) 70%, rgba(11, 18, 32, 0) 100%);
}

.market-grid {
  gap: clamp(24px, 3vw, 40px);
}

.market-grid > .wp-block-column > * + * {
  margin-block-start: 0;
}

.market-grid .section-head {
  margin-bottom: 20px;
}

.panel-method {
  position: sticky;
  top: calc(var(--cpg-header-h) + 24px);
  padding: 28px;
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(199, 210, 227, 0.08) 0%, rgba(199, 210, 227, 0) 60%),
    var(--cpg-surface);
}

.wp-block-group.panel-method > * + * {
  margin-block-start: 0;
}

.spec-list {
  margin-top: 18px;
  margin-bottom: 22px;
  border-top: 1px solid var(--cpg-line);
}

.wp-block-group.spec-list > * + * {
  margin-block-start: 0;
}

.spec-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--cpg-line);
  gap: 16px;
  align-items: baseline;
  flex-wrap: nowrap;
}

.wp-block-group.spec-row > * + * {
  margin-block-start: 0;
}

.spec-key {
  flex: 0 0 84px;
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpg-accent);
  margin: 0;
  line-height: 1.6;
}

.spec-val {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  color: var(--cpg-text);
  margin: 0;
  line-height: 1.55;
}

.panel-method .wp-block-buttons {
  margin-top: 0;
}

/* Disclaimer strip */
.disclaimer-strip {
  border-top: 1px solid var(--cpg-line);
  border-bottom: 1px solid var(--cpg-line);
  background: linear-gradient(90deg, rgba(90, 180, 255, 0.07) 0%, rgba(90, 180, 255, 0) 55%), rgba(11, 18, 32, 0.6);
  padding-top: 14px;
  padding-bottom: 14px;
}

.disclaimer-inner {
  gap: 8px 24px;
  align-items: center;
}

.wp-block-group.disclaimer-inner > * + * {
  margin-block-start: 0;
}

.disclaimer-text {
  font-family: var(--cpg-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cpg-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.disclaimer-text::before {
  content: "NOTICE";
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cpg-warn);
  border: 1px solid rgba(255, 181, 71, 0.4);
  border-radius: 3px;
  padding: 3px 6px;
  line-height: 1;
}

.disclaimer-link {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.disclaimer-link a,
p.disclaimer-link a {
  text-decoration: none;
  color: var(--cpg-accent);
}

.disclaimer-link a::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--cpg-ease);
}

.disclaimer-link a:hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------------------- */
.footer-main {
  background: var(--cpg-surface);
  border-top: 1px solid var(--cpg-line);
  padding-top: clamp(40px, 5vw, 56px);
  padding-bottom: 24px;
  position: relative;
}

.footer-main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(90, 180, 255, 0.5) 30%, rgba(199, 210, 227, 0.35) 60%, transparent 100%);
}

.footer-top {
  gap: 28px 48px;
  padding-bottom: 32px;
}

.wp-block-group.footer-top > * + * {
  margin-block-start: 0;
}

.footer-brand {
  max-width: 380px;
}

.wp-block-group.footer-brand > * + * {
  margin-block-start: 0;
}

.footer-line {
  color: var(--cpg-muted);
  font-size: 0.9375rem;
  margin: 14px 0 0;
}

.footer-nav {
  gap: 4px 22px;
}

.footer-nav .wp-block-navigation-item__content {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--cpg-ease), border-color var(--cpg-ease);
}

.footer-nav .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--cpg-accent);
}

.footer-bottom {
  border-top: 1px solid var(--cpg-line);
  padding-top: 20px;
  gap: 12px 24px;
  align-items: center;
}

.wp-block-group.footer-bottom > * + * {
  margin-block-start: 0;
}

.copyright {
  font-family: var(--cpg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cpg-dim);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   7. Motion
   --------------------------------------------------------------------------- */
@keyframes at-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Deliberately a box-shadow (main-thread) pulse on a 7px dot: it is the one
   non-compositor animation, and it keeps headless-Chromium screenshots
   ticking the animation clock so the entrance animations reach their end. */
@keyframes at-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(90, 180, 255, 0.18), 0 0 12px rgba(90, 180, 255, 0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(90, 180, 255, 0.08), 0 0 6px rgba(90, 180, 255, 0.3); }
}

@keyframes at-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@keyframes at-spin {
  to { transform: rotate(360deg); }
}

@keyframes at-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes at-orbit-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes at-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes at-gyro-x {
  from { transform: rotateZ(22deg) rotateX(0deg); }
  to   { transform: rotateZ(22deg) rotateX(360deg); }
}

@keyframes at-gyro-y {
  from { transform: rotateZ(-34deg) rotateY(0deg); }
  to   { transform: rotateZ(-34deg) rotateY(360deg); }
}

@keyframes at-gyro-z {
  from { transform: rotateX(64deg) rotateZ(0deg); }
  to   { transform: rotateX(64deg) rotateZ(360deg); }
}

/* Hero entrance: staggered, runs on load without JS */
.stagger > * {
  opacity: 0;
  animation: at-rise 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.stagger > :nth-child(1) { animation-delay: 40ms; }
.stagger > :nth-child(2) { animation-delay: 120ms; }
.stagger > :nth-child(3) { animation-delay: 200ms; }
.stagger > :nth-child(4) { animation-delay: 280ms; }
.stagger > :nth-child(5) { animation-delay: 360ms; }

/* Scroll reveal: only hidden when the JS observer is present */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Editor: keep animated content visible while editing */
.editor-styles-wrapper .stagger > *,
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .js .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


.editor-styles-wrapper .site-header,
.editor-styles-wrapper header.wp-block-template-part,
.editor-styles-wrapper .panel-method {
  position: relative;
  top: auto;
}

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .stagger > *,
  .reveal,
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero::before,
  .hero::after,
  .gyro-ring,
  .logo-mark::after,
  .section-head .eyebrow::before,
  .status-item-live::before,
  .eyebrow-live::before,
  .cpg-stat,
  .cpg-card,
  .panel {
    animation: none !important;
    translate: none;
  }

  .gyro-ring-1 { transform: rotateZ(22deg) rotateX(70deg); }
  .gyro-ring-2 { transform: rotateZ(-34deg) rotateY(60deg); }
  .gyro-ring-3 { transform: rotateX(64deg); }
}

/* ---------------------------------------------------------------------------
   8. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .panel-method {
    position: static;
  }
}

@media (min-width: 901px) {
  .hero-inner {
    padding-right: clamp(300px, 26vw, 360px);
  }
}

@media (max-width: 900px) {
  .gyro {
    display: none;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav .wp-block-navigation-item__content {
    padding: 8px 7px;
    font-size: 11px;
  }

  .wordmark {
    font-size: 14px;
  }
}

@media (max-width: 781px) {
  .market-grid > .wp-block-column + .wp-block-column {
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .brand-eyebrow {
    display: none;
  }

  .hero {
    padding-top: 44px;
    padding-bottom: 36px;
  }

  .hero-title::after {
    margin-top: 16px;
  }

  .wp-block-group.section-head.section-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
  }

  .eyebrow-live {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .section-index {
    white-space: normal;
  }

  .panel,
  .panel-method {
    padding: 20px 18px;
  }

  .spec-row {
    flex-direction: column;
    gap: 4px;
  }

  .spec-key {
    flex-basis: auto;
  }

  .disclaimer-text {
    align-items: flex-start;
  }

  .status-inner {
    gap: 2px 18px;
  }

  .status-item {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .hero::before {
    width: 420px;
    height: 420px;
    top: -220px;
    right: -160px;
  }

  .hero::after {
    display: none;
  }

  .wp-block-group.footer-top.footer-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .wp-block-group.footer-bottom.footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}