/* V15.7 M1 — prezentační vrstva animací. Funkční styly V15.6 zůstávají beze změny. */

body.motion-showcase {
  --motion-gold: #ffd982;
  --motion-gold-deep: #bd8530;
  --motion-green: #79c8a8;
  --motion-cream: #fff4df;
  --motion-rust: #b76643;
  --motion-ease: cubic-bezier(.16, .84, .24, 1);
}

body.motion-showcase .app-shell {
  isolation: isolate;
}

body.motion-showcase .app-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at var(--ambient-x, 82%) var(--ambient-y, 7%), rgba(255, 217, 130, .16), transparent 23%),
    radial-gradient(circle at 10% 55%, rgba(121, 200, 168, .08), transparent 28%);
  transition: background-position 1.2s ease;
}

body.motion-showcase .app-shell > * {
  position: relative;
  z-index: 1;
}

.motion-sound-toggle {
  position: relative;
  justify-self: end;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 130, .33);
  border-radius: 50%;
  background: rgba(2, 29, 24, .55);
  color: #d8cab0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.18);
  transition: transform .35s var(--motion-ease), border-color .35s, color .35s, box-shadow .35s;
}

.motion-sound-toggle::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #786f61;
  box-shadow: 0 0 0 2px #032a22;
  transition: background .3s, box-shadow .3s, transform .3s;
}

.motion-sound-toggle span {
  font: 600 1rem/1 Georgia, serif;
  transform: translateY(-1px);
}

.motion-sound-toggle[aria-pressed="true"] {
  border-color: rgba(255, 217, 130, .78);
  color: var(--motion-gold);
  box-shadow: 0 0 24px rgba(214, 168, 77, .18), inset 0 0 0 1px rgba(255,255,255,.05);
}

.motion-sound-toggle[aria-pressed="true"]::after {
  background: var(--motion-green);
  box-shadow: 0 0 0 2px #032a22, 0 0 12px rgba(121, 200, 168, .75);
  transform: scale(1.08);
}

.motion-sound-toggle:hover {
  transform: rotate(8deg) scale(1.06);
}

.motion-sound-toggle:focus-visible {
  outline: 3px solid rgba(255, 217, 130, .55);
  outline-offset: 3px;
}

.motion-intro {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 50%;
  width: min(520px, 100vw);
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 42%, rgba(21, 100, 77, .46), transparent 28%),
    radial-gradient(circle at 50% 50%, #073c30, #021c17 65%, #010f0c);
  color: var(--motion-cream);
  cursor: pointer;
}

.motion-intro::before,
.motion-intro::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.motion-intro::before {
  width: 72vmin;
  height: 72vmin;
  max-width: 390px;
  max-height: 390px;
  border: 1px solid rgba(255, 217, 130, .2);
  box-shadow: 0 0 0 28px rgba(255,255,255,.018), 0 0 110px rgba(121, 200, 168, .11);
  animation: motionIntroOrbit 7s linear infinite;
}

.motion-intro::after {
  width: 220px;
  height: 220px;
  border: 42px solid rgba(239, 218, 178, .08);
  border-right-color: rgba(255, 217, 130, .68);
  filter: drop-shadow(0 0 30px rgba(255, 217, 130, .12));
  transform: rotate(-42deg) scale(.55);
  animation: motionIntroEnso 1.25s .08s var(--motion-ease) both;
}

.motion-intro-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}

.motion-intro-copy span,
.motion-intro-copy strong {
  display: block;
  opacity: 0;
  transform: translateY(26px);
  animation: motionWordRise .72s var(--motion-ease) forwards;
}

.motion-intro-copy span {
  color: #d9c7a5;
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.motion-intro-copy span:nth-child(1) { animation-delay: .28s; }
.motion-intro-copy span:nth-child(2) { animation-delay: .62s; }

.motion-intro-copy strong {
  margin-top: 8px;
  color: #fff0d3;
  font-size: clamp(2.6rem, 12vw, 4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
  animation-delay: .96s;
}

.motion-intro.is-leaving {
  animation: motionIntroLeave .78s var(--motion-ease) both;
}

.motion-curtain {
  position: fixed;
  z-index: 105;
  top: 0;
  left: 50%;
  width: min(520px, 100vw);
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  background: rgba(2, 29, 24, 0);
  backdrop-filter: blur(0);
  pointer-events: none;
  transform: translateX(-50%);
}

.motion-curtain span {
  position: relative;
  padding: 0 22px 14px;
  opacity: 0;
  color: #f7dfaa;
  font: italic 400 clamp(1.15rem, 5.2vw, 1.55rem)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 5px 24px rgba(0, 0, 0, .6);
  transform: translateY(12px) scale(.97);
  will-change: opacity, transform;
}

.motion-curtain span::after {
  content: "";
  position: absolute;
  right: 28%;
  bottom: 0;
  left: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 130, .9), transparent);
  transform: scaleX(0);
}

