/* ============================================================
   STORM THEME — drop-in reskin for interior catalog pages.
   Pairs with storm-theme.js (fixed WebGL stormscape behind the
   page). Glass goes on the chrome (nav, tabs, hero, drawer);
   product cards stay near-opaque for readability + perf.
   ============================================================ */

html, body { background: transparent !important; }
#storm-bg, #storm-boltfx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
#storm-bg { z-index: -2; background: #04060c; }
#storm-boltfx { z-index: -1; mix-blend-mode: screen; }
.storm-static {
  position: fixed; inset: 0; z-index: -2; display: none;
  background:
    linear-gradient(180deg, rgba(4,6,12,0.6) 0%, rgba(4,6,12,0.35) 40%, rgba(4,6,12,0.85) 100%),
    url('../assets/clouds-bg.jpg') center 30%/cover no-repeat,
    #04060c;
}
body.storm-off #storm-bg, body.storm-off #storm-boltfx { display: none; }
body.storm-off .storm-static { display: block; }

/* ---------- NAV: liquid glass ---------- */
.nav {
  background: linear-gradient(180deg, rgba(8,12,20,0.55), rgba(8,12,20,0.35)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(159,196,238,0.12) !important;
  /* iOS: clear the notch/status-bar so the header isn't tucked under it (viewport-fit=cover) */
  padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)) !important;
}
.nav::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 30%, rgba(159,196,238,0.35) 50%, rgba(255,255,255,0.18) 70%, transparent);
  pointer-events:none;
}
.nav .brand {
  position: relative; line-height: 1;
  font-style: italic; font-weight: 800;
  display: inline-flex !important; align-items: center;
  /* Match the homepage wordmark exactly — interior pages were set 1.35rem/0.06em,
     which rendered the lockup ~6% wider than the home nav. */
  font-size: 1.3rem !important; letter-spacing: 0.05em !important;
}
/* Lightning bolt mark (ice-blue) crossing BEHIND the wordmark — same vector bolt
   as the primary logo, recolored via CSS mask so no per-page markup change is
   needed. z-index:-1 keeps it behind the text without wrapping the text node. */
