/* ============================================================
   AUDIOMAXX — shared site styles
   Brand: green #68BF6F · charcoal #424242
   Design system carried over from the affiliated MaxxShield build
   ============================================================ */

/* ---------- THEME COLOR VARIABLES ---------- */
/* Dark theme (default) */
:root {
  --c-green: 104 191 111;     /* #68BF6F brand green */
  --c-green-dim: 79 169 87;   /* #4FA957 hover/active */
  --c-charcoal: 66 66 66;     /* #424242 brand charcoal — alternating sections */
  --c-ink: 38 38 38;          /* #262626 page background */
  --c-surface: 51 51 51;      /* #333333 cards */
  --c-paper: 245 245 244;     /* #F5F5F4 text */
}

/* Light theme — brand green stays, everything else inverts */
html.light {
  --c-green: 104 191 111;
  --c-green-dim: 79 169 87;
  --c-charcoal: 237 235 230;  /* warm cream alternating sections */
  --c-ink: 245 245 244;       /* near-white page bg */
  --c-surface: 255 255 255;   /* pure white cards */
  --c-paper: 26 26 25;        /* near-black text */
}

/* Smooth theme transition */
body, header, section, footer, nav, button, a,
[class*="bg-"], [class*="text-"], [class*="border-"] {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* In light mode: white borders flip to subtle dark */
html.light [class*="border-white"] { border-color: rgba(0, 0, 0, 0.10) !important; }

/* Keep dark text on green CTA section in light mode for contrast */
html.light section.cta-green, html.light section.cta-green * { color: #1A1A19; }
html.light section.cta-green .bg-ink,
html.light section.cta-green input,
html.light section.cta-green select,
html.light section.cta-green textarea {
  background-color: #2A2826 !important;
  color: #F5F5F4 !important;
}

html { scroll-behavior: smooth; }

/* ---------- BRAND MOTIFS ---------- */
.slash-divider { height: 4px; background: repeating-linear-gradient(115deg, #68BF6F 0 14px, transparent 14px 26px); }
.card-top { box-shadow: inset 0 4px 0 0 #68BF6F; }

/* Wordmark */
.wordmark { font-weight: 900; letter-spacing: -0.02em; }
.wordmark .mx { color: rgb(var(--c-green)); }

/* Image placeholder — marks where AI-generated / photographed art goes */
.img-slot {
  position: relative;
  background:
    linear-gradient(135deg, rgba(104,191,111,0.10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(104,191,111,0.06) 0 14px, transparent 14px 28px),
    rgb(var(--c-surface));
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.img-slot::before {
  content: "▸ IMAGE";
  position: absolute; top: 12px; left: 14px;
  font-size: 10px; letter-spacing: 0.18em; font-weight: 800;
  color: rgb(var(--c-green)); opacity: 0.8;
}

/* ---------- SCROLL ANIMATIONS ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, #68BF6F 0%, #4FA957 100%);
  z-index: 100;
  transition: width 0.08s linear;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(104, 191, 111, 0.45);
}

.reveal { opacity: 0; transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform; }
.reveal-left { opacity: 0; transform: translateX(-32px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.reveal-right { opacity: 0; transform: translateX(32px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate(0,0); }

.d1 { transition-delay: 0.07s; } .d2 { transition-delay: 0.14s; }
.d3 { transition-delay: 0.21s; } .d4 { transition-delay: 0.28s; }
.d5 { transition-delay: 0.35s; } .d6 { transition-delay: 0.42s; }
.d7 { transition-delay: 0.49s; }

.rounded-2xl, .rounded-xl {
  transition-property: transform, box-shadow, background-color, border-color;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}

header.sticky.scrolled {
  border-bottom-color: rgba(104,191,111,0.30) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Hero stagger fade-up */
.hero-stack > * { opacity: 0; transform: translateY(28px);
  animation: heroFadeUp 0.85s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-stack > *:nth-child(1) { animation-delay: 0.08s; }
.hero-stack > *:nth-child(2) { animation-delay: 0.20s; }
.hero-stack > *:nth-child(3) { animation-delay: 0.34s; }
.hero-stack > *:nth-child(4) { animation-delay: 0.50s; }
.hero-stack > *:nth-child(5) { animation-delay: 0.64s; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .hero-stack > * { opacity: 1; transform: none; animation: none; }
  .scroll-progress { display: none; }
  html { scroll-behavior: auto; }
}