/* ==========================================================================
   BHAVI MOTORS — design tokens
   ink #0A0B0D · panel #15171B · steel #8A9099 · chrome #C7CDD6
   accent (caliper red) #FF5B2E · heritage gold #C9A24B
   display: Oswald · body: Inter · utility: JetBrains Mono
   ========================================================================== */

:root{
  --ink:        #0a0b0d;
  --ink-2:      #101216;
  --panel:      #15171b;
  --panel-2:    #1c1f24;
  --steel:      #8a9099;
  --chrome:     #c7cdd6;
  --paper:      #f2f0ec;
  --accent:     #ff5b2e;
  --accent-2:   #ff8259;
  --gold:       #c9a24b;
  --line:       rgba(199,205,214,0.12);
  --shadow:     0 20px 60px rgba(0,0,0,0.45);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1180px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); text-transform:uppercase; margin:0; letter-spacing:.01em; }
p{ margin:0; }
.mono{ font-family:var(--font-mono); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.accent{ color:var(--accent); }

/* ---------- cursor spotlight ---------- */
.spotlight{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(circle 260px at var(--x,50%) var(--y,50%), rgba(255,91,46,0.07), transparent 70%);
  transition:opacity .4s ease; opacity:0;
}
.spotlight.is-active{ opacity:1; }
@media(max-width:860px){ .spotlight{ display:none; } }

.eyebrow{
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--gold);
  margin-bottom:14px;
  display:inline-block;
}

