/**
 * microinteractions.css — Smart Catering Child · Fase ELEVAR
 *
 * Restrained, on-brand micro-interactions for all interactive elements.
 * Philosophy: subtle, fast, purposeful. Nothing bouncy. Nothing decorative.
 * Every animation earns its place — feedback, state indication, spatial logic.
 *
 * Durations: 150–250ms. Easing: ease-out-soft / ease-out-quart (tokens).
 * All animations gated under @media (hover: hover) and (pointer: fine) where
 * hover behavior is the interaction model, to avoid false positives on touch.
 *
 * Accessibility contract:
 *  - @media (prefers-reduced-motion: reduce) disables ALL motion added here.
 *  - :focus-visible rings added to every interactive element (WCAG 2.4.7).
 *
 * Layer: UNLAYERED (same as button.css, nav.css) — wins against GP/Elementor.
 * Scope: body.scc-fase0 — only affects reworked pages.
 *
 * DO NOT add eyebrows, markers (01/02/03), gradient text, or side-stripe borders.
 * DO NOT touch layout, copy, SEO meta, or GSAP/reveal animations.
 *
 * @package SmartCateringChild
 * @since   Fase ELEVAR (2026-06-16)
 */

/* ==========================================================================
 * 1. BUTTONS / CTAs — .sc-button
 *
 * Current state: transition: background 0.3s ease, transform 0.3s ease
 * Issues: 300ms too slow, easing too weak, no :active press, no focus ring.
 * Fix: faster transition (180ms), stronger ease, :active scale press, focus ring.
 *
 * The gold pill (.sc-button--gold) is the primary CTA — it must feel tactile.
 * The ghost variant gets the same :active so presses feel consistent site-wide.
 * ========================================================================== */

body.scc-fase0 .sc-button {
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Arrow icon: keep the translateX but at the faster cadence */
body.scc-fase0 .sc-button .sc-button__arrow,
body.scc-fase0 .sc-button svg.arrow {
  transition: transform var(--transition-fast);
}

/* :active press — scale(0.97) gives instant tactile feedback.
 * translateY(1px) reinforces the "pressed down" direction. */
body.scc-fase0 .sc-button:active {
  transform: scale(0.97) translateY(1px);
}

/* Gold filled :hover — keep the existing color inversion but add shadow lift */
@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-button--gold:hover {
    box-shadow: 0 6px 18px rgba(5, 4, 24, 0.18);
  }
  body.scc-fase0 .sc-button--ghost:hover {
    box-shadow: 0 4px 12px rgba(5, 4, 24, 0.12);
  }
}

/* :focus-visible — WCAG 2.4.7. Gold ring on dark buttons, dark ring on light. */
body.scc-fase0 .sc-button:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
}
body.scc-fase0 .sc-button--gold:focus-visible {
  outline-color: var(--color-dark);
}
body.scc-fase0 .sc-button--ghost.sc-button--on-dark:focus-visible {
  outline-color: var(--color-white);
}

/* ==========================================================================
 * 2. NAV CTA — .sc-nav__cta
 *
 * Current state: transition: background 0.3s, transform 0.3s — same issues.
 * Fix: faster, :active press, focus ring. Matches .sc-button for consistency.
 * ========================================================================== */

body.scc-fase0 .sc-nav__cta {
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

body.scc-fase0 .sc-nav__cta:active {
  transform: scale(0.97) translateY(1px);
}

body.scc-fase0 .sc-nav__cta:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 3px;
}
body.scc-fase0 .sc-nav.is-top .sc-nav__cta:focus-visible {
  outline-color: #fff;
}

/* Nav arrow: same faster cadence */
body.scc-fase0 .sc-nav__cta .arrow {
  transition: transform var(--transition-fast);
}

/* ==========================================================================
 * 3. NAV LINKS — .sc-nav__link
 *
 * Current state: scaleX underline already present with good easing — well done.
 * Improvements: slightly faster (300ms → 180ms), add :focus-visible ring,
 * add color change on hover for extra legibility signal.
 * ========================================================================== */

body.scc-fase0 .sc-nav__link::after {
  transition: transform var(--transition-fast);
}

