/* Animations */

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feature phone slides in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Feature phone slides in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Desktop slides in from left */
.reveal-desktop-left {
  opacity: 0;
  transform: translateX(-40px) scale(0.97);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal-desktop-left.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Desktop slides in from right */
.reveal-desktop-right {
  opacity: 0;
  transform: translateX(40px) scale(0.97);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal-desktop-right.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Phone scale entrance */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }

/* Feature text delay (appears before devices) */
.feature__text .reveal { transition-delay: 0ms; }
.feature__phone .reveal-right,
.feature__phone .reveal-left,
.feature__phone .reveal-scale {
  transition-delay: 150ms;
}

/* Dual-device timing: phone first (background), desktop 250ms later (foreground) */
.feature__devices .reveal-right,
.feature__devices .reveal-left {
  transition-delay: 0ms;
}

.feature__devices .reveal-desktop-left,
.feature__devices .reveal-desktop-right {
  transition-delay: 250ms;
}

/* ---- Scroll Hint Pulse ---- */
.scroll-hint {
  animation: fade-pulse 3s ease-in-out infinite;
}

@keyframes fade-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ---- Smooth Theme Transition ---- */
body,
.nav,
.phone,
.desktop,
.btn,
.waitlist-form__input {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}

/* ==============================================
   PHONE INTERNAL ANIMATIONS
   All triggered when parent .phone gets .visible
   ============================================== */

/* ---- Screen 1: Task Completing ---- */

/* Checkbox fills in */
.anim-checkbox {
  transition: background 0.3s ease, border-color 0.3s ease;
}

.visible .anim-checkbox {
  animation: checkbox-fill 0.4s ease forwards;
  animation-delay: 1.2s;
}

@keyframes checkbox-fill {
  0% {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
  }
  100% {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* Checkmark appears */
.anim-checkbox::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}

.visible .anim-checkbox::after {
  animation: checkmark-appear 0.2s ease forwards;
  animation-delay: 1.5s;
}

@keyframes checkmark-appear {
  from { opacity: 0; transform: rotate(-45deg) scale(0.5); }
  to { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* Need position relative on checkbox for checkmark */
.anim-checkbox { position: relative; }

/* Title strikes through */
.visible .anim-title {
  animation: title-done 0.4s ease forwards;
  animation-delay: 1.6s;
}

@keyframes title-done {
  from { text-decoration: none; color: rgba(255, 255, 255, 0.9); }
  to { text-decoration: line-through; color: rgba(255, 255, 255, 0.3); }
}

/* Task card fades slightly */
.visible .anim-task-complete {
  animation: task-fade 0.5s ease forwards;
  animation-delay: 1.8s;
}

@keyframes task-fade {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

/* Strategy card slides up from below */
.anim-strategy-slide {
  opacity: 0;
  transform: translateY(16px);
}

.visible .anim-strategy-slide {
  animation: slide-up-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 2.2s;
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Screen 2: Lock Animation ---- */

/* Shackle closes (drops down) */
.anim-shackle {
  transform: translateX(-50%) translateY(-6px);
}

.visible .anim-shackle {
  animation: shackle-close 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.8s;
}

@keyframes shackle-close {
  0% { transform: translateX(-50%) translateY(-6px); }
  60% { transform: translateX(-50%) translateY(1px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* Staggered fade-in for lock labels and stats */
.anim-fade-in-1,
.anim-fade-in-2,
.anim-fade-in-3,
.anim-fade-in-4,
.anim-fade-in-5,
.anim-fade-in-6 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-fade-in-1 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.1s; }
.visible .anim-fade-in-2 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.3s; }
.visible .anim-fade-in-3 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.6s; }
.visible .anim-fade-in-4 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.8s; }
.visible .anim-fade-in-5 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 2.0s; }
.visible .anim-fade-in-6 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 2.2s; }

@keyframes stat-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Screen 3: Markdown Line Reveal ---- */

.anim-line {
  opacity: 0;
}

.visible .anim-line-1  { animation: line-reveal 0.3s ease forwards; animation-delay: 0.4s; }
.visible .anim-line-2  { animation: line-reveal 0.3s ease forwards; animation-delay: 0.55s; }
.visible .anim-line-3  { animation: line-reveal 0.3s ease forwards; animation-delay: 0.7s; }
.visible .anim-line-4  { animation: line-reveal 0.3s ease forwards; animation-delay: 0.85s; }
.visible .anim-line-5  { animation: line-reveal 0.3s ease forwards; animation-delay: 1.0s; }
.visible .anim-line-6  { animation: line-reveal 0.3s ease forwards; animation-delay: 1.15s; }
.visible .anim-line-7  { animation: line-reveal 0.3s ease forwards; animation-delay: 1.3s; }
.visible .anim-line-8  { animation: line-reveal 0.3s ease forwards; animation-delay: 1.5s; }
.visible .anim-line-9  { animation: line-reveal 0.3s ease forwards; animation-delay: 1.65s; }
.visible .anim-line-10 { animation: line-reveal 0.3s ease forwards; animation-delay: 1.8s; }
.visible .anim-line-11 { animation: line-reveal 0.3s ease forwards; animation-delay: 1.95s; }
.visible .anim-line-12 { animation: line-reveal 0.3s ease forwards; animation-delay: 2.1s; }
.visible .anim-line-13 { animation: line-reveal 0.3s ease forwards; animation-delay: 2.25s; }
.visible .anim-line-14 { animation: line-reveal 0.3s ease forwards; animation-delay: 2.45s; }
.visible .anim-line-15 { animation: line-reveal 0.3s ease forwards; animation-delay: 2.6s; }
.visible .anim-line-16 { animation: line-reveal 0.3s ease forwards; animation-delay: 2.75s; }

@keyframes line-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Blinking cursor */
.anim-cursor {
  opacity: 0;
}

.visible .anim-cursor {
  animation: cursor-blink 1s step-end infinite;
  animation-delay: 2.9s;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Sync spinner (reused in cross-platform phone) */
.visible .anim-sync-spin {
  animation: sync-rotate 1.5s linear 2;
  animation-delay: 1.3s;
}

@keyframes sync-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Desktop Content Animations ---- */

/* Work order rows stagger */
.anim-wo-1, .anim-wo-2, .anim-wo-3, .anim-wo-4 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-wo-1 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.5s; }
.visible .anim-wo-2 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.7s; }
.visible .anim-wo-3 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.9s; }
.visible .anim-wo-4 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.1s; }

