/* ==========================================================================
   Cold Mail Box — Custom Stylesheet
   Tailwind (CDN) handles utility classes and layout.
   This file only holds what Tailwind utilities can't express cleanly:
   design tokens as CSS variables, keyframe animations, and a few
   hand-tuned effects (grain texture, gradient mesh, focus rings).
   ========================================================================== */

:root {
  /* Color tokens — mirrored from the Tailwind config in index.html so
     hand-written CSS (gradients, grain, shadows) stays in sync with the
     design system instead of using magic numbers. */
  --color-ink: #0e1116;
  --color-canvas: #fafafa;
  --color-dark: #0b0d12;
  --color-primary: #4f46e5;
  --color-success: #22c55e;

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* Offset scroll targets so section headings don't hide under the sticky nav */
section[id] {
  scroll-margin-top: 88px;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Consistent, visible, on-brand focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Dark section atmosphere (Hero + Final CTA)
   Soft gradient mesh + fine grain, per the design system's "special
   occasion" treatment — never used on light sections.
   -------------------------------------------------------------------------- */

.atmosphere-dark {
  position: relative;
  background-color: var(--color-dark);
  isolation: isolate;
  overflow: hidden;
}

.atmosphere-dark::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(139, 92, 246, 0.18), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.atmosphere-dark::after {
  /* Fine grain texture via inline SVG noise — keeps the dark background
     from looking like a flat, lifeless fill. Opacity kept low so it reads
     as texture, not visual noise. */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 0;
}

.atmosphere-dark > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Sticky navbar state
   Transparent over the hero, solid + blurred once the page scrolls.
   The .is-scrolled class is toggled by script.js.
   -------------------------------------------------------------------------- */

#navbar {
  transition: background-color var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

#navbar.is-scrolled {
  background-color: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-ink);
  border-bottom-color: rgba(14, 17, 22, 0.08);
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
}

/* Nav link text color flips from "on dark hero" to "on light canvas"
   once the navbar solidifies. */
.nav-link {
  color: #f5f6f8;
  transition: color var(--duration-fast) var(--ease-premium);
}

#navbar.is-scrolled .nav-link {
  color: #565c66;
}

#navbar.is-scrolled .nav-link.is-active,
#navbar.is-scrolled .nav-link:hover {
  color: #0e1116;
}

/* Logo swap: white wordmark over the dark hero, ink wordmark once the
   navbar solidifies to a light background. Uses !important deliberately —
   this must win over Tailwind's `.hidden` utility regardless of whether
   the CDN script or this stylesheet finishes loading first. */
#navbar:not(.is-scrolled) .nav-logo-dark {
  display: none !important;
}

#navbar.is-scrolled .nav-logo-light {
  display: none !important;
}

#navbar.is-scrolled .nav-logo-dark {
  display: block !important;
}

.nav-link.is-active,
.nav-link:hover {
  color: #ffffff;
}

/* Active menu item underline */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Mobile menu panel
   -------------------------------------------------------------------------- */

#mobile-menu {
  transition: opacity var(--duration-base) var(--ease-premium),
    visibility var(--duration-base) var(--ease-premium);
}

#mobile-menu[data-state="closed"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#mobile-menu[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

/* Hamburger -> X icon transform */
#menu-toggle .bar {
  transition: transform var(--duration-base) var(--ease-premium),
    opacity var(--duration-fast) var(--ease-premium);
  transform-origin: center;
}

#menu-toggle[aria-expanded="true"] .bar-top {
  transform: translateY(6px) rotate(45deg);
}

#menu-toggle[aria-expanded="true"] .bar-middle {
  opacity: 0;
}

#menu-toggle[aria-expanded="true"] .bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

/* Hamburger bar color follows the same light/dark logic as the logo and
   nav links — white over the dark hero, ink once the navbar solidifies. */
#navbar.is-scrolled #menu-toggle .bar {
  background-color: #0e1116 !important;
}

/* --------------------------------------------------------------------------
   Scroll-reveal animations
   Elements start hidden + shifted down; script.js adds .is-visible via
   IntersectionObserver. Respects prefers-reduced-motion below.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children within a revealed group */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   Hero cursor-follow spotlight
   JS (initHeroSpotlight) writes --spotlight-x / --spotlight-y as the mouse
   moves over the hero section; the radial gradient below just reads them.
   Defaults center the glow so it looks intentional before the first
   mousemove event fires (and on touch devices, which never fire one).
   -------------------------------------------------------------------------- */

#hero-spotlight {
  --spotlight-x: 50%;
  --spotlight-y: 40%;
  background: radial-gradient(
    480px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(130, 77, 235, 0.16),
    transparent 70%
  );
  transition: background 80ms linear;
}

/* --------------------------------------------------------------------------
   Hero visual tilt (mouse-driven parallax)
   JS (initHeroTilt) sets the rotateX/rotateY inline on mousemove; this just
   defines the resting state and a smooth return when the cursor leaves.
   -------------------------------------------------------------------------- */

#hero-tilt-card {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Hero visual ambient float
   -------------------------------------------------------------------------- */

@keyframes ambient-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ambient-float {
  animation: ambient-float 6s var(--ease-premium) infinite;
}

/* --------------------------------------------------------------------------
   Card hover lift (used on service / benefit / pricing / testimonial cards)
   -------------------------------------------------------------------------- */

.card-hover {
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) var(--ease-premium);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(14, 17, 22, 0.1);
  border-color: #dcdfe4;
}

/* --------------------------------------------------------------------------
   Button micro-interactions
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary {
  transition: transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-premium);
}

.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-icon {
  transition: transform var(--duration-base) var(--ease-premium);
}

.faq-item[data-open="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-item[data-open="true"] .faq-question {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Back to top button
   -------------------------------------------------------------------------- */

#back-to-top {
  transition: opacity var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium),
    visibility var(--duration-base) var(--ease-premium);
}

#back-to-top[data-visible="false"] {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
}

#back-to-top[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Pricing toggle switch
   -------------------------------------------------------------------------- */

#pricing-toggle-thumb {
  transition: transform var(--duration-base) var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Accessibility: respect reduced motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal],
  [data-reveal-group] > *,
  .ambient-float,
  .card-hover,
  .btn-primary,
  .btn-secondary,
  #navbar,
  #mobile-menu,
  .faq-answer,
  .faq-icon,
  #back-to-top,
  #hero-tilt-card,
  #hero-spotlight {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  #hero-tilt-card {
    transform: none !important;
  }

  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }
}