/* TeamTales motion & depth pass
   Intentionally isolated from the core MVP styles so it can be merged or removed safely. */

:root {
  --tt-shadow-soft: 0 1px 2px rgba(45, 36, 29, .05), 0 10px 28px rgba(45, 36, 29, .07);
  --tt-shadow-raised: 0 2px 4px rgba(35, 27, 23, .06), 0 18px 44px rgba(35, 27, 23, .10);
  --tt-shadow-deep: 0 24px 65px rgba(34, 25, 38, .22);
  --tt-ease-out: cubic-bezier(.22, .8, .25, 1);
  --tt-ease-spring: cubic-bezier(.16, 1.15, .3, 1);
  --tt-fast: 160ms;
  --tt-normal: 280ms;
  --tt-slow: 460ms;
}

/* ----- Product shell: add weight without changing the brand ----- */
body.app-mode {
  background:
    radial-gradient(circle at 82% 3%, rgba(108, 75, 114, .055), transparent 27rem),
    linear-gradient(180deg, #f2eee6 0%, #efebe2 100%);
}

.app-mode .sidebar {
  border-right-color: #d5cfc4;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 28%),
    #e7e1d7;
  box-shadow: 8px 0 30px rgba(55, 46, 35, .025);
}

.app-mode .main-content {
  background:
    radial-gradient(circle at 90% 2%, rgba(244, 111, 97, .035), transparent 26rem),
    transparent;
}

.app-mode .paper-card {
  border-color: #d7d0c5;
  box-shadow: var(--tt-shadow-soft);
}

.app-mode .page-head > div:first-child > p:last-child,
.app-mode .quiet-label,
.app-mode .question-copy p,
.app-mode .answer-person small,
.app-mode .prompt-card small,
.app-mode .person-cell small {
  color: #68625b;
}

/* ----- Navigation ----- */
.app-mode .side-nav button {
  position: relative;
  transition:
    color var(--tt-fast) ease,
    background var(--tt-fast) ease,
    transform var(--tt-fast) var(--tt-ease-out),
    box-shadow var(--tt-fast) ease;
}

.app-mode .side-nav button::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -9px;
  width: 3px;
  border-radius: 99px;
  background: var(--coral);
  content: "";
  opacity: 0;
  transform: scaleY(.3);
  transition: opacity var(--tt-fast) ease, transform var(--tt-normal) var(--tt-ease-spring);
}

.app-mode .side-nav button:hover {
  transform: translateX(2px);
}

.app-mode .side-nav button.active {
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 1px 2px rgba(55,46,35,.04), 0 5px 16px rgba(55,46,35,.045);
}

.app-mode .side-nav button.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.app-mode .side-nav b.badge-pop,
.app-mode #collectCount.badge-pop,
.app-mode #draftCount.badge-pop {
  animation: tt-badge-pop 340ms var(--tt-ease-spring);
}

/* ----- Buttons feel tactile ----- */
.app-mode .button,
.portal-mode .button,
.app-mode .mini-icon,
.app-mode .row-actions button,
.app-mode .question-actions button,
.portal-mode .play-link {
  transition:
    transform var(--tt-fast) var(--tt-ease-out),
    box-shadow var(--tt-fast) ease,
    background var(--tt-fast) ease,
    border-color var(--tt-fast) ease,
    color var(--tt-fast) ease;
}

.app-mode .button:hover,
.portal-mode .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(42, 33, 28, .10);
}

.app-mode .button:active,
.portal-mode .button:active,
.app-mode .mini-icon:active,
.app-mode .question-actions button:active {
  transform: translateY(0) scale(.975);
}

.app-mode .button-dark:hover,
.portal-mode .button-dark:hover {
  box-shadow: 0 8px 20px rgba(32, 29, 26, .19);
}

.app-mode .button-coral:hover,
.portal-mode .button-coral:hover {
  box-shadow: 0 8px 20px rgba(217, 87, 75, .22);
}

/* ----- Page entrance ----- */
.app-mode .view.active.motion-enter > .page-head,
.app-mode .view.active.motion-enter > .event-hero,
.app-mode .view.active.motion-enter > .dashboard-grid,
.app-mode .view.active.motion-enter > .collect-layout,
.app-mode .view.active.motion-enter > .invite-stats,
.app-mode .view.active.motion-enter > .studio-summary,
.app-mode .view.active.motion-enter > .studio-toolbar,
.app-mode .view.active.motion-enter > .section-block,
.app-mode .view.active.motion-enter > .question-list {
  animation: tt-section-in var(--tt-slow) var(--tt-ease-out) both;
}

