/* ===================================================================
   PT. BPLL · bold industrial redesign (logo palette)
   palette: ink #0A0A0A · paper #F5F2EC · red #E1112D · blue #1E40AF · steel #4A5563
   type: Anton (display) / Archivo (UI) / JetBrains Mono (kbd)
   =================================================================== */

:root{
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --paper:#F5F2EC;
  --paper-2:#EAE6DE;
  --steel:#4A5563;
  --steel-2:#8A8A85;
  --red:#E1112D;
  --red-2:#B40B22;
  --blue:#1E40AF;
  --blue-2:#1E3A8A;
  --line:rgba(10,10,10,.12);
  --line-d:rgba(255,255,255,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --container: 1320px;
  --pad: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

/* paper grain bg */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:3px 3px;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:multiply;
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  display:flex;align-items:center;
  padding:18px var(--pad);
  gap:24px;
  background:rgba(244,241,236,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  padding-top:12px;padding-bottom:12px;
}
/* backdrop-filter on .nav creates a new containing block for position:fixed
   descendants, which breaks the fullscreen mobile menu below (it would
   anchor to the header's own small box instead of the viewport). Disable
   it while the menu is open. */
.nav.open{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--paper);
}
.brand{
  display:flex;align-items:center;
  margin-right:auto;
  position:relative;
  transition:opacity .25s var(--ease);
}
.brand:hover{opacity:.78}
.brand-logo{
  display:none;
  height:38px;width:auto;
}
.brand-logo-mini{
  display:block;
  height:38px;width:auto;
  object-fit:cover;object-position:left center;
  max-width:88px;
}
@media(min-width:720px){
  .brand-logo{display:block;height:36px}
  .brand-logo-mini{display:none}
}
@media(min-width:1100px){
  .brand-logo{height:40px}
}

.nav-links{display:none;gap:32px}
@media(min-width:880px){.nav-links{display:flex}}
.nav-links a{
  font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{
  display:none;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 18px;
  border-radius:999px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
@media(min-width:720px){.nav-cta{display:inline-flex}}
.nav-cta:hover{background:var(--red);transform:translateY(-1px)}

.nav-burger{
  display:flex;flex-direction:column;justify-content:center;
  width:36px;height:36px;gap:5px;
  background:transparent;border:0;cursor:pointer;
  margin-left:auto;
}
@media(min-width:880px){.nav-burger{display:none}}
.nav-burger span{
  display:block;height:2px;width:22px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
  margin-left:auto;
}
.nav-burger span:nth-child(2){width:16px}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);width:22px}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}

/* mobile menu */
.nav.open .nav-links{
  display:flex;
  position:fixed;top:64px;left:0;right:0;bottom:0;
  flex-direction:column;
  background:var(--paper);
  padding:40px var(--pad);gap:8px;
  z-index:40;
}
.nav.open .nav-links a{
  font-family:'Anton',sans-serif;
  font-size:42px;letter-spacing:.02em;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.nav.open .nav-links a::after{display:none}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:140px var(--pad) 0;
  max-width:var(--container);
  margin:0 auto;
  z-index:2;
}
.hero-grid{
  display:grid;gap:40px;
  padding-bottom:80px;
}
.hero-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  animation:fadeUp .8s var(--ease) both;
}
.kbd{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  padding:6px 10px;
  border:1px solid var(--ink);
  border-radius:3px;
  background:transparent;
}

.hero-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(64px, 14vw, 220px);
  line-height:.86;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.hero-title .line{
  display:block;overflow:hidden;
}
.hero-title .word{
  display:inline-block;
  transform:translateY(110%);
  animation:slideUp 1s var(--ease) forwards;
}
.hero-title .line:nth-child(1) .word{animation-delay:.05s}
.hero-title .line:nth-child(2) .word{animation-delay:.18s}
.hero-title .line:nth-child(3) .word{animation-delay:.30s}
.hero-title .line:nth-child(4) .word{animation-delay:.42s}

.hero-title .outline .word{
  -webkit-text-stroke:2px var(--ink);
  color:transparent;
}
.hero-title .dot{
  display:inline-block;
  width:.16em;height:.16em;
  background:var(--blue);
  border-radius:50%;
  vertical-align:middle;
  margin-left:.15em;
  margin-bottom:.06em;
  animation:fadeUp .8s var(--ease) .9s both;
}