.motion-curtain.is-sweeping {
  animation: motionCurtainVeil .66s ease-in-out both;
}

.motion-curtain.is-sweeping span {
  animation: motionCurtainWord .66s var(--motion-ease) both;
}

.motion-curtain.is-sweeping span::after {
  animation: motionCurtainLine .66s var(--motion-ease) both;
}

.motion-showcase .app-header {
  animation: motionHeaderDrop .78s .2s var(--motion-ease) both;
}

.motion-showcase .brand-lockup img {
  transform-origin: center;
  animation: motionEnsoWake 1.1s .42s var(--motion-ease) both;
}

.motion-showcase .today-card {
  overflow: hidden;
}

.motion-showcase .today-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 130, .72), transparent);
  transform: scaleX(0);
  transform-origin: center;
  animation: motionLineWrite .9s 1.6s var(--motion-ease) forwards;
}

.motion-showcase .home-hero {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1000px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .65s var(--motion-ease), box-shadow .65s var(--motion-ease);
  will-change: transform;
}

.motion-showcase .home-hero:hover {
  box-shadow: 0 32px 86px rgba(0,0,0,.52), 0 0 0 1px rgba(255, 217, 130, .08);
}

.motion-showcase .home-hero::after {
  background:
    linear-gradient(118deg, transparent 28%, rgba(255, 236, 190, .16) 42%, transparent 55%) -180% 0 / 230% 100% no-repeat;
  animation: motionHeroSheen 6.5s 2.2s ease-in-out infinite;
}

.motion-showcase .hero-copy {
  transform: translateZ(36px);
}

.motion-showcase .home-hero .eyebrow {
  animation: motionEyebrow .78s 1.45s var(--motion-ease) both;
}

.motion-showcase .home-hero h1 {
  animation: motionTitleReveal 1s 1.55s var(--motion-ease) both;
}

.motion-showcase .home-hero .hero-copy > p:last-child {
  animation: motionCopyReveal .82s 1.82s var(--motion-ease) both;
}

.motion-showcase .gold-button,
.motion-showcase .outline-button,
.motion-showcase .round-link,
.motion-showcase .choice,
.motion-showcase .date-choice,
.motion-showcase .time-grid button,
.motion-showcase .gender-card,
.motion-showcase .stack-options button,
.motion-showcase .album-grid button,
.motion-showcase .music-options button,
.motion-showcase .shia-options button,
.motion-showcase .feedback-options button,
.motion-showcase .body-side-toggle button,
.motion-showcase .home-actions button,
.motion-showcase .last-visit-card,
.motion-showcase .bottom-nav button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motion-showcase .gold-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 34%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-220%) rotate(13deg);
  pointer-events: none;
}

.motion-showcase .gold-button:hover::after {
  opacity: 1;
  animation: motionButtonSweep .72s var(--motion-ease) both;
}

.motion-showcase .gold-button:active,
.motion-showcase .outline-button:active,
.motion-showcase .round-link:active,
.motion-showcase .bottom-nav button:active {
  transform: translateY(1px) scale(.985);
}

.motion-showcase .outline-button {
  transition: color .32s ease, background .32s ease, box-shadow .32s ease;
}

.motion-showcase .outline-button:hover {
  color: #fff2d4;
  background: rgba(214, 168, 77, .1);
  box-shadow: 0 0 0 4px rgba(214, 168, 77, .07), inset 0 0 16px rgba(214, 168, 77, .06);
}

.motion-showcase .choice {
  transition: transform .38s var(--motion-ease), border-color .38s ease, box-shadow .38s ease;
  transform-origin: 35% 100%;
}

.motion-showcase .choice:hover {
  transform: translateY(-4px) rotate(-.45deg);
  border-color: rgba(255, 217, 130, .62);
  box-shadow: 0 12px 23px rgba(0, 0, 0, .24);
}

.motion-showcase .choice:nth-child(even):hover {
  transform: translateY(-4px) rotate(.45deg);
}

.motion-showcase .date-choice::before {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 6px;
  left: 18%;
  height: 2px;
  border-radius: 2px;
  background: var(--motion-gold);
  transform: scaleX(0);
  transition: transform .38s var(--motion-ease);
}

