/* ============================================================================
   MOTION SYSTEM  —  transitions + entrance animations for "keynote" presence.
   ----------------------------------------------------------------------------
   Philosophy: motion should feel ENGINEERED, not sprinkled. One signature move
   (the COLOR-BAR WIPE that reveals a hero word) carries the personality; every-
   thing else is quiet, fast, expo-eased. Fully honors prefers-reduced-motion.
   ----------------------------------------------------------------------------
   Timing tokens
   ========================================================================== */
:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.30, 1);   /* premium settle           */
  --ease-power: cubic-bezier(0.7, 0, 0.2, 1);    /* decisive block wipes      */
  --dur-xs: 260ms; --dur-s: 420ms; --dur-m: 620ms; --dur-l: 900ms;
  --stagger: 70ms;
}

/* ---------- reveal.js slide TRANSITIONS ------------------------------------ */
/* Default is a soft slide; section dividers fade; the signature is block-wipe. */

/* Signature: an accent block sweeps across as the slide enters */
.reveal .slides section[data-transition~="block"] { }
.reveal[data-transition-block] .slides section.present::after,
section.block-wipe::after {
  content: ""; position: absolute; inset: 0; z-index: 50;
  background: var(--accent); transform-origin: left;
  animation: blockWipe var(--dur-m) var(--ease-power) forwards;
  pointer-events: none;
}
@keyframes blockWipe {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- Entrance animations (add class to any element) ----------------- */
/* fade-up: the default reveal for copy + list rows */
.anim-up   { opacity: 0; transform: translateY(1.4rem); }
.anim-left { opacity: 0; transform: translateX(-1.6rem); }
.anim-scale{ opacity: 0; transform: scale(0.94); }

.reveal section.present .anim-up,
.reveal section.present .anim-left,
.reveal section.present .anim-scale {
  animation: settle var(--dur-s) var(--ease-expo) forwards;
}
@keyframes settle { to { opacity: 1; transform: none; } }

/* Staggered children: put .stagger on a container, .anim-up on the kids */
.reveal section.present .stagger > * { opacity: 0; transform: translateY(1.1rem);
  animation: settle var(--dur-s) var(--ease-expo) forwards; }
.reveal section.present .stagger > *:nth-child(1) { animation-delay: calc(var(--stagger) * 1); }
.reveal section.present .stagger > *:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.reveal section.present .stagger > *:nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
.reveal section.present .stagger > *:nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
.reveal section.present .stagger > *:nth-child(5) { animation-delay: calc(var(--stagger) * 5); }
.reveal section.present .stagger > *:nth-child(6) { animation-delay: calc(var(--stagger) * 6); }
.reveal section.present .stagger > *:nth-child(7) { animation-delay: calc(var(--stagger) * 7); }
.reveal section.present .stagger > *:nth-child(8) { animation-delay: calc(var(--stagger) * 8); }

/* ---------- SIGNATURE: color-bar clip reveal on the hero word -------------- */
/* Wrap a hero word in .clip-reveal; a colored bar sweeps across and the text
   is unmasked behind it. This is the deck's one memorable move.               */
.clip-reveal { position: relative; display: inline-block; overflow: hidden; }
.clip-reveal > .clip-text { display: inline-block; opacity: 0;
  transform: translateY(0.12em); }
.clip-reveal::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}
.reveal section.present .clip-reveal::before {
  animation: barSweep var(--dur-l) var(--ease-power) forwards;
}
.reveal section.present .clip-reveal > .clip-text {
  animation: clipText 1ms linear forwards; animation-delay: calc(var(--dur-l) * 0.5);
}
@keyframes barSweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  48%  { transform: scaleX(1); transform-origin: left; }
  52%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes clipText { to { opacity: 1; transform: none; } }

/* Blocks that scale in from their own edge */
.reveal section.present .block.anim-block { transform-origin: var(--origin, left);
  animation: blockGrow var(--dur-m) var(--ease-power) forwards; }