.section-head{ max-width:720px; margin:0 auto 56px; text-align:center; padding:0 24px; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; color:var(--paper); }
.ppf__sub{ margin-top:16px; color:var(--steel); font-family:var(--font-body); font-size:.98rem; }
.br-desktop{ display:none; }
@media(min-width:720px){ .br-desktop{ display:inline; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; border-radius:2px;
  border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), background .3s, border-color .3s, color .3s;
  white-space:nowrap;
}
.btn--solid{ background:var(--accent); color:#0a0b0d; font-weight:600; }
.btn--solid:hover{ background:var(--accent-2); transform:translateY(-2px); }
.btn--outline{ border-color:var(--line); color:var(--chrome); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--paper); padding:10px 22px; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__gauge .gauge-track{ stroke:rgba(199,205,214,0.15); }
.loader__gauge .gauge-fill{
  stroke:var(--accent); stroke-dasharray:251; stroke-dashoffset:251;
  animation:gaugeFill 1.6s var(--ease) forwards;
  filter:drop-shadow(0 0 6px var(--accent));
}
.loader__gauge .gauge-needle{
  stroke:var(--chrome); transform-origin:100px 110px;
  animation:needleSweep 1.6s var(--ease) forwards;
}
.gauge-hub{ fill:var(--chrome); }
@keyframes gaugeFill{ to{ stroke-dashoffset:20; } }
@keyframes needleSweep{ 0%{ transform:rotate(-85deg);} 100%{ transform:rotate(85deg);} }
.loader__text{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.12em; color:var(--paper); }
.loader__text span{ color:var(--accent); }
.loader__sub{ font-size:.7rem; letter-spacing:.3em; color:var(--steel); text-transform:uppercase; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0; transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ background:rgba(10,11,13,0.85); backdrop-filter:blur(14px); padding:14px 0; border-color:var(--line); }
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.08em; color:var(--paper); }
.nav__logo span{ color:var(--accent); font-weight:300; }
.nav__links{ display:flex; gap:32px; margin-left:auto; margin-right:32px; }
.nav__links a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--chrome);
  position:relative; padding-bottom:4px;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__links a:hover{ color:var(--paper); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav__burger span{ width:22px; height:2px; background:var(--paper); transition:transform .3s, opacity .3s; }

@media(max-width:860px){
  .nav__links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--ink-2); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 40px; gap:26px; margin:0; transform:translateX(100%); transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:1rem; }
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:140px 24px 80px; overflow:hidden;
  text-align:center;
}
.hero__inner{
  position:relative; z-index:1; width:100%; max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
}
@media(min-width:980px){
  .hero__inner{ grid-template-columns:1.05fr 1fr; text-align:left; gap:20px; }
  .hero__content{ margin:0; }
  .hero__desc{ margin:26px 0 0; }
  .hero__actions{ justify-content:flex-start; }
  .hero__stats{ justify-content:flex-start; }
  .hero__title{ justify-content:flex-start; }
}
.hero__stage{
  position:relative; aspect-ratio:1/1; max-width:560px; margin:0 auto; width:100%;
}
.hero__stage-ring{
  position:absolute; inset:8% ; border:1px solid var(--line); border-radius:50%;
  animation:ringSpin 40s linear infinite;
}
.hero__stage-ring::before{
  content:''; position:absolute; top:-1px; left:50%; width:6px; height:6px; margin-left:-3px;
  background:var(--accent); border-radius:50%; box-shadow:0 0 10px 2px var(--accent);
}
@keyframes ringSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.hero__car{ position:absolute; inset:0; cursor:grab; touch-action:none; }
.hero__car:active{ cursor:grabbing; }
.hero__car canvas{ width:100% !important; height:100% !important; }
.hero__stage-caption{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-size:.65rem; letter-spacing:.25em; color:var(--steel); opacity:.7;
}
@media(max-width:640px){ .hero__stage{ max-width:340px; } }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 10%, transparent 75%);
  opacity:.6;
}
.hero__glow{
  position:absolute; width:900px; height:900px; left:50%; top:30%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,91,46,0.18) 0%, transparent 65%);
  pointer-events:none;
}
.hero__content{ position:relative; max-width:820px; }
.eyebrow.mono{ color:var(--gold); }
.hero__title{
  font-size:clamp(3rem,9vw,6.2rem); line-height:.96; color:var(--paper);
  display:flex; flex-wrap:wrap; gap:.25em; justify-content:center; margin-top:8px;
}
.hero__title--accent{ color:var(--accent); }
.shine-sweep{
  position:relative; display:inline-block; background:linear-gradient(110deg,var(--paper) 30%, var(--gold) 45%, var(--paper) 60%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shineSweep 4.5s ease-in-out infinite;
}
.hero__title--accent.shine-sweep{ background:linear-gradient(110deg,var(--accent) 30%, var(--accent-2) 45%, var(--accent) 60%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes shineSweep{ 0%{ background-position:200% 0;} 60%,100%{ background-position:-40% 0;} }
.hero__desc{ margin:26px auto 0; max-width:560px; color:var(--steel); font-size:1.05rem; }
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.hero__stats{ display:flex; gap:48px; justify-content:center; margin-top:64px; flex-wrap:wrap; }
.hero__stats div{ display:flex; flex-direction:column; align-items:center; }
.hero__stats strong{ font-family:var(--font-display); font-size:2rem; color:var(--paper); }
.hero__stats span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--steel); text-transform:uppercase; margin-top:4px; }
.hero__scroll{
  position:absolute; bottom:32px; font-size:.68rem; letter-spacing:.3em; color:var(--steel);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.hero__scroll span{ animation:bounceDown 1.8s ease-in-out infinite; }
@keyframes bounceDown{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--panel); overflow:hidden; padding:16px 0;
}
.ticker__track{ display:flex; gap:24px; width:max-content; animation:tickerScroll 28s linear infinite; }
.ticker__track span{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--steel); white-space:nowrap; }
.ticker__track span:nth-child(even){ color:var(--accent); }
@keyframes tickerScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:120px 24px 100px; max-width:var(--container); margin:0 auto; }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tilt{ transform-style:preserve-3d; transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); will-change:transform; }

