<?php
/**
 * Front page template.
 *
 * @package Lightmoon_Nexus
 */
get_header();
$theme_uri = get_template_directory_uri();
?>

<div class="scroll-spacer" aria-hidden="true"></div>

<section class="zcard card-hero" data-card="1">
  <div class="hero-grid" aria-hidden="true"></div>
  <div class="glass-shape glass-a" aria-hidden="true"></div>
  <div class="glass-shape glass-b" aria-hidden="true"></div>
  <div class="glass-shape glass-c" aria-hidden="true"></div>
  <div class="hero-stage">
    <p class="hero-eyebrow">Modular Compute Systems</p>
    <h1 class="hero-title">THE NEXUS</h1>
    <p class="hero-sub">One chassis. Infinite configurations. Precision-engineered infrastructure for teams that build at the edge of what hardware allows.</p>
  </div>
  <div class="hero-scroll-hint">Scroll to descend</div>
</section>

<section class="zcard card-macro" data-card="2">
  <img class="macro-img" src="<?php echo esc_url( $theme_uri . '/images/nexus-macro.jpg' ); ?>" alt="Macro view of the Nexus core module">
  <div class="macro-shade" aria-hidden="true"></div>
  <div class="crosshair-v" aria-hidden="true"></div>
  <div class="crosshair-h" aria-hidden="true"></div>
  <div class="node-dot" aria-hidden="true"></div>
  <div class="node-box">
    <p class="node-box-tag">NODE / NX-07 TELEMETRY</p>
    <div class="node-stat"><span>EFFICIENCY</span><span>98.4%</span></div>
    <div class="node-stat"><span>THERMAL DELTA</span><span>-12.6 C</span></div>
    <div class="node-stat"><span>SYNC LATENCY</span><span>0.8 ms</span></div>
  </div>
  <div class="macro-caption">
    <span class="mono">02 / Engineered in the open</span>
    <h2>Every micron is accounted for.</h2>
  </div>
</section>

<section class="zcard card-fold" data-card="3">
  <div class="fold-head">
    <h2>Four systems. One spine.</h2>
    <span class="mono">03 / Hover or tap a column</span>
  </div>
  <div class="accordion" id="accordion">
    <button class="slice" type="button" aria-expanded="false">
      <img class="slice-img" src="<?php echo esc_url( $theme_uri . '/images/nexus-core.jpg' ); ?>" alt="Core processing array">
      <div class="slice-shade" aria-hidden="true"></div>
      <div class="slice-idle"><span class="slice-num">A.01</span><span class="slice-idle-title">Core Array</span><span class="slice-num" aria-hidden="true">+</span></div>
      <div class="slice-reveal"><span class="mono">A.01 / Compute</span><h3>Core Array</h3><p>Sixty-four hot-swappable compute blades aligned on a single coherent fabric, tuned for sustained full-load operation.</p></div>
    </button>
    <button class="slice" type="button" aria-expanded="false">
      <img class="slice-img" src="<?php echo esc_url( $theme_uri . '/images/nexus-flux.jpg' ); ?>" alt="Liquid cooling fluidics loop">
      <div class="slice-shade" aria-hidden="true"></div>
      <div class="slice-idle"><span class="slice-num">A.02</span><span class="slice-idle-title">Fluidics</span><span class="slice-num" aria-hidden="true">+</span></div>
      <div class="slice-reveal"><span class="mono">A.02 / Thermal</span><h3>Fluidics Loop</h3><p>A sealed dielectric loop moves heat away from silicon at the source, holding the entire rack within a two degree band.</p></div>
    </button>
    <button class="slice" type="button" aria-expanded="false">
      <img class="slice-img" src="<?php echo esc_url( $theme_uri . '/images/nexus-grid.jpg' ); ?>" alt="Power distribution grid">
      <div class="slice-shade" aria-hidden="true"></div>
      <div class="slice-idle"><span class="slice-num">A.03</span><span class="slice-idle-title">Power Grid</span><span class="slice-num" aria-hidden="true">+</span></div>
      <div class="slice-reveal"><span class="mono">A.03 / Energy</span><h3>Power Grid</h3><p>Redundant busbars and solid-state switching deliver clean power with zero transfer time when a feed drops.</p></div>
    </button>
    <button class="slice" type="button" aria-expanded="false">
      <img class="slice-img" src="<?php echo esc_url( $theme_uri . '/images/nexus-sync.jpg' ); ?>" alt="Optical interconnect sync layer">
      <div class="slice-shade" aria-hidden="true"></div>
      <div class="slice-idle"><span class="slice-num">A.04</span><span class="slice-idle-title">Sync Layer</span><span class="slice-num" aria-hidden="true">+</span></div>
      <div class="slice-reveal"><span class="mono">A.04 / Network</span><h3>Sync Layer</h3><p>Optical interconnects keep every node phase-locked, so distributed workloads behave like a single machine.</p></div>
    </button>
  </div>
