/* =====================================================
   Trot - landing page - aligned with app design system
   ===================================================== */

/* 1 - Design tokens -------------------------------------------------- */
:root {
  /* Brand greens - mirror the app tokens (green / greenStrong) */
  --p-bright: #34C759;
  --p-bright-soft: rgba(52, 199, 89, 0.14);
  --p-strong: #1F9D43;
  --p-dark: #14221C;
  --p-dark-muted: rgba(20, 34, 28, 0.68);
  --p-dark-subtle: rgba(20, 34, 28, 0.08);

  /* Surfaces */
  --surface: #F3F6F0;
  --surface-tint: #EEF4EA;
  --card: #FFFFFF;

  /* Text */
  --ink: #14221C;
  --ink-muted: rgba(20, 34, 28, 0.65);
  --ink-subtle: rgba(20, 34, 28, 0.45);

  /* Hairlines */
  --hairline: rgba(20, 34, 28, 0.08);
  --hairline-strong: rgba(20, 34, 28, 0.14);

  /* Typography - app uses SF Pro Rounded natively (Font.system(design: .rounded)).
     Per the design system, WEB always uses Nunito for cross-platform consistency.
     "Nunito Fallback" is a size-adjusted local alias declared below so the
     swap from fallback -> Nunito doesn't cause layout shift (CLS) during
     first paint. On Apple, ui-rounded resolves instantly to SF Pro Rounded
     and no network fetch happens. */
  --font-sans: "Nunito", "Nunito Fallback", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--font-sans);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 4px 10px -4px rgba(20, 34, 28, 0.15);
  --sh-md: 0 12px 26px -14px rgba(20, 34, 28, 0.22);
  --sh-lg: 0 24px 48px -20px rgba(20, 34, 28, 0.3);
  --sh-hero: 0 40px 80px -30px rgba(20, 34, 28, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.9, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Register --progress so conic-gradient animates smoothly (not stepped) */
@property --progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Metric-adjusted fallback for Nunito - aliases Arial with tweaked
   metrics so when Nunito arrives over the network the layout doesn't
   shift. Values derived from Nunito's font metrics. Eliminates the
   "page jumps down on reload" symptom that happens when a user's
   cached layout lands on different scroll content than first paint. */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial");
  ascent-override: 101%;
  descent-override: 35%;
  line-gap-override: 0%;
  size-adjust: 101.7%;
}

/* 2 - Reset + base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Smooth scroll ONLY when the user clicks an in-page anchor, not for
   browser scroll restoration. Scoped via :focus-within trick below. */

/* Disable the browser's scroll-anchoring feature, which tries to pin
   visible content during layout shifts but can cause jitter on reload
   when entrance animations + image decodes land. */
body { overflow-anchor: none; }

/* Focus-visible - keyboard users get a clean green ring on every
   interactive element. Mouse users don't see it (only :focus-visible). */
:focus-visible {
  outline: 2px solid var(--p-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip-to-main-content link - hidden until focused, then pops in at top-left
   so keyboard / screen-reader users can jump past the nav. */
.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--r-md);
  transform: translateY(-150%);
  transition: transform 200ms var(--ease-out);
  z-index: 200;
}

.skip-link:focus {
  transform: translateY(0);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.section-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-bright);
  margin-bottom: var(--s-3);
}

/* Inline SVG icons (Phosphor set) - sized like the icon font they
   replace: 1em square, filled with the surrounding text color. */
.icon { display: inline-flex; }
.icon svg,
.toggle-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 3 - Header + nav -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: rgba(243, 246, 240, 0.8);
  border-bottom: 1px solid var(--hairline);
  /* Pin the header to its own stable compositor layer so the sticky
     backdrop-filter doesn't intermittently flicker/repaint as the
     transformed hero scrolls behind it (WebKit). translateZ on the sticky
     element itself is safe - it composites after positioning. */
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.brand-link img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: var(--sh-sm);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-tagline {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--ink); }

.button-link {
  padding: 8px 18px;
  background: var(--p-bright);
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.button-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(52, 199, 89, 0.5);
}

@media (max-width: 680px) {
  .nav-links { gap: var(--s-3); }
  .nav-links a:not(.button-link) { display: none; }
}