.nav .brand::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  height: 3em; aspect-ratio: 836/1500; z-index: -1; pointer-events: none;
  transform: translate(-49.5%, -48.9%);
  -webkit-mask: url('../media/bolt-vector.png') center/contain no-repeat;
          mask: url('../media/bolt-vector.png') center/contain no-repeat;
  background: #9fc4ee;
  filter: drop-shadow(0 0 5px rgba(159,196,238,0.55)) drop-shadow(0 0 12px rgba(120,170,255,0.40));
}
.cart-trigger {
  background: rgba(14,20,28,0.55) !important;
  border-color: rgba(159,196,238,0.15) !important;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cart-trigger .count { border-radius: 2px; }
.cart-trigger .count.zero { background: rgba(31,42,56,0.9); }

/* ---------- HERO STRIP: open to the storm ---------- */
.rhero { border-bottom: 1px solid rgba(159,196,238,0.12) !important; }
.rhero .bg { display: none !important; }
.rhero::after {
  background: radial-gradient(120% 130% at 50% 110%, rgba(4,6,12,0.55) 0%, rgba(4,6,12,0.15) 55%, rgba(4,6,12,0) 100%) !important;
}
.rhero h1 { font-style: italic; text-shadow: 0 2px 28px rgba(4,6,12,0.95); }
.rhero .lede { text-shadow: 0 1px 16px rgba(4,6,12,0.95); }
.deptrail a {
  background: rgba(10,16,26,0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(159,196,238,0.22);
}
.deptrail a.current {
  background: linear-gradient(180deg,#ffffff,#cdddf0 45%,#9fb4ce 55%,#eaf2fb);
}

/* ---------- TABS: glass bar ---------- */
.tabs {
  background: linear-gradient(180deg, rgba(8,12,20,0.6), rgba(8,12,20,0.42)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid rgba(159,196,238,0.12) !important;
}

/* ---------- CATALOG: cards as solid glass slabs (no per-card blur — perf) ---------- */
.subcat-head { border-bottom-color: rgba(159,196,238,0.14) !important; }
.subcat-head h2 { font-style: italic; }
.card {
  background: linear-gradient(160deg, rgba(15,22,34,0.92), rgba(9,14,23,0.88)) !important;
  border: 1px solid rgba(159,196,238,0.13) !important;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.card::before { /* specular top edge */
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 35%, rgba(159,196,238,0.3) 50%, rgba(255,255,255,0.18) 65%, transparent);
}
.card:hover {
  border-color: rgba(159,196,238,0.5) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 26px rgba(159,196,238,0.10);
}
.card .pricing { border-top-color: rgba(159,196,238,0.12) !important; }

.note-strip {
  background: linear-gradient(160deg, rgba(13,20,32,0.55), rgba(8,13,22,0.4)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(159,196,238,0.14) !important;
  border-left: 3px solid var(--yellow, #9fc4ee) !important;
  border-radius: 8px;
}

/* ---------- DRAWER: liquid glass over the storm ---------- */
.drawer {
  background: linear-gradient(160deg, rgba(9,13,21,0.86), rgba(6,9,15,0.82)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  border-left: 1px solid rgba(159,196,238,0.16) !important;
}
.drawer-backdrop { background: rgba(2,4,8,0.45) !important; }

/* ---------- FOOTER + misc panels ---------- */
footer {
  background: rgba(4,6,10,0.82) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(159,196,238,0.12) !important;
}
footer .brand, .foot-in .brand { font-style: italic; font-weight: 700; }

/* Generic solid-panel sections that would otherwise block the storm */
section[style*="background"], .band { background: transparent !important; }

/* ---------- Production page: crew cards as glass over the storm ---------- */
.person {
  background: linear-gradient(160deg, rgba(13,20,32,0.55), rgba(8,13,22,0.4)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(159,196,238,0.14) !important;
  border-radius: 12px;
}

/* ---------- Contact page: float info/form panels on the storm ---------- */
.cgrid > .sec, .reach, .studio, .loc { background: transparent !important; }
/* but keep the location card's lower half a solid dark slab (consistent with the site's cards) */
.loc .lbody { background: linear-gradient(160deg, rgba(15,22,34,0.94), rgba(9,14,23,0.92)) !important; }
.field input, .field select, .field textarea {
  background: rgba(8,13,22,0.6) !important;
  border-color: rgba(159,196,238,0.2) !important;
}

/* ---------- Mobile fixes ---------- */
/* 1. html stays dark so overscroll/rubber-band doesn't flash white behind the fixed storm bg */
html { background: #04060c !important; }
/* 3. hero header/lede need a left+right gutter (the page's .rhero .inner zeroes horizontal padding) */
.rhero .inner { padding-left: clamp(1.2rem,4vw,3rem) !important; padding-right: clamp(1.2rem,4vw,3rem) !important; }
@media (max-width: 960px) {
  /* Keep the nav glassy on mobile (matches the homepage). Only the drawer goes solid —
     a backdrop-filter nested inside the nav's backdrop-filter ghosts on mobile Safari,
     so the slide-down menu uses a solid fill while the bar itself stays translucent. */
  .nav .links { background: #06080b !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------- Mobile nav bar: keep brand + Gear List + burger from crowding ---------- */
@media (max-width: 480px) {
  .nav { padding-left: 1rem !important; padding-right: 1rem !important; }
  .nav .brand { font-size: 1.18rem !important; }
  .cart-trigger { padding: 0.45rem 0.7rem !important; font-size: 0.74rem !important; letter-spacing: 0.05em !important; }
  .cart-trigger .count { min-width: 1.15rem !important; padding: 0.1rem 0.38rem !important; }
  .nav-cluster { gap: 0.45rem !important; }
}
@media (max-width: 360px) {
  .nav .brand { font-size: 1.02rem !important; }
  .cart-trigger { font-size: 0.68rem !important; padding: 0.42rem 0.6rem !important; }
}