/* ============ CRAAPL — Keynote Crash Theatre ============ */

:root{
  --paper:#FAFAF8;
  --ink:#161616;
  --gray:#86868B;      /* decorative / aria-hidden text only */
  --muted:#6E6E73;     /* body-size secondary text (AA-safe on paper) */
  --red:#D0342C;
  --cream:#F5F0E8;
  --hairline:#E7E7E5;
  --panel-border:#E0E0DE;
  --r:6px;
  --sans:'Schibsted Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ width:min(100% - 48px, 1100px); margin-inline:auto; }

.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.01em; }

.overline{
  font-family:var(--mono); font-weight:600;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted);
}
.overline.centered{ text-align:center; margin-bottom:22px; }

.parody-tag{
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

.h2{
  font-weight:400;
  font-size:clamp(30px, 4.6vw, 52px);
  letter-spacing:-0.03em;
  line-height:1.06;
  margin-top:12px;
}

.section-sub{ margin-top:12px; color:var(--muted); }

main section{ padding-block:clamp(88px, 14vh, 168px); }

/* ============ Ambient layers ============ */

#fx{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.page{ position:relative; z-index:1; }

.veil{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(22,22,22,0.02) 0 1px, transparent 1px 3px);
}

/* page-wide glitch flash, fired every 9s for 120ms */
@keyframes glitchClip{
  0%  { clip-path:inset(0 0 58% 0); transform:translateX(-7px); }
  49% { clip-path:inset(0 0 58% 0); transform:translateX(-7px); }
  50% { clip-path:inset(56% 0 0 0); transform:translateX(6px); }
  100%{ clip-path:inset(56% 0 0 0); transform:translateX(6px); }
}
.page.glitch{ animation:glitchClip 0.12s steps(1) both; }

/* ============ Hexdump strip (right page edge, desktop) ============ */

.hexstrip{
  position:fixed; top:0; right:8px; bottom:34px; z-index:2;
  width:24px;
  display:none;
  overflow:hidden;
  opacity:0.55;
  pointer-events:none;
}
@media (min-width:1360px){
  .hexstrip{ display:flex; flex-direction:column; gap:14px; align-items:center; }
}
.hex-label{
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:0.16em;
  color:var(--muted);
  flex:0 0 auto;
}
.hex-window{ flex:1 1 auto; overflow:hidden; }
.hex-ribbon{
  writing-mode:vertical-rl;
  display:block; height:max-content;
  font-family:var(--mono); font-size:11px; line-height:24px;
  white-space:nowrap;
  color:var(--ink);
  animation:hexScroll 110s linear infinite;
  will-change:transform;
}
@keyframes hexScroll{ to{ transform:translateY(-50%); } }

/* ============ Marquee (bottom edge) ============ */

.marquee{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:30px;
  display:flex; align-items:center;
  background:var(--paper);
  border-top:1px solid var(--hairline);
  overflow:hidden;
  pointer-events:none;
}
.marquee-track{
  display:flex; flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  color:var(--muted);
  animation:marq 38s linear infinite;
  will-change:transform;
}
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============ Floating BUY chip ============ */