/* 4 - Hero section -------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-8);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: var(--s-8);
  align-items: center;
}

.hero-copy {
  max-width: 540px;
  animation: fadeUp 700ms var(--ease-out) both;
}

.hero-kicker {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--p-bright);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: var(--s-4);
  color: var(--ink);
}

.accent-text { color: var(--p-bright); }

.hero-copy p {
  font-size: 1.1rem;
  color: var(--ink-muted);
  margin-bottom: var(--s-6);
  max-width: 480px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 26px;
  background: var(--p-bright);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 24px -10px rgba(52, 199, 89, 0.55);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(52, 199, 89, 0.65);
}

.secondary-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 1px dashed var(--hairline-strong);
  padding-bottom: 2px;
  transition: color 0.2s;
}

.secondary-link:hover { color: var(--ink); }

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

/* 5 - Phone mock + entry parallax ---------------------------------- */
.hero-stage {
  position: relative;
  aspect-ratio: 9 / 19;
  max-width: 380px;
  justify-self: center;
  width: 100%;
}

.hero-stage {
  perspective: 1200px;
}

.device-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px;
  background: linear-gradient(145deg, #1c2628 0%, #2a3537 100%);
  border-radius: 52px;
  box-shadow: var(--sh-hero);
  /* Transforms composed via CSS vars so JS can set tilt-x/tilt-y from
     mousemove while the CSS base handles hover lift + gentle tilt. */
  transform:
    translateY(var(--phone-lift, 0))
    rotateX(var(--phone-tilt-x, 0deg))
    rotateY(var(--phone-tilt-y, 0deg))
    rotate(var(--phone-roll, 0deg));
  transition: transform 400ms var(--ease-out), box-shadow 300ms var(--ease-out);
  transform-style: preserve-3d;
}

.hero-stage:hover .device-frame {
  box-shadow: 0 50px 100px -28px rgba(20, 34, 28, 0.42);
  /* JS removes the CSS transition while dragging mouse so tilt stays
     responsive, restores on mouseleave. No lift/roll on hover - the
     parallax effect carries the interaction. */
}

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: #cfe9ff;
  isolation: isolate;
}

.device-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 30px;
  border-radius: var(--r-pill);
  background: #0a1018;
  z-index: 10;
}

/* Parallax scene layers - absolutely positioned, entry-animated */
.scene-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Both scene images are 9:16-ish full-phone illustrations - display each
   at the full screen size and let the foreground's alpha sky-region
   layer on top of the sky. No cropping of the hill peaks. Parallax is
   mouse-driven via JS, which updates each layer's custom property so
   nearer layers slide farther than distant ones. */
.scene-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Base offset - -50px up so parallax can drift the sky down without
     revealing a gap at the top of the phone screen. JS sets --py on top
     of this baseline. Sky moves the least (farthest layer). */
  transform: translateY(calc(-50px + var(--sky-py, 0px)));
  transition: transform 220ms var(--ease-out);
}

.scene-foreground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Parallax - moves more than the sky (closer layer). Base Y offset
     stays 120px - mouse parallax translates on top of that. */
  transform: translateY(calc(120px + var(--fg-py, 0px)));
  transition: transform 220ms var(--ease-out);
}

/* Mascot - absolute positioned low on the foreground grass. JS applies
   a vertical translate on scroll (preserving the -50% centering). */
.device-mascot {
  position: absolute;
  left: 50%;
  bottom: calc(32% + 110px);
  width: 48%;
  z-index: 3;
  /* Parallax - moves most (closest layer). Use translate3d so the -50%
     horizontal centering stays independent of the parallax Y offset. */
  transform: translate(-50%, var(--mascot-py, 0px));
  transition: transform 220ms var(--ease-out);
  filter: drop-shadow(0 10px 20px rgba(18, 34, 22, 0.28));
  pointer-events: none;
}

/* Stats panel - absolute at bottom of screen, above the dock. JS applies
   a vertical translate on scroll - rises from its rest position. */
.device-panel {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 104px;
  z-index: 4;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: var(--r-lg);
  box-shadow: 0 14px 28px -16px rgba(18, 34, 22, 0.3);
  animation: cardSlideIn 900ms 350ms var(--ease-out) both;
  /* Force GPU compositor layer so the initial paint composes correctly
     through the parent's transform (rotate) + overflow:hidden + radius.
     Without this, WebKit sometimes caches a clipped snapshot and only
     refreshes after a scroll-triggered repaint. */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

/* Minimal dashboard - eyebrow + big count + progress bar (matches the
   shipped Today card). */
.device-eyebrow {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.device-score {
  text-align: center;
  color: var(--ink);
}

.device-score strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.device-score span {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--ink-muted);
}

.device-progress {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--p-bright-soft);
  overflow: hidden;
}

