/* Olab Reviews: "dark reflective glass" layer (v1, 2026-11-13, Claude).
   Ole's direction: the site as one big sheet of dark glass that reflects light like a phone screen.
   Techniques adapted from the Gemini/Antigravity prototype (tokens + approach only, none of its demo content).
   Load LAST on every page: after olab-home.css (+fixes) on the homepage, after olab-site.css elsewhere.
   Depth comes from reflection: tapered 1px top-edge highlight, 165deg surface gradient, inner bevel,
   one diagonal sheen on big slabs, single-pass hover sweep. Blur only on the sticky header.
   Master copy: outputs/drafts/olabreviews/site/olab-glass.css in the orchestrator repo. */

:root {
  --og-space: #070B18;
  --og-amber: #E3A63B;
  --og-amber-hi: #F2C46B;
  --og-amber-lo: #C98A22;
  --og-sea-glow: #5CC4BB;
  --og-ink: #14213D;

  --og-surface: linear-gradient(165deg,
      rgba(255,255,255,.065) 0%,
      rgba(18,28,54,.78) 28%,
      rgba(9,14,30,.94) 68%,
      rgba(7,11,24,.98) 100%);
  --og-slab: linear-gradient(155deg,
      rgba(255,255,255,.08) 0%,
      rgba(22,34,66,.72) 22%,
      rgba(10,16,34,.95) 60%,
      rgba(7,11,24,.99) 100%);
  --og-border: rgba(238,241,247,.11);
  --og-border-hover: rgba(238,241,247,.24);
  --og-edge-top: linear-gradient(90deg,
      rgba(255,255,255,.02) 0%, rgba(255,255,255,.34) 24%,
      rgba(255,255,255,.52) 50%, rgba(255,255,255,.28) 76%, rgba(255,255,255,.02) 100%);
  --og-sheen: linear-gradient(125deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(238,241,247,.055) 46%,
      rgba(255,255,255,.12) 50%, rgba(238,241,247,.03) 54%, rgba(255,255,255,0) 68%);
  --og-sweep: linear-gradient(115deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,.22) 50%,
      rgba(92,196,187,.08) 54%, rgba(255,255,255,0) 65%);
  --og-shadow: 0 20px 44px -12px rgba(2,4,11,.85), 0 4px 12px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
  --og-shadow-hover: 0 26px 52px -12px rgba(2,4,11,.92), 0 8px 20px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.07);
  --og-amber-gloss:
      linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 46.5%),
      linear-gradient(180deg, var(--og-amber-hi) 0%, var(--og-amber) 48%, var(--og-amber-lo) 100%);
  --og-amber-shadow: 0 8px 22px -4px rgba(227,166,59,.42), 0 2px 6px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(20,33,61,.25);
  --og-amber-shadow-hover: 0 12px 28px -3px rgba(242,196,107,.58), 0 4px 10px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(20,33,61,.3);
  --og-ease: cubic-bezier(.22,1,.36,1);

  /* homepage tokens (olab-home.css) re-pointed to the reflective glass */
  --glass: var(--og-surface);
  --glass-edge: var(--og-border);
  --glass-shadow: var(--og-shadow);
  --glass-blur: none;
}

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Glass panels: homepage cards + template-page cards ---------- */
.cat-card, .prod-card, .post, .store, .card {
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  box-shadow: var(--og-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--og-ease), border-color .28s var(--og-ease), box-shadow .28s var(--og-ease);
}
.store.main {
  background:
    linear-gradient(145deg, rgba(227,166,59,.12), rgba(227,166,59,0) 55%),
    var(--og-slab);
  border-color: rgba(227,166,59,.32);
}

/* tapered 1px specular line on the top bevel */
.cat-card::before, .prod-card::before, .post::before, .store::before, .card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: var(--og-edge-top);
  pointer-events: none;
  z-index: 4;
}

/* single-pass reflection sweep on hover (homepage cards already have the ::after band) */
.cat-card::after, .prod-card::after, .post::after, .store::after {
  background: var(--og-sweep);
  transition: transform .65s var(--og-ease);
}
.cat-card:hover, .prod-card:hover, .post:hover, .store:hover, .card:hover {
  transform: translateY(-4px);
  border-color: var(--og-border-hover);
  box-shadow: var(--og-shadow-hover);
}

/* paper display tiles: products are the brightest thing on the card */
.prod-img {
  background: radial-gradient(circle at 50% 32%, #FFFFFF 0%, #F7F5F0 74%, #EAE6DC 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(3,6,15,.5);
  border: 1px solid rgba(20,33,61,.08);
}

/* ---------- Big slabs: one static diagonal sheen ---------- */
.why-img, .hero-photo, .promo .wrap {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.promo .wrap {
  position: relative;
  overflow: hidden;
  background: var(--og-slab) !important;
  border: 1px solid var(--og-border) !important;
  box-shadow: var(--og-shadow) !important;
}
.promo .wrap::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--og-sheen);
  pointer-events: none;
}
.promo .wrap > * { position: relative; z-index: 1; }

/* ---------- Glossy amber lens buttons ---------- */
.btn-gold, .add-btn, .btn-primary, .cf1-btn {
  background: var(--og-amber-gloss) !important;
  color: var(--og-ink) !important;
  border: 1px solid var(--og-amber-hi) !important;
  box-shadow: var(--og-amber-shadow) !important;
  transition: transform .22s var(--og-ease), box-shadow .22s var(--og-ease), filter .22s var(--og-ease);
}
.btn-gold:hover, .add-btn:hover, .btn-primary:hover, .cf1-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--og-amber-shadow-hover) !important;
  filter: brightness(1.04);
}

/* clear-glass secondary buttons */
.btn-line, .btn-navy, .btn-outline {
  background: linear-gradient(165deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(238,241,247,.22) !important;
  color: #EEF1F7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.35) !important;
}
.btn-line:hover, .btn-navy:hover, .btn-outline:hover {
  border-color: rgba(238,241,247,.42) !important;
  background: linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
  transform: translateY(-2px);
}

/* ---------- Header bars: the only blur, plus a top-edge highlight ---------- */
header.site, .rp-navbar {
  background: linear-gradient(180deg, rgba(16,25,48,.82) 0%, rgba(7,11,24,.86) 100%);
  border-bottom: 1px solid var(--og-border);
}
header.site::after, .rp-navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--og-edge-top);
  opacity: .5;
  pointer-events: none;
}
.rp-navbar { position: sticky; }

/* ---------- Footer as a dark glass base ---------- */
footer {
  background: var(--og-surface) !important;
  border-top: 1px solid var(--og-border) !important;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: var(--og-edge-top);
  pointer-events: none;
}

/* WebKit: keep the sweep clipped to the rounded corners (a mask would also clip the outer shadow) */
.cat-card, .prod-card, .post, .store, .card { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
  .cat-card::after, .prod-card::after, .post::after, .store::after { display: none !important; }
  .cat-card:hover, .prod-card:hover, .post:hover, .store:hover, .card:hover,
  .btn-gold:hover, .add-btn:hover, .btn-primary:hover, .cf1-btn:hover,
  .btn-line:hover, .btn-navy:hover, .btn-outline:hover { transform: none !important; }
}