/*
 * theme.css — Lensora Eyewear, Bhopal.
 * Mood: an optician's atelier — warm paper, deep ink, and a tortoiseshell
 * amber accent taken from the frames themselves. Like an Aesop store window
 * crossed with a Warby Parker fitting table.
 */

:root {
  --canvas: #f4f1ec;
  --surface: #ffffff;
  --surface-2: #ebe5dc;
  --border: #ddd5ca;
  --border-strong: #b9ae9f;
  --ink: #16171a;
  --muted: #5e5952;
  --accent: #b0521b;
  --accent-hover: #963f0f;
  --accent-ink: #ffffff;
  --accent-text: #973f0d;
  --accent-strong: #7a3209;
  --accent-soft: #f5e1d1;
  --accent-border: #e3b08c;
  --success: #1f7a45;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #17663a;
  --warning: #a8590b;
  --warning-ink: #ffffff;
  --warning-soft: #f6e7d3;
  --warning-strong: #8a4806;
  --danger: #b4231f;
  --danger-ink: #ffffff;
  --danger-soft: #f6dedc;
  --danger-strong: #9f1d1a;
  --chart-1: #b0521b;
  --chart-2: #16171a;
  --chart-3: #6f7b4f;
  --chart-4: #3f6a85;
  --chart-5: #a3794a;
  --chart-6: #7c4a6b;

  --x-band-dark: #16171a;
  --x-band-ink: #f4efe7;
  --x-band-muted: #b5ada2;
  --x-glow: #e7a173;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 999px;
  --radius-card: 1.75rem;
  --radius-input: 1rem;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  --btn-weight: 600;
}

html[data-theme="dark"] {
  --canvas: #111316;
  --surface: #1a1d21;
  --surface-2: #20242a;
  --border: #2e3339;
  --border-strong: #4b525b;
  --ink: #f2eee7;
  --muted: #a6a39d;
  --accent: #e8915a;
  --accent-hover: #f2a370;
  --accent-ink: #1b0d04;
  --accent-text: #f0a171;
  --accent-strong: #f6c09a;
  --accent-soft: #3a2517;
  --accent-border: #6e3e20;
  --success: #3fa86a;
  --success-ink: #07170d;
  --success-soft: #16301f;
  --success-strong: #7fd09f;
  --warning: #d99a3e;
  --warning-ink: #1a1003;
  --warning-soft: #352512;
  --warning-strong: #ecc183;
  --danger: #e2615c;
  --danger-ink: #1c0605;
  --danger-soft: #3a1a19;
  --danger-strong: #f0a19d;
  --chart-1: #e8915a;
  --chart-2: #f2eee7;
  --chart-3: #a5b47e;
  --chart-4: #7fb0cf;
  --chart-5: #d2a978;
  --chart-6: #c78fb3;

  --x-band-dark: #08090b;
  --x-band-ink: #f2eee7;
  --x-band-muted: #9f9a92;
  --x-glow: #e8915a;
}

/* app.css — Lensora Eyewear: the bar, the hero lens, the bands and the motion. */

/* ---------- Bar ---------- */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.logo-mark {
  width: 2.5rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 0;
  animation: logo-draw 1.6s cubic-bezier(.6, 0, .2, 1) both;
}
@keyframes logo-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.nav-link { color: var(--muted); transition: color .2s ease; }
.nav-link:hover { color: var(--ink); }

/* ---------- Hero headline: each word rises out of its own line ---------- */
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.hero-title .word > span {
  display: inline-block;
  animation: word-rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-title .word:nth-child(2) > span { animation-delay: .07s; }
.hero-title .word:nth-child(3) > span { animation-delay: .14s; }
.hero-title .word:nth-child(4) > span { animation-delay: .21s; }
.hero-title .word:nth-child(5) > span { animation-delay: .28s; }
.hero-title .word:nth-child(6) > span { animation-delay: .35s; }
.hero-title .word:nth-child(7) > span { animation-delay: .42s; }
@keyframes word-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* ---------- The lens (compact: sits beside the headline on desktop) ---------- */
.lens-stage {
  --lx: 64%;
  --ly: 42%;
  --lr: clamp(64px, 11vw, 110px);
  position: relative;
  height: clamp(260px, 60vw, 360px);
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-raised);
  cursor: crosshair;
  touch-action: pan-y;
}
@media (min-width: 1024px) {
  .lens-stage { height: clamp(380px, 34vw, 460px); --lr: clamp(80px, 7vw, 110px); }
}
.lens-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.lens-base { filter: blur(7px) saturate(.7) brightness(.96); transform: scale(1.04); }
.lens-sharp {
  clip-path: circle(var(--lr) at var(--lx) var(--ly));
  transform: scale(1.08);
  transform-origin: var(--lx) var(--ly);
}
.lens-ring {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: calc(var(--lr) * 2);
  height: calc(var(--lr) * 2);
  translate: -50% -50%;
  border-radius: 999px;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .35), inset 0 0 40px rgba(255, 255, 255, .18);
  pointer-events: none;
}
.lens-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 42%);
  animation: glint 3.2s ease-in-out infinite;
}
@keyframes glint { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- Collection ---------- */
.filter-group { display: grid; grid-template-columns: repeat(3, auto); gap: .5rem; justify-content: start; }
.chip.is-active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.frame-card .media img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.frame-card:hover .media img { transform: scale(1.06); }
.frame-card .media { position: relative; }
.frame-tag { position: absolute; top: 1rem; left: 1rem; z-index: 1; }
.frame-card.is-hidden { display: none; }
.frame-card.is-entering { animation: card-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes card-rise { from { transform: translateY(36px); } to { transform: translateY(0); } }

/* ---------- Lens list ---------- */
.lens-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-strong);
}
.lens-row:last-child { border-bottom: 1px solid var(--border-strong); }

/* ---------- Dark statement band ---------- */
.dark-band {
  position: relative;
  overflow: hidden;
  background: var(--x-band-dark);
  color: var(--x-band-ink);
}
.dark-band::before {
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  right: -14rem;
  top: -18rem;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--x-glow) 30%, transparent), transparent 65%);
  pointer-events: none;
}
.dark-band > * { position: relative; }
.band-accent { color: var(--x-glow); }
.band-muted { color: var(--x-band-muted); }
.band-glasses {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--x-band-ink) 25%, transparent);
  color: var(--x-glow);
}

/* ---------- Visit form ---------- */
.visit-card { padding: 2rem; }
@media (min-width: 768px) { .visit-card { padding: 2.75rem; } }

/* ---------- Reduced motion ---------- */
html.reduced-motion .hero-title .word > span,
html.reduced-motion .logo-mark,
html.reduced-motion .lens-ring::after,
html.reduced-motion .frame-card.is-entering { animation: none; }
html.reduced-motion .frame-card .media img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-title .word > span, .logo-mark, .lens-ring::after, .frame-card.is-entering { animation: none; }
}