body.scc-fase0 .sc-nav__link:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
body.scc-fase0 .sc-nav.is-top .sc-nav__link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.8);
}

/* Mobile menu links — match the gold hover but add focus ring */
body.scc-fase0 .sc-mobile-menu__list a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Language switcher — already has opacity transition; add focus ring */
body.scc-fase0 .sc-nav__lang-link:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
}

/* Burger and close — add focus ring (overrides.css handles background reset) */
body.scc-fase0 .sc-nav__burger:focus-visible,
body.scc-fase0 .sc-mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
body.scc-fase0 .sc-nav.is-top .sc-nav__burger:focus-visible {
  outline-color: rgba(255, 255, 255, 0.8);
}
body.scc-fase0 .sc-mobile-menu__close:focus-visible {
  outline-color: var(--color-gold);
}

/* ==========================================================================
 * 4. CARDS — keystone card pattern
 *
 * Applies to: .scm-caso-exito__card, .scm-finca-card, .scm-espacios-grid__card
 * Current state: box-shadow on hover only — no lift, no image zoom.
 * Fix: translateY(-4px) lift + image scale(1.04) zoom inside overflow:hidden.
 *
 * Image zoom requires the media wrapper to have overflow:hidden (it does:
 * .scm-caso-exito__media / .scm-finca-card__media / .scm-espacios-grid__media
 * all have overflow:hidden + aspect-ratio, confirmed in respective CSS files).
 *
 * NOTE: transition is already set in each card CSS to box-shadow only.
 * We add transform here so the combined transition is:
 *   box-shadow (existing) + transform (new) + image scale (new).
 * ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  /* caso-exito card */
  body.scc-fase0 .scm-caso-exito__card {
    transition:
      box-shadow var(--transition-base),
      transform var(--transition-base);
  }
  body.scc-fase0 .scm-caso-exito__card:hover {
    transform: translateY(-4px);
  }
  body.scc-fase0 .scm-caso-exito__img {
    transition: transform var(--dur-slow) var(--ease-out-quart);
  }
  body.scc-fase0 .scm-caso-exito__card:hover .scm-caso-exito__img {
    transform: scale(1.04);
  }

  /* finca card */
  body.scc-fase0 .scm-finca-card {
    transition:
      box-shadow var(--transition-base),
      transform var(--transition-base);
  }
  body.scc-fase0 .scm-finca-card:hover {
    transform: translateY(-4px);
  }
  body.scc-fase0 .scm-finca-card__img {
    transition: transform var(--dur-slow) var(--ease-out-quart);
  }
  body.scc-fase0 .scm-finca-card:hover .scm-finca-card__img {
    transform: scale(1.04);
  }

  /* espacios grid card */
  body.scc-fase0 .scm-espacios-grid__card {
    transition:
      box-shadow var(--transition-base),
      transform var(--transition-base);
  }
  body.scc-fase0 .scm-espacios-grid__card:hover {
    transform: translateY(-4px);
  }
  body.scc-fase0 .scm-espacios-grid__img {
    transition: transform var(--dur-slow) var(--ease-out-quart);
  }
  body.scc-fase0 .scm-espacios-grid__card:hover .scm-espacios-grid__img {
    transform: scale(1.04);
  }
}

/* Card :focus-visible — card links need a ring when keyboard-navigated */
body.scc-fase0 .scm-caso-exito__card:focus-visible,
body.scc-fase0 .scm-finca-card:focus-visible,
body.scc-fase0 .scm-espacios-grid__card:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
}

/* ==========================================================================
 * 5. EVENT CARDS / VENUE CARDS (full-image cards)
 *
 * .sc-event-card and .sc-venue-card already have:
 *  - translateY on :hover (event-card: -6px, venue-card: -4px)
 *  - image scale on :hover (event-card: scale(1.05))
 *  - easing: cubic-bezier(0.22, 1, 0.36, 1) — great, keep it
 *  - event-card transition: 0.5s — trim to match site rhythm (0.28s)
 *  - venue-card transition: 0.4s ease — trim and use token easing
 *
 * We tighten durations and add :active + :focus-visible.
 * We do NOT change the easing (already strong).
 * ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-event-card {
    transition: transform var(--transition-base) cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.scc-fase0 .sc-event-card__img {
    transition: transform var(--dur-slow) cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.scc-fase0 .sc-venue-card {
    transition: transform var(--transition-base) var(--ease-out-quart);
  }
}

body.scc-fase0 .sc-event-card:focus-visible,
body.scc-fase0 .sc-venue-card:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

body.scc-fase0 .sc-event-card:active {
  transform: scale(0.99);
}

/* ==========================================================================
 * 6. USP CARDS — .sc-usp-card
 *
 * Current state: icon rotates -6deg on :hover and changes bg/color — good.
 * Tighten transitions to match site rhythm (300ms → 180ms).
 * Add subtle card lift on hover.
 * ========================================================================== */

