/* Motion is opt-in after JS setup. No class means ordinary visible content. */
html[data-ema-motion="on"] [data-ema-reveal] {
  translate: 0 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), translate .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--ema-delay, 0ms);
}
html[data-ema-motion="on"] [data-ema-reveal="pending"]:not([data-ema-kind="drawing"]) {
  opacity: 0;
  translate: 0 20px;
}
html[data-ema-motion="on"] [data-ema-intro][data-ema-reveal="pending"] {
  translate: 0 16px;
  transition: none;
}
/* Opening keyframes do not depend on the pending style receiving a paint. */
html[data-ema-motion="on"] [data-ema-intro][data-ema-reveal="shown"]:not([data-ema-kind="drawing"]) {
  transition: none;
  animation: ema-intro-in .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--ema-delay, 0ms);
}
@keyframes ema-intro-in {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
html[data-ema-motion="on"] [data-ema-kind="drawing"] { translate: none; }
html[data-ema-motion="on"] [data-ema-stroke] {
  stroke-dasharray: var(--ema-stroke);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s ease;
  transition-delay: var(--ema-delay, 0ms);
}
html[data-ema-motion="on"] [data-ema-reveal="pending"] [data-ema-stroke] {
  stroke-dashoffset: var(--ema-stroke);
}
html[data-ema-motion="on"] [data-ema-reveal] .margin-drawing > span,
html[data-ema-motion="on"] .margin-drawing[data-ema-reveal] > span {
  transition: opacity .5s ease, translate .5s ease;
  transition-delay: calc(var(--ema-delay, 0ms) + 180ms);
}
html[data-ema-motion="on"] [data-ema-reveal="pending"] .margin-drawing > span,
html[data-ema-motion="on"] .margin-drawing[data-ema-reveal="pending"] > span {
  opacity: 0;
  translate: 0 5px;
}
html[data-ema-motion="on"] [data-ema-intro][data-ema-reveal="shown"] [data-ema-stroke] {
  transition: none;
  animation: ema-stroke-in .8s ease both;
  animation-delay: var(--ema-delay, 0ms);
}
html[data-ema-motion="on"] .margin-drawing[data-ema-intro][data-ema-reveal="shown"] > span {
  transition: none;
  animation: ema-label-in .5s ease both;
  animation-delay: calc(var(--ema-delay, 0ms) + 180ms);
}
@keyframes ema-stroke-in {
  from { stroke-dashoffset: var(--ema-stroke); }
  to { stroke-dashoffset: 0; }
}
@keyframes ema-label-in {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
/* v17: finite motion roles for type, scene and a small reaction inside a scene. */
html[data-ema-motion="on"] .pop-title-line {
  transform-origin: center;
}
html[data-ema-motion="on"] [data-ema-reveal="pending"] .pop-title-line {
  opacity: 0;
  scale: .96;
  translate: 0 12px;
}
html[data-ema-motion="on"] [data-ema-reveal="shown"] .pop-title-line {
  animation: ema-pop-title .65s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--ema-delay, 0ms) + var(--ema-line-delay, 0ms));
}
@keyframes ema-pop-title {
  from { opacity: 0; scale: .96; translate: 0 12px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}
/* A scene either owns a reveal or follows its nearest revealed block, never both. */
html[data-ema-motion="on"] .pop-scene[data-ema-reveal] {
  translate: none;
  transition: none;
}
html[data-ema-motion="on"] .pop-scene {
  transform-origin: center;
}
html[data-ema-motion="on"] [data-ema-reveal="pending"] .pop-scene,
html[data-ema-motion="on"] .pop-scene[data-ema-reveal="pending"] {
  opacity: 0;
  scale: .82;
}
html[data-ema-motion="on"] [data-ema-reveal="shown"] .pop-scene,
html[data-ema-motion="on"] .pop-scene[data-ema-reveal="shown"],
html[data-ema-motion="on"] .pop-scene[data-ema-intro][data-ema-reveal="shown"] {
  animation: ema-pop-scene .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--ema-delay, 0ms);
}
@keyframes ema-pop-scene {
  0% { opacity: 0; scale: .82; }
  72% { opacity: 1; scale: 1.025; }
  100% { opacity: 1; scale: 1; }
}
html[data-ema-motion="on"] .pop-spark {
  transform-box: fill-box;
  transform-origin: center;
}
html[data-ema-motion="on"] [data-ema-reveal="pending"] .pop-spark {
  opacity: 0;
  scale: .6;
  rotate: -12deg;
}
html[data-ema-motion="on"] [data-ema-reveal="shown"] .pop-spark {
  animation: ema-pop-spark .6s ease-out both;
  animation-delay: calc(var(--ema-delay, 0ms) + 220ms);
}
@keyframes ema-pop-spark {
  0% { opacity: 0; scale: .6; rotate: -12deg; }
  70% { opacity: 1; scale: 1.08; rotate: 3deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
html[data-ema-motion="on"] .brand-editorial-list > a { --ema-brand-shift: -18px; }
html[data-ema-motion="on"] .brand-editorial-list > a:nth-child(even) { --ema-brand-shift: 18px; }
html[data-ema-motion="on"] .brand-editorial-list > a[data-ema-reveal="pending"] {
  translate: var(--ema-brand-shift) 0;
}
@media (max-width: 600px) {
  html[data-ema-motion="on"] .brand-editorial-list > a[data-ema-reveal="pending"] {
    translate: 0 12px;
  }
}
html[data-ema-motion="on"] [data-ema-reveal="instant"] .pop-title-line,
html[data-ema-motion="on"] [data-ema-reveal="instant"] .pop-scene,
html[data-ema-motion="on"] .pop-scene[data-ema-reveal="instant"],
html[data-ema-motion="on"] [data-ema-reveal="instant"] .pop-spark {
  opacity: 1;
  scale: 1;
  translate: none;
  rotate: none;
  transition: none !important;
  animation: none !important;
}
html[data-ema-motion="on"] [data-ema-reveal="instant"],
html[data-ema-motion="on"] [data-ema-reveal="instant"] [data-ema-stroke],
html[data-ema-motion="on"] [data-ema-reveal="instant"] .margin-drawing > span,
html[data-ema-motion="on"] .margin-drawing[data-ema-reveal="instant"] > span {
  transition: none !important;
  animation: none !important;
}
html[data-ema-motion="on"] .ema-menu-enter {
  animation: ema-menu-in .22s ease both;
  animation-delay: var(--ema-menu-delay, 0ms);
}
@keyframes ema-menu-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
html[data-ema-motion="on"] .ema-menu-enter:focus-visible { animation: none; }
html[data-ema-motion="on"] .oval-link svg,
html[data-ema-motion="on"] .person img,
html[data-ema-motion="on"] .home-brand-logo { transition: translate .25s ease; }
html[data-ema-motion="on"] .oval-link:focus-visible svg { translate: 2px 0; }
html[data-ema-motion="on"] .person:focus-visible img { translate: 0 -3px; }
html[data-ema-motion="on"] .brand-editorial-list > a:focus-visible .home-brand-logo { translate: 0 -3px; }
@media (hover: hover) and (pointer: fine) {
  html[data-ema-motion="on"] .oval-link:hover svg { translate: 2px 0; }
  html[data-ema-motion="on"] .person:hover img,
  html[data-ema-motion="on"] .brand-editorial-list > a:hover .home-brand-logo { translate: 0 -3px; }
}
html[data-ema-motion="off"] { scroll-behavior: auto; }
/* Scene loops have independent visibility/preference controls. Entry fail-open
   must not permanently disable them after a hidden tab or restored history. */
html[data-ema-motion="off"] *:not(.ambient-part):not(.sakura-petal):not(.loading-dot),
html[data-ema-motion="off"] *::before,
html[data-ema-motion="off"] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior: auto !important; }
  [data-ema-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; animation: none !important; }
  [data-ema-stroke] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; animation: none !important; }
  .margin-drawing > span { opacity: 1 !important; translate: none !important; transition: none !important; animation: none !important; }
  .ema-menu-enter { opacity: 1 !important; translate: none !important; animation: none !important; }
  .pop-title-line, .pop-scene, .pop-spark { opacity: 1 !important; scale: 1 !important; translate: none !important; rotate: none !important; transition: none !important; animation: none !important; }
}