/* Kanban columns slide in */
.anim-kanban-1, .anim-kanban-2, .anim-kanban-3 {
  opacity: 0;
  transform: translateY(8px);
}

.visible .anim-kanban-1 { animation: stat-fade-in 0.5s ease forwards; animation-delay: 0.4s; }
.visible .anim-kanban-2 { animation: stat-fade-in 0.5s ease forwards; animation-delay: 0.6s; }
.visible .anim-kanban-3 { animation: stat-fade-in 0.5s ease forwards; animation-delay: 0.8s; }

/* Strategy tiles pop in */
.anim-strat-tile-1, .anim-strat-tile-2, .anim-strat-tile-3,
.anim-strat-tile-4, .anim-strat-tile-5, .anim-strat-tile-6 {
  opacity: 0;
  transform: scale(0.9);
}

.visible .anim-strat-tile-1 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.4s; }
.visible .anim-strat-tile-2 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.5s; }
.visible .anim-strat-tile-3 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.6s; }
.visible .anim-strat-tile-4 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.7s; }
.visible .anim-strat-tile-5 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.8s; }
.visible .anim-strat-tile-6 { animation: tile-pop 0.3s ease forwards; animation-delay: 0.9s; }

@keyframes tile-pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Privacy setting rows fade in */
.anim-setting-1, .anim-setting-2, .anim-setting-3, .anim-setting-4 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-setting-1 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.5s; }
.visible .anim-setting-2 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.7s; }
.visible .anim-setting-3 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.9s; }
.visible .anim-setting-4 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 1.1s; }

/* File tree items reveal */
.anim-dfile-1, .anim-dfile-2, .anim-dfile-3, .anim-dfile-4, .anim-dfile-5 {
  opacity: 0;
  transform: translateX(-6px);
}

.visible .anim-dfile-1 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.3s; }
.visible .anim-dfile-2 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.4s; }
.visible .anim-dfile-3 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.5s; }
.visible .anim-dfile-4 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.6s; }
.visible .anim-dfile-5 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.7s; }