.hero-tail{
  display:grid;gap:28px;
  max-width:980px;
  align-items:end;
  grid-template-columns:1fr;
}
@media(min-width:880px){
  .hero-tail{grid-template-columns:1.2fr 1fr;gap:60px}
}
.hero-lede{
  font-size:clamp(16px,1.6vw,20px);
  color:var(--ink);
  max-width:560px;
  line-height:1.5;
  border-left:3px solid var(--blue);
  padding-left:20px;
  animation:fadeUp .8s var(--ease) .8s both;
}
.hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;
  animation:fadeUp .8s var(--ease) .95s both;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;
  padding:18px 28px;
  border:2px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

/* ticker */
.ticker{
  margin:0 calc(-1 * var(--pad));
  background:var(--ink);
  color:var(--paper);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
  padding:18px 0;
}
.ticker-track{
  display:flex;gap:32px;
  white-space:nowrap;
  font-family:'Anton',sans-serif;
  font-size:clamp(20px,2.6vw,32px);
  letter-spacing:.03em;
  animation:ticker 40s linear infinite;
}
.ticker .sep{color:var(--red)}
.ticker-track > span:nth-of-type(8n+4).sep{color:var(--blue)}
.ticker-track > span:nth-of-type(8n+8).sep{color:var(--blue)}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============ SECTION LABEL ============ */
.section-label{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}
.section-label.light{color:var(--paper)}
.section-label .dash{
  display:inline-block;width:32px;height:2px;background:var(--red);
  transition:background .3s var(--ease);
}
.section-label.blue .dash{background:var(--blue)}

/* ============ PROMISE / STATS ============ */
.promise{
  position:relative;z-index:2;
  padding:90px var(--pad);
  max-width:var(--container);
  margin:0 auto;
  border-top:1px solid var(--line);
}
.promise-grid{
  display:grid;gap:48px;
}
@media(min-width:780px){
  .promise-grid{grid-template-columns:repeat(3,1fr);gap:32px}
}
.promise-item{
  display:flex;gap:18px;align-items:flex-start;
  position:relative;
}
.promise-num{
  font-family:'Anton',sans-serif;
  font-size:64px;line-height:.85;
  color:var(--red);
  flex-shrink:0;
}
.promise-item:nth-child(2) .promise-num{color:var(--blue)}
.promise-body h3{
  font-family:'Anton',sans-serif;
  font-size:24px;letter-spacing:.02em;
  margin-bottom:8px;
  text-transform:uppercase;
}
.promise-body p{
  color:var(--steel);
  font-size:15px;
}

/* ============ ABOUT ============ */
.about{
  position:relative;z-index:2;
  padding:120px var(--pad);
  max-width:var(--container);
  margin:0 auto;
  border-top:1px solid var(--line);
}
.about-inner{display:grid;gap:48px}
.about-grid{
  display:grid;gap:48px;
}
@media(min-width:880px){
  .about-grid{grid-template-columns:1.3fr 1fr;gap:80px}
}
.about-headline h2{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(40px,6vw,84px);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.ink-red{color:var(--red)}
.ink-blue{color:var(--blue)}
.underline-bold{
  position:relative;display:inline-block;
}
.underline-bold::after{
  content:"";position:absolute;
  left:0;right:0;bottom:.04em;
  height:.18em;
  background:var(--blue);
  z-index:-1;
  opacity:.85;
}
.about-text p{
  font-size:16px;
  color:var(--steel);
  margin-bottom:14px;
  max-width:440px;
}
.about-text p:first-of-type{color:var(--ink);font-weight:500}
.about-points{
  list-style:none;
  margin-top:24px;
  display:grid;gap:12px;
}
.about-points li{
  font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
  padding-left:24px;
  position:relative;
}
.about-points li::before{
  content:"";position:absolute;
  left:0;top:.55em;
  width:14px;height:2px;background:var(--red);
}
.about-points b{
  font-family:'Anton',sans-serif;
  font-size:20px;font-weight:400;
  color:var(--ink);
  margin-right:4px;
}

/* ============ PRODUCTS ============ */
.products{
  position:relative;z-index:2;
  padding:120px var(--pad);
  max-width:var(--container);
  margin:0 auto;
  border-top:1px solid var(--line);
}
.block-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(40px,6vw,84px);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-top:18px;
  margin-bottom:60px;
  max-width:1100px;
}
.block-title.light{color:var(--paper)}

