/*
 * aecons.css — design-system v2 layer for AECONS Safaris.
 * Sits on top of Tailwind CDN. Owns: fluid type, African motifs (Maasai shuka,
 * acacia silhouette, sun-rays, beadwork), scroll/hover animation primitives,
 * magnetic CTAs, marquee, hero polish.
 * Mobile-first: base rules are mobile, scaled up at >=640px and >=1024px.
 *
 * Palette comes from base.html Tailwind config — `acacia`, `savanna`, `maasai`,
 * `terracotta`, `ebony`, `ivory`, `bone`. Keep the CSS-var names below as the
 * single source of truth for any rule that can't reach Tailwind utilities.
 */

/* ---------- Fluid type ramp + palette tokens --------------------------- */
:root {
  /* Bigger, bolder headings — closer to editorial / travel-magazine sizing.
     Each step is ~30% larger than before; aec-h1 lands near 5rem on wide
     screens, aec-h2 near 3.5rem. */
  --aec-display: clamp(2.75rem, 8vw, 6rem);
  --aec-h1:      clamp(2.5rem, 6vw, 5rem);
  --aec-h2:      clamp(2rem, 4.4vw, 3.5rem);
  --aec-h3:      clamp(1.375rem, 2.6vw, 1.875rem);
  --aec-lead:    clamp(1.125rem, 1.7vw, 1.375rem);

  /* Acacia — savanna green (primary, alias for `brand` in Tailwind). */
  --aec-acacia-50:  #f0f7f1;
  --aec-acacia-100: #d6eedc;
  --aec-acacia-300: #7ec496;
  --aec-acacia-500: #3e8e5a;
  --aec-acacia-600: #2c7048;
  --aec-acacia-700: #205536;
  --aec-acacia-900: #0e2818;

  /* Savanna — golden grass / ochre. */
  --aec-savanna-50:  #fdf8eb;
  --aec-savanna-200: #f5dd92;
  --aec-savanna-400: #e0b13a;
  --aec-savanna-500: #c7972a;
  --aec-savanna-700: #7d5a1c;

  /* Maasai — ceremonial red shuka. */
  --aec-maasai-100: #fbdcdc;
  --aec-maasai-500: #c0392b;
  --aec-maasai-600: #9c2a20;
  --aec-maasai-700: #7a1f18;
  --aec-maasai-900: #3d0d09;

  /* Terracotta — sunset earth. */
  --aec-terracotta-300: #e58c63;
  --aec-terracotta-500: #c4582b;
  --aec-terracotta-600: #a44520;

  /* Ebony — warm dark for footers / dark sections. */
  --aec-ebony-700: #1d160d;
  --aec-ebony-900: #0b0703;

  --aec-ivory: #fdfbf5;
  --aec-bone:  #f6f1e3;
  --aec-ink:   #1d160d;
}

.aec-display { font-size: var(--aec-display); line-height: 1.0;  letter-spacing: -0.028em; font-weight: 800; }
.aec-h1      { font-size: var(--aec-h1);      line-height: 1.05; letter-spacing: -0.024em; font-weight: 800; }
.aec-h2      { font-size: var(--aec-h2);      line-height: 1.08; letter-spacing: -0.02em;  font-weight: 800; }
.aec-h3      { font-size: var(--aec-h3);      line-height: 1.18; letter-spacing: -0.012em; font-weight: 700; }
.aec-lead    { font-size: var(--aec-lead);    line-height: 1.55; font-weight: 400; }

/* Hand-drawn underline accent — now drawn in maasai red. */
.aec-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.aec-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.15em;
  height: 0.42em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'><path d='M2,8 C40,2 80,12 120,6 C160,1 200,10 218,5' stroke='%23c0392b' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1) 200ms;
}
.aec-in-view .aec-underline::after { transform: scaleX(1); }