/* Vault sidebar items fade in */
.anim-dvault-1, .anim-dvault-2, .anim-dvault-3, .anim-dvault-4 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-dvault-1 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.3s; }
.visible .anim-dvault-2 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.45s; }
.visible .anim-dvault-3 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.6s; }
.visible .anim-dvault-4 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.75s; }

/* Phone: Waypoint items stagger down */
.anim-waypoint-1, .anim-waypoint-2, .anim-waypoint-3, .anim-waypoint-4 {
  opacity: 0;
  transform: translateY(10px);
}

.visible .anim-waypoint-1 { animation: slide-up-fade 0.5s ease forwards; animation-delay: 0.4s; }
.visible .anim-waypoint-2 { animation: slide-up-fade 0.5s ease forwards; animation-delay: 0.7s; }
.visible .anim-waypoint-3 { animation: slide-up-fade 0.5s ease forwards; animation-delay: 1.0s; }
.visible .anim-waypoint-4 { animation: slide-up-fade 0.5s ease forwards; animation-delay: 1.3s; }

/* Phone: Chore checklist items stagger in */
.anim-chore-1, .anim-chore-2, .anim-chore-3,
.anim-chore-4, .anim-chore-5, .anim-chore-6 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-chore-1 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.4s; }
.visible .anim-chore-2 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.55s; }
.visible .anim-chore-3 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.7s; }
.visible .anim-chore-4 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 0.85s; }
.visible .anim-chore-5 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 1.0s; }
.visible .anim-chore-6 { animation: stat-fade-in 0.3s ease forwards; animation-delay: 1.15s; }

/* Phone: Vault rows stagger in */
.anim-vrow-1, .anim-vrow-2, .anim-vrow-3, .anim-vrow-4, .anim-vrow-5 {
  opacity: 0;
  transform: translateY(8px);
}

.visible .anim-vrow-1 { animation: slide-up-fade 0.4s ease forwards; animation-delay: 0.4s; }
.visible .anim-vrow-2 { animation: slide-up-fade 0.4s ease forwards; animation-delay: 0.55s; }
.visible .anim-vrow-3 { animation: slide-up-fade 0.4s ease forwards; animation-delay: 0.7s; }
.visible .anim-vrow-4 { animation: slide-up-fade 0.4s ease forwards; animation-delay: 0.85s; }
.visible .anim-vrow-5 { animation: slide-up-fade 0.4s ease forwards; animation-delay: 1.0s; }

/* ---- Brain Dump capture rows stagger ---- */
.anim-bdump-1, .anim-bdump-2, .anim-bdump-3 {
  opacity: 0;
  transform: translateY(6px);
}

.visible .anim-bdump-1 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.5s; }
.visible .anim-bdump-2 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.7s; }
.visible .anim-bdump-3 { animation: stat-fade-in 0.4s ease forwards; animation-delay: 0.9s; }

