/* ============================================================
   Off Grid Labs — "Energy, upside-down."
   Solar-following thermal storage (Sponge Energy).
   --------------------------------------------------------------
   Warm, light, sun-forward instrument aesthetic.
   Canvas   #FBF5EC   cream
   Ink      #241F1B   near-black warm
   Terra    #D9722B   terracotta accent
   Amber    #ED8B3F / #F5B65C   sun / gold
   Muted    #5C5147 / #7A6E62 / #9A8B79
   Type: Sora (display + body) · Space Mono (labels / data)
   ============================================================ */

:root {
  --cream:  #FBF5EC;
  --ink:    #241F1B;
  --terra:  #D9722B;
  --amber:  #ED8B3F;
  --gold:   #F5B65C;
  --muted:  #5C5147;
  --muted2: #7A6E62;
  --muted3: #9A8B79;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #FBF5EC;
  color: #241F1B;
  font-family: 'Sora', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(237, 139, 63, .25); }
a { color: inherit; }

/* ---- keyframes ---- */
@keyframes oglspin  { to { transform: rotate(360deg); } }
@keyframes oglspinr { to { transform: rotate(-360deg); } }
@keyframes oglrise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes oglfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes oglpulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: .45; transform: scale(.9); } }

.ogl-spin-slow { animation: oglspin 110s linear infinite; transform-origin: 50% 50%; }
.ogl-spin-rev  { animation: oglspinr 150s linear infinite; transform-origin: 50% 50%; }
.ogl-float     { animation: oglfloat 2.8s ease-in-out infinite; }
.ogl-pulse     { animation: oglpulse 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ogl-spin-slow, .ogl-spin-rev, .ogl-float, .ogl-pulse { animation: none; }
}

/* Scroll reveals via CSS scroll-driven animation — degrades to fully
   visible where unsupported, so content is never trapped hidden. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: oglrise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 18%;
    }
  }
}

/* ---- fixed header (fades white→ink as you pass the hero) ---- */
#ogl-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background-color: rgba(251, 245, 236, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
#ogl-header.scrolled {
  border-bottom-color: #EEDCC4;
  background-color: rgba(251, 245, 236, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ogl-brand-text {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px;
  letter-spacing: .16em; color: #FFFFFF; transition: color .35s ease;
}
.ogl-brand-icon { color: #FFFFFF; transition: color .35s ease; display: inline-flex; }
#ogl-header.scrolled .ogl-brand-text,
#ogl-header.scrolled .ogl-brand-icon { color: #241F1B; }

.ogl-nav {
  font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  color: rgba(255, 255, 255, .92); opacity: .9;
  transition: color .25s ease, opacity .25s ease;
}
.ogl-nav:hover { opacity: 1 !important; }
#ogl-header.scrolled .ogl-nav { color: #6B5F54; opacity: .92; }
#ogl-header.scrolled .ogl-nav:hover { color: #241F1B; }

/* ---- interaction states ---- */
.ogl-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.ogl-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px -30px rgba(180, 105, 40, .45); border-color: #F0C089 !important; }

.ogl-cta { transition: transform .2s ease, box-shadow .25s ease, background .25s ease; }
.ogl-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(217, 114, 43, .65); }

.ogl-link2 { transition: color .2s ease, opacity .2s ease; }
.ogl-link2:hover { color: #FFFFFF !important; opacity: 1 !important; }

/* configurator option chips */
.ogl-opt2 { transition: border-color .18s ease, background .18s ease; cursor: pointer; }
.ogl-opt2:hover { border-color: #D9722B !important; }

/* hero secondary CTA (ghost over the sunset) */
.ogl-ghost2 { transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.ogl-ghost2:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.9) !important; transform: translateY(-2px); }

/* hero crosshair (mouse / device-tilt driven) */
#ogl-cross { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
#ogl-cross.live { opacity: 1; }
#cx-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.34); will-change: transform; }
#cx-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.34); will-change: transform; }
#cx-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; will-change: transform; }
#cx-dot::before, #cx-dot::after { content: ""; position: absolute; background: rgba(255,255,255,.8); }
#cx-dot::before { left: 50%; top: -7px; width: 1px; height: 6px; }
#cx-dot::after { top: 50%; left: -7px; height: 1px; width: 6px; }
#cx-read { position: absolute; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.82); white-space: nowrap; will-change: transform; text-shadow: 0 1px 6px rgba(120,70,30,.4); }
.ogl-tilt-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 8px 14px; background: rgba(36,31,27,.28); backdrop-filter: blur(4px); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #ogl-cross { display: none; } }

button { font: inherit; }
input { font: inherit; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .ogl-nav-list { display: none !important; }
  .ogl-2col, .ogl-3col, .ogl-tech-split, .ogl-news-grid, .ogl-team-head, .ogl-footer-grid,
  .ogl-config-grid, .ogl-node-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .ogl-stat-band { grid-template-columns: 1fr !important; }
  .ogl-post { grid-template-columns: 1fr !important; }
  .ogl-post > div:first-child { min-height: 150px !important; }
}