body.scc-fase0 .sc-usp-card__icon {
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-usp-card:hover {
    /* no transform on the card itself — keeps the grid stable */
    /* icon rotation already defined in card.css */
  }
}

/* ==========================================================================
 * 7. FAQ ACCORDION — .scm-faq-block
 *
 * Current state: transition on ::after (the +/− character) for transform.
 *   BUT: the transition is on 'transform' while the actual change is 'content'
 *   — content is not animatable. The current setup only adds hover style.
 *   We already have focus-visible and cursor:pointer.
 *
 * Fix: Replace the +/− toggle with a chevron rotation via transform.
 *   Use a CSS-only chevron (border trick or transform on ::after).
 *   The question gets a color change on :hover for clearer affordance.
 *   Smooth panel reveal is native <details> behavior (no CSS height anim needed
 *   to avoid layout thrash — we leave it as instant open with content padding).
 * ========================================================================== */

/* Question hover: color + opacity signal */
@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .scm-faq-block__question {
    transition:
      color var(--transition-fast),
      opacity var(--transition-fast);
  }
  body.scc-fase0 .scm-faq-block__details:not([open]) .scm-faq-block__question:hover {
    color: var(--color-gold-ink);
  }
}

/* The +/− already has a transition on transform in scm-faq-block.css.
 * We override to also transition color so the gold ink appears smoothly. */
body.scc-fase0 .scm-faq-block__question::after {
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}

/* When open: the question itself gets gold ink color */
body.scc-fase0 .scm-faq-block__details[open] .scm-faq-block__question {
  color: var(--color-gold-ink);
}

/* Answer: fade-in for content on open. Uses @starting-style for modern browsers,
 * graceful degradation (instant reveal) on older ones. No height animation
 * (avoids layout thrash). */
body.scc-fase0 .scm-faq-block__answer {
  transition: opacity var(--transition-fast);
}

@supports (transition-behavior: allow-discrete) {
  body.scc-fase0 .scm-faq-block__details[open] .scm-faq-block__answer {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}

/* ==========================================================================
 * 8. INLINE LINKS — body.scc-fase0 a (content links)
 *
 * Current state: color transition 180ms already in base.css.
 * Improvement: add text-decoration underline offset transition for polish.
 * The underline-offset trick gives a subtle "lift" to hovered links.
 * ========================================================================== */

body.scc-fase0 a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.12em;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast),
    text-underline-offset var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 a:not([class]):hover {
    text-decoration-color: currentColor;
    text-underline-offset: 0.2em;
  }
}

body.scc-fase0 a:not([class]):focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ==========================================================================
 * 9. FOOTER LINKS — .sc-footer a
 *
 * Current state: color: 0.2s — already present. Add underline offset for polish.
 * ========================================================================== */

body.scc-fase0 .sc-footer a {
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

body.scc-fase0 .sc-footer a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
 * 10. DIVISION SERVICE CARDS — .sc-division-service
 *
 * Current state: no hover, no transition, static.
 * Fix: subtle lift + border color brightening on hover.
 * ========================================================================== */

body.scc-fase0 .sc-division-service {
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-division-service:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 169, 106, 0.55);
    box-shadow: 0 6px 20px rgba(5, 4, 24, 0.06);
  }
}

/* ==========================================================================
 * 11. DIVISION SECTOR ITEMS — .sc-division-sector
 *
 * Current state: no hover. On dark bg — subtle opacity lift.
 * ========================================================================== */