.app-mode .view.active.motion-enter > :nth-child(2) { animation-delay: 35ms; }
.app-mode .view.active.motion-enter > :nth-child(3) { animation-delay: 70ms; }
.app-mode .view.active.motion-enter > :nth-child(4) { animation-delay: 105ms; }
.app-mode .view.active.motion-enter > :nth-child(5) { animation-delay: 140ms; }

/* ----- Overview hero ----- */
.app-mode .event-hero {
  border-color: rgba(46, 34, 53, .18);
  background:
    radial-gradient(circle at 84% 66%, rgba(255,255,255,.14), transparent 27%),
    linear-gradient(125deg, #4d3b59 0%, #594565 55%, #493751 100%);
  box-shadow: var(--tt-shadow-deep);
}

.app-mode .event-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(25,17,31,.10));
  content: "";
  pointer-events: none;
}

.app-mode .float-card {
  border: 1px solid rgba(32, 29, 26, .10);
  box-shadow: 0 22px 50px rgba(19,12,21,.31), 0 2px 2px rgba(0,0,0,.10);
  transition: transform 260ms var(--tt-ease-spring), box-shadow 260ms ease;
  transform-origin: 50% 80%;
}

.app-mode #homeView.motion-enter .card-one { animation: tt-card-one 650ms 130ms var(--tt-ease-spring) both; }
.app-mode #homeView.motion-enter .card-two { animation: tt-card-two 650ms 205ms var(--tt-ease-spring) both; }
.app-mode #homeView.motion-enter .card-three { animation: tt-card-three 650ms 280ms var(--tt-ease-spring) both; }
.app-mode #homeView.motion-enter .spark { animation: tt-spark-in 480ms 470ms var(--tt-ease-spring) both; }

@media (hover: hover) and (pointer: fine) {
  .app-mode .event-art:hover .card-one { transform: translateY(-5px) rotate(-7deg); }
  .app-mode .event-art:hover .card-two { transform: translateY(-7px) rotate(6deg); }
  .app-mode .event-art:hover .card-three { transform: translateY(-4px) rotate(-1deg); }
  .app-mode .event-art:hover .float-card { box-shadow: 0 28px 58px rgba(19,12,21,.35); }
}

/* ----- Readiness becomes an active object, not a flat meter ----- */
.app-mode .progress-card,
.app-mode .pulse-card {
  transition: transform var(--tt-normal) var(--tt-ease-out), box-shadow var(--tt-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-mode .progress-card:hover,
  .app-mode .pulse-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tt-shadow-raised);
  }
}

.app-mode .card-heading > strong {
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.app-mode .progress-track {
  height: 8px;
  box-shadow: inset 0 1px 2px rgba(38,31,26,.05);
}

.app-mode .progress-track span {
  box-shadow: 0 0 0 1px rgba(244,111,97,.08), 0 2px 8px rgba(244,111,97,.20);
  transition: width 850ms var(--tt-ease-out);
}

.app-mode #homeView.motion-enter .readiness-steps button {
  animation: tt-row-in 360ms var(--tt-ease-out) both;
}
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(1) { animation-delay: 180ms; }
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(2) { animation-delay: 225ms; }
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(3) { animation-delay: 270ms; }
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(4) { animation-delay: 315ms; }
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(5) { animation-delay: 360ms; }
.app-mode #homeView.motion-enter .readiness-steps button:nth-child(6) { animation-delay: 405ms; }

.app-mode .readiness-steps button {
  border-radius: 8px;
  transition: background var(--tt-fast) ease, transform var(--tt-fast) var(--tt-ease-out);
}

.app-mode .readiness-steps button:hover {
  background: #f8f4ec;
  transform: translateX(3px);
}

.app-mode .readiness-steps button.done > span {
  box-shadow: 0 3px 10px rgba(107, 132, 48, .12);
}

.app-mode .mix-chart i {
  transform-origin: left center;
}
.app-mode #homeView.motion-enter .mix-chart i {
  animation: tt-grow-x 650ms 260ms var(--tt-ease-out) both;
}

/* ----- Cards and data surfaces ----- */
.app-mode .answer-card,
.app-mode .invite-stats article,
.app-mode .prompt-card,
.app-mode .question-card,
.app-mode .person-row {
  transition:
    transform var(--tt-normal) var(--tt-ease-out),
    box-shadow var(--tt-normal) ease,
    border-color var(--tt-fast) ease,
    background var(--tt-fast) ease;
}

