:root {
  --bg: #06070d;
  --bg-deep: #03040a;
  --surface: #0e1018;
  --text: #e8eaf0;
  --text-muted: #8b8fa3;
  --text-dim: #5a5f72;
  --accent: #7dd3fc;
  --accent-bright: #e0f2fe;
  --accent-glow: rgba(125, 211, 252, 0.45);

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle radial spotlight + vignette */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-deep);
}

/* Spotlight layer — brightness rides the logo's 11.9s charge/strike/fade cycle:
   near-dark while the bolts charge, ramping through the glow phase, a damped
   flicker echoing the W's strike, full brightness while lit, then dropping
   back to dark as the glow snaps off and the W fades. */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(125, 211, 252, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(125, 211, 252, 0.04) 0%, transparent 70%);
  opacity: 0.1;
  animation: backdropCharge 11.9s linear infinite;
  will-change: opacity;
}

@keyframes backdropCharge {
  0%     { opacity: 0.1; }   /* unlit */
  29.3%  { opacity: 0.3; }   /* phase 1 fill complete (3.5s) */
  58.8%  { opacity: 0.85; }  /* phase 2 glow complete — first strike (7s) */
  59.2%  { opacity: 0.7; }   /* damped echo of the W's flicker */
  59.9%  { opacity: 0.9; }
  60.4%  { opacity: 0.72; }
  61.1%  { opacity: 0.92; }
  61.5%  { opacity: 0.75; }
  62.3%  { opacity: 0.95; }
  62.9%  { opacity: 0.8; }
  63.7%  { opacity: 0.97; }
  65.0%  { opacity: 1; }
  83.4%  { opacity: 1; }     /* hold full while the W is lit; glow snaps at ~9.92s */
  85.2%  { opacity: 0.55; }  /* falls with the fading bolts */
  91.6%  { opacity: 0.1; }   /* dark as the W finishes fading (~10.9s) */
  100%   { opacity: 0.1; }   /* stay dark through the 1s hold */
}

@media (prefers-reduced-motion: reduce) {
  .backdrop::before {
    animation: none;
    opacity: 1;
  }
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.015) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.015) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 60%, rgba(255,255,255,0.01) 0 1px, transparent 2px);
  background-size: 240px 240px, 320px 320px, 180px 180px;
  pointer-events: none;
}

/* HERO */
.hero {
  flex: 1;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 2rem;
}

.logo-wrapper {
  width: min(560px, 90vw);
  margin-bottom: 2.5rem;
}

.logo {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible; /* let glow halos extend past the viewBox without hard-clipping */
  filter: drop-shadow(0 0 24px rgba(125, 211, 252, 0.12));
}