.service-card{
  background:var(--ink); padding:44px 28px; position:relative; overflow:hidden;
  transition:background .35s var(--ease);
}
.service-card::before{
  content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,91,46,0.14),transparent 60%);
  opacity:0; transition:opacity .4s var(--ease);
}
.service-card:hover::before{ opacity:1; }
.service-card:hover{ background:var(--panel); }
.service-card__icon{ width:48px; height:48px; color:var(--gold); margin-bottom:28px; transition:transform .4s var(--ease), color .4s; }
.service-card:hover .service-card__icon{ color:var(--accent); transform:translateY(-4px) rotate(-4deg); }
.service-card h3{ font-size:1.05rem; color:var(--paper); margin-bottom:8px; }
.service-card p{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--steel); }
.service-card__arrow{
  position:absolute; right:24px; bottom:24px; color:var(--accent); opacity:0; transform:translateX(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); font-size:1.1rem;
}
.service-card:hover .service-card__arrow{ opacity:1; transform:translateX(0); }
@media(max-width:860px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .services__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PPF SIGNATURE COMPARE SLIDER
   ========================================================================== */
.ppf{ padding:60px 24px 140px; max-width:var(--container); margin:0 auto; }
.compare{
  position:relative; max-width:900px; margin:0 auto; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); user-select:none; touch-action:pan-y;
}
.compare__panel{ position:absolute; inset:0; }
.compare__surface{ position:absolute; inset:0; }
.compare__surface--after{
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(135deg,#1c1f24 0%,#0a0b0d 55%,#2a2e35 100%);
}
.compare__surface--after::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size:220% 220%;
  animation:panelShine 3.4s ease-in-out infinite;
}
@keyframes panelShine{ 0%{ background-position:200% 0;} 100%{ background-position:-40% 0;} }
.compare__surface--before{
  background:linear-gradient(135deg,#26221e 0%,#0a0b0d 55%,#332c24 100%);
  filter:saturate(.6) brightness(.85);
}
.compare__surface--before::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(20deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 30px);
}
.compare__label{
  position:absolute; top:18px; z-index:2; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  padding:8px 14px; background:rgba(10,11,13,0.6); backdrop-filter:blur(6px); border:1px solid var(--line);
}
.compare__panel--after .compare__label{ left:18px; color:var(--gold); }
.compare__panel--before .compare__label{ right:18px; color:var(--steel); }
.compare__panel--before{ clip-path:inset(0 0 0 50%); }
.compare__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent);
  transform:translateX(-50%); cursor:ew-resize; z-index:3;
}
.compare__handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--accent); color:#0a0b0d;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.85rem;
  box-shadow:0 8px 20px rgba(255,91,46,0.4);
}

/* ==========================================================================
   TOP SELLING
   ========================================================================== */
