/* Dr Pepr - shared custom styles */

/* Brand color tokens — single source of truth for the dark "obsidian/lab" palette
   that Tailwind's theme doesn't own. Reference these (var(--token)) rather than
   re-typing hexes. */
:root {
  --obsidian: #050505;          /* dark section background */
  --obsidian-light: #1a1a1a;    /* hairline borders on dark */
  --silver: #d1d5db;            /* body/label text on dark */
  --spotlight-core: #1a1a1a;    /* product-card glow centre */
  --spotlight-core-hover: #2a2a2a;
  --spotlight-edge: #0a0a0a;    /* product-card glow edge */
  --spotlight-border: #222;
  --spotlight-border-hover: #444;
  --tech-number: #444;          /* idle step/FAQ number */
}

/* Logo wordmark: natural letter-spacing suits the mixed-case "Dr Pepr" serif */
header a[href="index.html"],
footer a[href="index.html"],
#mobile-drawer .font-display-lg {
  letter-spacing: normal;
}

.glass-nav {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Coming-soon: keep text crisp over the photographic backdrop without dimming it.
   Soft dark shadow on the text; the white CTA button/input opt out. */
.cs-content :where(a, p, h1) {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45);
}
.cs-content button,
.cs-content input {
  text-shadow: none;
}
.text-silver {
  color: var(--silver);
}
.bg-obsidian {
  background-color: var(--obsidian);
}
.border-obsidian-light {
  border-color: var(--obsidian-light);
}

/* Ambient spotlight effect */
.spotlight-card {
  background: radial-gradient(circle at 50% 0%, var(--spotlight-core) 0%, var(--spotlight-edge) 70%);
  border: 1px solid var(--spotlight-border);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.spotlight-card:hover {
  background: radial-gradient(circle at 50% 0%, var(--spotlight-core-hover) 0%, var(--spotlight-edge) 70%);
  border-color: var(--spotlight-border-hover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.02);
}

/* Number sequence styling */
.tech-number {
  font-family: "JetBrains Mono", monospace;
  color: var(--tech-number);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.active-step .tech-number {
  color: #fff;
}

/* Animations */
@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.animate-breathing { animation: breathing 12s ease-in-out infinite; }

@keyframes floatAmbient {
  0%, 100% { transform: translateY(0px) scale(1.05); }
  50% { transform: translateY(-10px) scale(1.05); }
}
.animate-float-ambient { animation: floatAmbient 6s ease-in-out infinite; }

.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* nav-link dark-on-light variant for surface pages */
.nav-link-dark::after { background-color: #000; }

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-reveal-nav {
  opacity: 0;
  animation: slideDownFade 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.delay-200 { animation-delay: 200ms; }
.delay-400 { animation-delay: 400ms; }
.delay-600 { animation-delay: 600ms; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.premium-transition {
  /* scoped to the properties that actually animate (was `all`), and shortened
     to a micro-interaction duration */
  transition-property: color, background-color, border-color, fill, transform, opacity, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
  transform: skewX(-20deg);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.shimmer-btn:hover::after {
  left: 150%;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* page entrance for inner pages */
.page-head { padding-top: 96px; }

/* hide native number spinners — custom +/- steppers are used instead */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* mobile nav drawer slide */
.mobile-drawer { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

/* === Section transition: overlap / emerge (index.html only) ===
   The following section rises over the one above with a soft shadow at the
   seam, so section changes read as deliberate depth rather than hard joins.
   Used only on the homepage — the inner pages keep clean butt-joins.
   The overlap (40px) lands inside the previous section's bottom padding, so it
   never covers content. Do not apply where the section above has tight
   bottom padding or interactive elements near its lower edge. */
.emerge-dark,
.emerge-light {
  position: relative;
  z-index: 1;
  margin-top: -40px;
}
/* dark section as a floating panel: it overlaps the light section above AND
   the light section below (margin top + bottom), sits above both (z-index),
   and casts a matching shadow on each edge so the dark band reads as
   bookended rather than only lifting at the top */
.emerge-dark {
  z-index: 2;
  margin-bottom: -40px;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.45),
              0 18px 44px rgba(0, 0, 0, 0.45);
}
/* light section rising over a dark one: a dark shadow would vanish on dark, so
   the depth cue is a fine top highlight + a soft lifted shadow */
.emerge-light {
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
}
.emerge-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* === Reduced motion ===
   Honour the OS-level "reduce motion" setting (vestibular / migraine users).
   Neutralise the ambient + scroll-reveal animations, and force reveal content
   to its visible end-state so nothing depends on an animation firing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-element {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Keyboard focus ===
   Visible focus ring for keyboard users only (mouse/touch clicks stay clean).
   Black by default for the light surfaces; switched to white inside the dark
   nav, dark sections and the mobile drawer so it stays visible there. */
:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 2px;
}
.glass-nav :focus-visible,
.bg-obsidian :focus-visible,
#mobile-drawer :focus-visible {
  outline-color: #fff;
}