/* SVG logo styling */
.bolt-outline {
  fill: none;
  stroke: rgba(125, 211, 252, 0.18);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

/* Phase 1: bolts appear in the same dim grey as the W's base — unified "unlit" state */
.bolt-fill {
  fill: #5a6072;
}

/* Phase 2: bright white fill with the same drop-shadow halo used on the W */
.bolt-glow {
  fill: #ffffff;
  opacity: 0.6;
  filter:
    drop-shadow(0 0 10px rgba(199, 240, 255, 0.95))
    drop-shadow(0 0 26px rgba(125, 211, 252, 0.55));
  animation: glowSnapOff 11.9s linear infinite;
}

@keyframes glowSnapOff {
  0%, 83.4% { opacity: 0.6; }
  83.41%    { opacity: 0; }   /* instant snap-off of the brightness at ~9.92s */
  100%      { opacity: 0; }   /* hold invisible through the extra 1s pause */
}

.wordmark-w {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Dim base layer — always visible */
.wordmark-w-base {
  fill: #5a6072;
}

/* Bright glow overlay — flickers in like a fluorescent tube as the bolts charge */
.wordmark-w-glow {
  fill: #ffffff;
  opacity: 0;
  filter:
    drop-shadow(0 0 10px rgba(199, 240, 255, 0.95))
    drop-shadow(0 0 26px rgba(125, 211, 252, 0.55));
  animation: wFlickerToLit 11.9s linear infinite;
  will-change: opacity;
}

@keyframes wFlickerToLit {
  0%, 58.7% { opacity: 0; }       /* dark while bolts go through both phases */
  58.8%     { opacity: 1; }       /* first strike right as phase 2 completes (7s) */
  59.2%     { opacity: 0; }
  59.9%     { opacity: 1; }
  60.4%     { opacity: 0.15; }
  61.1%     { opacity: 0.95; }
  61.5%     { opacity: 0.1; }
  62.3%     { opacity: 1; }
  62.9%     { opacity: 0.4; }
  63.7%     { opacity: 1; }
  64.3%     { opacity: 0.7; }
  65.0%     { opacity: 1; }
  66.4%     { opacity: 1; }       /* settled lit at ~7.9s */
  85.2%     { opacity: 1; }       /* hold lit until W starts fading at ~10.14s */
  91.6%     { opacity: 0; }       /* fully faded by ~10.9s */
  100%      { opacity: 0; }       /* hold invisible through the extra 1s pause */
}

@media (prefers-reduced-motion: reduce) {
  .wordmark-w-base { fill: var(--text); }
  .wordmark-w-glow { animation: none; opacity: 1; }
}

/* Whole sequence loops on an 11.9s cycle:
     0–3.5s   phase 1 rise
     3.5–7s   phase 2 rise
     7–7.9s   W flickers and settles lit
     7.9–10.14s hold fully lit
     ~9.92s   glow snaps off, ~9.98s bolts fade
     10.14–10.9s W fades out
     10.9–11.9s extra 1s hold with everything invisible
     11.9s    seamless restart */

/* Bolt group fades out quickly near the end of the cycle (faster than the W dims) */
.bolt-group {
  animation: boltFadeOut 11.9s linear infinite;
}

@keyframes boltFadeOut {
  0%, 83.8% { opacity: 1; }     /* hold until just after the glow snap at ~9.92s */
  84.5%     { opacity: 0; }     /* ~0.08s fade by ~10.06s */
  100%      { opacity: 0; }     /* stay invisible through the extra 1s pause */
}

.fill-mask {
  transform: translateY(200px);
  animation: fillUp 11.9s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  will-change: transform;
}

@keyframes fillUp {
  0%    { transform: translateY(200px); }   /* hidden — matches snap-back position */
  24.7% { transform: translateY(0); }       /* reaches top at 2.94s */
  27.0% { transform: translateY(-6px); }    /* overshoot at 3.22s */
  29.3% { transform: translateY(0); }       /* settled at 3.5s */
  100%  { transform: translateY(0); }       /* stays at top; snap to 200px happens at boundary, hidden by opacity 0 */
}

/* Phase 2: rises from bottom after phase 1 completes, same easing & motion.
   Initial translateY is large enough to keep the halo (≈78px past the path) entirely below the bolt. */
.fill-mask-glow {
  transform: translateY(300px);
  animation: fillUpGlow 11.9s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  will-change: transform, opacity;
}

@keyframes fillUpGlow {
  0%, 29.3% { transform: translateY(300px); opacity: 0; }   /* wait for phase 1 */
  31.1%     { opacity: 1; }
  53.1%     { transform: translateY(0); }                    /* reaches top at ~6.32s */
  55.0%     { transform: translateY(-6px); }
  56.8%     { transform: translateY(0); }                    /* settled at ~6.76s */
  100%      { transform: translateY(0); opacity: 1; }        /* stays; boundary snap hidden by group opacity 0 */
}

@media (prefers-reduced-motion: reduce) {
  .fill-mask,
  .fill-mask-glow {
    animation: none;
    transform: translateY(0);
    opacity: 1;
  }
}

/* TEXT */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}

.motto {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.18em;
  color: var(--accent-bright);
  margin-bottom: 2rem;
  position: relative;
  padding: 0 2rem;
  display: inline-block;
}
.motto::before,
.motto::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--text-dim), transparent);
}
.motto::before { left: 0; }
.motto::after  { right: 0; }

.tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  max-width: 28rem;
}

/* PRODUCTS */
.products {
  padding: 3rem 1.5rem 5rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(to right, transparent, var(--accent-glow), transparent);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: center;
  gap: 1.5rem;
}

.product-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid rgba(232, 234, 240, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

a.product-card:hover,
a.product-card:focus-visible {
  border-color: rgba(125, 211, 252, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(3, 4, 10, 0.6), 0 0 24px rgba(125, 211, 252, 0.08);
  outline: none;
}

.product-logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}
.product-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Red Ivy uses its full wordmark (2125x761) instead of a square mark */
.product-logo--redivy {
  width: 150px;
  height: auto;
}
.product-logo--redivy img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(3, 4, 10, 0.5);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.product-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.product-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}

.product-link {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.product-link::after {
  content: " →";
  transition: transform 0.25s ease;
  display: inline-block;
}
a.product-card:hover .product-link::after {
  transform: translateX(3px);
}

@media (max-width: 520px) {
  .product-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* FOOTER */
.footer {
  padding: 2rem 1.5rem;
  border-top: 1px solid rgba(232, 234, 240, 0.06);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.copyright {
  font-weight: 300;
}

.contact {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}
.contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.contact:hover,
.contact:focus-visible {
  color: var(--accent-bright);
  outline: none;
}
.contact:hover::after,
.contact:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 520px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}