/* ---------- African motif utilities ----------------------------------- */
/* Maasai shuka — authentic 6-color stripe with red as the dominant ground,
   white and ochre flecks, black-green warp. Used as section badge above headings
   and as a wide divider between bands. The wide variant tiles seamlessly. */
.aec-shuka {
  display: block;
  height: 6px;
  width: 88px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--aec-maasai-700) 0%,    var(--aec-maasai-700) 22%,
    var(--aec-ivory)      22%,   var(--aec-ivory)      24%,
    var(--aec-acacia-900) 24%,   var(--aec-acacia-900) 38%,
    var(--aec-savanna-500) 38%,  var(--aec-savanna-500) 42%,
    var(--aec-maasai-600) 42%,   var(--aec-maasai-600) 60%,
    var(--aec-acacia-700) 60%,   var(--aec-acacia-700) 76%,
    var(--aec-savanna-500) 76%,  var(--aec-savanna-500) 80%,
    var(--aec-maasai-700) 80%,   var(--aec-maasai-700) 100%);
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 0 rgba(13, 7, 3, 0.06);
}
.aec-shuka-wide {
  width: 100%;
  height: 8px;
  background-image: linear-gradient(90deg,
    var(--aec-maasai-700) 0%,   var(--aec-maasai-700) 16%,
    var(--aec-ivory)      16%,  var(--aec-ivory)      18%,
    var(--aec-acacia-900) 18%,  var(--aec-acacia-900) 30%,
    var(--aec-savanna-500) 30%, var(--aec-savanna-500) 34%,
    var(--aec-maasai-600) 34%,  var(--aec-maasai-600) 48%,
    var(--aec-acacia-700) 48%,  var(--aec-acacia-700) 60%,
    var(--aec-savanna-500) 60%, var(--aec-savanna-500) 64%,
    var(--aec-maasai-700) 64%,  var(--aec-maasai-700) 80%,
    var(--aec-ivory)      80%,  var(--aec-ivory)      82%,
    var(--aec-acacia-900) 82%,  var(--aec-acacia-900) 100%);
  background-size: 280px 100%;
  background-repeat: repeat-x;
}

/* Back-compat aliases — keep older code that still says `.aec-kente` working. */
.aec-kente      { display: block; height: 6px; width: 88px; border-radius: 999px;
                  background: linear-gradient(90deg,
                    var(--aec-maasai-700) 0%, var(--aec-maasai-700) 22%,
                    var(--aec-ivory) 22%, var(--aec-ivory) 24%,
                    var(--aec-acacia-900) 24%, var(--aec-acacia-900) 38%,
                    var(--aec-savanna-500) 38%, var(--aec-savanna-500) 42%,
                    var(--aec-maasai-600) 42%, var(--aec-maasai-600) 60%,
                    var(--aec-acacia-700) 60%, var(--aec-acacia-700) 76%,
                    var(--aec-savanna-500) 76%, var(--aec-savanna-500) 80%,
                    var(--aec-maasai-700) 80%, var(--aec-maasai-700) 100%);
                  margin-bottom: 0.85rem; }
.aec-kente-wide { width: 100%; height: 8px;
                  background-image: linear-gradient(90deg,
                    var(--aec-maasai-700) 0%, var(--aec-maasai-700) 16%,
                    var(--aec-ivory) 16%, var(--aec-ivory) 18%,
                    var(--aec-acacia-900) 18%, var(--aec-acacia-900) 30%,
                    var(--aec-savanna-500) 30%, var(--aec-savanna-500) 34%,
                    var(--aec-maasai-600) 34%, var(--aec-maasai-600) 48%,
                    var(--aec-acacia-700) 48%, var(--aec-acacia-700) 60%,
                    var(--aec-savanna-500) 60%, var(--aec-savanna-500) 64%,
                    var(--aec-maasai-700) 64%, var(--aec-maasai-700) 80%,
                    var(--aec-ivory) 80%, var(--aec-ivory) 82%,
                    var(--aec-acacia-900) 82%, var(--aec-acacia-900) 100%);
                  background-size: 280px 100%; background-repeat: repeat-x; }