</section>

<section class="zcard card-matrix" data-card="4">
  <div class="matrix-left">
    <p class="mono-tag">04 / Inside the platform</p>
    <h2>Built as a matrix, not a stack.</h2>
    <div class="matrix-tabs">
      <button class="matrix-tab active" type="button" data-goto="core" aria-selected="true"><span class="tab-line"><span class="tab-num">01.</span><span class="tab-name">CORE</span></span><p>The structural heart of the Nexus. A milled aluminum frame that locates every module to within five microns.</p></button>
      <button class="matrix-tab" type="button" data-goto="fluidics" aria-selected="false"><span class="tab-line"><span class="tab-num">02.</span><span class="tab-name">FLUIDICS</span></span><p>Quick-disconnect manifolds route coolant through the chassis without a single exposed line.</p></button>
      <button class="matrix-tab" type="button" data-goto="sync" aria-selected="false"><span class="tab-line"><span class="tab-num">03.</span><span class="tab-name">SYNC</span></span><p>A dedicated timing plane distributes a single clock to all nodes, end to end, rack to rack.</p></button>
    </div>
  </div>
  <div class="matrix-right">
    <img class="matrix-img active" data-panel="core" src="<?php echo esc_url( $theme_uri . '/images/nexus-tab-core.jpg' ); ?>" alt="The Nexus core frame">
    <img class="matrix-img" data-panel="fluidics" src="<?php echo esc_url( $theme_uri . '/images/nexus-tab-fluidics.jpg' ); ?>" alt="The Nexus fluidics manifold">
    <img class="matrix-img" data-panel="sync" src="<?php echo esc_url( $theme_uri . '/images/nexus-tab-sync.jpg' ); ?>" alt="The Nexus sync timing plane">
    <div class="matrix-img-shade" aria-hidden="true"></div>
    <div class="matrix-caption" id="matrixCaption">FIG. 01 / CORE FRAME</div>
  </div>
</section>

<footer class="hud">
  <a class="hud-brand" href="https://www.templatemo.com/tm-629-nexus-system" target="_blank" rel="nofollow noopener"><span class="dot" aria-hidden="true"></span>Nexus System</a>
  <span class="hud-credit">FREE CSS TEMPLATES / <a href="https://templatemo.com" target="_blank" rel="nofollow noopener">TEMPLATEMO</a></span>
  <div class="hud-progress"><div class="hud-track"><div class="hud-fill" id="hudFill"></div></div><span class="hud-pct" id="hudPct">000%</span></div>
  <div class="hud-nav">
    <button class="hud-arrow" id="navUp" type="button" aria-label="Previous section"><svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 9L7 4L12 9" stroke="currentColor" stroke-width="1.5"/></svg></button>
    <button class="hud-arrow" id="navDown" type="button" aria-label="Next section"><svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 5L7 10L12 5" stroke="currentColor" stroke-width="1.5"/></svg></button>
  </div>
</footer>

<?php get_footer(); ?>