/* ═══════════════════════════════════════════════════════════════════
   LUXE — refined motion layer for ÁLTER Weddings
   Cubic-bezier curves + longer durations + draw/slide effects
   Applied site-wide. Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Sophisticated easing curves */
  --ease-luxe:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:        cubic-bezier(0.4, 0, 0.2, 1);

  /* Editorial durations — slower than typical UI */
  --d-fast:  0.36s;
  --d-base:  0.5s;
  --d-med:   0.72s;
  --d-slow:  1.1s;
  --d-xslow: 1.4s;
}

/* ───────────────────────────────────────────────
   1 · PAGE LIFECYCLE — body fade + page curtain
   ─────────────────────────────────────────────── */
html { background: var(--bg); }
body.theme-dark, html:has(body.theme-dark) { background: var(--dark); }

.luxe-curtain {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  /* off-screen above by default */
  transform: translateY(-101%);
  transition: transform 0.85s var(--ease-in-out-quart);
  will-change: transform;
}
.luxe-curtain .luxe-mark {
  font-family: var(--script, 'Sloop', cursive);
  font-size: clamp(64px, 8vw, 140px);
  color: var(--gold);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-luxe), transform 0.7s var(--ease-luxe);
}
/* Drop-in (covers screen, called right before navigation) */
.luxe-curtain.is-dropping { transform: translateY(0); }
.luxe-curtain.is-dropping .luxe-mark { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
/* Lift-off (slides up off-screen on new page) */
.luxe-curtain.is-lifting {
  transform: translateY(-101%);
  transition: transform 0.95s var(--ease-out-expo);
}
.luxe-curtain.is-lifting .luxe-mark { opacity: 0; transform: translateY(-12px); }

/* Body fade on load — with auto-recovery fallback so if JS fails,
   body becomes visible after 1.2s anyway */
body { opacity: 0; transition: opacity 0.45s var(--ease-luxe) 0.05s; animation: luxe-body-fallback 0.6s 1.2s forwards; }
body.luxe-loaded { opacity: 1; animation: none; }
@keyframes luxe-body-fallback { to { opacity: 1; } }

/* ───────────────────────────────────────────────
   2 · GLOBAL — re-curve common motion primitives
   ─────────────────────────────────────────────── */

a, button { transition: color var(--d-base) var(--ease-luxe); }

img { transition: transform var(--d-xslow) var(--ease-out-expo), filter var(--d-med) var(--ease-luxe); }

/* ───────────────────────────────────────────────
   3 · NAV — underline draw, slow color
   ─────────────────────────────────────────────── */
.nav-links a {
  position: relative;
  transition: color var(--d-base) var(--ease-luxe);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--d-med) var(--ease-out-expo);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav-links a.is-active::after { transform: scaleX(1); transform-origin: left center; }

.lang-switch button {
  position: relative;
  transition: color var(--d-base) var(--ease-luxe);
}
.lang-switch .is-on {
  transition: color var(--d-base) var(--ease-luxe), border-color var(--d-base) var(--ease-luxe);
}

/* Burger morph */
.nav-burger span {
  transition: transform var(--d-base) var(--ease-luxe), opacity var(--d-base) var(--ease-luxe), background var(--d-base) var(--ease-luxe);
}
.nav-burger:hover span:nth-child(2) { transform: scaleX(0.6); transform-origin: right; }

/* Logo subtle */
.nav-logo .logo-svg { transition: opacity var(--d-base) var(--ease-luxe), filter var(--d-base) var(--ease-luxe); }
.nav-logo:hover .logo-svg { opacity: 0.7; }

/* Mobile drawer */
.nav-drawer { transition: opacity 0.55s var(--ease-luxe); }
.nav-drawer ul a {
  display: inline-block;
  transition: color var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe), padding-left var(--d-base) var(--ease-luxe);
}
.nav-drawer ul a:hover { color: var(--gold); padding-left: 14px; }

/* ───────────────────────────────────────────────
   4 · BUTTONS — letter-spacing shift, slow swap
   ─────────────────────────────────────────────── */
.btn {
  transition:
    background-color var(--d-base) var(--ease-luxe),
    color var(--d-base) var(--ease-luxe),
    border-color var(--d-base) var(--ease-luxe),
    letter-spacing var(--d-base) var(--ease-luxe),
    transform var(--d-base) var(--ease-luxe);
}
.btn:hover { letter-spacing: 0.24em; }
.btn:active { transform: scale(0.98); }

