global.css

/* global.css — THEMACHINE Corp shared styles */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

    :root {
      --bg: #080810;
      --surface: #0e0e1a;
      --surface2: #13132a;
      --text: #e0e0ec;
      --text-dim: #686880;
      --gold: #d4af37;
      --cyan: #00e5ff;
      --green: #22c55e;
      --orange: #f97316;
      /* ── SILVER METALLIC ── */
      --Ag: #b8b8c8;
      --Ag-light: #dcdce8;
      --Ag-dark: #787888;
      --Ag-shine: linear-gradient(145deg, #e8e8f0 0%, #c0c0cc 25%, #909098 55%, #b0b0bc 75%, #d8d8e2 100%);
      --Ag-shine-h: linear-gradient(to right, #e0e0ea, #c8c8d4, #a0a0ac, #c8c8d4, #e0e0ea);
      --Ag-border: linear-gradient(145deg, #d0d0dc, #888898, #606070, #888898, #d0d0dc);
      --Ag-inset: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.4);
      --Ag-shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08) inset;
      --Ag-panel-bg: linear-gradient(160deg, #1a1a2e 0%, #10101e 100%);
      --Ag-panel-border: linear-gradient(145deg, #c0c0cc 0%, #888898 40%, #606068 70%, #888898 100%);
      --Ag-panel-inset: inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05);
      --Ag-btn-bg: linear-gradient(145deg, #d0d0dc 0%, #a0a0ac 40%, #888898 60%, #b0b0bc 100%);
      --Ag-btn-inset: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.25);
      --Ag-text: #c0c0cc;
      --Ag-text-dark: #404050;
      --border: rgba(200,200,212,.18);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { background: var(--bg); color: var(--text); font-family: 'Press Start 2P', cursive; font-size: 10px; scroll-behavior: smooth; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ── METALLIC BODY ── */
    body {
      background: radial-gradient(ellipse at 50% 0%, rgba(50,50,80,.4) 0%, transparent 60%), var(--bg);
    }

    /* ── HERO AMBIENT GLOW ── */
    .hero {
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -80px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 300px;
      background: radial-gradient(ellipse, rgba(0,229,255,.08) 0%, transparent 70%);
      animation: ambientPulse 6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes ambientPulse {
      0%,100% { opacity: .6; transform: translateX(-50%) scale(1); }
      50%     { opacity: 1;   transform: translateX(-50%) scale(1.15); }
    }

    /* ── SCANLINE OVERLAY ── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.04) 2px,
        rgba(0,0,0,.04) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* ── ENTRANCE ANIMATIONS ── */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes glowPulse {
      0%,100% { text-shadow: 0 0 8px rgba(0,229,255,.3), 0 0 20px rgba(0,229,255,.1); }
      50%     { text-shadow: 0 0 16px rgba(0,229,255,.6), 0 0 40px rgba(0,229,255,.2); }
    }
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .fade-in { animation: fadeInUp .7s ease-out both; }
    .fade-in:nth-child(2) { animation-delay: .1s; }
    .fade-in:nth-child(3) { animation-delay: .2s; }

    /* ── CARD HOVER ── */
    .product-card, .gumroad-card, .step-card {
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .product-card:hover, .gumroad-card:hover, .step-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.15);
    }

    /* ── LIVE PULSE DOT ── */
    .pulse-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 6px var(--green), 0 0 12px rgba(34,197,94,.4);
      animation: pulse-breathe 2s ease-in-out infinite;
      vertical-align: middle;
      margin-left: 8px;
    }
    @keyframes pulse-breathe {
      0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green), 0 0 12px rgba(34,197,94,.4); }
      50% { opacity: .5; box-shadow: 0 0 2px var(--green), 0 0 4px rgba(34,197,94,.2); }
    }

    /* ── TICKER ── */
    .ticker {
      background: var(--Ag-panel-bg);
      border-bottom: 1px solid var(--Ag-dark);
      padding: 8px 0;
      overflow: hidden;
      white-space: nowrap;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.4);
    }
    .ticker-track {
      display: inline-block;
      animation: ticker-scroll 30s linear infinite;
    }
    .ticker-item {
      display: inline-block;
      font-size: 8px;
      color: var(--text-dim);
      padding: 0 24px;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }
    .ticker-item .val { color: var(--Ag-light); margin-right: 6px; font-weight: 700; }
    .ticker-item .green { color: var(--green); }
    .ticker-item .gold { color: var(--gold); }
    @keyframes ticker-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--Ag-shine);
      border-bottom: 2px solid;
      border-image: var(--Ag-border) 1;
      box-shadow: 0 2px 12px rgba(0,0,0,.5), var(--Ag-inset);
      padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      height: 52px;
    }
    .nav-brand { display: flex; align-items: center; gap: 10px; }
    .nav-logo {
      font-family: 'Press Start 2P', cursive;
      font-size: 10px;
      color: var(--Ag-text-dark);
      letter-spacing: 1px;
      text-shadow: 0 1px 0 rgba(255,255,255,.8);
    }
    .nav-logo-sub {
      font-size: 8px;
      color: var(--Ag-dark);
      border-left: 1px solid var(--Ag-dark);
      padding-left: 10px;
      margin-left: 4px;
      text-shadow: 0 1px 0 rgba(255,255,255,.4);
    }
    .nav-links { display: flex; gap: 2px; align-items: center; }
    .nav-links a {
      font-size: 8px;
      padding: 5px 10px;
      border-radius: 4px;
      color: var(--Ag-text-dark);
      border: 1px solid transparent;
      background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,.08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      transition: all .15s;
      white-space: nowrap;
    }
    .nav-links a:hover {
      color: var(--Ag-text-dark);
      background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(0,0,0,.12));
      border-color: rgba(255,255,255,.3);
    }
    .nav-links a.gold { color: var(--Ag-text-dark); }
    .nav-cta {
      font-size: 8px;
      padding: 6px 12px;
      background: var(--Ag-shine-h);
      color: var(--Ag-text-dark) !important;
      border-radius: 4px;
      font-weight: 700;
      border: none !important;
      box-shadow: var(--Ag-btn-inset), 0 2px 6px rgba(0,0,0,.4);
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
    }
    .nav-cta:hover { opacity: .9; }

    

/* ── RESPONSIVE (global only) ── */
@media (max-width: 600px) {
      .ticker { padding: 6px 0; }
      .ticker-item { font-size: 7px; padding: 0 16px; }

      nav { padding: 0 12px; height: 48px; }
      .nav-logo { font-size: 8px; }
      .nav-logo-sub { display: none; }
      .nav-links { gap: 1px; overflow-x: auto; max-width: 60vw; }
      .nav-links a { font-size: 7px; padding: 5px 7px; }
      .nav-cta { padding: 5px 10px; font-size: 7px; }

      .hero { padding: 44px 16px 36px; }
      .hero-brand { font-size: clamp(20px, 10vw, 36px); letter-spacing: 2px; }