.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media(min-width:640px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.product-grid{grid-template-columns:repeat(4,1fr)}}

.prod{
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  cursor:default;
  overflow:hidden;
  transition:background .35s var(--ease);
}
.prod::before{
  content:attr(data-num);
  position:absolute;top:14px;left:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--steel-2);
  z-index:2;
  transition:color .35s var(--ease);
}
.prod-art{
  aspect-ratio:1/.85;
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
  transition:background .35s var(--ease);
}
.prod-art img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease),filter .4s var(--ease);
  filter:saturate(.9) contrast(1.02);
}
.prod-art::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.18) 100%);
  pointer-events:none;
  transition:background .35s var(--ease);
}

.prod-body{
  padding:28px 24px 32px;
}
.prod-body h3{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:22px;letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.prod-body p{
  font-size:14px;color:var(--steel);
  margin-bottom:16px;
}
.prod-tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding:5px 9px;
  border:1px solid var(--ink);
  border-radius:999px;
}
.prod:hover{background:var(--ink);color:var(--paper)}
.prod:hover::before{color:var(--blue)}
.prod:hover .prod-art img{
  transform:scale(1.05);
  filter:saturate(1.05) contrast(1.05);
}
.prod:hover .prod-art::after{
  background:linear-gradient(180deg, rgba(30,64,175,.30) 0%, rgba(10,10,10,.55) 100%);
}
.prod:nth-child(2):hover .prod-art::after,
.prod:nth-child(5):hover .prod-art::after,
.prod:nth-child(7):hover .prod-art::after{
  background:linear-gradient(180deg, rgba(225,17,45,.32) 0%, rgba(10,10,10,.55) 100%);
}
.prod:nth-child(2):hover::before,
.prod:nth-child(5):hover::before,
.prod:nth-child(7):hover::before{color:var(--red)}
.prod:hover .prod-body p{color:var(--steel-2)}
.prod:hover .prod-tag{border-color:var(--blue);color:var(--blue)}
.prod:nth-child(2):hover .prod-tag,
.prod:nth-child(5):hover .prod-tag,
.prod:nth-child(7):hover .prod-tag{border-color:var(--red);color:var(--red)}

/* ============ PROJECTS ============ */
.projects{
  position:relative;z-index:2;
  background:var(--ink);
  color:var(--paper);
  padding:120px var(--pad);
  margin-top:0;
}
.projects-head{
  max-width:var(--container);
  margin:0 auto 60px;
}
.projects-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line-d);
  border-left:1px solid var(--line-d);
}
@media(min-width:560px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.projects-grid{grid-template-columns:repeat(4,1fr)}}

.client{
  position:relative;
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);
  background:transparent;
  color:var(--paper);
  transition:background .35s var(--ease);
}
.client-img{
  aspect-ratio:4/3;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg, rgba(30,64,175,.22) 0%, rgba(30,64,175,.04) 60%, rgba(255,255,255,.02) 100%);
  border-bottom:1px solid var(--line-d);
  overflow:hidden;
}
.client-img img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease),filter .4s var(--ease);
  filter:saturate(.92);
}
.client-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,.35) 100%);
  pointer-events:none;
  transition:opacity .35s var(--ease),background .35s var(--ease);
}
.client-meta{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 22px 26px;
}
.client-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.client:nth-child(3) .client-tag,
.client:nth-child(6) .client-tag{color:var(--red)}
.client-name{
  font-family:'Anton',sans-serif;
  font-size:clamp(20px,1.8vw,26px);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.02;
  color:var(--paper);
}
.client:hover .client-img img{
  transform:scale(1.06);
  filter:saturate(1.05);
}
.client:hover .client-img::after{
  background:linear-gradient(180deg, rgba(30,64,175,.45) 0%, rgba(10,10,10,.55) 100%);
}
.client:nth-child(3):hover .client-img::after,
.client:nth-child(6):hover .client-img::after{
  background:linear-gradient(180deg, rgba(225,17,45,.45) 0%, rgba(10,10,10,.55) 100%);
}