.app-mode .answer-card,
.app-mode .invite-stats article,
.app-mode .prompt-card,
.app-mode .question-card {
  box-shadow: 0 1px 2px rgba(45,36,29,.03);
}

@media (hover: hover) and (pointer: fine) {
  .app-mode .answer-card:hover,
  .app-mode .invite-stats article:hover,
  .app-mode .prompt-card:hover,
  .app-mode .question-card:hover {
    border-color: #c9c0b4;
    box-shadow: 0 2px 4px rgba(45,36,29,.05), 0 12px 28px rgba(45,36,29,.075);
    transform: translateY(-3px);
  }
  .app-mode .person-row:hover { background: #fbf8f1; }
}

.app-mode .answer-quote { font-size: 1.12rem; }
.app-mode .prompt-card strong { font-size: 1rem; }
.app-mode .question-card { position: relative; overflow: hidden; }
.app-mode .question-card::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--q-color, var(--coral));
  content: "";
  opacity: .45;
  transition: opacity var(--tt-fast) ease, width var(--tt-fast) ease;
}
.app-mode .question-card:hover::after { width: 4px; opacity: .75; }

.app-mode .question-list.list-enter .question-card {
  animation: tt-question-in 380ms var(--tt-ease-out) both;
}
.app-mode .question-list.list-enter .question-card:nth-child(2) { animation-delay: 35ms; }
.app-mode .question-list.list-enter .question-card:nth-child(3) { animation-delay: 70ms; }
.app-mode .question-list.list-enter .question-card:nth-child(4) { animation-delay: 105ms; }
.app-mode .question-list.list-enter .question-card:nth-child(5) { animation-delay: 140ms; }
.app-mode .question-list.list-enter .question-card:nth-child(n+6) { animation-delay: 165ms; }

.app-mode .state-pill.approved,
.app-mode .state-pill.ready {
  box-shadow: inset 0 0 0 1px rgba(61,113,93,.06);
}

/* ----- Modals and toast feedback ----- */
.modal-backdrop:not(.hidden) {
  animation: tt-backdrop-in 180ms ease both;
}
.modal-backdrop:not(.hidden) .modal {
  animation: tt-modal-in 320ms var(--tt-ease-spring) both;
}

.toast {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(26,21,18,.26);
  transform: translateY(12px) scale(.985);
  transition: opacity 180ms ease, transform 240ms var(--tt-ease-spring);
}
.toast.show { transform: translateY(0) scale(1); }

/* ----- Live game: this is where TeamTales earns its motion ----- */
.app-mode .play-lobby {
  animation: tt-live-fade 420ms var(--tt-ease-out) both;
}
.app-mode .lobby-main,
.app-mode .game-stage {
  background-image:
    radial-gradient(circle at 50% -18%, rgba(255,255,255,.14), transparent 36%),
    radial-gradient(circle at 86% 88%, rgba(20,13,24,.15), transparent 34%);
}
.app-mode .join-card {
  box-shadow: 0 28px 75px rgba(57,41,17,.20);
  animation: tt-lobby-card 520ms 100ms var(--tt-ease-spring) both;
}
.app-mode .lobby-main > .eyebrow,
.app-mode .lobby-main > h1,
.app-mode .lobby-main > p,
.app-mode .lobby-actions {
  animation: tt-live-copy 460ms var(--tt-ease-out) both;
}
.app-mode .lobby-main > h1 { animation-delay: 55ms; }
.app-mode .lobby-main > p { animation-delay: 100ms; }
.app-mode .lobby-actions { animation-delay: 145ms; }

.app-mode .game-progress i { transition: width 700ms var(--tt-ease-out); }
.app-mode .game-top { animation: tt-live-top 340ms var(--tt-ease-out) both; }

.app-mode .question-intro > span {
  position: relative;
  isolation: isolate;
  animation: tt-intro-main-card 610ms var(--tt-ease-spring) both;
}
.app-mode .question-intro > span::before,
.app-mode .question-intro > span::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(32,29,26,.08);
  border-radius: inherit;
  content: "";
  box-shadow: 0 15px 34px rgba(0,0,0,.13);
}
.app-mode .question-intro > span::before {
  background: #ef8c7e;
  animation: tt-shuffle-left 610ms var(--tt-ease-spring) both;
}
.app-mode .question-intro > span::after {
  background: #dfeaa5;
  animation: tt-shuffle-right 610ms var(--tt-ease-spring) both;
}
.app-mode .question-intro p,
.app-mode .question-intro h1,
.app-mode .question-intro small {
  animation: tt-live-copy 420ms var(--tt-ease-out) both;
}
.app-mode .question-intro p { animation-delay: 130ms; }
.app-mode .question-intro h1 { animation-delay: 190ms; }
.app-mode .question-intro small { animation-delay: 250ms; }

