/* ================================================================
   SPARK — Design Enhancement Layer v1
   Applied on top of site.css + site-v2.css + hero-anim.css
   Sources: Impeccable (brand register) · Emil Kowalski · Taste
   ================================================================ */

/* ──────────────────────────────────────────
   1. GLOBAL EASING VARIABLES (Emil Kowalski)
   Strong ease-out curves — far more intentional than the built-in
   CSS easings, which are too weak for premium UI.
   ────────────────────────────────────────── */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out — use for entering elements */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* strong ease-in-out — on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS-like — drawers, menus */
}


/* ──────────────────────────────────────────
   2. TYPOGRAPHY — text-wrap & line-length (Impeccable brand)
   text-wrap: balance eliminates awkward headline orphans.
   text-wrap: pretty reduces paragraph orphans.
   ────────────────────────────────────────── */
h1, h2, h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Body line-length cap — 65ch prevents extremely wide measure */
.section-v2 p,
.loc-hero__content p,
.hero-group p {
  max-width: 65ch;
}


/* ──────────────────────────────────────────
   3. BUTTON ACTIVE STATES (Emil Kowalski)
   Scale on :active gives instant tactile feedback.
   The press should be subtle — 0.97 reads as a physical depression.
   Transitions use specific properties, not `all` or blanket overrides.
   ────────────────────────────────────────── */