.chip{
  position:fixed; right:18px; bottom:48px; z-index:31;
  background:var(--red); color:#fff;
  font-weight:700; font-size:12px; letter-spacing:0.08em;
  padding:15px 20px;
  border-radius:var(--r);
  box-shadow:0 10px 28px rgba(208,52,44,0.3);
  opacity:0; transform:translateY(10px); visibility:hidden; pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.chip.show{
  opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity 0.25s ease, transform 0.25s ease;
}

/* ============ Brand bar ============ */

.brand{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 28px;
}
.brand-left{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:13px; letter-spacing:0.16em;
}
.brand-logo{ width:40px; height:40px; object-fit:contain; }
.brand-nav{ display:flex; align-items:center; gap:16px; }
.brand-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  color:var(--muted);
}
.nav-ca{
  font-weight:700; font-size:12px; letter-spacing:0.12em;
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  padding:9px 16px;
  transition:background 0.15s ease, color 0.15s ease;
}
.nav-ca:hover{ background:var(--ink); color:#fff; }

/* ============ Hero ============ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:112px 0 44px;
}

.hero-grid{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:clamp(28px, 4vw, 60px);
  align-items:stretch;
  width:min(100% - 48px, 1280px);
  margin-inline:auto;
}

.hero-main{ display:flex; flex-direction:column; min-width:0; text-align:left; }

.hero h1{ margin-top:20px; }
.hl{ display:block; font-weight:400; font-size:clamp(44px, 9vw, 140px); letter-spacing:-0.03em; line-height:0.98; }
.hl-word{ display:block; }
.hl-ch{
  display:inline-block;
  animation:chIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes chIn{ from{ opacity:0; transform:translateY(0.35em); } }
.hl-serif{
  display:block; color:var(--red);
  animation:fadeUp 0.7s ease both;
  animation-delay:var(--d, 700ms);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } }

.hero-sub{
  margin-top:16px;
  font-size:clamp(17px, 2.4vw, 23px);
  color:var(--muted);
  animation:fadeUp 0.7s ease both; animation-delay:1.05s;
}
.hero-sub .serif-it{ font-size:1.12em; color:var(--ink); }

/* --- stage: chart + hanging apple (signature, unchanged mechanics) --- */

.stage{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:clamp(240px, 34vh, 430px);
  margin:28px 0 24px;
  animation:fadeUp 0.7s ease both; animation-delay:1.15s;
}

#chart{ position:absolute; inset:0; width:100%; height:100%; }
.chart-label{ font-family:var(--mono); font-size:11px; fill:#B7B7B5; }
#chart .grid{ stroke:#ECECEA; stroke-width:1; }
#chart .body.dn{ fill:var(--red); }
#chart .body.up{ fill:#B9C4AE; }
#chart .wick.dn{ stroke:var(--red); stroke-width:2; }
#chart .wick.up{ stroke:#B9C4AE; stroke-width:2; }
#chart .closeline{
  fill:none; stroke:rgba(22,22,22,0.18);
  stroke-width:1.5; stroke-dasharray:1 5; stroke-linecap:round;
}

.hang{
  position:absolute; top:10%; left:0; right:0; z-index:2;
  transition:transform 0.72s cubic-bezier(0.2, 1.4, 0.38, 1);
  will-change:transform;
}
.price-line{ position:relative; height:0; border-top:2px dashed #CFCFCD; }
.price-tag{
  position:absolute; right:6px; top:-27px;
  font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--muted);
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:2px 9px;
}

.apple-bob{
  width:clamp(120px, 19vw, 195px);
  margin:-10px auto 0;
  transform-origin:50% 12%;
  animation:bob 3.8s ease-in-out infinite;
}
.apple-bob img{ width:100%; height:auto; }
.apple-svg{ width:100%; height:auto; overflow:visible; }

/* mascot part animations — bite stays on the RIGHT: rotations only, never mirrored */
.m-leaf{
  transform-box:fill-box; transform-origin:0% 65%;
  animation:leafWave 2.1s ease-in-out infinite;
}
@keyframes leafWave{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-9deg); } }
.m-arm-l{
  transform-box:fill-box; transform-origin:95% 95%;
  animation:armWaveL 0.9s ease-in-out infinite;
}
@keyframes armWaveL{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(9deg); } }
.m-arm-r{
  transform-box:fill-box; transform-origin:4% 96%;
  animation:armWaveR 0.8s ease-in-out infinite;
}
@keyframes armWaveR{ 0%,100%{ transform:rotate(7deg); } 50%{ transform:rotate(-7deg); } }
.m-leg-l{
  transform-box:fill-box; transform-origin:90% 4%;
  animation:kickL 0.5s ease-in-out infinite alternate;
}
@keyframes kickL{ from{ transform:rotate(-10deg); } to{ transform:rotate(12deg); } }
.m-leg-r{
  transform-box:fill-box; transform-origin:8% 4%;
  animation:kickR 0.5s ease-in-out infinite alternate;
  animation-delay:0.25s;
}
@keyframes kickR{ from{ transform:rotate(10deg); } to{ transform:rotate(-12deg); } }
.m-drop{
  transform-box:fill-box;
  animation:sweatFly 1.7s ease-in infinite;
}
.m-d2{ animation-delay:0.55s; }
.m-d3{ animation-delay:1.1s; }
@keyframes sweatFly{
  0%{ transform:translate(0, 0); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(var(--fx, 10px), -28px); opacity:0; }
}

@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
@keyframes jolt{
  0%{ rotate:0deg; }
  30%{ rotate:-6deg; }
  60%{ rotate:4deg; }
  100%{ rotate:0deg; }
}
.apple-bob.jolt{ animation:bob 3.8s ease-in-out infinite, jolt 0.55s ease; }

/* --- hero controls --- */

.hero-controls{
  display:flex; flex-direction:column; align-items:flex-start;
  animation:fadeUp 0.7s ease both; animation-delay:1.25s;
}

