/* spectra.css — Spectra · Blue Open Air brand tokens + base */
@font-face {
  font-family: "SF Pro Display";
  src: url("https://vhxlpseoxfcmnqrsvehp.supabase.co/storage/v1/object/public/spectra-site/assets/fonts/SF-Pro-Display-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("https://vhxlpseoxfcmnqrsvehp.supabase.co/storage/v1/object/public/spectra-site/assets/fonts/SF-Pro-Display-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Light theme (Claude Dancer) — default ── */
  --bg: #F0EEE9;
  --bg-2: #E7E3DB;
  --ink: #1B1B1B;
  --ink-2: rgba(27, 27, 27, 0.62);
  --ink-3: rgba(27, 27, 27, 0.42);
  --ink-4: rgba(27, 27, 27, 0.14);
  --hairline: rgba(27, 27, 27, 0.12);
  --accent: var(--ink);
  --accent-soft: rgba(27, 27, 27, 0.12);
  --accent-deep: var(--ink);
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-2: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(27, 27, 27, 0.1);
  --glass-blur: 22px;
  --glass-shadow: rgba(27, 27, 27, 0.14);
  --chip-bg: rgba(27, 27, 27, 0.05);
  --chip-border: rgba(27, 27, 27, 0.18);
  --overlay-bg: rgba(240, 238, 233, 0.72);
  --band-mid: var(--bg-2);
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

/* ── Dark theme (original) — opt-in via Tweaks ── */
.theme-dark {
  --bg: #04060a;
  --bg-2: #070a12;
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(255, 255, 255, 0.7);
  --ink-3: rgba(255, 255, 255, 0.45);
  --ink-4: rgba(255, 255, 255, 0.18);
  --hairline: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-2: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.18);
  --overlay-bg: rgba(4, 6, 10, 0.55);
  --band-mid: #06121c;
  --accent-soft: rgba(255, 255, 255, 0.16);
}

/* ── Forced-dark context: hero media, video overlays — always over dark imagery,
   so text stays light regardless of page theme ── */
.on-dark {
  --bg: #06080d;
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(255, 255, 255, 0.7);
  --ink-3: rgba(255, 255, 255, 0.5);
  --ink-4: rgba(255, 255, 255, 0.18);
  --hairline: rgba(255, 255, 255, 0.12);
  --accent: rgba(255, 255, 255, 0.94);
  --accent-soft: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }

/* Page shell */
.shell {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  /* Own stacking context so the grain (z-index:-1) sits above the cream
     background but BEHIND all content. */
  isolation: isolate;
}
@media (min-width: 900px) {
  .shell { /* desktop is full-bleed; sections do their own max-width */ }
}

/* The grain overlay applied to whole page */
/* Film-grain / texture overlay applied to the whole page.
   Light theme: dark specks via multiply (reads on the cream bg).
   Dark theme: light specks via screen (overridden below). */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  /* Behind all content — grain only reads on the exposed page background,
     never over images, video or type. */
  z-index: -1;
  opacity: var(--grain-opacity, 0.34);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwLjM0IDAuMzQgMC4zNCAwIDAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSdnYW1tYScgYW1wbGl0dWRlPScxLjMnIGV4cG9uZW50PScxLjUnIG9mZnNldD0nMCcvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: var(--grain-size, 170px) var(--grain-size, 170px);
}
.theme-dark .grain::before {
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwLjM0IDAuMzQgMC4zNCAwIDAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSdnYW1tYScgYW1wbGl0dWRlPScxLjMnIGV4cG9uZW50PScxLjUnIG9mZnNldD0nMCcvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* Reusable text classes */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot { color: var(--accent); }

.label-accent {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
}

/* Glass surface helper */
.glass {
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 30px 60px -20px var(--glass-shadow);
}

/* CTA pill */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font: 500 13px/1 var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cta-arrow-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask-image: url("https://vhxlpseoxfcmnqrsvehp.supabase.co/storage/v1/object/public/spectra-site/assets/icon-arrow.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("https://vhxlpseoxfcmnqrsvehp.supabase.co/storage/v1/object/public/spectra-site/assets/icon-arrow.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  flex-shrink: 0;
}
.cta:hover, .cta.accent:hover { background-color: var(--ink); color: var(--bg); }
.cta.accent {
  background-color: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  box-shadow: none;
}

/* Section helpers */
.section {
  padding: 96px 20px;
  position: relative;
}
@media (min-width: 900px) {
  .section { padding: 140px 48px; }
}
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}