.app-mode .question-stage .question-kicker { animation: tt-live-copy 360ms var(--tt-ease-out) both; }
.app-mode .question-stage > h1 { animation: tt-question-title 500ms 60ms var(--tt-ease-out) both; }
.app-mode .live-question-image { animation: tt-photo-in 520ms 40ms var(--tt-ease-spring) both; }

.app-mode .answer-options .answer-option {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 7px 20px rgba(22,15,25,.06);
  animation: tt-answer-in 400ms var(--tt-ease-out) both;
}
.app-mode .answer-options .answer-option:nth-child(1) { animation-delay: 125ms; }
.app-mode .answer-options .answer-option:nth-child(2) { animation-delay: 175ms; }
.app-mode .answer-options .answer-option:nth-child(3) { animation-delay: 225ms; }
.app-mode .answer-options .answer-option:nth-child(4) { animation-delay: 275ms; }

@media (hover: hover) and (pointer: fine) {
  .app-mode .answer-option:hover {
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.17);
    box-shadow: 0 12px 30px rgba(20,14,23,.12);
    transform: translateY(-3px) scale(1.008);
  }
}

.app-mode .reveal-person {
  animation: tt-reveal-person 620ms var(--tt-ease-spring) both;
}
.app-mode .reveal-copy .eyebrow,
.app-mode .reveal-copy h1,
.app-mode .reveal-copy > p,
.app-mode .reveal-actions {
  animation: tt-reveal-copy 460ms var(--tt-ease-out) both;
}
.app-mode .reveal-copy h1 { animation-delay: 90ms; }
.app-mode .reveal-copy > p { animation-delay: 165ms; }
.app-mode .reveal-actions { animation-delay: 235ms; }
.app-mode .mega-avatar,
.app-mode .mega-photo {
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
.app-mode .mega-photo { transform: rotate(-1.25deg); }

.app-mode .host-controls {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 -12px 34px rgba(0,0,0,.18);
  animation: tt-controls-in 360ms 220ms var(--tt-ease-out) both;
}
.app-mode .host-controls .control-primary {
  box-shadow: 0 5px 14px rgba(244,111,97,.24);
}

.app-mode .score-card {
  border: 1px solid rgba(57,41,17,.08);
  box-shadow: 0 30px 80px rgba(57,41,17,.20);
  animation: tt-score-in 620ms var(--tt-ease-spring) both;
}
.app-mode .completion-stats span {
  animation: tt-row-in 380ms var(--tt-ease-out) both;
}
.app-mode .completion-stats span:nth-child(2) { animation-delay: 70ms; }
.app-mode .completion-stats span:nth-child(3) { animation-delay: 140ms; }

/* ----- Landing page: preserve the editorial look, just make it breathe ----- */
.portal-mode .browser-frame {
  box-shadow: 0 35px 85px rgba(43, 31, 42, .22);
  animation: tt-marketing-product 720ms 120ms var(--tt-ease-spring) both;
  transition: transform 320ms var(--tt-ease-out), box-shadow 320ms ease;
}
.portal-mode .floating-reveal { animation: tt-reveal-sticker 650ms 430ms var(--tt-ease-spring) both; }
.portal-mode .marketing-copy > .hero-badge,
.portal-mode .marketing-copy > h1,
.portal-mode .marketing-copy > p,
.portal-mode .marketing-actions,
.portal-mode .hero-proof {
  animation: tt-marketing-copy 520ms var(--tt-ease-out) both;
}
.portal-mode .marketing-copy > h1 { animation-delay: 55ms; }
.portal-mode .marketing-copy > p { animation-delay: 110ms; }
.portal-mode .marketing-actions { animation-delay: 165ms; }
.portal-mode .hero-proof { animation-delay: 220ms; }

@media (hover: hover) and (pointer: fine) {
  .portal-mode .hero-product:hover .browser-frame {
    transform: translateY(-5px) rotate(.25deg);
    box-shadow: 0 42px 95px rgba(43,31,42,.27);
  }
  .portal-mode .value-card,
  .portal-mode .price-card,
  .portal-mode .format-card {
    transition: transform 260ms var(--tt-ease-out), box-shadow 260ms ease;
  }
  .portal-mode .value-card:hover,
  .portal-mode .price-card:hover,
  .portal-mode .format-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(50,40,33,.10);
  }
}

