/* Entrance motion. Every rule is scoped to html.ic-anim, which only exists
   once motion.js has run - without it nothing is hidden and the page reads
   exactly as it does today. */

html.ic-anim [data-ic-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* One long, flat easing everywhere: accelerate barely, settle slowly. */
html.ic-anim [data-ic-reveal].ic-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.15s cubic-bezier(.22, .61, .24, 1) var(--ic-d, 0ms),
    transform 1.15s cubic-bezier(.22, .61, .24, 1) var(--ic-d, 0ms);
}

/* Body copy and section blocks rise a little as they arrive. */
html.ic-anim [data-ic-reveal="text"],
html.ic-anim [data-ic-reveal="block"],
html.ic-anim [data-ic-reveal="eyebrow"] { transform: translateY(16px); }

/* Cards travel slightly further, which reads as depth in a row. */
html.ic-anim [data-ic-reveal="card"] { transform: translateY(26px); }

/* The headline rises a little further and a little slower than the rest.
   Only opacity and transform are animated, here and everywhere else: those
   two are composited and cannot reflow the page. An earlier version also
   animated letter-spacing, which looked right while it ran but re-wrapped the
   headline as it went - and if the transition never ran, the hero was left
   stuck at the wide tracking, breaking "In Taipei, For Love" across lines and
   clipping it to "In". Nothing that affects layout gets animated. */
html.ic-anim [data-ic-reveal="title"] { transform: translateY(20px); }
html.ic-anim [data-ic-reveal="title"].ic-in {
  transition:
    opacity 1.5s cubic-bezier(.22, .61, .24, 1) var(--ic-d, 0ms),
    transform 1.5s cubic-bezier(.22, .61, .24, 1) var(--ic-d, 0ms);
}

/* Gold hairlines draw themselves open from the centre. */
html.ic-anim [data-ic-reveal="rule"] { opacity: 1; transform: scaleX(0); transform-origin: 50% 50%; }
html.ic-anim [data-ic-reveal="rule"].ic-in {
  transform: scaleX(1);
  transition: transform 1.6s cubic-bezier(.22, .61, .24, 1) var(--ic-d, 0ms);
}

/* --- Hover, desktop only. Touch devices get no hover state to strand. --- */
@media (hover: hover) and (pointer: fine) {
  /* Venue and story cards: the image drifts in, the card lifts a hair. */
  main section [data-ic-reveal="card"] { transition: transform .9s cubic-bezier(.22, .61, .24, 1); }
  main section [data-ic-reveal="card"]:hover { transform: translateY(-4px); }
  main section [data-ic-reveal="card"] img,
  main section [data-ic-reveal="card"] [style*="background-image"] {
    transition: transform 1.4s cubic-bezier(.22, .61, .24, 1);
  }
  main section [data-ic-reveal="card"]:hover img,
  main section [data-ic-reveal="card"]:hover [style*="background-image"] {
    transform: scale(1.045);
  }

  /* Links and buttons draw a gold underline rather than changing colour. */
  main a:not([aria-label]), header a:not([aria-label]) {
    position: relative;
  }
  main a:not([aria-label])::after, header a:not([aria-label])::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: #C4A159;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .55s cubic-bezier(.22, .61, .24, 1);
  }
  main a:not([aria-label]):hover::after, header a:not([aria-label]):hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
  button { transition: background-color .5s ease, border-color .5s ease, color .5s ease; }
}

/* The hero photograph is bright in places and the headline is white. A
   backing panel behind the type was tried and rejected: a radial gradient
   inside the heading box reads as a grey rectangle against the photograph,
   because the box is wider than the glow and the edges cut hard. The
   text-shadow in the readability block carries the contrast instead, and
   leaves the photograph untouched. */

@media (prefers-reduced-motion: reduce) {
  html.ic-anim [data-ic-reveal] { opacity: 1 !important; transform: none !important; }
}