.topsell{ padding:80px 24px 140px; max-width:var(--container); margin:0 auto; }
.topsell__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.topsell__card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.topsell__card:hover{ border-color:var(--accent); }
.topsell__photo{
  height:150px; background-size:cover; background-position:center; position:relative;
}
.topsell__photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,var(--panel) 100%); }
.topsell__card h3, .topsell__card p, .topsell__card .topsell__index{ margin-left:32px; margin-right:32px; }
.topsell__card .topsell__index{ margin-top:26px; }
.topsell__card p{ margin-bottom:32px; }
.topsell__index{ display:inline-block; font-size:.68rem; letter-spacing:.15em; color:var(--accent); border:1px solid var(--accent); padding:3px 8px; border-radius:2px; margin-bottom:20px; }
.topsell__card h3{ font-size:1.2rem; color:var(--paper); margin-bottom:14px; }
.topsell__card p{ color:var(--steel); font-size:.92rem; line-height:1.6; }
@media(max-width:860px){ .topsell__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.products{ padding:80px 24px 140px; max-width:var(--container); margin:0 auto; }
.link-arrow{ display:inline-block; margin-top:18px; font-family:var(--font-mono); font-size:.8rem; color:var(--accent); border-bottom:1px solid transparent; transition:border-color .3s; }
.link-arrow:hover{ border-color:var(--accent); }
.products__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.product-card:hover{ border-color:var(--gold); }
.product-card__art{ height:150px; position:relative; overflow:hidden; }
.product-card__art::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.12) 50%,transparent 70%);
  background-size:220% 220%; animation:panelShine 5s ease-in-out infinite;
}
.product-art--1{ background:linear-gradient(160deg,#232830,#0a0b0d); }
.product-art--2{ background:linear-gradient(160deg,#2a2320,#0a0b0d); }
.product-art--3{ background:linear-gradient(160deg,#1f2a28,#0a0b0d); }
.product-art--4{ background:linear-gradient(160deg,#2a2010,#0a0b0d); }
.product-art--5{ background:linear-gradient(160deg,#1a232a,#0a0b0d); }
.product-art--6{ background:linear-gradient(160deg,#2a1a20,#0a0b0d); }
.product-card h4{ font-size:.98rem; color:var(--paper); padding:20px 20px 4px; }
.product-card p{ font-family:var(--font-mono); font-size:.72rem; color:var(--steel); padding:0 20px 20px; letter-spacing:.04em; }
@media(max-width:860px){ .products__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .products__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   LEGACY / STATS
   ========================================================================== */
.legacy{ position:relative; padding:140px 24px; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.legacy__bg{
  position:absolute; inset:-10% 0; background-size:cover; background-position:center;
  filter:grayscale(.4) brightness(.5); transform:translateY(0);
}
.legacy__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--panel) 0%, rgba(21,23,27,0.85) 40%, var(--panel) 100%);
}
.legacy__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.parallax{ will-change:transform; }
.legacy h2{ font-size:clamp(1.8rem,4vw,2.4rem); color:var(--paper); margin-top:10px; }
.legacy__copy{ color:var(--steel); margin-top:22px; font-size:1.02rem; line-height:1.7; }
.legacy__stats{ display:flex; justify-content:center; gap:56px; margin-top:64px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat__num{ font-family:var(--font-display); font-size:2.6rem; color:var(--accent); }
.stat__label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--steel); text-transform:uppercase; margin-top:8px; }

/* ==========================================================================
   BRANDS
   ========================================================================== */
.brands{ padding:80px 0; overflow:hidden; }
.brands__eyebrow{ text-align:center; display:block; }
.brands__row{ overflow:hidden; padding:14px 0; }
.brands__track{ display:flex; gap:40px; width:max-content; }
.brands__track span{
  font-family:var(--font-display); font-size:1.3rem; letter-spacing:.04em; color:var(--steel);
  opacity:.55; transition:opacity .3s, color .3s; white-space:nowrap;
}
.brands__track span:hover{ opacity:1; color:var(--chrome); }
.brands__row--left .brands__track{ animation:tickerScroll 32s linear infinite; }
.brands__row--right .brands__track{ animation:tickerScrollRev 32s linear infinite; }
@keyframes tickerScrollRev{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding:140px 24px; max-width:var(--container); margin:0 auto; }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact__copy{ color:var(--steel); margin-top:18px; font-size:1rem; }
.contact h2{ font-size:clamp(1.7rem,3.6vw,2.3rem); color:var(--paper); margin-top:8px; }
.contact__detail{ margin-top:36px; }
.contact__detail h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold); margin-bottom:10px; }
.contact__detail p{ color:var(--chrome); font-size:.94rem; line-height:1.7; }
.contact__detail a:hover{ color:var(--accent); }

.contact__form{ display:flex; flex-direction:column; gap:20px; background:var(--panel); border:1px solid var(--line); padding:40px; border-radius:6px; }
.contact__form label{ display:flex; flex-direction:column; gap:8px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; }
.contact__form input, .contact__form textarea{
  background:var(--ink); border:1px solid var(--line); color:var(--paper); padding:14px 16px;
  font-family:var(--font-body); font-size:.95rem; border-radius:2px; resize:vertical;
  transition:border-color .3s;
}
.contact__form input:focus, .contact__form textarea:focus{ border-color:var(--accent); outline:none; }
.contact__submit{ margin-top:8px; }
.contact__note{ font-size:.75rem; color:var(--accent); min-height:1em; }
@media(max-width:900px){ .contact__grid{ grid-template-columns:1fr; gap:56px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top:1px solid var(--line); padding:40px 24px; }
.footer__inner{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__links{ display:flex; gap:26px; }
.footer__links a{ font-family:var(--font-mono); font-size:.75rem; color:var(--steel); }
.footer__links a:hover{ color:var(--accent); }
.footer__copy{ font-size:.7rem; color:var(--steel); letter-spacing:.03em; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}