.btn-text-arrow .arrow-line {
  transition: width var(--d-med) var(--ease-out-expo), background var(--d-base) var(--ease-luxe);
}
.btn-text-arrow:hover .arrow-line { width: 64px; }

/* ───────────────────────────────────────────────
   5 · WORK / PORTFOLIO CARDS — lift + slow zoom
   ─────────────────────────────────────────────── */
.work-card, .card {
  transition: transform var(--d-base) var(--ease-luxe);
  will-change: transform;
}
.work-card .frame, .card .frame { overflow: hidden; }
.work-card .frame img, .card .frame img {
  transition: transform 1.4s var(--ease-out-expo), filter var(--d-med) var(--ease-luxe);
}
.work-card:hover .frame img,
.card:hover .frame img { transform: scale(1.05); }
.work-card:hover, .card:hover { transform: translateY(-4px); }
.work-card:active, .card:active { transform: translateY(-2px) scale(0.995); }

.work-card .meta, .card .meta {
  transition: transform var(--d-base) var(--ease-luxe), color var(--d-base) var(--ease-luxe);
}

/* Pills/nums settle in */
.work-card .num, .card .num, .work-card .pill, .card .pill {
  transition: opacity var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe);
}
.work-card:hover .num, .card:hover .num { transform: translateY(-2px); }

/* ───────────────────────────────────────────────
   6 · LIST ROWS — staggered slide on hover
   ─────────────────────────────────────────────── */
.list-row {
  position: relative;
  overflow: hidden;
  transition: background-color var(--d-med) var(--ease-luxe), color var(--d-base) var(--ease-luxe);
}
/* Left rail accent */
.list-row::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: center top;
  transition: transform var(--d-med) var(--ease-luxe);
  z-index: 2;
}
.list-row:hover::before { transform: scaleY(1); }

/* Warm wash that slides in from the left */
.list-row::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(165,119,85,0.07) 0%,
    rgba(165,119,85,0.03) 40%,
    transparent 75%);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}
.list-row:hover::after { transform: translateX(0); }

/* Children slide with a small stagger */
.list-row > * {
  position: relative;
  z-index: 1;
  transition:
    transform 0.65s var(--ease-out-expo),
    color var(--d-base) var(--ease-luxe);
}
.list-row:hover > *               { transform: translateX(14px); }
.list-row:hover > *:nth-child(1)  { transition-delay: 0ms;   }
.list-row:hover > *:nth-child(2)  { transition-delay: 35ms;  }
.list-row:hover > *:nth-child(3)  { transition-delay: 70ms;  }
.list-row:hover > *:nth-child(4)  { transition-delay: 105ms; }
.list-row:hover > *:nth-child(5)  { transition-delay: 140ms; }
.list-row:hover > *:nth-child(6)  { transform: translateX(24px); transition-delay: 175ms; }

/* Arrow word inside the last cell — extra nudge */
.list-row .lr-arrow span {
  display: inline-block;
  transition: transform 0.55s var(--ease-out-expo);
}
.list-row:hover .lr-arrow span { transform: translateX(6px); }

/* ───────────────────────────────────────────────
   7 · ACCORDION — smooth grid-rows expansion
   ─────────────────────────────────────────────── */
.accordion-trigger {
  transition: color var(--d-base) var(--ease-luxe), padding-left var(--d-base) var(--ease-luxe);
}
.accordion-trigger:hover { padding-left: 10px; }

.accordion-icon, .accordion-icon::before, .accordion-icon::after {
  transition: transform var(--d-med) var(--ease-luxe) !important;
}
.accordion-item.is-open .accordion-icon { transform: rotate(180deg); }

/* Grid-rows trick — animates content height fluidly */
.accordion-panel {
  display: grid !important;
  grid-template-rows: 0fr;
  max-height: none !important;
  overflow: hidden;
  transition: grid-template-rows var(--d-med) var(--ease-luxe), opacity var(--d-med) var(--ease-luxe);
  opacity: 0;
}
.accordion-panel > * { min-height: 0; overflow: hidden; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; opacity: 1; }

/* ───────────────────────────────────────────────
   8 · FORM FIELDS — slow border, focus pulse
   ─────────────────────────────────────────────── */
.field-input, .field-textarea, .field-select, .datepicker-trigger {
  transition: border-color var(--d-base) var(--ease-luxe), color var(--d-base) var(--ease-luxe), background var(--d-base) var(--ease-luxe);
}
.field-label {
  transition: color var(--d-base) var(--ease-luxe);
}