body.scc-fase0 .sc-division-sector {
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-division-sector:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================================================================
 * 12. DIVISION CASE CARDS — .sc-division-case
 *
 * Current state: no hover interaction.
 * Fix: subtle lift + shadow reveal.
 * ========================================================================== */

body.scc-fase0 .sc-division-case:not(.sc-division-case--placeholder) {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-division-case:not(.sc-division-case--placeholder):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(5, 4, 24, 0.1);
  }
}

/* ==========================================================================
 * 13. CTA BANNER links — generic .sc-cta-banner a and .sc-section CTAs
 *
 * Covered by button styles above. Focus ring for any other interactive
 * element not explicitly targeted (catch-all under scc-fase0 scope).
 * ========================================================================== */

/* Catch-all :focus-visible for any interactive element that doesn't have
 * a specific ring above. Lower specificity — overridden by targeted rules. */
body.scc-fase0 [tabindex]:not([tabindex="-1"]):focus-visible,
body.scc-fase0 details summary:focus-visible {
  outline: 2px solid var(--color-gold-ink);
  outline-offset: 3px;
}

/* ==========================================================================
 * REDUCED MOTION — disable ALL motion added in this file.
 *
 * The base.css @layer theme already resets all transitions to 0.01ms for
 * prefers-reduced-motion. This block explicitly zeros out the transforms and
 * transitions added here, as a belt-and-suspenders guarantee that no motion
 * leaks through specificity gaps.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Buttons */
  body.scc-fase0 .sc-button,
  body.scc-fase0 .sc-button .sc-button__arrow,
  body.scc-fase0 .sc-button svg.arrow,
  body.scc-fase0 .sc-nav__cta,
  body.scc-fase0 .sc-nav__cta .arrow {
    transition: none;
  }
  body.scc-fase0 .sc-button:active,
  body.scc-fase0 .sc-nav__cta:active {
    transform: none;
  }

  /* Nav links */
  body.scc-fase0 .sc-nav__link::after {
    transition: none;
  }

  /* Cards — no transform, no image zoom */
  body.scc-fase0 .scm-caso-exito__card,
  body.scc-fase0 .scm-finca-card,
  body.scc-fase0 .scm-espacios-grid__card,
  body.scc-fase0 .sc-event-card,
  body.scc-fase0 .sc-venue-card {
    transition: none;
  }
  body.scc-fase0 .scm-caso-exito__card:hover,
  body.scc-fase0 .scm-finca-card:hover,
  body.scc-fase0 .scm-espacios-grid__card:hover,
  body.scc-fase0 .sc-event-card:hover,
  body.scc-fase0 .sc-venue-card:hover {
    transform: none;
  }
  body.scc-fase0 .scm-caso-exito__img,
  body.scc-fase0 .scm-finca-card__img,
  body.scc-fase0 .scm-espacios-grid__img,
  body.scc-fase0 .sc-event-card__img {
    transition: none;
  }
  body.scc-fase0 .scm-caso-exito__card:hover .scm-caso-exito__img,
  body.scc-fase0 .scm-finca-card:hover .scm-finca-card__img,
  body.scc-fase0 .scm-espacios-grid__card:hover .scm-espacios-grid__img,
  body.scc-fase0 .sc-event-card:hover .sc-event-card__img {
    transform: none;
  }

  /* USP icon */
  body.scc-fase0 .sc-usp-card__icon {
    transition: none;
  }

  /* FAQ */
  body.scc-fase0 .scm-faq-block__question,
  body.scc-fase0 .scm-faq-block__question::after,
  body.scc-fase0 .scm-faq-block__answer {
    transition: none;
  }

  /* Links */
  body.scc-fase0 a:not([class]) {
    transition: none;
  }

  /* Division cards */
  body.scc-fase0 .sc-division-service,
  body.scc-fase0 .sc-division-sector,
  body.scc-fase0 .sc-division-case:not(.sc-division-case--placeholder) {
    transition: none;
  }
  body.scc-fase0 .sc-division-service:hover,
  body.scc-fase0 .sc-division-case:not(.sc-division-case--placeholder):hover {
    transform: none;
  }

  /* Footer */
  body.scc-fase0 .sc-footer a {
    transition: none;
  }
}