.motion-showcase .date-choice strong {
  transition: transform .38s var(--motion-ease), color .38s ease;
}

.motion-showcase .date-choice:hover::before { transform: scaleX(1); }
.motion-showcase .date-choice:hover strong { transform: translateY(-3px) scale(1.08); color: #fff1cd; }

.motion-showcase .time-grid button {
  transition: transform .34s var(--motion-ease), border-radius .34s ease, box-shadow .34s ease;
}

.motion-showcase .time-grid button:hover {
  transform: scale(1.045);
  border-radius: 26px;
  box-shadow: 0 0 0 4px rgba(255, 217, 130, .08), 0 10px 22px rgba(0, 0, 0, .2);
}

.motion-showcase .gender-card img,
.motion-showcase .gender-card strong {
  transition: transform .62s var(--motion-ease), letter-spacing .42s ease, filter .62s ease;
}

.motion-showcase .gender-card:hover img {
  transform: translateY(-5px) scale(1.045);
  filter: saturate(1.08) contrast(1.03);
}

.motion-showcase .gender-card:hover strong { letter-spacing: .045em; }

.motion-showcase .stack-options button {
  transition: transform .42s var(--motion-ease), border-color .32s ease, background .32s ease;
}

.motion-showcase .stack-options button > span {
  transition: transform .5s var(--motion-ease), background .38s ease;
}

.motion-showcase .stack-options button:hover {
  transform: translateX(7px);
  border-color: rgba(255, 217, 130, .52);
  background: rgba(8, 65, 52, .68);
}

.motion-showcase .stack-options button:hover > span {
  transform: rotate(-9deg) scale(1.11);
  background: rgba(214, 168, 77, .12);
}

.motion-showcase .album-grid button { transition: transform .42s var(--motion-ease), border-color .3s ease; }
.motion-showcase .album-art { transition: transform .7s var(--motion-ease), filter .55s ease; }
.motion-showcase .album-grid button:hover { transform: translateY(-5px); border-color: rgba(255, 217, 130, .58); }
.motion-showcase .album-grid button:hover .album-art { transform: rotate(8deg) scale(1.07); filter: brightness(1.12); }

.motion-showcase .music-options button {
  background-image: radial-gradient(circle at 12% 50%, rgba(214, 168, 77, .12), transparent 28%);
  background-position: -70px 0;
  background-repeat: no-repeat;
  transition: background-position .55s var(--motion-ease), border-color .32s ease;
}

.motion-showcase .music-options button:hover {
  background-position: 0 0;
  border-color: rgba(255, 217, 130, .54);
}

.motion-showcase .music-options button:hover .music-symbol {
  animation: motionMusicBeat .68s var(--motion-ease) both;
}

.motion-showcase .shia-options button { transition: transform .42s var(--motion-ease), border-color .32s ease; }
.motion-showcase .shia-options button > span { transition: transform .52s var(--motion-ease), box-shadow .4s ease; }
.motion-showcase .shia-options button:hover { transform: translateX(6px); border-color: rgba(255, 217, 130, .55); }
.motion-showcase .shia-options button:hover > span { transform: scale(1.09); box-shadow: 0 0 18px rgba(214, 168, 77, .22); }

.motion-showcase .feedback-options button { transition: letter-spacing .34s ease, background .34s ease, border-color .34s ease; }
.motion-showcase .feedback-options button:hover { letter-spacing: .035em; background: rgba(12, 76, 61, .7); border-color: rgba(255, 217, 130, .48); }

.motion-showcase .home-actions button { transition: transform .42s var(--motion-ease), border-color .32s ease, background .32s ease; }
.motion-showcase .home-actions button > span { transition: transform .55s var(--motion-ease); }
.motion-showcase .home-actions button:hover { transform: translateY(-3px); border-color: rgba(255, 217, 130, .5); background: rgba(7, 61, 49, .86); }
.motion-showcase .home-actions button:hover > span { transform: rotate(12deg) scale(1.08); }

.motion-showcase .last-visit-card { transition: transform .48s var(--motion-ease), border-color .34s ease, box-shadow .42s ease; }
.motion-showcase .last-visit-card strong { transition: transform .48s var(--motion-ease), color .34s ease; }
.motion-showcase .last-visit-card:hover { transform: translateY(-3px); border-color: rgba(255, 217, 130, .52); box-shadow: 0 14px 30px rgba(0, 0, 0, .24); }
.motion-showcase .last-visit-card:hover strong { transform: translateX(-5px); color: #fff1d2; }

.motion-ripple {
  position: absolute;
  z-index: 8;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid rgba(255, 231, 174, .9);
  border-radius: 50%;
  background: rgba(255, 217, 130, .22);
  pointer-events: none;
  animation: motionRipple .68s ease-out forwards;
}

.motion-particle {
  position: absolute;
  z-index: 95;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--motion-gold);
  box-shadow: 0 0 10px rgba(255, 217, 130, .8);
  pointer-events: none;
  animation: motionParticleFly .72s ease-out forwards;
}

.motion-showcase .progress {
  position: relative;
  overflow: visible;
}

.motion-showcase .progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 217, 130, .8);
  border-radius: 50%;
  background: #0a3a2f;
  box-shadow: 0 0 16px rgba(255, 217, 130, .6);
  transform: translate(-50%, -50%);
  animation: motionProgressBreath 2.4s ease-in-out infinite;
}

