/*
Theme Name:        PinnacleMesh
Theme URI:         https://pinnaclemesh.com
Author:            PinnacleMesh
Author URI:        https://pinnaclemesh.com
Description:       Canonical dark landing theme for PinnacleMesh — resilient mesh communications infrastructure. Full-viewport, dependency-free, CSS-animated topology background, WooCommerce-compatible, accessible.
Version:           1.1.0
Requires at least: 6.0
Requires PHP:      7.4
Tested up to:      6.8
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       pinnaclemesh
Tags:              one-column, custom-logo, accessibility-ready, dark
*/

/* ============================================================
   PINNACLEMESH DESIGN TOKENS  v1.1
   These custom properties are the seed of the design system.
   ============================================================ */
:root {
  /* Ground */
  --pm-ground:         #0C0F14;
  --pm-ground-mid:     #111520;
  --pm-ground-lift:    #161C2A;

  /* Type */
  --pm-ink:            #E8EAED;
  --pm-ink-soft:       #9BA3B2;
  --pm-ink-quiet:      #636B7A;

  /* Accent — sampled from MESH wordmark */
  --pm-accent:         #0681E4;
  --pm-accent-glow:    rgba(6, 129, 228, 0.18);
  --pm-accent-deep:    #0565B8;

  /* Structure */
  --pm-hairline:       rgba(232, 234, 237, 0.08);
  --pm-mesh-line:      rgba(6, 129, 228, 0.07);
  --pm-mesh-node:      rgba(6, 129, 228, 0.18);

  /* Rhythm */
  --pm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --pm-gap: clamp(1rem, 2.4vh, 1.8rem);
  --pm-track-stamp: 0.28em;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--pm-ground);
  color: var(--pm-ink);
  font-family: var(--pm-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--pm-accent); }

:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pm-ground-lift);
  color: var(--pm-ink);
  padding: 0.6rem 1.1rem;
  z-index: 9999;
  text-decoration: none;
  font-size: 0.85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ============================================================
   FULL-VIEWPORT FRAME
   ============================================================ */
.pm-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ============================================================
   LAYER 1: TOPOLOGY BACKGROUND
   A sparse network of nodes and edges drawn entirely in SVG/CSS.
   Sits behind everything. aria-hidden. No JavaScript.
   ============================================================ */
.pm-topology {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.pm-topology svg {
  width: 100%;
  height: 100%;
}

/* Edges */
.pm-topo-edge {
  stroke: var(--pm-mesh-line);
  stroke-width: 0.8;
  fill: none;
}

/* Nodes — small dots at connection points */
.pm-topo-node {
  fill: var(--pm-mesh-node);
}

/* Three nodes pulse independently — opacity + scale (r attribute not CSS-animatable
   reliably across all required browsers; transform is universally supported). */
.pm-topo-node--a {
  transform-origin: 240px 80px;
  transform-box: fill-box;
  animation: pm-node-pulse 9s ease-in-out infinite;
}
.pm-topo-node--b {
  transform-origin: 660px 140px;
  transform-box: fill-box;
  animation: pm-node-pulse 12s ease-in-out 3s infinite;
}
.pm-topo-node--c {
  transform-origin: 1200px 200px;
  transform-box: fill-box;
  animation: pm-node-pulse 8s ease-in-out 6s infinite;
}

@keyframes pm-node-pulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%       { opacity: 0.60; transform: scale(2.2); }
}

/* A single signal travels the longest path — one lap every 18s */
.pm-topo-signal {
  stroke: var(--pm-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0.6;
  stroke-dasharray: 60 3000;
  stroke-dashoffset: 3060;
  animation: pm-signal 18s linear 2s infinite;
}
@keyframes pm-signal { to { stroke-dashoffset: 0; } }

/* Secondary signal on a different path, slower, dimmer */
.pm-topo-signal--2 {
  stroke: var(--pm-accent);
  stroke-width: 1;
  opacity: 0.3;
  stroke-dasharray: 40 2400;
  stroke-dashoffset: 2440;
  animation: pm-signal2 22s linear 8s infinite;
}
@keyframes pm-signal2 { to { stroke-dashoffset: 0; } }

/* Radial gradient vignette — draws the eye to center */
.pm-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 80% at 50% 45%,
    transparent 30%,
    rgba(12, 15, 20, 0.72) 100%
  );
}

/* ============================================================
   LAYER 2: MAIN CONTENT
   ============================================================ */
.pm-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vh, 3rem) 1.5rem;
}

/* ============================================================
   HERO
   ============================================================ */
.pm-hero {
  text-align: center;
  max-width: 48rem;
  width: 100%;
}

/* Logo: the cleaner flat asset sits directly on the dark field */
.pm-logo {
  width: clamp(200px, 30vh, 280px);
  max-width: 65vw;
  margin: 0 auto;
}

/* Subtle ambient glow beneath the logo — echoes the accent blue */
.pm-logo-wrap {
  position: relative;
  display: inline-block;
}
.pm-logo-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  width: 60%;
  height: 40%;
  background: radial-gradient(ellipse, var(--pm-accent-glow) 0%, transparent 70%);
  pointer-events: none;
  animation: pm-glow 7s ease-in-out infinite;
}
@keyframes pm-glow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

