/* R16: additive motion. Removing this file + anim.js restores the approved v15. */
:root {
  --anim-ready: 1;
  --anim-ease: cubic-bezier(.34, 1.3, .64, 1);
  --anim-ease-soft: cubic-bezier(.25, .46, .45, .94);
  --anim-short: .25s;
  --anim-medium: .7s;
  --anim-long: 1.1s;
  --anim-stagger: .06s;
  --anim-distance: 28px;
}
@media (max-width: 767px) { :root { --anim-distance: 14px; } }

/* Individual translate/rotate/scale leave the site's existing transforms intact.
   No content is hidden at rest, while queued, or if JavaScript fails. */
[data-anim-state="playing"][data-anim-kind="reveal"] {
  animation: anim-reveal var(--anim-medium) var(--anim-ease-soft) both;
}
[data-anim-state="playing"][data-anim-kind="paste"] {
  animation: anim-paste var(--anim-medium) var(--anim-ease) both;
}
[data-anim-state="playing"][data-anim-kind="hero"] {
  animation: anim-paste var(--anim-short) var(--anim-ease) both;
}
[data-anim-state="playing"][data-anim-kind="hero"]::after {
  transform-origin: left center;
  animation: anim-marker var(--anim-medium) var(--anim-ease-soft) var(--anim-short) both;
}
/* Temporary decoration-only copy: same font, line box and underline geometry.
   Original native underline returns on completion; no persistent layout change. */
#gallery-title[data-anim-state="playing"] {
  position: relative;
  text-decoration-color: transparent;
}
#gallery-title[data-anim-state="playing"]::after {
  content: attr(data-anim-label);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--mark-red, var(--orange));
  text-decoration-thickness: inherit;
  text-underline-offset: inherit;
  pointer-events: none;
  animation: anim-line var(--anim-medium) var(--anim-ease-soft) both;
}
@keyframes anim-reveal {
  from { opacity: 0; translate: 0 var(--anim-distance); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes anim-paste {
  from { opacity: 0; translate: 0 var(--anim-distance); rotate: -1.2deg; scale: .97; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes anim-marker { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes anim-line { from { clip-path: inset(0 100% -12px 0); } to { clip-path: inset(0 0 -12px 0); } }

/* R20: each section follows its own reading direction, using the same two eases. */
[data-anim-state="playing"][data-anim-kind="ink"]{animation:anim-ink var(--anim-medium) var(--anim-ease-soft) both}
[data-anim-state="playing"][data-anim-kind="fade"]{animation:anim-fade var(--anim-medium) var(--anim-ease-soft) both}
[data-anim-state="playing"][data-anim-kind="note"]{animation:anim-note var(--anim-medium) var(--anim-ease) both;transform-origin:left center}
[data-anim-state="playing"][data-anim-kind="issue"]{animation:anim-side var(--anim-medium) var(--anim-ease-soft) both;--anim-x:-22px;--anim-turn:0deg}
[data-anim-state="playing"][data-anim-kind="step"]{animation:anim-step var(--anim-medium) var(--anim-ease) both;transform-origin:center 70%}
[data-anim-state="playing"][data-anim-kind="flow"]{animation:anim-flow var(--anim-medium) var(--anim-ease-soft) both}
[data-anim-state="playing"][data-anim-kind="host-left"]{animation:anim-side var(--anim-medium) var(--anim-ease) both;--anim-x:-28px;--anim-turn:-3deg}
[data-anim-state="playing"][data-anim-kind="host-right"]{animation:anim-side var(--anim-medium) var(--anim-ease) both;--anim-x:28px;--anim-turn:3deg}
[data-anim-state="playing"][data-anim-kind="host-heading"] .host-doodle path{animation:anim-draw var(--anim-medium) var(--anim-ease-soft) both;stroke-dasharray:1;stroke-dashoffset:0}
@keyframes anim-ink{from{clip-path:inset(-12px 100% -18px -12px)}to{clip-path:inset(-12px -12px -18px -12px)}}
@keyframes anim-fade{from{opacity:.25}to{opacity:1}}
@keyframes anim-note{from{opacity:0;scale:.94;rotate:-2deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes anim-side{from{opacity:0;translate:var(--anim-x) 0;rotate:var(--anim-turn)}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes anim-step{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes anim-flow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes anim-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Only interaction states change colour. Both original CTA designs stay intact. */
.cta.anim-cta {
  transition: background-color var(--anim-short) var(--anim-ease-soft),
    transform var(--anim-short) var(--anim-ease-soft),
    box-shadow var(--anim-short) var(--anim-ease-soft);
}
.cta.anim-cta > span[aria-hidden="true"] {
  transition: translate var(--anim-short) var(--anim-ease-soft);
}
.hero-copy .cta.anim-cta:focus-visible { background-color: #a9321b; }
.invitation-cta .cta.anim-cta:focus-visible { background-color: #ff7658; }
.cta.anim-cta:focus-visible { transform: translateY(-2px); }
.cta.anim-cta:focus-visible > span[aria-hidden="true"] { translate: 4px 0; }
@media (hover: hover) and (pointer: fine) {
  .hero-copy .cta.anim-cta:hover { background-color: #a9321b; }
  .invitation-cta .cta.anim-cta:hover { background-color: #ff7658; }
  .cta.anim-cta:hover > span[aria-hidden="true"] { translate: 4px 0; }
}
.hero-copy .cta.anim-cta:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 2px #932913;
}
.invitation-cta .cta.anim-cta:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 2px #ac3e25;
}
@media (prefers-reduced-motion: reduce) {
  [data-anim-state="playing"] .host-doodle path{animation:none!important;stroke-dashoffset:0}
  [data-anim-state="playing"], [data-anim-state="playing"]::after { animation: none !important; }
  #gallery-title[data-anim-state="playing"] { text-decoration-color: var(--mark-red, var(--orange)); }
  #gallery-title[data-anim-state="playing"]::after { content: none; }
  .cta.anim-cta, .cta.anim-cta > span[aria-hidden="true"] { transition: none; }
  .cta.anim-cta:hover, .cta.anim-cta:focus-visible, .cta.anim-cta:active { transform: none; }
  .cta.anim-cta > span[aria-hidden="true"] { translate: none !important; }
}