.motion-showcase .progress i {
  position: relative;
  overflow: visible;
  box-shadow: 0 0 14px rgba(255, 217, 130, .26);
}

.motion-showcase .progress i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--motion-gold);
  box-shadow: 0 0 18px rgba(255, 217, 130, .72);
  transform: translate(50%, -50%);
}

.motion-showcase .step.active > .eyebrow,
.motion-showcase .step.active > h2,
.motion-showcase .step.active > .step-lead {
  will-change: transform, opacity, clip-path;
}

.motion-showcase .choice.selected,
.motion-showcase .date-choice.selected,
.motion-showcase .time-grid button.selected,
.motion-showcase .gender-card.selected,
.motion-showcase .stack-options button.selected,
.motion-showcase .album-grid button.selected,
.motion-showcase .shia-options button.selected,
.motion-showcase .feedback-options button.selected {
  overflow: visible;
}

.motion-showcase .motion-stamped::before {
  content: "✓";
  position: absolute;
  z-index: 10;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 217, 130, .92);
  border-radius: 50%;
  background: rgba(7, 55, 45, .94);
  color: var(--motion-gold);
  font: 700 .72rem/1 var(--sans);
  box-shadow: 0 0 0 4px rgba(255, 217, 130, .08), 0 7px 17px rgba(0,0,0,.25);
  animation: motionStamp .5s var(--motion-ease) both;
}

.motion-showcase .hotspot.active {
  animation: motionHotspotPulse 1.8s ease-in-out infinite;
}

.motion-showcase .body-map {
  transition: box-shadow .65s var(--motion-ease), transform .65s var(--motion-ease);
}

.motion-showcase .body-map:has(.hotspot.active) {
  box-shadow: inset 0 0 34px rgba(0,0,0,.38), 0 20px 50px rgba(0,0,0,.25), 0 0 32px rgba(255, 217, 130, .08);
}

.motion-showcase .body-side-toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border: 1px solid rgba(255, 217, 130, .55);
  border-radius: 99px;
  background: linear-gradient(145deg, rgba(232,185,80,.18), rgba(23,92,69,.42));
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .48s var(--motion-ease);
  pointer-events: none;
}

.motion-showcase .body-side-toggle:has([data-side="front"].selected)::after {
  transform: translateX(100%);
}

.motion-showcase .body-side-toggle button {
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
}

.motion-showcase details[open] > :not(summary) {
  animation: motionDetailsOpen .52s var(--motion-ease) both;
}

.motion-showcase .toast.show {
  animation: motionToastPop .55s var(--motion-ease) both;
}

.motion-showcase .success-icon {
  animation: motionSuccessHalo 1.45s var(--motion-ease) both;
}

.motion-showcase .success-card h1 {
  animation: motionTitleReveal .9s .22s var(--motion-ease) both;
}

.motion-showcase .app-shell {
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}

.motion-showcase[data-current-view="home"] .home-actions {
  margin-bottom: 0;
}

.motion-showcase .bottom-nav {
  position: relative;
  inset: auto;
  margin: 28px 0 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px);
  transition: border-color .42s ease, box-shadow .42s ease;
}

.motion-showcase .bottom-nav:hover {
  border-color: rgba(236, 194, 103, .42);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .4);
}

.motion-showcase .bottom-nav button span {
  transition: transform .36s var(--motion-ease), color .3s ease;
}

.motion-showcase .bottom-nav button:hover span {
  transform: translateY(-2px) scale(1.08);
  color: #ffe29d;
}

.motion-showcase .bottom-nav button.active span {
  animation: motionNavIcon .52s var(--motion-ease) both;
}