/* Divider under logo — echoes the dashes from the wordmark */
.pm-rule {
  width: clamp(2.5rem, 8vw, 4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pm-accent), transparent);
  margin: var(--pm-gap) auto 0;
  opacity: 0.6;
}

/* Headline */
.pm-headline {
  margin-top: calc(var(--pm-gap) * 0.85);
  font-size: clamp(1.75rem, 2.6vw + 1.2vh, 3.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pm-ink);
}

/* Support copy */
.pm-support {
  margin: calc(var(--pm-gap) * 0.65) auto 0;
  max-width: 32rem;
  font-size: clamp(0.93rem, 0.9vw + 0.5vh, 1.08rem);
  color: var(--pm-ink-soft);
  line-height: 1.65;
}

/* COMING SOON stamp */
.pm-status {
  margin-top: var(--pm-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--pm-track-stamp);
  text-indent: var(--pm-track-stamp);
  color: var(--pm-ink-quiet);
  text-transform: uppercase;
}
.pm-status::before,
.pm-status::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--pm-hairline);
  flex-shrink: 0;
}

/* Contact button */
.pm-button {
  display: inline-block;
  margin-top: var(--pm-gap);
  padding: 0.9rem 2.2rem;
  background: transparent;
  color: var(--pm-accent);
  border: 1px solid rgba(6, 129, 228, 0.45);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pm-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pm-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pm-button:hover {
  color: #fff;
  border-color: var(--pm-accent);
  box-shadow: 0 0 22px var(--pm-accent-glow);
}
.pm-button:hover::before { opacity: 1; }
.pm-button span { position: relative; z-index: 1; }
.pm-button:active { transform: translateY(1px); }

/* ============================================================
   ENTRANCE ANIMATION
   Staged rise-and-fade. One performance, then stillness.
   ============================================================ */
.pm-rise {
  opacity: 0;
  transform: translateY(16px);
  animation: pm-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.pm-d1 { animation-delay: 0.1s; }
.pm-d2 { animation-delay: 0.25s; }
.pm-d3 { animation-delay: 0.42s; }
.pm-d4 { animation-delay: 0.58s; }
.pm-d5 { animation-delay: 0.72s; }
.pm-d6 { animation-delay: 0.88s; }

@keyframes pm-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Full reduced-motion kill-switch */
@media (prefers-reduced-motion: reduce) {
  .pm-rise,
  .pm-logo-wrap::after,
  .pm-topo-node--a,
  .pm-topo-node--b,
  .pm-topo-node--c,
  .pm-topo-signal,
  .pm-topo-signal--2,
  .pm-horizon .h-peak,
  .pm-horizon .h-signal {
    animation: none !important;
  }
  .pm-rise { opacity: 1 !important; transform: none !important; }
  .pm-button { transition: none; }
  .pm-topo-node--a,
  .pm-topo-node--b,
  .pm-topo-node--c { opacity: 0.18; transform: none; }
}

/* ============================================================
   HORIZON SIGNATURE
   Terrain/signal profile — same concept as v1, refined.
   ============================================================ */
.pm-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(3.2rem, 8vh, 5rem);
  z-index: 0;
  pointer-events: none;
}
.pm-horizon svg { display: block; width: 100%; height: auto; }

.pm-horizon .h-line { stroke: rgba(232,234,237,0.08); }
.pm-horizon .h-node { fill: rgba(6,129,228,0.20); }
.pm-horizon .h-peak {
  fill: var(--pm-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-peak-breathe 8s ease-in-out infinite;
}
.pm-horizon .h-signal {
  stroke: var(--pm-accent);
  opacity: 0.5;
  stroke-dasharray: 65 2800;
  stroke-dashoffset: 2865;
  animation: pm-h-signal 13s linear 3s infinite;
}
@keyframes pm-h-signal    { to { stroke-dashoffset: 0; } }
@keyframes pm-peak-breathe {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.6); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.pm-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--pm-hairline);
  padding: 1.2rem 1.5rem calc(1.2rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pm-motto {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--pm-track-stamp);
  text-indent: var(--pm-track-stamp);
  text-transform: uppercase;
  color: var(--pm-ink-quiet);
}

.pm-copyright {
  font-size: 0.72rem;
  color: var(--pm-ink-quiet);
}

/* ============================================================
   FALLBACK: non-front-page content
   ============================================================ */
.pm-content {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 1.5rem;
  color: var(--pm-ink);
}
.pm-content h1, .pm-content h2 { line-height: 1.2; letter-spacing: -0.01em; }
.pm-content a:hover { color: var(--pm-accent-deep); }

/* ============================================================
   RESPONSIVE — COMPACT / MOBILE
   ============================================================ */
@media (max-width: 640px) {
  .pm-support br { display: none; }
  .pm-footer { justify-content: center; text-align: center; }
  .pm-status::before, .pm-status::after { width: 1.6rem; }
}

@media (max-height: 600px) {
  :root { --pm-gap: clamp(0.6rem, 1.5vh, 1rem); }
  .pm-logo { width: clamp(130px, 22vh, 200px); }
  .pm-horizon { display: none; }
  .pm-rule { margin-top: calc(var(--pm-gap) * 0.6); }
}