/*
Theme Name: DDC Dumpster Rentals
Theme URI: https://dumpsterrental.digitaldelicounter.com
Author: digital deli counter
Description: Sales site for dumpster rental website design by digital deli counter.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ddc-dumpster
*/

:root{
  --ink:#111111;
  --ink-2:#6b6b6b;
  --muted:#8a8580;
  --paper:#fbf8f3;
  --paper-2:#f3ede3;
  --card:#ffffff;
  --line:#e6dfd3;
  --red:#c2261f;
  --red-dk:#9e1d17;
  --butter:#f4d58d;
  --mint:#cfe6dc;
  --blush:#f6d6cf;
  --display:"Barlow Condensed",system-ui,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
  --r:18px;
  --shadow:0 1px 2px rgba(20,18,16,.06),0 12px 32px -12px rgba(20,18,16,.22);
  --shadow-lg:0 2px 4px rgba(20,18,16,.06),0 30px 60px -20px rgba(20,18,16,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:99}

/* ---------- type ---------- */
.eyebrow{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor}
h1,h2,h3{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.025em;line-height:1;margin:0}
h1{font-size:clamp(46px,5.8vw,80px);line-height:1.05}
h2{font-size:clamp(36px,4vw,52px)}
h3{font-size:24px;line-height:1.3}
.it{color:var(--red)}
.lede{font-size:18px;line-height:1.78;color:var(--ink-2);max-width:34em}

h1.kicker,h2.eyebrow{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.18em;line-height:1.4;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px;margin:0}
h1.kicker::before{content:"";width:22px;height:1.5px;background:currentColor}
.display{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(46px,5.8vw,80px);line-height:1.05;margin:0}
/* niches */
.niches{padding-top:110px}
.niche-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.niche-grid article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 30px;transition:transform .35s,box-shadow .35s}
.niche-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.niche-grid h3{font-size:22px;margin:0 0 10px}
.niche-grid h3::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--red);margin-bottom:18px}
.niche-grid p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:1020px){.niche-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.niche-grid{grid-template-columns:1fr}.niches{padding-top:84px}}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;font-size:14px;line-height:20px;text-decoration:none;border-radius:999px;padding:12px 24px;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.btn-ink:hover{background:var(--red)}
.btn-ghost{background:#f5f5f5;color:var(--ink);box-shadow:inset 0 0 0 1px #e6e6e6}
.btn-ghost:hover{background:#ebebeb}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{text-decoration:none;display:inline-flex;flex-direction:column;line-height:1}
.logo small{font-size:12.5px;font-weight:500;letter-spacing:.02em;margin:0 0 2px 22px;color:var(--ink-2)}
.logo b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:center}
.logo .dot{width:.74em;height:.74em;border-radius:50%;background:var(--red);display:inline-block;margin:0 .02em;transform:translateY(.04em)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{text-decoration:none;font-size:14px;color:var(--ink-2);font-weight:400}
.nav-links a:hover{color:var(--red)}
.nav .btn{padding:8px 16px;font-size:14px}
@media (max-width:880px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:780px;height:780px;background:radial-gradient(closest-side,rgba(244,213,141,.55),rgba(244,213,141,0));pointer-events:none}
.hero::after{content:"";position:absolute;left:-200px;bottom:-260px;width:620px;height:620px;background:radial-gradient(closest-side,rgba(246,214,207,.7),rgba(246,214,207,0));pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center}
.hero .display{margin:22px 0 24px}
.hero .lede{margin:0 0 32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.price-note{margin-top:22px;font-size:14px;color:var(--muted)}
.price-note b{color:var(--ink)}
.ticket-chip{display:inline-flex;align-items:stretch;border-radius:8px;overflow:hidden;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:13px;box-shadow:var(--shadow)}
.ticket-chip span{padding:6px 12px;background:#fff}
.ticket-chip span+span{background:var(--red);color:#fff;border-left:2px dashed rgba(255,255,255,.6)}

.frame{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid rgba(20,18,16,.08)}
.frame .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f4f1ec;border-bottom:1px solid #e9e3d9}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#d8d1c5}
.frame .bar i:first-child{background:#e8a29c}
.frame .bar em{margin-left:10px;font-style:normal;font-size:11px;color:#8d867c;background:#fff;border-radius:20px;padding:2px 12px;flex:1;max-width:220px}

.spread{position:relative;height:600px;margin-right:-90px}
.plane{position:absolute;inset:-60px -40px -60px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;transform:perspective(1800px) rotateX(24deg) rotateY(-14deg) rotateZ(12deg);transform-origin:50% 50%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
.col{overflow:visible}
.track{display:flex;flex-direction:column;gap:18px;animation:rise 70s linear infinite}
.col-2 .track{animation-name:fall;animation-duration:80s}
.col-3 .track{animation-duration:62s;animation-delay:-20s}
.track img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(20,18,16,.08),0 24px 40px -22px rgba(20,18,16,.45)}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 9px))}}
@keyframes fall{from{transform:translateY(calc(-50% - 9px))}to{transform:translateY(0)}}
.spread:hover .track{animation-play-state:paused}
.slip{position:absolute;z-index:4;left:0;bottom:30px;width:270px;background:#fffdf8;color:var(--ink);padding:22px 22px 18px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.5;transform:rotate(-4deg);box-shadow:0 30px 50px -24px rgba(20,18,16,.5),0 2px 6px rgba(20,18,16,.08);-webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) top/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) bottom/14px 51% repeat-x;mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) top/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) bottom/14px 51% repeat-x}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--muted);padding-bottom:12px;border-bottom:1.5px dashed #d9d1c4;margin-bottom:12px}
.slip-head b{font-weight:500;color:var(--red);letter-spacing:.08em;font-size:16px}
.slip-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.slip-row i{font-style:normal;color:var(--red)}
.slip-row.big{font-weight:500;font-size:13.5px;padding:0}
.slip-sub{color:var(--muted);font-size:11.5px;margin:0 0 10px}
.slip-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1.5px dashed #d9d1c4;font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:12.5px}
.slip-foot .dot{width:14px;height:14px;border-radius:50%;background:var(--red)}

/* ---------- marquee ---------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:10px 0;transform:rotate(-.8deg);margin:40px -20px 0;position:relative;z-index:2}
.ticker-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.ticker-track span{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.24em;padding:0 20px;white-space:nowrap;display:inline-flex;align-items:center;gap:40px;color:rgba(255,255,255,.9)}
.ticker-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:120px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{margin-top:16px;max-width:17em}
.sec-head p{max-width:26em;color:var(--ink-2);margin:0}

/* display case */
.case{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.case .item:nth-child(3n+2){transform:translateY(60px)}
.case-wrap{padding-bottom:60px}
.item figure{margin:0}
.item .frame{position:relative;inset:auto;border-radius:14px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.item:hover .frame{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 40px 70px -25px rgba(20,18,16,.45)}
.viewport{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.viewport img{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 4.5s cubic-bezier(.45,0,.3,1)}
.item:hover .viewport img{transform:translateY(calc(-100% + var(--vh,100%)))}
.viewport::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(to top,rgba(20,18,16,.18),transparent);opacity:1;transition:opacity .4s}
.item:hover .viewport::after{opacity:0}
.item figcaption{padding:18px 4px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.item figcaption h3{font-size:24px}
.item figcaption p{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}
.tag{flex:none;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.hint{font-size:13px;color:var(--muted);display:inline-flex;gap:8px;align-items:center}
.hint svg{width:16px;height:16px}

.demo-band{margin-top:130px;display:flex;align-items:center;justify-content:space-between;gap:30px 50px;flex-wrap:wrap;padding:34px 38px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.demo-copy{max-width:640px}
.demo-band h3{margin:12px 0 8px;font-size:30px}
.demo-band p{margin:0;color:var(--ink-2);font-size:15.5px}
.price-note a{color:var(--red);text-decoration:none;margin-left:6px;white-space:nowrap}
.price-note a:hover{text-decoration:underline}
/* flavors wall */
.flavors{background:var(--ink);color:#fff;overflow:hidden}
.flavors .eyebrow{color:var(--butter)}
.flavors .sec-head p{color:rgba(255,255,255,.72)}
.flavors .it{color:var(--butter)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:-20px 0 56px}
.chips span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;font-size:14px;color:rgba(255,255,255,.88)}
.wall{display:flex;flex-direction:column;gap:22px;transform:rotate(-2deg);margin:0 -60px}
.wall-row{display:flex;gap:22px;width:max-content;animation:marq 90s linear infinite}
.wall-row.rev{animation-direction:reverse;animation-duration:110s}
.wall:hover .wall-row{animation-play-state:paused}
.tile{width:360px;flex:none;border-radius:12px;overflow:hidden;background:#222;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.tile .bar{height:22px;background:#2a2725;display:flex;gap:5px;align-items:center;padding:0 10px}
.tile .bar i{width:7px;height:7px;border-radius:50%;background:#55504a}
.tile img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* included */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--ink)}
.menu-item{padding:34px 30px 38px 0;border-bottom:1px solid var(--line)}
.menu-item:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid var(--line)}
.menu-item .num{font-family:var(--display);font-size:15px;letter-spacing:.14em;color:var(--red);font-weight:500}
.menu-item h3{margin:14px 0 10px}
.menu-item p{margin:0;color:var(--ink-2);font-size:15.5px}

/* steps */
.steps-sec{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{position:relative;background:var(--card);border-radius:var(--r);padding:34px 30px 34px;box-shadow:var(--shadow)}
.step::before,.step::after{content:"";position:absolute;top:86px;width:22px;height:22px;border-radius:50%;background:var(--paper-2)}
.step::before{left:-11px}.step::after{right:-11px}
.step .no{display:flex;justify-content:space-between;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--muted);padding-bottom:22px;border-bottom:2px dashed var(--line);margin-bottom:24px}
.step .no b{color:var(--red);font-weight:500;font-size:40px;line-height:.8;letter-spacing:0}
.step h3{font-size:26px;margin-bottom:10px}
.step p{margin:0;color:var(--ink-2);font-size:15.5px}

/* price */
.price{padding:110px 0;text-align:center}
.price .big{font-family:var(--display);font-weight:400;font-size:clamp(64px,9vw,128px);line-height:1;letter-spacing:.02em;margin:18px 0 6px}
.price .big .dash{color:var(--red)}
.price p{margin:12px auto 0;max-width:34em;color:var(--ink-2)}
.price .fine{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;margin-top:34px;font-size:14.5px;color:var(--ink-2)}
.price .fine span{display:inline-flex;align-items:center;gap:8px}
.price .fine span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details:first-child{border-top:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-weight:500;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:28px;line-height:.9;color:var(--red);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;color:var(--ink-2);max-width:40em}

/* integrations */
.integrations{padding-top:40px}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.logos li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:110px;padding:20px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:19px;line-height:1.15;color:var(--ink);transition:background .3s,color .3s}
.logos li:hover{background:#fff;color:var(--red)}
.logos-note{margin:22px 0 0;font-size:14.5px;color:var(--ink-2)}
@media (max-width:1020px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.logos{grid-template-columns:repeat(2,1fr)}.logos li{min-height:84px;font-size:16px}}

/* cta */
.cta{padding:0 0 120px}
.cta-card{position:relative;background:var(--red);color:#fff;border-radius:28px;padding:80px 64px;overflow:hidden;display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:center}
.cta-card::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25)}
.cta-card::after{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
.cta-card .eyebrow{color:#fff}
.cta-card h2{margin:16px 0 18px}
.cta-card h2 .it{color:var(--butter)}
.cta-card p{margin:0 0 30px;color:rgba(255,255,255,.88);max-width:30em}
.cta-card .btn-ink{background:#fff;color:var(--ink)}
.cta-card .btn-ink:hover{background:var(--ink);color:#fff}
.cta-card .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.cta-card .btn-ghost:hover{background:#fff;color:var(--ink)}
.take{position:relative;z-index:1;justify-self:center;width:250px;background:#fff;color:var(--ink);border-radius:10px;padding:26px 24px 22px;text-align:center;transform:rotate(5deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.45)}
.take::before,.take::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--red);transform:translateY(-50%)}
.take::before{left:-11px}.take::after{right:-11px}
.take small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}
.take .n{display:block;font-family:var(--display);font-weight:400;font-size:96px;line-height:1;margin:6px 0;letter-spacing:.02em}
.take .line{border-top:2px dashed var(--line);margin:12px 0;}
.take em{font-style:normal;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:17px;color:var(--red)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0 50px;font-size:14px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--red)}
.foot .links{display:flex;gap:24px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.case .item.reveal.in:nth-child(3n+2){transform:translateY(60px)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .spread{margin:0 -20px;height:520px}
  .plane{inset:-40px -20px}
  .slip{left:20px;bottom:10px}
  .case{grid-template-columns:repeat(2,1fr)}
  .case .item:nth-child(3n+2),.case .item.reveal.in:nth-child(3n+2){transform:none}
  .case .item:nth-child(2n){transform:translateY(50px)}
  .case .item.reveal.in:nth-child(2n){transform:translateY(50px)}
  .demo-band{margin-top:110px}
  .menu{grid-template-columns:1fr 1fr}
  .menu-item,.menu-item:not(:nth-child(3n+1)){padding:30px 24px 32px 0;border-left:0}
  .menu-item:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .cta-card{grid-template-columns:1fr;padding:60px 36px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .hero{padding:40px 0 20px}
  .sec{padding:84px 0}
  .case{grid-template-columns:1fr;gap:40px}
  .case .item:nth-child(2n),.case .item.reveal.in:nth-child(2n){transform:none}
  .case-wrap{padding-bottom:0}
  .demo-band{margin-top:56px;padding:26px 22px}
  .menu{grid-template-columns:1fr}
  .menu-item,.menu-item:nth-child(2n){padding:26px 0;border-left:0}
  .tile{width:250px}
  .spread{height:420px}
  .slip{width:200px;font-size:10.5px;padding:16px 16px 12px;bottom:16px}
  .slip-row.big{font-size:11.5px}.slip-sub{font-size:10px}.slip-head b{font-size:14px}
  .ticker-track span{font-size:13px;gap:28px;padding:0 14px}
  .cta-card{padding:48px 24px;border-radius:22px}
  .take{width:210px}.take .n{font-size:78px}
  .price .fine{flex-direction:column;align-items:center}
}
@media (hover:none){
  .hint{display:none!important}
  .viewport img{animation:peek 14s cubic-bezier(.45,0,.3,1) infinite alternate;animation-play-state:paused}
  .item.in .viewport img{animation-play-state:running}
  @keyframes peek{0%,15%{transform:translateY(0)}85%,100%{transform:translateY(calc(-100% + var(--vh,100%)))}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}