/* ---- Export popup slide-in ---- */
.mock-export-popup {
  animation: popup-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.visible .mock-export-popup {
  animation: popup-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}

.mock-export-popup {
  opacity: 0;
  transform: translate(-50%, -45%);
}

@keyframes popup-slide-in {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Interactive Panel Transitions ---- */
.mock-panel {
  opacity: 0;
}

.mock-panel--active {
  opacity: 1;
  transition: opacity 200ms var(--ease-in-out);
}

.mock-main-panel {
  opacity: 0;
}

.mock-main-panel--active {
  opacity: 1;
  transition: opacity 200ms var(--ease-in-out);
}

/* ---- Product Reveal: Logo Assembly ---- */

/* Initial states — hidden until .visible */
.product-reveal__squircle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.product-reveal__fill {
  opacity: 0;
}

.product-reveal__needle-n {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translateY(-20px);
}

.product-reveal__needle-s {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translateY(20px);
}

.product-reveal__pivot {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(0);
}

/* Triggered animations */
.visible .product-reveal__squircle {
  animation: squircle-draw 0.6s ease forwards;
  animation-delay: 0ms;
}

.visible .product-reveal__fill {
  animation: squircle-fill 0.4s ease forwards;
  animation-delay: 600ms;
}

.visible .product-reveal__needle-n {
  animation: needle-north 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 900ms;
}

.visible .product-reveal__needle-s {
  animation: needle-south 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1050ms;
}

.visible .product-reveal__pivot {
  animation: pivot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1200ms;
}

/* Text reveals staggered after logo assembly */
.product-reveal .product-reveal__name.reveal {
  transition-delay: 1500ms;
}

.product-reveal .product-reveal__tagline.reveal {
  transition-delay: 1800ms;
}

.product-reveal .product-reveal__cta.reveal {
  transition-delay: 2100ms;
}

@keyframes squircle-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes squircle-fill {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes pivot-pop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* Compass idle sway — gentle oscillation after reveal completes */
.product-reveal__needle-group {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.visible .product-reveal__needle-group {
  animation: compass-idle 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: 2s;
}

@keyframes compass-idle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(6deg); }
  30%  { transform: rotate(-4deg); }
  50%  { transform: rotate(5deg); }
  65%  { transform: rotate(-5.5deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Braindump Typing Animation ---- */

/* Cards container */
.braindump-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* Input brightens while typing */
.mock-braindump-input[data-typing] {
  opacity: 0.85;
}

/* Blinking cursor after text while typing */
.mock-braindump-input[data-typing]::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: rgba(255, 255, 255, 0.8);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: braindump-cursor-blink 0.6s step-end infinite;
}

@keyframes braindump-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Captured thought card */
.braindump-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.braindump-card--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cosmetic checkbox circle */
.braindump-card__check {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tag accent */
.braindump-card__tag {
  color: rgba(167, 139, 250, 0.8);
}

/* Mobile variant: slightly larger */
[data-braindump-anim="mobile"] .braindump-card {
  font-size: 12px;
}

[data-braindump-anim="mobile"] .braindump-card__check {
  width: 12px;
  height: 12px;
  min-width: 12px;
}

/* Fade-out for loop reset */
.braindump-fading .braindump-card {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.5s ease;
}

.braindump-fading .mock-braindump-input {
  transition: opacity 0.5s ease;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-right,
  .reveal-left,
  .reveal-scale,
  .reveal-desktop-left,
  .reveal-desktop-right,
  .anim-strategy-slide,
  .anim-fade-in-1, .anim-fade-in-2, .anim-fade-in-3,
  .anim-fade-in-4, .anim-fade-in-5, .anim-fade-in-6,
  .anim-line, .anim-cursor,
  .anim-wo-1, .anim-wo-2, .anim-wo-3, .anim-wo-4,
  .anim-kanban-1, .anim-kanban-2, .anim-kanban-3,
  .anim-strat-tile-1, .anim-strat-tile-2, .anim-strat-tile-3,
  .anim-strat-tile-4, .anim-strat-tile-5, .anim-strat-tile-6,
  .anim-setting-1, .anim-setting-2, .anim-setting-3, .anim-setting-4,
  .anim-dfile-1, .anim-dfile-2, .anim-dfile-3, .anim-dfile-4, .anim-dfile-5,
  .anim-dvault-1, .anim-dvault-2, .anim-dvault-3, .anim-dvault-4,
  .anim-waypoint-1, .anim-waypoint-2, .anim-waypoint-3, .anim-waypoint-4,
  .anim-chore-1, .anim-chore-2, .anim-chore-3,
  .anim-chore-4, .anim-chore-5, .anim-chore-6,
  .anim-vrow-1, .anim-vrow-2, .anim-vrow-3, .anim-vrow-4, .anim-vrow-5,
  .anim-bdump-1, .anim-bdump-2, .anim-bdump-3,
  .product-reveal__needle-n, .product-reveal__needle-s,
  .product-reveal__pivot, .product-reveal__fill {
    opacity: 1;
    transform: none;
  }

  .product-reveal__needle-group {
    animation: none !important;
    transform: none;
  }

  .product-reveal__squircle {
    stroke-dashoffset: 0;
  }

  .mock-export-popup {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .mock-panel,
  .mock-panel--active,
  .mock-main-panel,
  .mock-main-panel--active {
    opacity: 1;
    transition: none;
  }

  /* Braindump: no cursor, no typing, cards shown immediately */
  .mock-braindump-input[data-typing]::after {
    display: none;
  }

  .braindump-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .braindump-fading .braindump-card {
    opacity: 1;
    transition: none;
  }
}