.device-progress > span {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--p-bright) 0%, #6ce59c 100%);
  transform-origin: left;
  animation: progressGrow 900ms 1100ms var(--ease-out) both;
}

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

/* Dock - bottom of screen, pill with 4 icons - absolute so it anchors
   reliably regardless of scene/card transforms */
.device-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 14px;
  z-index: 5;
}

.dock-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px -6px rgba(18, 34, 22, 0.2);
}

.dock-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 5px;
  border-radius: var(--r-md);
  color: var(--ink-muted);
}

.dock-tab > i {
  font-size: 1.12rem;
  line-height: 1;
}

.dock-tab > small {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dock-tab.is-selected {
  background: var(--p-bright-soft);
  color: var(--p-bright);
}

/* Floating feature chips around phone */
.feature-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  z-index: 4;
  min-width: 150px;
  /* Two stacked animations: `chipEnter` runs once on page load, then
     `chipFloat` takes over as an infinite ambient bob. */
  animation: chipEnter 900ms var(--ease-out) both,
             chipFloat 4.4s ease-in-out infinite;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

@keyframes chipFloat {
  0%, 100% { translate: 0 -2px; }
  50%      { translate: 0 2px; }
}

.feature-chip:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 44px -16px rgba(20, 34, 28, 0.32);
}

.feature-chip i { font-size: 1.3rem; flex-shrink: 0; }

.feature-chip small {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 1px;
}

.feature-chip strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* animation-delay is listed per-animation: [chipEnter, chipFloat]. The
   float delay is negative so the bob starts mid-cycle, offsetting each
   chip so they drift independently rather than pulsing together. */
.chip-streak { top: 8%; left: -40px; animation-delay: 1000ms, 0s; }
.chip-streak i { color: var(--p-bright); }
.chip-mood { top: 22%; right: -48px; animation-delay: 1200ms, -1.5s; }
.chip-mood i { color: var(--p-bright); }
.chip-trends { bottom: 44%; left: -52px; animation-delay: 1100ms, -2.8s; }
.chip-trends i { color: var(--p-bright); }

@keyframes chipEnter {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 1100px) {
  .feature-chip { display: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-stage { max-width: 300px; margin: 0 auto; }

  /* Phone mock - the fixed-px offsets tuned for the ~380px desktop
     mock push foreground + mascot too low when the mock shrinks to
     300px on mobile - scale them to percentages so they stay aligned
     with the horizon at any phone size. Dark mode inherits from the
     light rule since day and night foregrounds are pixel-aligned. */
  .scene-foreground {
    transform: translateY(8%);
  }
  .device-mascot {
    bottom: 54%;
  }
  /* Lift the dashboard panel higher above the dock - at 11% it sat almost
     flush against the tab bar on small phones. 17% restores a clear gap,
     matching the desktop mock's proportions. */
  .device-panel {
    bottom: 17%;
  }
}

/* 6 - Feature band -------------------------------------------------- */
.feature-band {
  padding: var(--s-9) 0 var(--s-8);
  background: var(--surface);
  /* Soft transition from hero - subtle gradient at the top keeps the
     handoff clean even if the hero's shadow extends slightly over it. */
  background-image: linear-gradient(180deg, var(--surface-tint) 0%, var(--surface) 120px);
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: start;
}

.feature-intro {
  position: sticky;
  top: 100px;
}

.feature-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--s-4);
}

.feature-intro p {
  font-size: 1.04rem;
  color: var(--ink-muted);
  max-width: 420px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.feature-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-6);
  align-items: center;
  /* Scroll-reveal initial state - JS flips `.is-visible` when the item
     enters the viewport, triggering a gentle fade-up into place. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  /* GPU-promote the card during its entrance so the mini-ring's
     conic-gradient redraws don't warp inside the transforming parent. */
  will-change: transform, opacity;
}

.feature-item.is-visible {
  will-change: auto;
  opacity: 1;
  transform: translateY(0);
}

.feature-mockup {
  position: relative;
  aspect-ratio: 1;
  background: var(--card);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
  /* Isolate paint so mini-ring gradient redraws don't bleed into the
     transforming parent during entry animation. */
  contain: layout paint;
}

