/* ═══════════════════════════════════════════════════════════════════════════
   Dogoos promo site — design system matches the app:
   Fredoka (display) + Nunito (body), teal #1FB6AB, ink #15201E.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --teal: #1FB6AB;
  --teal-bright: #1FC0B4;
  --deep: #147F78;
  --dark: #0E5752;
  --ink: #15201E;
  --sub: #4A5B58;
  --faint: #7C8A87;
  --bg: #F6FBFA;
  --cream: #FDF9F2;
  --line: #E2EFED;
  --amber: #F2A93B;
  --card: #FFFFFF;
  --shadow: 0 18px 50px -18px rgba(20, 60, 56, .25);
  --r-lg: 26px;
  --r-md: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* NATIVE scrolling only — no scroll-hijacking library. `scroll-behavior` only
   affects anchor jumps; wheel/trackpad feel stays 100% the browser's own. */
html { scroll-behavior: smooth; }
.section, .dash { scroll-margin-top: 76px; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .price, .nav-brand span {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 18px; }
h3 { font-size: 1.25rem; }
em { font-style: normal; color: var(--teal); position: relative; }

a { color: var(--deep); text-decoration: none; }
img { max-width: 100%; display: block; }

.section { max-width: 1180px; margin: 0 auto; padding: 110px 24px; position: relative; }
.kicker {
  font-weight: 900; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.kicker-light { color: #7FE5DC; }
.lede { font-size: 1.18rem; color: var(--sub); max-width: 58ch; }
.lede.center { margin: 0 auto 14px; text-align: center; }

/* Scroll-reveal baseline (JS removes; CSS keeps content visible without JS). */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(26px); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: .95rem; border-radius: 999px;
  padding: 12px 22px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--teal-bright), var(--deep));
  color: #fff; box-shadow: 0 10px 26px -8px rgba(31, 182, 171, .55);
}
.btn-primary:hover { box-shadow: 0 16px 34px -8px rgba(31, 182, 171, .65); }
.btn-ghost { border: 2px solid var(--line); color: var(--ink); background: #fff; }
.btn-light { background: #fff; color: var(--deep); box-shadow: 0 10px 26px -10px rgba(0,0,0,.35); }
.btn-ghost-light { border: 2px solid rgba(255,255,255,.35); color: #fff; margin-top: 14px; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 14px 26px; transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled {
  background: rgba(246, 251, 250, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.nav-wordmark { width: auto; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--sub); font-weight: 800; font-size: .92rem; }
.nav-links a:hover { color: var(--teal); }
.nav-cta { margin-left: 6px; }
@media (max-width: 860px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 24px 80px; overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; } }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob-a { width: 560px; height: 560px; background: #BDEEE9; top: -160px; right: -120px; }
.blob-b { width: 460px; height: 460px; background: #FDE9C8; bottom: -180px; left: -140px; }
.paw { position: absolute; font-size: 2rem; opacity: .14; }
.paw-1 { top: 18%; left: 6%; rotate: -18deg; }
.paw-2 { top: 64%; left: 14%; rotate: 12deg; font-size: 1.4rem; }
.paw-3 { top: 28%; right: 8%; rotate: 24deg; font-size: 2.6rem; }
.paw-4 { bottom: 14%; right: 20%; rotate: -10deg; }

.hero .kicker {
  display: inline-block; background: #fff; border: 1.5px solid var(--line);
  padding: 8px 16px; border-radius: 999px; text-transform: none;
  letter-spacing: 0; font-size: .9rem; color: var(--deep);
}
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-copy .lede { margin-top: 20px; }
.hero-note { margin-top: 22px; font-size: .88rem; font-weight: 700; color: var(--faint); }

/* The illustrative phone */
.hero-stage { position: relative; display: flex; justify-content: center; }
.phone {
  width: min(330px, 82vw); border-radius: 44px; background: var(--ink);
  padding: 12px; box-shadow: 0 40px 80px -30px rgba(20, 60, 56, .45);
  position: relative; transform: rotate(2.5deg);
}
.phone-notch {
  position: absolute; top: 22px; left: 50%; translate: -50% 0;
  width: 96px; height: 22px; background: var(--ink); border-radius: 999px; z-index: 3;
}
.phone-screen { border-radius: 34px; overflow: hidden; background: #0E1513; }
.read-photo { position: relative; }
.read-photo img { width: 100%; aspect-ratio: 3 / 2.6; object-fit: cover; }
.read-live {
  position: absolute; top: 30px; left: 14px; background: rgba(0,0,0,.55);
  color: #FF8A80; font-size: .68rem; font-weight: 900; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
.read-card { background: #fff; padding: 16px; }
.read-verdict { display: flex; gap: 13px; align-items: center; }
.read-verdict h3 { font-size: 1.06rem; }
.read-verdict p { font-size: .82rem; color: var(--sub); margin-top: 2px; line-height: 1.45; }
.read-cues { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.read-cues span {
  background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  font-size: .72rem; font-weight: 800; padding: 5px 10px; border-radius: 999px;
}
.conf-ring { position: relative; width: 54px; height: 54px; flex: none; }
.conf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.conf-ring circle { fill: none; stroke-width: 5; }
.conf-ring .track { stroke: var(--line); }
.conf-ring .arc {
  stroke: var(--teal); stroke-linecap: round;
  stroke-dasharray: 119.4; /* 2πr, r=19 */
  stroke-dashoffset: calc(119.4 - 119.4 * var(--conf) / 100);
}
.conf-ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .78rem; font-weight: 900; color: var(--ink);
}
.float-chip {
  position: absolute; background: #fff; border-radius: 16px; padding: 10px 14px;
  font-weight: 900; font-size: .85rem; box-shadow: var(--shadow);
  animation: bob 4.5s ease-in-out infinite;
}
.chip-keepsake { top: 12%; left: -4%; animation-delay: -1.2s; }
.chip-streak { bottom: 20%; right: -2%; }
.hero-rex { position: absolute; bottom: -26px; left: -34px; rotate: -6deg; }
.mock-note {
  position: absolute; bottom: -34px; right: 8px;
  font-size: .72rem; font-weight: 700; color: var(--faint);
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.hero-fade {
  position: absolute; inset: auto 0 0 0; height: 90px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* ── Squiggle underline — the hand-drawn touch on key words. The wave is two
   FULL periods starting and ending at the midline with the same slope, so the
   repeat tiles seamlessly at any width (no broken/kinked joins). ───────────── */
.sq, .hero em {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='10' viewBox='0 0 76 10'%3E%3Cpath d='M0 5 Q 9.5 1 19 5 Q 28.5 9 38 5 Q 47.5 1 57 5 Q 66.5 9 76 5' fill='none' stroke='%23F2A93B' stroke-width='3'/%3E%3C/svg%3E")
    bottom left / auto 0.24em repeat-x;
  padding-bottom: 0.22em;
}
.hero em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='10' viewBox='0 0 76 10'%3E%3Cpath d='M0 5 Q 9.5 1 19 5 Q 28.5 9 38 5 Q 47.5 1 57 5 Q 66.5 9 76 5' fill='none' stroke='%231FB6AB' stroke-width='3'/%3E%3C/svg%3E"); }

/* ── Ambient walking paw-trails (ported from the app's WalkingPaws). The field
   breaks OUT of the section's 1180px column to span the full viewport, so
   trails roam the whole page width instead of clipping at the margins. ────── */
.paw-field {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%);
  overflow: hidden; pointer-events: none; z-index: 0;
}
.pawprint {
  position: absolute; font-size: 2.6rem; opacity: 0;
  animation: pawfade 7s ease-in-out forwards;
}
/* Hero: lift the trails above the colour blobs (content sits higher still). */
.hero .paw-field { z-index: 1; }
/* Dark section: the paw glyph is near-black — flip it light to stay visible. */
.section-dark { position: relative; }
.section-dark .pawprint { filter: grayscale(1) invert(1) brightness(1.4); }
.honest-inner { position: relative; z-index: 1; }
@keyframes pawfade {
  0% { opacity: 0; }
  12% { opacity: .16; }
  62% { opacity: .16; }
  100% { opacity: 0; }
}

/* ── Marquee ───────────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden; border-block: 1.5px solid var(--line); background: #fff; padding: 16px 0;
  /* Tilted bar must OVERHANG both ends (±4vw covers the rotation offset), sit
     ABOVE the hero's bottom fade (z-index — the fade was painting over the
     raised right corner), and carry vertical breathing room for the tilt. */
  rotate: -1.4deg; width: 108vw; margin-left: -4vw;
  position: relative; z-index: 2; margin-block: 14px 26px;
}
.marquee-track {
  display: flex; gap: 34px; width: max-content;
  animation: marquee 30s linear infinite;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--sub);
  align-items: center; white-space: nowrap;
}
.marquee-track i { font-style: normal; opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── How it works ──────────────────────────────────────────────────────────── */
.how { text-align: center; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
.how-card {
  background: var(--card); border-radius: var(--r-lg); padding: 38px 28px 32px;
  box-shadow: var(--shadow); position: relative; text-align: left;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), rotate .35s;
}
/* Cards sit a touch askew — crafted, not templated — and straighten on hover. */
.how-card:nth-child(1) { rotate: -1deg; }
.how-card:nth-child(2) { rotate: .8deg; translate: 0 14px; }
.how-card:nth-child(3) { rotate: -.6deg; }
.how-card:hover { transform: translateY(-6px); rotate: 0deg; }
.how-num {
  position: absolute; top: -16px; left: 26px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--teal-bright), var(--deep));
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 8px 18px -6px rgba(31,182,171,.5);
}
.how-art { font-size: 3rem; margin-bottom: 16px; min-height: 64px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.how-card p { color: var(--sub); margin-top: 8px; font-size: .98rem; }
.fuse {
  font-size: .85rem; font-weight: 900; background: var(--bg);
  border: 1.5px solid var(--line); padding: 7px 12px; border-radius: 999px;
}
.fuse-a { rotate: -4deg; } .fuse-b { rotate: 3deg; } .fuse-c { rotate: -2deg; }

/* ── Honesty (dark) ────────────────────────────────────────────────────────── */
.section-dark { background: linear-gradient(160deg, #14201E, #0E2B28 65%, #0F3833); color: #EAF6F4; }
.honest-inner {
  max-width: 1180px; margin: 0 auto; padding: 110px 24px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
}
@media (max-width: 960px) { .honest-inner { grid-template-columns: 1fr; } }
.honest h2 { color: #fff; }
.honest-copy > p { color: #B8D4D0; font-size: 1.08rem; max-width: 54ch; }
.honest-list { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.honest-list li {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 13px 18px; border-radius: 14px; font-weight: 700; font-size: .98rem;
}
.honest-card .read-card { border-radius: var(--r-md); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); rotate: -2deg; }
.conf-low .track { stroke: #E5E5E5; }

/* ── Bento features ────────────────────────────────────────────────────────── */
.features { text-align: center; }
.bento {
  display: grid; gap: 18px; margin-top: 50px; text-align: left;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1020px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }
.cell {
  background: var(--card); border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), rotate .35s;
}
.cell:nth-child(3n) { rotate: .5deg; }
.cell:nth-child(4n + 1) { rotate: -.5deg; }
.cell:hover { transform: translateY(-6px); rotate: 0deg; }
.cell p { color: var(--sub); margin-top: 8px; font-size: .95rem; }
.cell-wide { grid-column: span 2; padding: 0; display: flex; flex-direction: column; }
.cell-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 35%; }
.cell-body { padding: 22px 26px 26px; }
.cell-amber { grid-column: span 2; background: linear-gradient(135deg, #FFF6E6, #FFEFD2); }
.cell-rex { position: absolute; right: 14px; bottom: 10px; rotate: 6deg; }
.cell-amber p { max-width: 46ch; }
.mixbars { margin-top: 16px; display: grid; gap: 10px; }
.mixbar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: .82rem; font-weight: 800; }
.mixbar .bar { grid-column: 1 / -1; height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mixbar .bar i {
  display: block; height: 100%; width: var(--w); border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-bright), var(--deep));
  transform-origin: left; scale: 0 1;
}
.in-view .mixbar .bar i { animation: grow 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.in-view .mixbar:nth-child(2) .bar i { animation-delay: .15s; }
.in-view .mixbar:nth-child(3) .bar i { animation-delay: .3s; }
@keyframes grow { to { scale: 1 1; } }

/* ── Doggy Dash — a FIXED full-width painting of the park (the game's own
   flattened composite, 1568×700 = aspect 2.24), bottom-anchored so the sandy
   path always sits on the section's bottom edge. Nothing moves except Rex,
   who runs along the sand as you scroll past. ─────────────────────────────── */
.dash {
  position: relative; overflow: hidden;
  /* Exactly the image's height at full width on desktop; floors/caps keep it
     usable on phones (sides crop) and short windows (top crops). */
  height: clamp(440px, calc(100vw / 2.24), 86svh);
}
.dash-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%; /* bottom-anchored: sand stays put */
}
.dash-content {
  position: absolute; top: 8%; left: 0; right: 0; z-index: 2; text-align: center;
  padding: 0 24px; display: grid; justify-items: center; gap: 18px;
}
.dash-content p {
  color: #fff; font-weight: 800; font-size: 1.06rem; max-width: 56ch;
  background: rgba(10, 26, 24, .55); backdrop-filter: blur(8px);
  padding: 13px 22px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.dash-logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
/* The sand strip is the bottom ~12% of the (bottom-anchored) painting, so
   Rex's feet at 3.5% of the section height always land on it. */
.rex-runner {
  position: absolute; z-index: 2; left: 50%; margin-left: -84px;
  bottom: 3.5%;
}
.rex-sprite {
  width: 168px; height: 112px;
  background: url('/assets/rex-run.png') 0 0 / 1344px 112px no-repeat;
  animation: rex-run .72s steps(8) infinite;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
@keyframes rex-run { to { background-position: -1344px 0; } }

/* ── Trust ─────────────────────────────────────────────────────────────────── */
.trust { text-align: center; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; }
@media (max-width: 1020px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: var(--card); border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--shadow); text-align: left; position: relative;
}
.trust-card b { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; }
.trust-card p { color: var(--sub); font-size: .92rem; margin-top: 8px; }
.trust-links { margin-top: 34px; font-weight: 800; }

/* ── Pricing ───────────────────────────────────────────────────────────────── */
.pricing { text-align: center; }
.plans {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 46px;
  align-items: stretch;
}
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--card); border-radius: var(--r-lg); padding: 28px 22px;
  box-shadow: var(--shadow); text-align: left; position: relative;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.plan:hover { transform: translateY(-6px); }
.plan h3 { color: var(--deep); }
.price { font-size: 1.9rem; margin: 8px 0 14px; }
.price span { font-size: .95rem; color: var(--faint); font-weight: 500; }
.plan ul { list-style: none; display: grid; gap: 9px; font-size: .9rem; color: var(--sub); font-weight: 700; }
.plan ul li::before { content: '✓  '; color: var(--teal); font-weight: 900; }
.plan-pop { outline: 3px solid var(--teal); outline-offset: -3px; transform: scale(1.03); }
.plan-pop:hover { transform: scale(1.03) translateY(-6px); }
.pop-badge {
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  background: linear-gradient(135deg, var(--teal-bright), var(--deep)); color: #fff;
  font-size: .75rem; font-weight: 900; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-dark { background: linear-gradient(160deg, #1C2A28, #0F3833); color: #EAF6F4; }
.plan-dark h3 { color: #7FE5DC; }
.plan-dark ul { color: #B8D4D0; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq { text-align: center; max-width: 860px; }
.faq-list { margin-top: 40px; display: grid; gap: 14px; text-align: left; }
.faq details {
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 20px 24px; position: relative;
}
.faq summary {
  cursor: pointer; font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--teal); font-size: 1.4rem; line-height: 1; transition: rotate .25s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin-top: 12px; color: var(--sub); }

/* ── Final CTA ─────────────────────────────────────────────────────────────── */
.cta-final { padding: 40px 24px 120px; }
.cta-card {
  max-width: 1000px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, var(--teal-bright), var(--dark));
  border-radius: 36px; padding: 84px 30px; color: #fff; position: relative; overflow: visible;
  box-shadow: 0 40px 80px -28px rgba(20, 96, 90, .55);
}
.cta-card h2 { color: #fff; }
.cta-card .btn { margin-top: 28px; }
.cta-card p { margin-top: 18px; font-weight: 800; opacity: .85; }
/* Rex perches on the card's top-right CORNER — clear of the headline text. */
.cta-rex { position: absolute; top: -64px; right: -26px; rotate: 8deg; }
@media (max-width: 720px) { .cta-rex { width: 100px; top: -44px; right: -8px; } }
.cta-card { position: relative; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer { border-top: 1.5px solid var(--line); background: #fff; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px;
  display: grid; gap: 16px; justify-items: center; text-align: center;
}
.footer nav { display: flex; gap: 22px; font-weight: 800; }
.footer p { color: var(--faint); font-size: .88rem; }

/* ── Motion safety ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}