@keyframes motionHeaderDrop {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionEnsoWake {
  0% { opacity: 0; transform: rotate(-105deg) scale(.45); filter: blur(5px); }
  65% { opacity: 1; transform: rotate(7deg) scale(1.08); filter: blur(0); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes motionLineWrite {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes motionHeroSheen {
  0%, 60% { background-position: -180% 0; }
  82%, 100% { background-position: 210% 0; }
}

@keyframes motionEyebrow {
  from { opacity: 0; transform: translateX(-24px); letter-spacing: .42em; }
  to { opacity: 1; transform: translateX(0); letter-spacing: .2em; }
}

@keyframes motionTitleReveal {
  from { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(30px); }
  to { opacity: 1; clip-path: inset(0 0 0); transform: translateY(0); }
}

@keyframes motionCopyReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionButtonSweep {
  from { transform: translateX(-220%) rotate(13deg); }
  to { transform: translateX(520%) rotate(13deg); }
}

@keyframes motionRipple {
  from { opacity: 1; transform: scale(.3); }
  to { opacity: 0; transform: scale(9); }
}

@keyframes motionParticleFly {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.15); }
}

@keyframes motionProgressBreath {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.72); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes motionStamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-28deg); filter: blur(3px); }
  68% { opacity: 1; transform: scale(.88) rotate(4deg); filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes motionHotspotPulse {
  0%, 100% { transform: scale(.96); box-shadow: 0 0 13px rgba(255,211,109,.36), inset 0 0 8px rgba(255,255,255,.12); }
  50% { transform: scale(1.08); box-shadow: 0 0 27px rgba(255,211,109,.72), inset 0 0 13px rgba(255,255,255,.22); }
}

@keyframes motionDetailsOpen {
  from { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100%); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}

@keyframes motionToastPop {
  0% { opacity: 0; transform: translate(-50%, 32px) scale(.92); }
  65% { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes motionSuccessHalo {
  0% { opacity: 0; transform: scale(.25) rotate(-80deg); box-shadow: 0 0 0 rgba(214,168,77,0); }
  62% { opacity: 1; transform: scale(1.16) rotate(7deg); box-shadow: 0 0 55px rgba(214,168,77,.42); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 28px rgba(214,168,77,.18); }
}

@keyframes motionNavIcon {
  0% { transform: translateY(8px) scale(.55); opacity: .2; }
  70% { transform: translateY(-2px) scale(1.14); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes motionMusicBeat {
  0% { transform: rotate(0) scale(1); }
  42% { transform: rotate(-12deg) scale(1.16); box-shadow: 0 0 20px rgba(214, 168, 77, .24); }
  100% { transform: rotate(0) scale(1.04); }
}

@keyframes motionIntroOrbit {
  to { transform: rotate(360deg); }
}

@keyframes motionIntroEnso {
  0% { opacity: 0; transform: rotate(-180deg) scale(.35); }
  70% { opacity: 1; transform: rotate(-34deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-42deg) scale(1); }
}

@keyframes motionWordRise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionIntroLeave {
  0% { opacity: 1; clip-path: circle(145% at 50% 50%); }
  100% { opacity: 0; clip-path: circle(0 at 50% 48%); visibility: hidden; }
}

@keyframes motionCurtainVeil {
  0% { opacity: 0; background: rgba(2, 29, 24, 0); backdrop-filter: blur(0); }
  24%, 70% { opacity: 1; background: rgba(2, 29, 24, .16); backdrop-filter: blur(1px); }
  100% { opacity: 0; background: rgba(2, 29, 24, 0); backdrop-filter: blur(0); }
}

@keyframes motionCurtainWord {
  0% { opacity: 0; transform: translateY(12px) scale(.97); letter-spacing: .02em; }
  34%, 68% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: .055em; }
  100% { opacity: 0; transform: translateY(-8px) scale(1.01); letter-spacing: .075em; }
}

@keyframes motionCurtainLine {
  0%, 15% { opacity: 0; transform: scaleX(0); }
  44%, 70% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.25); }
}

@media (max-width: 380px) {
  .motion-sound-toggle {
    width: 38px;
    height: 38px;
  }

  .motion-intro-copy strong {
    font-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-showcase *,
  body.motion-showcase *::before,
  body.motion-showcase *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .motion-intro,
  .motion-curtain,
  .motion-particle,
  .motion-ripple {
    display: none !important;
  }

  .motion-showcase .home-hero,
  .motion-showcase .hero-copy {
    transform: none !important;
  }
}