/* Radio cards / coverage selectors */
.radio-card {
  transition: background-color var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe);
}
.radio-card:hover { transform: translateY(-2px); }
.radio-card .dot, .radio-card .dot::after {
  transition: all var(--d-base) var(--ease-luxe) !important;
}

/* ───────────────────────────────────────────────
   9 · REVEAL — scroll-in stagger
   ─────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Generic image-reveal — clip overlay slides off */
.luxe-img-reveal { position: relative; overflow: hidden; }
.luxe-img-reveal::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg);
  transform: scaleX(1); transform-origin: right center;
  transition: transform 1.1s var(--ease-out-expo);
  pointer-events: none;
}
body.theme-dark .luxe-img-reveal::after { background: var(--dark); }
.luxe-img-reveal.is-in::after { transform: scaleX(0); transform-origin: left center; }

/* ───────────────────────────────────────────────
   10 · HERO QUICK / FOOTER LINKS — micro arrows
   ─────────────────────────────────────────────── */
.hero-quick a {
  transition: transform var(--d-base) var(--ease-luxe), color var(--d-base) var(--ease-luxe);
}
.hero-quick a:hover { transform: translateY(-3px); }
.hero-quick a .qv {
  transition: color var(--d-base) var(--ease-luxe);
}

.footer-col li a {
  position: relative;
  display: inline-block;
  transition: color var(--d-base) var(--ease-luxe), padding-left var(--d-base) var(--ease-luxe);
}
.footer-col li a::before {
  content: '→';
  position: absolute; left: -2px; top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  font-size: 11px;
  transition: opacity var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe);
}
.footer-col li a:hover { padding-left: 18px; }
.footer-col li a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ───────────────────────────────────────────────
   11 · CASE-STUDY PAGES — prev/next, gallery, story
   ─────────────────────────────────────────────── */
.cs-nav-link {
  transition: color var(--d-base) var(--ease-luxe), transform var(--d-med) var(--ease-luxe);
}
.cs-nav-link.is-prev:hover { transform: translateX(-10px); }
.cs-nav-link.is-next:hover { transform: translateX(10px); }
.cs-nav-v { transition: color var(--d-base) var(--ease-luxe); }

.cs-gallery figure { transition: transform var(--d-base) var(--ease-luxe); }
.cs-img img { transition: transform 1.4s var(--ease-out-expo), filter var(--d-med) var(--ease-luxe) !important; }
.cs-gallery figure:hover .cs-img img { transform: scale(1.04); }
.cs-img-cap {
  opacity: 0.7;
  transition: opacity var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe);
  transform: translateY(2px);
}
.cs-gallery figure:hover .cs-img-cap { opacity: 1; transform: translateY(0); }

.cs-crumbs a { transition: color var(--d-base) var(--ease-luxe), letter-spacing var(--d-base) var(--ease-luxe); }
.cs-crumbs a:hover { letter-spacing: 0.16em; }

/* Featured card on portfolio */
.featured-card { transition: transform var(--d-med) var(--ease-luxe); }
.featured-card img { transition: transform 1.6s var(--ease-out-expo) !important; }
.featured-card:hover img { transform: scale(1.03); }
.f-cta .play-tri { transition: transform var(--d-base) var(--ease-luxe), background var(--d-base) var(--ease-luxe); }
.f-cta:hover .play-tri { transform: scale(1.15); }

/* ───────────────────────────────────────────────
   12 · SVC / PACKAGE CARDS — soft lift
   ─────────────────────────────────────────────── */
.svc, .pkg, .path, .expect, .radio-card {
  transition: background-color var(--d-base) var(--ease-luxe), color var(--d-base) var(--ease-luxe), transform var(--d-base) var(--ease-luxe), box-shadow var(--d-base) var(--ease-luxe);
}
.svc-link, .path-link {
  transition: gap var(--d-base) var(--ease-luxe), color var(--d-base) var(--ease-luxe);
}

/* ───────────────────────────────────────────────
   13 · ANCHOR / FOCUS — refined outlines
   ─────────────────────────────────────────────── */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  transition: outline-offset var(--d-base) var(--ease-luxe);
}

/* ───────────────────────────────────────────────
   14 · REDUCED MOTION
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .luxe-curtain { display: none !important; }
  body { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}