.btn {
  transition:
    background   .15s var(--ease-out),
    color        .15s var(--ease-out),
    border-color .15s var(--ease-out),
    transform    .16s var(--ease-out),
    opacity      .15s var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary:hover  { background: var(--ink-700, #2A2926); }
.btn--ghost:hover    { background: rgba(0,0,0,0.05); }
.btn--invert:hover   { background: var(--paper); }


/* ──────────────────────────────────────────
   4. HERO CTA BUTTONS (Emil Kowalski)
   ────────────────────────────────────────── */
.hero-anim__cta {
  transition:
    background     .25s var(--ease-out),
    border-color   .25s var(--ease-out),
    transform      .2s  var(--ease-out),
    opacity        .15s var(--ease-out);
}
.hero-anim__cta:hover {
  transform: translateY(-1px);
}
.hero-anim__cta:active {
  transform: scale(0.97);
  transition-duration: .1s;
}

/* Primary hero CTA — brighter hover */
.hero-anim__cta--primary {
  transition:
    background   .15s var(--ease-out),
    border-color .15s var(--ease-out),
    transform    .16s var(--ease-out);
}
.hero-anim__cta--primary:hover {
  background: #d9ae7e;
  border-color: #d9ae7e;
  transform: translateY(-1px);
}


/* ──────────────────────────────────────────
   5. HERO CHAPTER TICKER (Emil Kowalski + Impeccable)
   Combined translateY + scale feels more three-dimensional
   than translateY alone. Transition targets only the properties
   that actually change.
   ────────────────────────────────────────── */
.hero-anim__chapter {
  transition:
    color        .3s var(--ease-out),
    background   .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform    .22s var(--ease-out);
}
.hero-anim__chapter:hover {
  transform: translateY(-3px);
}
.hero-anim__chapter:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: .1s;
}


/* ──────────────────────────────────────────
   6. NAVIGATION HOVER STATES (Emil Kowalski)
   Specific properties, not all. Faster for color changes.
   ────────────────────────────────────────── */
.hv2__nav-link {
  transition:
    color   .15s var(--ease-out),
    opacity .15s var(--ease-out);
}
.hv2__enquire {
  transition:
    background   .18s var(--ease-out) !important,
    color        .18s var(--ease-out) !important,
    border-color .18s var(--ease-out) !important,
    transform    .16s var(--ease-out) !important;
}
.hv2__enquire:active {
  transform: scale(0.97);
}


/* ──────────────────────────────────────────
   7. MEGA MENU ARROWS (Emil Kowalski)
   Arrow should feel connected to its parent link — smoother
   translate with the stronger ease-out curve.
   ────────────────────────────────────────── */
.hv2__mega-col .arrow {
  transition:
    opacity   .15s var(--ease-out),
    transform .18s var(--ease-out),
    color     .15s var(--ease-out);
  transform: translateX(-4px);
}
.hv2__mega-col a:hover .arrow {
  transform: translateX(0);
}


/* ──────────────────────────────────────────
   8. HERO WORD-IN ANIMATION (Emil Kowalski)
   Staggered word reveals use the strong ease-out curve.
   The existing cubic-bezier(.2,.7,.2,1) is good but the
   Emil curve (.23, 1, .32, 1) has a sharper initial burst
   that reads as more intentional and premium.
   ────────────────────────────────────────── */
.hero-anim__title .w {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-anim__lede {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-anim__ctas {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ──────────────────────────────────────────
   9. SCENE CARD ENTRY (Emil Kowalski)
   Scene animations use the strong ease-out curve for entries.
   ────────────────────────────────────────── */
.scene {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ──────────────────────────────────────────
   10. LINK UNDERLINE HOVER (Impeccable)
   The existing .link-u opacity hover is good. Improve easing.
   ────────────────────────────────────────── */
.link-u {
  transition:
    opacity .18s var(--ease-out),
    color   .18s var(--ease-out);
}


/* ──────────────────────────────────────────
   11. MEGA MENU PANEL ENTRY (Emil Kowalski)
   Dropdown should feel like it opens from above, not appear.
   Scale from 0.97 on the Y axis with blur for smoothness.
   Currently the menu uses display:none → display:block (no transition).
   We layer a CSS trick: opacity + transform with pointer-events toggle.
   ────────────────────────────────────────── */
.hv2__mega {
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transform-origin: top center;
  transition:
    opacity   .18s var(--ease-out),
    transform .2s  var(--ease-out);
  /* Override the display:none/block with visibility so transitions fire */
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
.hv2__nav-item.is-open .hv2__mega {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}


/* ──────────────────────────────────────────
   12. SECTION CARDS — hover lift (Impeccable)
   Destination / programme cards should respond to hover with
   a subtle lift + shadow deepening to signal interactivity.
   ────────────────────────────────────────── */
.section-v2 a[href] .card,
.prog-card,
.offer-card {
  transition:
    transform    .22s var(--ease-out),
    box-shadow   .22s var(--ease-out);
}
.prog-card:hover,
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.22);
}


/* ──────────────────────────────────────────
   13. REDUCED MOTION — all enhancements (Impeccable + Emil)
   Every added animation must have a prefers-reduced-motion
   counterpart. This is non-optional per WCAG 2.1 criterion 2.3.3.
   ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero-anim__cta,
  .hero-anim__cta--primary,
  .hero-anim__chapter,
  .hv2__nav-link,
  .hv2__enquire,
  .hv2__mega-col .arrow,
  .link-u,
  .hv2__mega,
  .prog-card,
  .offer-card {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
  .btn:active,
  .hero-anim__cta:active,
  .hv2__enquire:active,
  .hero-anim__chapter:active {
    transform: none !important;
  }
  .hero-anim__chapter:hover {
    transform: none !important;
  }
  .prog-card:hover,
  .offer-card:hover {
    transform: none !important;
  }
}


/* ──────────────────────────────────────────
   14. FOCUS STYLES — keyboard accessibility (Impeccable)
   Browsers strip focus outlines on click by default.
   :focus-visible restores them only for keyboard users.
   Use the brand oak color for consistency.
   ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--oak, #C6A87A);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible,
.hero-anim__cta:focus-visible,
.hero-anim__chapter:focus-visible {
  outline: 2px solid var(--oak, #C6A87A);
  outline-offset: 4px;
}


/* ──────────────────────────────────────────
   15. FONT RENDERING — smoother on retina (Impeccable)
   The base site.css already applies -webkit-font-smoothing.
   Here we add font-feature-settings for better ligature
   rendering on the Söhne body face.
   ────────────────────────────────────────── */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Tabular numbers for figures, prices, counts */
.mono,
.hero-anim__chapter small,
.scene__num,
.scene__verticals {
  font-feature-settings: "tnum" 1, "kern" 1;
}


/* ──────────────────────────────────────────
   16. DRAWER ANIMATION (Emil Kowalski)
   The mobile drawer currently uses display:none toggle.
   Add the iOS-like ease-drawer curve for a native feel.
   ────────────────────────────────────────── */
.hv2-drawer__panel {
  transition: transform .32s var(--ease-drawer);
}


/* ──────────────────────────────────────────
   17. IMAGE HOVER SCALE — editorial (Impeccable brand)
   Location/venue images should subtly scale on hover to
   signal they are navigable destinations, not static assets.
   ────────────────────────────────────────── */
.loc-card__img,
.section-v2 figure img,
.mega-feature img {
  transition: transform .6s var(--ease-out);
}
.loc-card:hover .loc-card__img,
.section-v2 a:hover figure img,
.hv2__mega-feature:hover img {
  transform: scale(1.03);
}


/* ──────────────────────────────────────────
   18. SCENE CARD — backdrop blur will-change
   Only apply will-change during the animation loop to avoid
   memory cost on sections the user isn't watching.
   ────────────────────────────────────────── */
.hero-anim__card {
  will-change: backdrop-filter;
  /* Already has blur(16px) saturate(120%) — preserve */
}

/* Remove will-change after animation ends via reduced-motion path */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__card { will-change: auto; }
}