/* Big display headline */
.display-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 11vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 7vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.display-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.italic-cyan {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

/* Sparkle ornament — rendered as inline SVG component, this is fallback styling */
.sparkle-svg { display: inline-block; vertical-align: middle; }
.sparkle-svg path { fill: currentColor; }

/* ── Persistent header path (Home / Shop / Infos) ── */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 4vw, 26px);
}
.site-nav-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
  transition: opacity .25s, color .35s;
}
.site-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .3s cubic-bezier(.22,.61,.36,1);
}
.site-nav-link:hover { opacity: 1 !important; }
.site-nav-link:hover::after { right: 0; }
.site-nav-link.is-active::after { right: 0; }
@media (max-width: 380px) {
  .site-nav-link { font-size: 11px; letter-spacing: 0.1em; }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
}

/* No-scroll lock for menu overlay */
body.menu-open { overflow: hidden; }

/* Selection */
::selection { background: var(--accent-soft); color: var(--ink); }

/* ── Title loupe ─────────────────────────────────────────────────────
   A small glass loupe that follows the cursor over a headline and
   locally magnifies the letters underneath. Subtle aqua tint, no
   background — never reveals a panel behind the type.
   The wrapper takes its size from `.loupe-base`; `.loupe-lens` is a
   pixel-perfect duplicate scaled around the cursor and clipped to a
   circle. `.loupe-ring` paints the glass edge.                       */
.loupe {
  position: relative;
  display: block;
  isolation: isolate;
}
.loupe-base { display: block; }
.loupe-lens, .loupe-ring, .loupe-fog, .loupe-grain {
  opacity: 0;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.loupe.loupe-on .loupe-lens,
.loupe.loupe-on .loupe-ring { opacity: 1; }
.loupe.loupe-on .loupe-fog  { opacity: 0.85; }
.loupe.loupe-on .loupe-grain { opacity: 0.32; }

/* Fog: same children rendered behind the lens, blurred + slightly dimmed,
   clipped to the circle. Shows through the gaps between magnified
   letters and adds depth — never visible outside the loupe.            */
.loupe-fog {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: circle(var(--lr, 70px) at var(--lx, -9999px) var(--ly, -9999px));
  -webkit-clip-path: circle(var(--lr, 70px) at var(--lx, -9999px) var(--ly, -9999px));
  filter: blur(1.1px) brightness(0.9);
  color: var(--ink);
}

/* Grain: a film-noise disc inside the loupe, overlay-blended over the
   fog + lens for a subtle texture.                                     */
.loupe-grain {
  position: absolute;
  width: calc(var(--lr, 70px) * 2);
  height: calc(var(--lr, 70px) * 2);
  left: calc(var(--lx, -9999px) - var(--lr, 70px));
  top: calc(var(--ly, -9999px) - var(--lr, 70px));
  border-radius: 50%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMS4zJyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuNyAgMCAwIDAgMCAwLjg1ICAwIDAgMCAwIDAuOTUgIDAgMCAwIDAuNyAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE2MCcgaGVpZ2h0PScxNjAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size: 80px 80px;
  mix-blend-mode: overlay;
}

.loupe-lens {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  clip-path: circle(var(--lr, 70px) at var(--lx, -9999px) var(--ly, -9999px));
  -webkit-clip-path: circle(var(--lr, 70px) at var(--lx, -9999px) var(--ly, -9999px));
  background: #04060a;
  will-change: clip-path;
}
.loupe-lens-inner {
  display: block;
  transform: scale(var(--ls, 1.22));
  transform-origin: var(--lx, 0px) var(--ly, 0px);
  color: #F0EEE9;
  text-shadow: 0 0 0.22em var(--accent-soft);
  will-change: transform;
}
.loupe-lens .italic-cyan { color: #F0EEE9; }

/* Ring: glass edge. Inner edge is a soft cyan halo (no sharp line), a
   bit more visible than the outer drop shadow.                         */
.loupe-ring {
  position: absolute;
  width: calc(var(--lr, 70px) * 2);
  height: calc(var(--lr, 70px) * 2);
  left: calc(var(--lx, -9999px) - var(--lr, 70px));
  top: calc(var(--ly, -9999px) - var(--lr, 70px));
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.05) 32%,
      transparent 62%);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.26),
    inset 0 2px 8px rgba(255,255,255,0.12),
    inset 0 -3px 12px rgba(255,255,255,0.12),
    0 6px 24px -6px rgba(0,0,0,0.28);
  mix-blend-mode: overlay;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .loupe-lens, .loupe-ring, .loupe-fog, .loupe-grain { display: none !important; }
}