.btn-dip{
  position:relative;
  min-height:56px;
  width:min(100%, 320px);
  padding:16px 42px;
  background:var(--ink); color:#fff;
  border-radius:var(--r);
  font-weight:700; font-size:15px; letter-spacing:0.08em;
  transition:background 0.15s ease;
}
.btn-dip::before{
  content:"";
  position:absolute; inset:-2px; z-index:-1;
  border-radius:8px;
  box-shadow:0 0 38px 8px rgba(208,52,44,0.5);
  opacity:0.3;
  animation:breathe 2.8s ease-in-out infinite;
}
@keyframes breathe{ 50%{ opacity:0.85; } }
.btn-dip:hover{ background:#000; }

.counter{
  margin-top:16px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:13px; letter-spacing:0.04em;
  color:var(--muted);
}
.fine{
  margin-top:10px;
  font-size:12.5px;
  color:var(--muted);
  max-width:52ch;
}

/* --- page shake --- */

@keyframes pageShake{
  10%{ transform:translate(-6px, 2px); }
  30%{ transform:translate(5px, -3px); }
  50%{ transform:translate(-4px, 3px); }
  70%{ transform:translate(4px, -2px); }
  90%{ transform:translate(-2px, 1px); }
}
.page.shake{ animation:pageShake 0.3s linear; }

/* ============ Crash console ============ */

.console{
  position:relative;
  background:#fff;
  border:1px solid var(--panel-border);
  border-radius:var(--r);
  display:flex; flex-direction:column;
  overflow:hidden;
  align-self:stretch;
  max-height:680px;
  text-align:left;
  animation:fadeUp 0.7s ease both; animation-delay:1.35s;
}
.console-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--hairline);
  flex:0 0 auto;
}
.console-body{
  flex:1 1 auto;
  min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px;
  overflow:hidden;
  font-family:var(--mono); font-size:12px; line-height:1.75;
  font-variant-numeric:tabular-nums;
}
.console-line{ white-space:pre-wrap; word-break:break-word; }
.console-line.cmd{ font-weight:600; }
.console-line.warn{ color:var(--muted); }
.console-line.err, .console-line.fatal{ color:var(--red); }
.console-line.panic{ color:var(--red); font-weight:600; }

/* ============ Film ============ */

.film{ padding-block:clamp(72px, 10vh, 130px); }

.film-frame{
  position:relative;
  width:min(100% - 48px, 960px);
  margin-inline:auto;
  aspect-ratio:16 / 9;
  background:var(--cream);
  border-radius:var(--r);
  overflow:hidden;
}
.film-frame video{ width:100%; height:100%; object-fit:cover; }
.film-poster{ width:100%; height:100%; object-fit:cover; }

.film-caption{
  margin-top:18px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

.film-fallback{ position:absolute; inset:0; }
.ff-chart{ position:absolute; inset:0; width:100%; height:100%; }
.ff-apple{
  position:absolute; left:16%; top:26%;
  width:clamp(70px, 11vw, 120px);
  animation:ffFall 4.6s ease-in infinite;
}
@keyframes ffFall{
  from{ transform:translateY(-180%) rotate(-8deg); }
  to{ transform:translateY(320%) rotate(12deg); }
}
.ff-caption{
  position:absolute; right:20px; bottom:14px;
  font-family:var(--mono); font-size:11px;
  color:var(--muted);
}

/* ============ Tape ============ */

.tape{ padding-block:clamp(48px, 7vh, 90px); }

.tape-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-bottom:14px;
}
.tape-frame{
  position:relative;
  border:1px solid var(--panel-border);
  border-radius:var(--r);
  background:#fff;
  padding:0;
}
#tapeCanvas{ width:100%; height:80px; display:block; }
.tape-axis{
  position:absolute; right:10px; top:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
  color:var(--muted);
  background:rgba(255,255,255,0.85);
  padding:1px 6px;
}

/* ============ Specs ============ */

.specs .wrap{ max-width:820px; }

.specs-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
}

.specs table{
  width:100%;
  margin-top:44px;
  border-collapse:collapse;
  table-layout:fixed;
}
.specs tr{ border-top:1px solid var(--hairline); }
.specs tr:last-child{ border-bottom:1px solid var(--hairline); }
.specs th[scope="row"]{
  text-align:left; font-weight:500; font-size:16px;
  padding:22px 8px; width:42%;
}
.specs td{
  text-align:right;
  font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums;
  color:var(--muted);
  padding:22px 8px;
}
.specs td .tw:empty::before{ content:"\00a0"; }
.tw.typing::after{
  content:"▌"; color:var(--red);
  animation:caret 0.8s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }
.spec-hot td, .spec-hot .spec-live{ color:var(--red); font-weight:600; }

/* ============ CA ============ */

.ca .wrap{ max-width:900px; }

.ca-card{
  border:2px solid var(--red);
  border-radius:var(--r);
  background:#fff;
  padding:clamp(28px, 6vw, 60px);
  text-align:center;
}
.ca-card .h2{ letter-spacing:-0.02em; color:var(--ink); }
.ca-heading::after{
  content:""; display:block;
  width:96px; height:2px;
  background:var(--red);
  margin:16px auto 0;
}