.feature-item:hover .feature-mockup {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

.feature-content {
  position: relative;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--p-bright-soft);
  color: var(--p-bright);
  font-size: 1.2rem;
  margin-bottom: var(--s-3);
}

.feature-content h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}

/* Pro chip - marks the feature cards that need a Trot Pro subscription */
.pro-chip {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--p-bright-soft);
  color: var(--p-strong);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature-content p {
  font-size: 0.98rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* Per-feature mockups - backgrounds stay in the Trot green/sage palette
   so the set reads as one system. Subtle tonal variation per card only. */
.feature-mockup-pet {
  background: linear-gradient(135deg, #EEF5E5 0%, #D8E7C3 100%);
}

.feature-mockup-pet img {
  width: 82%;
  filter: drop-shadow(0 8px 14px rgba(18, 34, 22, 0.22));
}

.feature-mockup-insights {
  flex-direction: column;
  padding: var(--s-4);
  gap: var(--s-3);
  background: linear-gradient(135deg, #F3F8EC 0%, #E0EED1 100%);
}

.mini-ring {
  --progress: 0;
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  /* Start at 12 o'clock (from 0deg), sweep clockwise as --progress goes
     0 to 0.82 when the mockup scrolls into view. */
  background: conic-gradient(
    from 0deg,
    var(--p-bright) calc(var(--progress) * 360deg),
    var(--p-dark-subtle) calc(var(--progress) * 360deg)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: --progress 1100ms var(--ease-out) 200ms;
}

.feature-mockup.is-content-visible .mini-ring {
  --progress: 0.82;
}

.mini-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #fff;
  border-radius: 50%;
}

.mini-ring-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}

.mini-ring-inner strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mini-ring-inner span {
  font-size: 0.68rem;
  color: var(--ink-muted);
}

.mini-stat {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

.mini-stat i { color: var(--p-bright); font-size: 1.02rem; }

.mini-stat strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.mini-stat span {
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.feature-mockup-history {
  flex-direction: column;
  padding: var(--s-4);
  gap: var(--s-3);
  justify-content: flex-start;
  align-items: stretch;
  background: linear-gradient(135deg, #F2F6EC 0%, #D5E4C0 100%);
}

.mini-calendar-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.mini-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  flex: 1;
  align-content: center;
}

.mini-calendar span {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  background: rgba(52, 199, 89, calc(0.18 + var(--fill, 0.5) * 0.82));
  transform: scale(0);
  transition: transform 400ms var(--ease-out);
}

.feature-mockup.is-content-visible .mini-calendar span {
  transform: scale(1);
}

/* Stagger calendar dot pop-in - each dot gets its own delay */
.feature-mockup.is-content-visible .mini-calendar span:nth-child(1)  { transition-delay:   0ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(2)  { transition-delay:  30ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(3)  { transition-delay:  60ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(4)  { transition-delay:  90ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(5)  { transition-delay: 120ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(6)  { transition-delay: 150ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(7)  { transition-delay: 180ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(8)  { transition-delay: 210ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(9)  { transition-delay: 240ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(10) { transition-delay: 270ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(11) { transition-delay: 300ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(12) { transition-delay: 330ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(13) { transition-delay: 360ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(14) { transition-delay: 390ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(15) { transition-delay: 420ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(16) { transition-delay: 450ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(17) { transition-delay: 480ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(18) { transition-delay: 510ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(19) { transition-delay: 540ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(20) { transition-delay: 570ms; }
.feature-mockup.is-content-visible .mini-calendar span:nth-child(21) { transition-delay: 600ms; }

.feature-mockup-trends {
  flex-direction: column;
  padding: var(--s-4);
  gap: var(--s-3);
  justify-content: flex-start;
  align-items: stretch;
  background: linear-gradient(135deg, #E8F0E0 0%, #CADEB4 100%);
}

.mini-trend-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-trend-label > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.mini-trend-label {
  gap: var(--s-2);
}

.mini-trend-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: var(--p-bright-soft);
  color: var(--p-bright);
  border-radius: var(--r-pill);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.mini-trend-delta i { font-size: 0.9rem; }

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-height: 88px;
}

.mini-bars span {
  flex: 1;
  height: var(--h);
  min-height: 4px;
  background: linear-gradient(180deg, var(--p-bright) 0%, #6ce59c 100%);
  border-radius: 3px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 500ms var(--ease-out);
}

.feature-mockup.is-content-visible .mini-bars span {
  transform: scaleY(1);
}

/* Stagger bar rise - each bar gets its own delay */
.feature-mockup.is-content-visible .mini-bars span:nth-child(1)  { transition-delay:   0ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(2)  { transition-delay:  50ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(3)  { transition-delay: 100ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(4)  { transition-delay: 150ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(5)  { transition-delay: 200ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(6)  { transition-delay: 250ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(7)  { transition-delay: 300ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(8)  { transition-delay: 350ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(9)  { transition-delay: 400ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(10) { transition-delay: 450ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(11) { transition-delay: 500ms; }
.feature-mockup.is-content-visible .mini-bars span:nth-child(12) { transition-delay: 550ms; }

/* Widgets feature - a Home-Screen card + a Lock-Screen accessory */
.feature-mockup-widgets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, #EFF6E7 0%, #DAE8C5 100%);
}

.widget-card {
  width: 168px;
  padding: 16px 17px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgba(18, 34, 22, 0.4);
  text-align: left;
}

.widget-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p-bright);
  margin-bottom: 8px;
}

.widget-card > strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.widget-card > small {
  display: block;
  font-size: 0.58rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.widget-bar {
  height: 6px;
  margin-top: 11px;
  border-radius: 999px;
  background: var(--p-bright-soft);
  overflow: hidden;
}

.widget-bar > span {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: 999px;
  background: var(--p-bright);
}


@media (max-width: 960px) {
  .feature-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .feature-intro { position: static; }
}

@media (max-width: 680px) {
  .feature-item {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    text-align: center;
  }
  .feature-mockup {
    width: 220px;
    height: 220px;
    aspect-ratio: auto;
    max-width: none;
    margin: 0 auto;
  }
  .feature-content { max-width: 480px; margin: 0 auto; }
}

/* 7 - CTA band ------------------------------------------------------- */
.cta-band {
  padding: var(--s-9) 0;
}

.cta-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7) var(--s-7);
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.cta-mascot {
  width: 150px;
  height: 150px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #EEF5E5 0%, #D8E7C3 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.cta-mascot img {
  width: 94%;
  margin-bottom: -12px;
  filter: drop-shadow(0 6px 12px rgba(18, 34, 22, 0.22));
}

.cta-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}

.cta-copy p { color: var(--ink-muted); }

/* CTA button - wider + centered in its grid cell for a more balanced
   right-column feel. Uses a min-width so short copy like 'Get Trot'
   doesn't leave the button hugging the text. */
.cta-shell .primary-button {
  min-width: 200px;
  padding: 16px 36px;
  justify-self: center;
  justify-content: center;
}

@media (max-width: 780px) {
  .cta-shell {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--s-6) var(--s-5);
  }
  .cta-mascot { margin: 0 auto; width: 120px; height: 120px; }
}

/* 8 - Footer --------------------------------------------------------- */
.site-footer {
  padding: var(--s-7) 0 var(--s-6);
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.footer-copy {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.footer-copy img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.footer-links {
  display: flex;
  gap: var(--s-5);
}

.footer-links a {
  color: var(--ink-muted);
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--ink); }

/* 8b - Document pages (privacy / terms / support) ------------------- */

.docs-main {
  padding: var(--s-7) 0 var(--s-9);
}

.narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.doc-hero {
  /* Only set the vertical padding - the horizontal inset is owned by
     `.narrow` (padding: 0 var(--s-5)), which sits on the same element.
     Using the `padding` shorthand here would reset the left/right padding
     to 0 and make the hero heading/intro run edge-to-edge on phones. */
  padding-block: var(--s-6) var(--s-7);
  text-align: left;
}

.doc-overline {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-bright);
  margin-bottom: var(--s-3);
}

.doc-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: var(--s-4);
  color: var(--ink);
}

.doc-copy {
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 620px;
  margin-bottom: var(--s-4);
}

.doc-meta {
  font-size: 0.84rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.doc-layout {
  padding-bottom: var(--s-7);
}

.doc-surface {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: var(--s-7) clamp(var(--s-5), 4vw, var(--s-7));
  box-shadow: var(--sh-md);
  margin-bottom: var(--s-5);
}

.doc-surface + .doc-surface {
  margin-top: 0;
}

.doc-surface section + section {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}

.doc-surface h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.doc-surface h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-2);
}

.doc-surface p {
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: var(--s-3);
}

.doc-surface p:last-child {
  margin-bottom: 0;
}

.doc-surface ul {
  margin: 0 0 var(--s-3) 0;
  padding-left: var(--s-5);
  color: var(--ink-muted);
  line-height: 1.6;
}

.doc-surface li {
  margin-bottom: var(--s-2);
}

.doc-surface li:last-child {
  margin-bottom: 0;
}

.inline-link {
  color: var(--p-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--p-bright-soft);
  transition: border-color 0.2s, color 0.2s;
}

.inline-link:hover {
  color: var(--p-dark);
  border-bottom-color: var(--p-bright);
}

/* Support page - contact block + FAQ list */

.contact-band {
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: linear-gradient(135deg, var(--p-bright-soft) 0%, rgba(52, 199, 89, 0.04) 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(52, 199, 89, 0.18);
}

.contact-link {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--p-bright);
  margin-bottom: var(--s-2);
  transition: color 0.2s;
}

.contact-link:hover {
  color: var(--p-dark);
}

.contact-band p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.faq-item {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.faq-item:has(details[open]) {
  border-color: rgba(52, 199, 89, 0.25);
  box-shadow: 0 4px 14px -8px rgba(52, 199, 89, 0.25);
}

.faq-item details {
  padding: var(--s-4) var(--s-5);
}

.faq-item summary {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--s-5);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-subtle);
  transition: transform 0.25s var(--ease-out), color 0.2s;
  line-height: 1;
}

.faq-item details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--p-bright);
}

.faq-item details p {
  margin: var(--s-3) 0 0;
  color: var(--ink-muted);
  line-height: 1.6;
}

@media (max-width: 680px) {
  .doc-surface { padding: var(--s-5) var(--s-4); }
  .doc-hero { padding-block: var(--s-5) var(--s-6); }
}

/* 8c - Dark mode ----------------------------------------------------- */
/* Opt-in via a `<html data-theme="dark">` attribute set by the header
   toggle. Site defaults to LIGHT; users pick their mode manually and
   the choice persists in localStorage. Tokens are re-mapped here only;
   all layout / spacing / animation stays shared. */

:root[data-theme="dark"] {
  --surface: #0F1512;
  --surface-tint: #14201B;
  --card: #1A2621;

  --ink: #E8F4EC;
  --ink-muted: rgba(232, 244, 236, 0.68);
  --ink-subtle: rgba(232, 244, 236, 0.42);

  --hairline: rgba(232, 244, 236, 0.08);
  --hairline-strong: rgba(232, 244, 236, 0.16);

  /* Keep brand greens but nudge their opacity targets for dark bg */
  --p-bright-soft: rgba(52, 199, 89, 0.22);
  --p-strong: #4FD46F;
  --p-dark-subtle: rgba(232, 244, 236, 0.08);

  /* Shadows mostly vanish on dark backgrounds; swap to subtle lifts */
  --sh-sm: 0 2px 8px -4px rgba(0, 0, 0, 0.4);
  --sh-md: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
  --sh-hero: 0 30px 70px -25px rgba(0, 0, 0, 0.7);
}

/* Component overrides - each prefixed with the `:root[data-theme="dark"]`
   scope so they apply ONLY when dark mode is explicitly enabled. */
:root[data-theme="dark"] .site-header {
  background: rgba(15, 21, 18, 0.82);
}

:root[data-theme="dark"] .feature-chip {
  border: 1px solid var(--hairline);
}

:root[data-theme="dark"] .feature-mockup-pet {
  background: linear-gradient(135deg, #1F2F1F 0%, #182519 100%);
}
:root[data-theme="dark"] .feature-mockup-insights {
  background: linear-gradient(135deg, #1B2B1B 0%, #142418 100%);
}
:root[data-theme="dark"] .feature-mockup-history {
  background: linear-gradient(135deg, #1E2B1B 0%, #182617 100%);
}
:root[data-theme="dark"] .feature-mockup-trends {
  background: linear-gradient(135deg, #1A281A 0%, #13211A 100%);
}
:root[data-theme="dark"] .feature-mockup-widgets {
  background: linear-gradient(135deg, #1B2B1B 0%, #142418 100%);
}
/* The widget card is a real iOS widget, so it stays light (white) in both
   themes - same approach as the phone's app UI. Re-scope the ink tokens to
   their dark-on-light values so the text stays readable on the white card
   instead of inheriting dark mode's light ink. */
:root[data-theme="dark"] .widget-card {
  --ink: #14221C;
  --ink-muted: rgba(20, 34, 28, 0.65);
}

:root[data-theme="dark"] .inline-link {
  color: #6DDC8F;
  border-bottom-color: rgba(109, 220, 143, 0.3);
}
:root[data-theme="dark"] .inline-link:hover {
  color: #8FE9A8;
  border-bottom-color: #6DDC8F;
}

:root[data-theme="dark"] .faq-item:has(details[open]) {
  border-color: rgba(109, 220, 143, 0.28);
  box-shadow: 0 4px 14px -8px rgba(109, 220, 143, 0.22);
}

:root[data-theme="dark"] .skip-link {
  background: var(--ink);
  color: var(--surface);
}

:root[data-theme="dark"] .contact-band {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.14) 0%, rgba(52, 199, 89, 0.02) 100%);
  border-color: rgba(52, 199, 89, 0.22);
}

/* Phone mockup in dark mode - scene swaps to NIGHT (matching what the
   app actually shows at night via its time-of-day system), but the
   app UI itself (card, dock, stat text) stays LIGHT to honestly reflect
   that Trot does not have a dark theme - it's the same light app, just
   set against the night scene. Re-scope the ink tokens inside the phone
   back to their light values so the inner text stays dark on white. */

:root[data-theme="dark"] .scene-sky {
  content: url("assets/night-sky.webp");
}
:root[data-theme="dark"] .scene-foreground {
  content: url("assets/night-foreground.webp");
  /* Day and night foreground art are pixel-aligned at the source, so
     both themes share the default translateY(120px) - no per-theme
     override needed. */
}

:root[data-theme="dark"] .device-frame {
  --ink: #14221C;
  --ink-muted: rgba(20, 34, 28, 0.65);
  --ink-subtle: rgba(20, 34, 28, 0.45);
  --hairline: rgba(20, 34, 28, 0.08);
  --card: #FFFFFF;
  --p-dark-subtle: rgba(20, 34, 28, 0.08);
}

/* Card + dock in dark mode - the app uses translucent chrome so these
   pick up a hint of the night scene behind them. Drop solid white
   backgrounds and use semi-transparent light instead, matching app feel. */
:root[data-theme="dark"] .device-panel {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="dark"] .dock-tabs {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Freeze all transitions during a theme toggle so the night scene swap
   doesn't animate (transform/background/color transitions would otherwise
   all fire at once and create a visual glitch). JS adds the class on
   click, removes it on the next animation frame. */
html.theme-toggling,
html.theme-toggling *,
html.theme-toggling *::before,
html.theme-toggling *::after {
  transition: none !important;
}

/* Force GPU compositing on the device-screen so the rounded corners
   anti-alias cleanly against the bezel. Without this, the night scene
   can show faint aliasing at the bottom corners. */
.device-screen {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Daily Insights feature mockup in dark mode - the mini-ring inner core
   and mini-stat chip used the default card color, which was nearly
   identical to the feature card's dark gradient and blended in. Lift
   them to a distinct green-tinted dark shade so they read clearly. */
:root[data-theme="dark"] .mini-ring::before {
  background: #2A3832;
}
:root[data-theme="dark"] .mini-stat {
  background: #2A3832;
  box-shadow: 0 3px 10px -6px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .mini-ring-inner strong {
  color: #E8F4EC;
}
:root[data-theme="dark"] .mini-ring-inner span,
:root[data-theme="dark"] .mini-stat span {
  color: rgba(232, 244, 236, 0.65);
}
:root[data-theme="dark"] .mini-stat strong {
  color: #E8F4EC;
}

/* Pet card image - swap the dark drop-shadow for a lighter halo +
   stronger depth shadow so the mascot silhouette reads against the
   dark card. */
:root[data-theme="dark"] .feature-mockup-pet img {
  filter: drop-shadow(0 10px 18px rgba(255, 255, 255, 0.08))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Theme toggle button in header */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
  padding: 0;
  font-size: 1.15rem;
}

.theme-toggle:hover {
  background: var(--p-bright-soft);
  color: var(--p-bright);
  transform: scale(1.05);
}

.theme-toggle .toggle-icon-sun { display: none; }
.theme-toggle .toggle-icon-moon { display: inline-block; }

:root[data-theme="dark"] .theme-toggle .toggle-icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .toggle-icon-moon { display: none; }

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