@keyframes blockGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Ambient: a very slow drift for hero photos (optional, subtle) */
.ken-burns img { animation: ken 14s ease-in-out infinite alternate; }
@keyframes ken { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- Accessibility: reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal section.present .clip-reveal::before,
  .reveal section.present .clip-reveal > .clip-text,
  .reveal section.present .stagger > *,
  .reveal section.present .anim-up,
  .reveal section.present .anim-left,
  .reveal section.present .anim-scale,
  .reveal section.present .block.anim-block,
  section.block-wipe::after,
  .ken-burns img {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================================
   MOTION v2 — richer entrances, ambient life, and hover interactivity.
   Applies deck-wide with no per-slide markup (except the entrance utilities).
   Fully disabled under prefers-reduced-motion at the end.
   ========================================================================== */

/* ---------- Extra entrance utilities -------------------------------------- */
.anim-rise  { opacity: 0; transform: translateY(2.4rem); }
.anim-right { opacity: 0; transform: translateX(1.8rem); }
.anim-pop   { opacity: 0; transform: scale(0.82); }
.anim-blur  { opacity: 0; filter: blur(16px); }
.reveal section.present .anim-rise,
.reveal section.present .anim-right,
.reveal section.present .anim-pop {
  animation: settle var(--dur-m) var(--ease-expo) forwards;
}
.reveal section.present .anim-blur { animation: settleBlur var(--dur-l) var(--ease-expo) forwards; }
@keyframes settleBlur { to { opacity: 1; filter: blur(0); transform: none; } }

/* Longer stagger cascade for bigger lists */
.reveal section.present .stagger > *:nth-child(9)  { animation-delay: calc(var(--stagger)*9); }
.reveal section.present .stagger > *:nth-child(10) { animation-delay: calc(var(--stagger)*10); }
.reveal section.present .stagger > *:nth-child(11) { animation-delay: calc(var(--stagger)*11); }
.reveal section.present .stagger > *:nth-child(12) { animation-delay: calc(var(--stagger)*12); }

/* ---------- Ambient life (subtle, infinite) ------------------------------- */
/* Vertical flow arrows bob to imply forward motion */
.reveal section.present .flow:not(.row) .arrow { animation: arrowBob 1.9s var(--ease-expo) infinite; }
@keyframes arrowBob { 0%,100% { opacity:.55; transform: translateY(-1px); } 50% { opacity:1; transform: translateY(3px); } }

/* The two key loop nodes breathe to pull the eye around the cycle */
.reveal section.present .loop .node.on { animation: nodeBreathe 2.4s ease-in-out infinite; }
@keyframes nodeBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Section numerals glow up on entry */
.reveal section.present .numeral { animation: numeralIn var(--dur-l) var(--ease-expo) both; }
@keyframes numeralIn { from { opacity:0; transform: translateY(0.14em) scale(0.9); } to { opacity:1; transform:none; } }

/* ---------- Hover micro-interactions (interactivity, deck-wide) ----------- */
.refgrid { perspective: 1000px; }
.refcard { transition: transform .28s var(--ease-expo), box-shadow .28s var(--ease-expo), background .2s, color .2s; will-change: transform; }
.refcard:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--accent); }
.refcard:hover h4 { color: var(--accent); }

.rows .row { transition: background .22s var(--ease-expo), color .22s, padding .22s var(--ease-expo); }
.rows .row:hover { background: var(--accent); color: var(--on-accent); padding-left: .7em; }
.rows .row:hover .dot { border-color: var(--on-accent); }

.list li { transition: transform .2s var(--ease-expo); }
.list li:hover { transform: translateX(.45rem); }

.loop .node { transition: transform .2s var(--ease-expo), background .2s, color .2s, border-color .2s; }
.loop .node:hover { transform: translateY(-5px); background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.flow:not(.row) .step { transition: transform .2s var(--ease-expo), color .2s; }
.flow:not(.row) .step:hover { transform: translateX(.5rem); color: var(--accent); }

.tag { transition: transform .2s var(--ease-expo); }
.tag:hover { transform: translateY(-2px) rotate(-1.5deg); }

.pointlist li.yes { transition: transform .2s var(--ease-expo); }
.pointlist li.yes:hover { transform: translateX(.4rem) scale(1.02); }

/* ---------- Themed reveal chrome ------------------------------------------ */
.reveal .progress { height: 4px; color: #E5352B; }
/* Smaller, subtler bottom-right nav arrows (brighten on hover) */
.reveal .controls { color: #E5352B; transform: scale(0.5); transform-origin: 100% 100%; opacity: 0.4; transition: opacity .3s; }
.reveal .controls:hover { opacity: 0.9; }
.reveal .controls .navigate-left.enabled:hover,
.reveal .controls .navigate-right.enabled:hover,
.reveal .controls .navigate-up.enabled:hover,
.reveal .controls .navigate-down.enabled:hover { opacity: 1; transform: scale(1.15); }

/* ---------- Reduced motion: kill v2 additions ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal section.present .anim-rise,
  .reveal section.present .anim-right,
  .reveal section.present .anim-pop,
  .reveal section.present .anim-blur,
  .reveal section.present .flow .arrow,
  .reveal section.present .loop .node.on,
  .reveal section.present .numeral {
    animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important;
  }
  .refcard, .rows .row, .list li, .loop .node, .flow .step, .tag, .pointlist li { transition: none !important; }
}