/* ----- Keyframes ----- */
@keyframes tt-section-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tt-row-in {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes tt-grow-x { from { transform: scaleX(.15); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
@keyframes tt-badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes tt-card-one { from { opacity: 0; transform: translate(28px, 22px) rotate(-2deg) scale(.86); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes tt-card-two { from { opacity: 0; transform: translate(-10px, 30px) rotate(1deg) scale(.86); } to { opacity: 1; transform: rotate(8deg) scale(1); } }
@keyframes tt-card-three { from { opacity: 0; transform: translate(-28px, 18px) rotate(3deg) scale(.86); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes tt-spark-in { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes tt-question-in { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tt-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-modal-in { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tt-live-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-lobby-card { from { opacity: 0; transform: translateX(18px) rotate(1deg) scale(.97); } to { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@keyframes tt-live-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-live-top { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-intro-main-card { from { opacity: 0; transform: translateY(18px) rotate(-4deg) scale(.78); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes tt-shuffle-left { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.88); } 55% { opacity: 1; transform: translate(-38px,8px) rotate(-13deg) scale(.94); } 100% { opacity: 1; transform: translate(-24px,6px) rotate(-8deg) scale(.96); } }
@keyframes tt-shuffle-right { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.88); } 55% { opacity: 1; transform: translate(38px,8px) rotate(13deg) scale(.94); } 100% { opacity: 1; transform: translate(24px,6px) rotate(8deg) scale(.96); } }
@keyframes tt-question-title { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tt-answer-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tt-photo-in { from { opacity: 0; transform: translateY(10px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: translateY(0) rotate(-.5deg) scale(1); } }
@keyframes tt-reveal-person { from { opacity: 0; transform: translateX(-20px) rotate(-2deg) scale(.9); } to { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@keyframes tt-reveal-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-controls-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-score-in { from { opacity: 0; transform: translateY(16px) rotate(-.8deg) scale(.965); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes tt-marketing-product { from { opacity: 0; transform: translateY(18px) rotate(1.2deg) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes tt-reveal-sticker { from { opacity: 0; transform: translate(15px, 15px) rotate(5deg) scale(.82); } to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } }
@keyframes tt-marketing-copy { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Reduced motion keeps every state obvious without decorative movement. */
@media (prefers-reduced-motion: reduce) {
  .app-mode .view.active.motion-enter > *,
  .app-mode #homeView.motion-enter .float-card,
  .app-mode #homeView.motion-enter .spark,
  .app-mode #homeView.motion-enter .readiness-steps button,
  .app-mode #homeView.motion-enter .mix-chart i,
  .app-mode .question-list.list-enter .question-card,
  .app-mode .question-intro > span,
  .app-mode .question-intro > span::before,
  .app-mode .question-intro > span::after,
  .app-mode .question-intro p,
  .app-mode .question-intro h1,
  .app-mode .question-intro small,
  .app-mode .question-stage *,
  .app-mode .reveal-stage *,
  .app-mode .host-controls,
  .app-mode .score-card,
  .portal-mode .browser-frame,
  .portal-mode .floating-reveal,
  .portal-mode .marketing-copy > * {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .app-mode .paper-card { box-shadow: 0 1px 2px rgba(45,36,29,.04), 0 7px 20px rgba(45,36,29,.05); }
  .app-mode .question-card:hover,
  .app-mode .answer-card:hover,
  .app-mode .prompt-card:hover { transform: none; }
  .app-mode .question-intro > span::before { transform: translate(-15px,5px) rotate(-6deg) scale(.96); }
  .app-mode .question-intro > span::after { transform: translate(15px,5px) rotate(6deg) scale(.96); }
}

/* Icon geometry lives in the local SVG sprite. Motion remains on the control. */
@media (hover: hover) and (pointer: fine) {
  .close-button:hover,
  .mini-icon:hover,
  .icon-button:hover,
  .site-menu-button:hover,
  .question-order button:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .close-button,
  .mini-icon,
  .icon-button,
  .site-menu-button,
  .question-order button { transition: none !important; }
}