/* ════════════════════════════════════════
   style.css — L'Âme du Japon
   Custom styles (animations, nav,
   components) to complement Tailwind.
   ════════════════════════════════════════ */


/* ── Tokens ──────────────────────────── */

:root {
  /* Easing */
  --ease:                  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Typography */
  --text-xs:               0.75rem;
  --text-sm:               0.9375rem;
  --text-base:             1.125rem;
  --text-lg:               1.5rem;
  --text-xl:               1.75rem;
  --text-2xl:              2rem;
  --text-3xl:              3rem;
  --text-lead:             clamp(1.0625rem, 1.5625vw, 1.25rem);
  --text-hero:             clamp(3rem, 6.25vw, 5rem);

  /* Border radius */
  --radius-sm:             0.5rem;
  --radius-md:             1rem;
  --radius-lg:             1.5rem;

  /* Colors */
  --color-bg:              #FAFAF9;
  --color-white:           #FFFFFF;
  --color-ink-rgb:         26, 26, 26;
  --color-cream-rgb:        245, 240, 232;
  --color-red-rgb:         184, 29, 19;
  --color-red-hover:       #991810;
  --color-red-hover:       color-mix(in srgb, rgb(var(--color-red-rgb)) 83%, black);
  --color-gold-rgb:        201, 169, 110;

  /* Layout */
  --max-width-brand:       80rem;
  --spacing-nav:           8rem;
  --spacing-hero-top:      8.5rem;
  --spacing-hero-top-sm:   8rem;
  --min-width-date:        2.75rem;
  --min-width-date-card:   3rem;
}


/* ── Base ────────────────────────────── */

html { scroll-behavior: smooth; }

/* Gold keyboard focus ring */
:focus-visible {
  outline: 2px solid rgb(var(--color-gold-rgb));
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── Navigation ──────────────────────── */

/* Local color tokens — override per state */
.nav {
  --nav-fg:            var(--color-cream-rgb);
  height: var(--spacing-nav);
  transition: height 0.3s var(--ease);
  overflow: visible;
}

.nav-island {
  background: rgba(var(--color-ink-rgb), 0.35);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Scrolled state */
.nav.scrolled {
  --nav-fg:            var(--color-ink-rgb);
  height: 4rem;
}

.nav.scrolled .nav-island {
  background: var(--color-bg);
  box-shadow: 0 4px 24px rgba(var(--color-ink-rgb), 0.10);
}

/* Mobile nav open state — toggled via JS .menu-open class */
.nav.menu-open {
  --nav-fg: var(--color-cream-rgb);
  background: rgb(var(--color-ink-rgb));
}
.nav.menu-open .nav-island { background: transparent; box-shadow: none; }

/* All nav elements read --nav-fg */
.logo-name              { color: rgb(var(--nav-fg)); }
.logo-jp                { color: rgba(var(--nav-fg), 0.75); }

/* Dropdown desktop */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  margin-left: -90px;
  width: 180px;
  background: var(--color-bg);
  border: 1px solid rgba(var(--color-ink-rgb),0.08);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 24px 48px rgba(var(--color-ink-rgb),0.2);
  z-index: 10;
}

/* Open dropdown (JS click) */
.nav-item.is-open .nav-link svg { transform: rotate(180deg); }

.nav-item.is-open .nav-dropdown { opacity: 1; pointer-events: auto; }

/* Dropdown link */
.dropdown-item {
  display: block;
  padding: 0.55rem 0.875rem;
  font-size: var(--text-sm);
  color: rgba(var(--color-ink-rgb),0.75);
  border-radius: var(--radius-sm);
}
.dropdown-item:hover {
  color: rgba(var(--color-ink-rgb),0.90);
  background: rgba(var(--color-ink-rgb),0.06);
}

/* Burger → cross (animation driven by aria-expanded) */
.nav-burger {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--nav-fg),0.12);
}
.nav-burger span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: rgb(var(--nav-fg));
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Prevent Chrome overscroll bounce inside mobile menu */
#mobile-menu { overscroll-behavior: none; }

/* Mobile menu — section labels */
.mobile-label {
  padding: 1.25rem 1rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(var(--color-cream-rgb),0.40);
}

/* Mobile menu — links */
.mobile-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(var(--color-cream-rgb),0.75);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid rgba(var(--color-cream-rgb),0.12);
  transition: color 0.2s;
}
.mobile-link:hover { color: rgb(var(--color-cream-rgb)); }

/* Desktop nav link */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgb(var(--nav-fg));
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-link:hover {
  color: rgb(var(--nav-fg));
  background: rgba(var(--nav-fg),0.06);
}


/* ── Buttons ─────────────────────────── */

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

/* Solid red */
.btn-primary              { background: rgb(var(--color-red-rgb));      color: var(--color-white); border-color: rgb(var(--color-red-rgb)); }
.btn-primary:hover        { background: var(--color-red-hover); border-color: var(--color-red-hover); }

/* Transparent outline — light text, for dark backgrounds */
.btn-secondary              { background: transparent; color: rgb(var(--color-cream-rgb)); border-color: rgba(var(--color-cream-rgb),0.40); }
.btn-secondary:hover        { background: rgba(var(--color-cream-rgb),0.08); border-color: rgba(var(--color-cream-rgb),0.70); }

/* Red outline modifier — overrides btn-primary to white bg, red text */
.btn-primary.btn-outline              { background: var(--color-white); color: rgb(var(--color-red-rgb)); }
.btn-primary.btn-outline:hover        { background: rgba(var(--color-red-rgb),0.05); border-color: var(--color-red-hover); color: var(--color-red-hover); }


/* ── Hero ────────────────────────────── */

/* Badge (e.g. "Association loi 1901") */
.hero-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(var(--color-cream-rgb),0.75);
}
.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--color-red-rgb));
  flex-shrink: 0;
}


/* ── Animations ──────────────────────── */

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Page load entries — staggered delays */
.anim-0 { animation: fadeUp 0.8s var(--ease) both; }
.anim-1 { animation: fadeUp 0.8s 0.075s var(--ease) both; }
.anim-2 { animation: fadeUp 0.8s 0.15s  var(--ease) both; }
.anim-3 { animation: fadeUp 0.8s 0.3s   var(--ease) both; }
.anim-4 { animation: fadeUp 0.8s 0.45s  var(--ease) both; }
.anim-5 { animation: fadeUp 0.8s 0.6s   var(--ease) both; }

/* Pulsing dot (event card) */
.anim-pulse { animation: pulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Section components ──────────────── */

/* Activity card shell */
.card {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-ink-rgb),0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Kanji / mission card */
.kanji-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-ink-rgb),0.06);
  border-radius: var(--radius-sm);
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
}

/* Kanji card top accent line */
.kanji-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  background: rgb(var(--color-red-rgb));
  border-radius: 0 0 999px 999px;
  opacity: 0.88;
}

/* Agenda event row */
.agenda-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid rgba(var(--color-ink-rgb),0.08);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  transition: border-color 0.2s;
}
.agenda-row:hover { border-color: rgba(var(--color-ink-rgb),0.2); }
@media (max-width: 480px) { .agenda-row { gap: 0.75rem; } } /* = xs dans tailwind.config */



/* ── État actif de la nav ───────────── */
/* Catégorie de la page courante. Discret et ajustable selon ton goût. */
.nav-link.is-active            { color: rgb(var(--color-red-rgb)); }
.nav.scrolled .nav-link.is-active { color: rgb(var(--color-red-rgb)); }
.dropdown-item[aria-current="page"],
.mobile-link[aria-current="page"] { color: rgb(var(--color-red-rgb)); font-weight: 600; }