.ca-row{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:stretch;
  margin-top:34px;
}
.ca-code{
  flex:1 1 320px; min-width:0;
  display:flex; align-items:center;
  font-family:var(--mono); font-weight:400;
  font-size:clamp(15px, 2.4vw, 24px);
  word-break:break-all;
  text-align:left;
  background:var(--cream);
  border:1px solid #E9E2D6;
  border-radius:var(--r);
  padding:18px 20px;
}
.btn-copy{
  min-height:52px;
  min-width:48px;
  padding:0 30px;
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  font-weight:700; font-size:13px; letter-spacing:0.06em;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.15s ease, color 0.15s ease;
}
.btn-copy:hover, .btn-copy.copied{ background:var(--ink); color:#fff; }

.ca-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:22px;
}
.btn-big{
  flex:1 1 240px;
  min-height:56px;
  padding:14px 28px;
  border-radius:var(--r);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; letter-spacing:0.05em;
  transition:transform 0.15s ease, filter 0.15s ease;
}
.btn-big:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-x{
  background:transparent;
  border:1.5px solid var(--ink);
  color:var(--ink);
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-x:hover{ background:var(--ink); color:#fff; filter:none; }
.btn-buy{ background:var(--red); color:#fff; }

.ca-warning{
  margin:28px auto 0;
  max-width:52ch;
  font-size:17px;
  color:var(--muted);
}

/* ============ The bottom (extra1) ============ */

.pit{ padding-block:clamp(56px, 8vh, 100px); }
.pit-card{
  max-width:640px;
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--panel-border);
  border-radius:var(--r);
  padding:14px;
}
.pit-card img{
  width:100%; height:auto;
  border-radius:4px;
}
.pit-caption{
  margin-top:12px; padding-bottom:4px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  color:var(--muted);
  text-align:center;
}

/* ============ How to buy ============ */

.how .wrap{ max-width:1000px; }

.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:48px;
}
.step{
  padding:28px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--r);
}
.step-num{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1;
  color:var(--red);
}
.step h3{ margin-top:14px; font-size:18px; font-weight:700; }
.step p{ margin-top:8px; font-size:14.5px; color:var(--muted); }

/* ============ Footer ============ */

footer{
  border-top:1px solid var(--hairline);
  padding:56px 24px 96px;
  text-align:center;
}
.foot-logo{
  width:36px; height:36px; object-fit:contain;
  margin:0 auto 18px;
}
.foot-disclaimer{
  max-width:60ch; margin:0 auto;
  font-size:13px;
  color:var(--muted);
}
.foot-copy{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.1em;
  color:var(--muted);
}

/* ============ Sticky CA bar (mobile) ============ */

.sticky-ca{ display:none; }
@media (max-width:768px){
  .sticky-ca.on{
    position:fixed; left:0; right:0; bottom:30px; z-index:32;
    display:flex; align-items:center; gap:10px;
    background:var(--ink); color:#fff;
    padding:6px 6px 6px 14px;
  }
}
.sticky-label{
  font-weight:700; font-size:12px; letter-spacing:0.08em;
  flex:0 0 auto;
}
.sticky-addr{
  flex:1 1 auto; min-width:0;
  font-family:var(--mono); font-size:12px;
  color:#D95C56; /* brand red fails contrast on ink — lightened red for dark surfaces */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-copy{
  flex:0 0 auto;
  min-height:48px; min-width:64px;
  border:1.5px solid #fff;
  border-radius:var(--r);
  color:#fff;
  font-weight:700; font-size:12px; letter-spacing:0.06em;
  padding:0 14px;
}
.sticky-copy:active{ background:#fff; color:var(--ink); }
.sticky-close{
  flex:0 0 auto;
  min-height:48px; min-width:44px;
  color:#fff;
  font-size:20px; line-height:1;
}

/* ============ Toast ============ */

.toast{
  position:fixed; left:50%; bottom:64px; z-index:50;
  transform:translate(-50%, 12px);
  opacity:0;
  pointer-events:none;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:13px;
  padding:12px 22px;
  border-radius:var(--r);
  max-width:min(90vw, 480px);
  text-align:center;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ============ Responsive ============ */

@media (max-width:1023px){
  .hero{ min-height:auto; padding-top:96px; }
  .hero-grid{ grid-template-columns:1fr; }
  .console{ max-height:300px; }
  .console-body{ min-height:200px; }
}

@media (max-width:820px){
  .steps{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .chip{ display:none; }        /* sticky CA bar takes over the CTA role */
  .toast{ bottom:112px; }       /* clear the sticky bar + marquee */
  footer{ padding-bottom:150px; }
}

@media (max-width:640px){
  .brand{ padding:18px 20px; }
  .brand-tag{ display:none; }
  .stage{ min-height:clamp(230px, 36vh, 380px); }
  .ca-actions{ flex-direction:column; }
  .btn-big{ width:100%; }
  .chip{ right:12px; bottom:42px; padding:13px 16px; }
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}