/* Tribal beadwork dot grid — three layered radial dots in earth tones. */
.aec-dot-grid {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(13,7,3,0.10) 1.4px, transparent 1.4px),
    radial-gradient(circle at 18px 14px, rgba(122,31,24,0.12) 1px, transparent 1px),
    radial-gradient(circle at 6px 22px, rgba(199,151,42,0.16) 0.9px, transparent 0.9px);
  background-size: 32px 32px;
}
.aec-dot-grid-dark {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,0.10) 1.4px, transparent 1.4px),
    radial-gradient(circle at 18px 14px, rgba(245,221,146,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Acacia silhouette divider — applied to a band that sits between sections. */
.aec-acacia-divider {
  position: relative;
  height: 110px;
  background: url("/static/img/motifs/acacia.svg") center bottom / cover no-repeat;
  margin-top: -1px;
}
@media (min-width: 768px) { .aec-acacia-divider { height: 160px; } }

/* Curved organic top transition. */
.aec-curve-top { position: relative; }
.aec-curve-top::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 48px;
  background: inherit;
  -webkit-mask: radial-gradient(120% 100% at 50% 100%, #000 99%, transparent 100%);
          mask: radial-gradient(120% 100% at 50% 100%, #000 99%, transparent 100%);
}

/* Sun-rays decorative blob — used as hero corner ornament. */
.aec-sun-rays {
  position: absolute;
  width: 520px; height: 520px;
  background: url("/static/img/motifs/sun-rays.svg") center / contain no-repeat;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* ---------- Animation primitives -------------------------------------- */
html.aec-anim-ready [data-anim="reveal"],
html.aec-anim-ready [data-anim="stagger"] > *,
html.aec-anim-ready [data-anim="mask"]   > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
html.aec-anim-ready [data-anim="mask"] > * {
  clip-path: inset(0 0 100% 0);
  transform: none;
}
html.aec-anim-ready .aec-in-view[data-anim="reveal"],
html.aec-anim-ready .aec-in-view[data-anim="stagger"] > *,
html.aec-anim-ready .aec-in-view[data-anim="mask"]   > * {
  opacity: 1;
  transform: translate3d(0,0,0);
  clip-path: inset(0 0 0 0);
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1),
              transform 800ms cubic-bezier(.2,.8,.2,1),
              clip-path 900ms cubic-bezier(.2,.8,.2,1);
}
html.aec-anim-ready .aec-in-view[data-anim="stagger"] > * {
  transition-delay: calc(var(--aec-i, 0) * 70ms);
}

[data-anim="tilt"] {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0));
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
@media (hover: none) { [data-anim="tilt"] { transform: none !important; } }

[data-anim="magnetic"] {
  transform: translate3d(var(--mx,0), var(--my,0), 0);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms;
  will-change: transform;
}
[data-anim="magnetic"]:hover {
  box-shadow: 0 18px 48px -16px rgba(122,31,24,0.45);
}
@media (hover: none) { [data-anim="magnetic"] { transform: none !important; } }

/* Marquee — pure CSS infinite scroll. JS doubles the children for seamless loop. */
.aec-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.aec-marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: aec-marquee-x var(--aec-marquee-speed, 38s) linear infinite;
}
.aec-marquee:hover .aec-marquee-track { animation-play-state: paused; }
@keyframes aec-marquee-x {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.aec-parallax { will-change: transform; }

/* ---------- Nav scroll-compress --------------------------------------- */
header[data-aec-nav].is-scrolled {
  box-shadow: 0 6px 28px -16px rgba(13,7,3,0.18);
  background: rgba(253,251,245,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
header[data-aec-nav] .aec-nav-bar {
  transition: height 280ms cubic-bezier(.2,.8,.2,1);
}
header[data-aec-nav].is-scrolled .aec-nav-bar { height: 3.25rem; }

/* Active link shuka underline (under top-level desktop links). */
#nav-desktop .aec-nav-link {
  position: relative;
}
#nav-desktop .aec-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--aec-maasai-700) 0 28%,
    var(--aec-savanna-500) 28% 40%,
    var(--aec-acacia-700) 40% 72%,
    var(--aec-maasai-700) 72% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  border-radius: 2px;
}
#nav-desktop .aec-nav-link:hover::after,
#nav-desktop .aec-nav-link.is-current::after { transform: scaleX(1); }

/* Mobile drawer slide-in. */
[data-aec-mobile-nav] {
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(.2,.8,.2,1);
}
[data-aec-mobile-nav].is-open { transform: translateX(0); }
[data-aec-mobile-backdrop] {
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
[data-aec-mobile-backdrop].is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero polish ---------------------------------------------- */
.hero-carousel { isolation: isolate; }
.hero-carousel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  background: radial-gradient(120% 100% at 50% 100%, var(--aec-ivory) 0 99%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}
.hero-carousel .hero-track { background: var(--aec-acacia-900); }
.hero-carousel .aec-shuka-wide-overlay,
.hero-carousel .aec-kente-wide-overlay {
  position: absolute; left: 0; right: 0; bottom: 80px;
  height: 6px;
  z-index: 6;
  pointer-events: none;
  opacity: 0.85;
  background-image: linear-gradient(90deg,
    var(--aec-maasai-700) 0 14%,
    var(--aec-ivory) 14% 16%,
    var(--aec-acacia-900) 16% 30%,
    var(--aec-savanna-500) 30% 34%,
    var(--aec-maasai-600) 34% 50%,
    var(--aec-acacia-700) 50% 64%,
    var(--aec-savanna-500) 64% 68%,
    var(--aec-maasai-700) 68% 84%,
    var(--aec-ivory) 84% 86%,
    var(--aec-acacia-900) 86% 100%);
  background-size: 360px 100%;
  background-repeat: repeat-x;
}
.hero-carousel .aec-hero-rays {
  position: absolute;
  right: -120px; top: -120px;
  width: 520px; height: 520px;
  z-index: 2;
  pointer-events: none;
  background: url("/static/img/motifs/sun-rays.svg") center / contain no-repeat;
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: hue-rotate(-12deg) saturate(1.1);
}

/* ---------- Country card hover glow ---------------------------------- */
.aec-country-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aec-country-card::before {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(253,221,146,0.22), transparent 60%);
  z-index: -1;
  opacity: 0; transition: opacity 360ms ease;
}
.aec-country-card:hover::before { opacity: 1; }

/* ---------- Tour-card refinement ------------------------------------- */
.tour-card { transform-style: preserve-3d; }
.tour-card .tour-card-image { transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.tour-card:hover .tour-card-image { transform: scale(1.06); }
.tour-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 100%, rgba(196,88,43,0.22), transparent 70%);
  opacity: 0; transition: opacity 320ms ease;
  pointer-events: none;
  border-radius: inherit;
}
.tour-card:hover::after { opacity: 1; }

/* ---------- Stats counter --------------------------------------------- */
.aec-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- Section dividers ----------------------------------------- */
.aec-divider-curve { display: block; width: 100%; height: 64px; }

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.aec-anim-ready [data-anim="reveal"],
  html.aec-anim-ready [data-anim="stagger"] > *,
  html.aec-anim-ready [data-anim="mask"]   > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .aec-marquee-track { animation: none !important; }
  .aec-underline::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ---------- Mobile-specific tightening ------------------------------- */
@media (max-width: 639px) {
  .aec-acacia-divider { height: 90px; }
  .hero-carousel::after { height: 56px; }
  .hero-carousel .aec-shuka-wide-overlay,
  .hero-carousel .aec-kente-wide-overlay { bottom: 56px; }
  .hero-carousel .aec-hero-rays { width: 320px; height: 320px; right: -80px; top: -80px; }
}