/* CTA card (kotak ajakan kontak) */
.client-cta{
  background:var(--red);
  color:var(--paper);
}
.client-cta-inner{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-start;
  padding:28px 26px 26px;
  gap:18px;
  min-height:100%;
}
.client-cta-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(244,241,236,.85);
}
.client-cta-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(28px,2.2vw,36px);
  line-height:.96;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.client-cta-link{
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  border-bottom:2px solid var(--paper);
  padding-bottom:4px;
  transition:gap .25s var(--ease),opacity .25s var(--ease);
}
.client-cta-link:hover{opacity:.85}

/* ============ CONTACT ============ */
.contact{
  position:relative;z-index:2;
  padding:120px var(--pad);
  max-width:var(--container);
  margin:0 auto;
}
.contact-grid{
  display:grid;gap:60px;
}
@media(min-width:980px){
  .contact-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:start}
}
.contact-headline h2{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(36px,5vw,68px);
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-top:18px;
}
.contact-cards{
  display:grid;gap:14px;
}
@media(min-width:600px){.contact-cards{grid-template-columns:1fr 1fr}}
.ccard{
  position:relative;
  display:block;
  padding:28px 24px 24px;
  border:1px solid var(--ink);
  border-radius:6px;
  background:var(--paper);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.ccard:not(.ccard-static){cursor:pointer}
.ccard:not(.ccard-static):hover{background:var(--ink);color:var(--paper);transform:translateY(-3px)}
.ccard-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
}
.contact-cards .ccard:nth-child(2) .ccard-label,
.contact-cards .ccard:nth-child(3) .ccard-label{color:var(--blue)}
.ccard-value{
  font-family:'Anton',sans-serif;
  font-size:24px;letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.05;
}
.ccard-sub{
  font-size:13px;color:var(--steel);
  margin-top:6px;
}
.ccard:not(.ccard-static):hover .ccard-sub{color:var(--steel-2)}
.ccard-arrow{
  position:absolute;top:24px;right:24px;
  font-family:'Anton',sans-serif;font-size:22px;
  transition:transform .3s var(--ease);
}
.ccard:not(.ccard-static):hover .ccard-arrow{transform:translateX(4px)}

/* ============ FOOTER ============ */
.foot{
  position:relative;z-index:2;
  background:var(--ink);color:var(--paper);
  padding:60px var(--pad) 28px;
}
.foot-top{
  max-width:var(--container);margin:0 auto;
  display:flex;gap:32px;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;
  padding-bottom:32px;
  border-bottom:1px solid var(--line-d);
}
.foot-mark{
  display:flex;flex-direction:column;gap:18px;
  max-width:520px;
}
.foot-logo{
  display:block;
  height:48px;width:auto;
  max-width:100%;
  align-self:flex-start;
}
.foot-name{
  font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--steel-2);
  max-width:380px;
  line-height:1.5;
}
.foot-nav{
  display:flex;gap:24px;flex-wrap:wrap;
}
.foot-nav a{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.75;
  transition:opacity .25s var(--ease),color .25s var(--ease);
}
.foot-nav a:hover{opacity:1;color:var(--blue)}
.foot-nav a:nth-child(2n):hover{color:var(--red)}
.foot-bot{
  max-width:var(--container);margin:0 auto;
  display:flex;gap:16px;flex-wrap:wrap;
  justify-content:space-between;
  padding-top:24px;
  font-size:11px;letter-spacing:.08em;
  color:var(--steel-2);
  text-transform:uppercase;
}
.foot-cred a{color:var(--red)}

/* ============ FAB ============ */
.fab{
  position:fixed;bottom:24px;right:24px;
  z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45),0 4px 10px rgba(0,0,0,.15);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  animation:fabPulse 2.5s ease-in-out infinite;
}
.fab:hover{
  transform:scale(1.08);
  box-shadow:0 15px 40px rgba(37,211,102,.55),0 4px 10px rgba(0,0,0,.2);
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.55)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 12px rgba(37,211,102,0)}
}

/* ============ REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.in{opacity:1;transform:none}

/* ============ ANIMATIONS ============ */
@keyframes slideUp{
  from{transform:translateY(110%)}
  to{transform:translateY(0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* ============ A11Y ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}