/* FloraLux motion layer.
   Everything here is scoped to html.motion or to data-* attributes that
   assets/motion.js sets, except the index hero entrance, which is pure CSS
   so it starts with first paint and always finishes, even without JS.
   All motion is off under prefers-reduced-motion: reduce. */

/* 1. Reveal on scroll ------------------------------------------------------ */
@media screen and (prefers-reduced-motion: no-preference) {
  /* The transition lives on the "in" state only, so hiding is instant and
     only the reveal animates. */
  html.motion [data-reveal="in"] {
    transition: opacity .65s cubic-bezier(.2, .6, .2, 1), transform .65s cubic-bezier(.2, .6, .2, 1);
  }
  html.motion [data-reveal="pending"] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

/* 2. Hero entrance, index.html only (the only page with .hero-main) -------- */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes fl-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
  }
  section:has(.hero-main) p:has(+ h1),
  section:has(.hero-main) h1,
  section:has(.hero-main) h1 + p,
  section:has(.hero-main) .hero-photo,
  section:has(.hero-main) .hero-left-photo,
  section:has(.hero-main) .hero-right-photo,
  section:has(.hero-main) div:has(> a[href]) {
    animation: fl-rise .65s cubic-bezier(.2, .6, .2, 1) both;
  }
  section:has(.hero-main) h1 { animation-delay: 90ms; }
  section:has(.hero-main) h1 + p { animation-delay: 180ms; }
  section:has(.hero-main) .hero-photo { animation-delay: 300ms; }
  section:has(.hero-main) .hero-left-photo,
  section:has(.hero-main) .hero-right-photo { animation-delay: 400ms; }
  section:has(.hero-main) div:has(> a[href]) { animation-delay: 480ms; }
}

/* 3. Hover polish, pointer devices only ------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Pill buttons: a 1px lift, colours untouched */
  [data-pill] {
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  [data-pill]:not([data-reveal]):not(:disabled):hover { transform: translate3d(0, -1px, 0); }
  [data-pill]:not(:disabled):active { transform: none; transition-duration: .1s; }

  /* Card links: lift with a soft shadow (shadow fades via opacity) */
  [data-lift] {
    position: relative;
    transition: transform .3s cubic-bezier(.2, .6, .2, 1), box-shadow .3s cubic-bezier(.2, .6, .2, 1);
  }
  [data-lift]:not([data-reveal]):hover { transform: translate3d(0, -3px, 0); }
  [data-lift]:not([data-zoom])::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    box-shadow: 0 18px 36px -18px rgba(27, 25, 24, .45), 0 4px 12px -6px rgba(27, 25, 24, .18);
    opacity: 0;
    transition: opacity .3s cubic-bezier(.2, .6, .2, 1);
    pointer-events: none;
  }
  [data-lift]:not([data-reveal]):hover::after { opacity: 1; }
  [data-lift]:focus-visible::after { opacity: 0; }
  /* Photo tiles that are themselves the link (Instagram grid): overflow is
     clipped for the zoom, so the shadow sits on the link itself, and never
     replaces the keyboard focus ring. */
  [data-lift][data-zoom]:not([data-reveal]):hover:not(:focus-visible) {
    box-shadow: 0 18px 36px -18px rgba(27, 25, 24, .45), 0 4px 12px -6px rgba(27, 25, 24, .18);
  }

  /* Slow photo zoom. The image is copied onto ::before and scaled inside the
     element's own box, clipped by its own radius, so arches, outlines and
     frames never move. */
  [data-zoom] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  [data-zoom]::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: inherit;
    border-radius: inherit;
    transform: scale(1);
    transition: transform .9s cubic-bezier(.2, .6, .2, 1);
    pointer-events: none;
  }
  [data-zoom]:hover::before,
  [data-lift]:hover [data-zoom]::before { transform: scale(1.035); }
}