:root{
  --bg:#050816; --bg2:#0a1030; --ink:#e8ecff; --muted:#a9b1d6;
  --gold:#f5c26b; --gold2:#ffdf9e; --teal:#5ee7df; --blue:#4f7cff; --red:#e0574f;
  --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.1);
  --radius:20px; --max:1180px;
  --f-body:"Tajawal",system-ui,sans-serif; --f-head:"Reem Kufi","Tajawal",sans-serif; --f-ayah:"Amiri",serif;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:radial-gradient(1200px 700px at 80% -10%,#16205a 0%,transparent 60%),radial-gradient(900px 600px at 0% 30%,#1a0f3d 0%,transparent 60%),var(--bg);
  color:var(--ink);font-family:var(--f-body);font-size:19px;line-height:2;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99;width:100%;height:100%}

/* progress + topbar */
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:60}
.progress span{display:block;height:100%;width:100%;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--teal),var(--gold))}
.topbar{position:fixed;top:0;inset-inline:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,40px);transition:.4s}
.topbar.solid{background:rgba(5,8,22,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--f-head);font-size:20px}
.brand-disc{width:30px;height:30px;border-radius:50%;background:url(../img/2.webp) center/cover;box-shadow:0 0 18px rgba(94,231,223,.5);animation:spin 30s linear infinite}
.nav{display:flex;gap:4px}
.nav a{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 12px;border-radius:999px;transition:.25s}
.nav a:hover,.nav a.active{color:var(--bg);background:var(--gold)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.3s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 17px var(--f-body);padding:13px 28px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s}
.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1b1300;box-shadow:0 10px 30px -8px rgba(245,194,107,.6)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.25)}
.btn:hover{transform:translateY(-3px)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.sm{padding:8px 18px;font-size:15px}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;padding:110px clamp(16px,5vw,70px) 60px;position:relative;max-width:1400px;margin:auto}
.eyebrow{color:var(--teal);letter-spacing:.5px;margin:0 0 6px;font-weight:700}
.hero h1{font-family:var(--f-head);font-size:clamp(44px,7vw,92px);line-height:1.15;margin:0 0 18px;font-weight:700}
.hero h1 em{font-style:normal}
.hero h1 em:not(:has(.ch)),.hero h1 em .ch{background:linear-gradient(90deg,var(--gold2),var(--gold),#ff9b6b,var(--gold2));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.hero h1 em .ch{animation:charIn .8s cubic-bezier(.2,.8,.2,1) forwards,shine 6s linear infinite}
.split .ch{display:inline-block;opacity:0;transform:translateY(40px) rotateX(-80deg);animation:charIn .8s cubic-bezier(.2,.8,.2,1) forwards}
.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:34ch;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-text>*{animation:fadeUp 1s both}
.hero-text .lead{animation-delay:1.1s}.hero-text .cta{animation-delay:1.3s}

/* 3D flat-earth scene */
.scene{position:relative;aspect-ratio:1/1;width:min(100%,640px);margin:auto;perspective:1400px;--rx:64deg;--ry:0deg}
.world{position:absolute;inset:8% 4% 0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateZ(var(--ry));transition:transform .6s cubic-bezier(.2,.8,.2,1);top:22%}
.disc,.ice-wall{position:absolute;inset:0;border-radius:50%}
.disc{overflow:hidden;animation:spin 80s linear infinite;box-shadow:0 0 0 6px rgba(255,255,255,.85),0 0 80px rgba(94,231,223,.35)}
.disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.ice-wall{transform:translateZ(-26px);background:linear-gradient(#cfe8ff,#6c8db8);box-shadow:0 40px 90px rgba(0,0,0,.8)}
.orbit{position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(245,194,107,.35);transform:translateZ(120px);transform-style:preserve-3d;animation:spin 18s linear infinite}
.body{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;top:50%;left:50%;margin:-7.5% 0 0 -7.5%;transform-style:preserve-3d}
.sun{animation:bbS 18s linear infinite;background:radial-gradient(circle at 40% 40%,#fff6c9,#ffc94a 45%,#ff8a1f 75%);box-shadow:0 0 40px 12px rgba(255,190,70,.75),0 0 120px 40px rgba(255,150,40,.35)}
.moon{animation:bbM 18s linear infinite;background:radial-gradient(circle at 35% 35%,#fff,#d7dbe6 50%,#9aa2b8);box-shadow:0 0 30px 6px rgba(200,220,255,.55)}
.dome{position:absolute;left:3%;right:3%;top:6%;height:62%;border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(120% 90% at 50% 100%,rgba(94,231,223,.0) 40%,rgba(94,231,223,.12) 70%,rgba(160,200,255,.25) 100%);border:1px solid rgba(180,230,255,.35);border-bottom:0;box-shadow:inset 0 30px 60px rgba(255,255,255,.08);pointer-events:none;z-index:2;overflow:hidden}
.dome::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 45%,transparent 55%);animation:sheen 7s ease-in-out infinite}
.glow{position:absolute;inset:auto 10% 4%;height:20%;background:radial-gradient(closest-side,rgba(79,124,255,.45),transparent);filter:blur(20px);z-index:-1}
.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:28px;height:46px;border:2px solid rgba(255,255,255,.4);border-radius:20px}
.scroll-hint span{position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--gold);animation:wheel 1.8s infinite}

/* chapters */
.chapter{padding:clamp(70px,10vw,130px) clamp(16px,4vw,40px);position:relative}
.chapter.alt{background:linear-gradient(180deg,transparent,rgba(79,124,255,.06) 20%,rgba(79,124,255,.06) 80%,transparent)}
.wrap{max-width:var(--max);margin:auto}
.narrow{max-width:820px;margin-inline:auto}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;margin-block:28px}
.kicker{display:inline-block;font-size:14px;font-weight:700;color:var(--teal);border:1px solid rgba(94,231,223,.35);padding:2px 14px;border-radius:999px;margin-bottom:8px}
h2{font-family:var(--f-head);font-size:clamp(30px,4.4vw,52px);line-height:1.3;margin:6px 0 22px;background:linear-gradient(180deg,#fff,#c9d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
h2.big{font-size:clamp(34px,5.4vw,68px);text-align:center}
h2 em{font-style:normal;color:var(--gold);-webkit-text-fill-color:var(--gold)}
h3.sub{font-family:var(--f-head);font-size:clamp(24px,3vw,34px);color:var(--gold2);margin:70px 0 10px}
.copy p,.narrow p{margin:0 0 18px;text-align:justify}
.copy p:first-of-type::first-letter{font-size:1.6em;color:var(--gold)}
.tag{color:var(--teal);font-weight:700}

/* media */
.media{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);position:relative}
.media img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.media:hover img{transform:scale(1.05)}
.media figcaption{padding:12px 18px;color:var(--muted);font-size:15px}
.media.wide{margin-block:30px}
.media.float{animation:bob 6s ease-in-out infinite;max-width:280px;justify-self:center;background:none;border:0;box-shadow:none}
.moon-fig{border-radius:50%;aspect-ratio:1;background:none;border:0;box-shadow:0 0 80px rgba(200,220,255,.25)}
.moon-fig img{height:100%;object-fit:cover;animation:spin 120s linear infinite}
.gallery{display:grid;gap:18px;margin-block:30px}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery.two-col{grid-template-columns:repeat(2,1fr)}

/* youtube */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000 center/cover;cursor:pointer;border:1px solid var(--line);box-shadow:0 30px 60px -30px #000}
.yt.wide{margin-block:30px}
.yt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.yt .play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;background:rgba(224,87,79,.92);display:grid;place-items:center;transition:.3s;box-shadow:0 0 0 0 rgba(224,87,79,.6);animation:pulse 2.4s infinite}
.yt .play::after{content:"";border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
.yt:hover .play{transform:scale(1.12)}
.yt .cap{position:absolute;bottom:12px;inset-inline:16px;font-weight:700;font-size:16px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* fisheye lab */
.lab{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-block:34px;text-align:center}
.lab-head{display:flex;flex-direction:column;margin-bottom:12px}
.lab-head strong{font-family:var(--f-head);font-size:24px;color:var(--gold2)}
.lab-head span{color:var(--muted);font-size:16px}
#fisheye{width:100%;height:auto;border-radius:14px;display:block}
.slider{display:flex;align-items:center;gap:14px;margin-top:16px;font-size:15px;color:var(--muted)}
.slider input{flex:1}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--teal));outline:none;direction:ltr}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(245,194,107,.3);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;cursor:grab}
#lensOut{font:800 28px var(--f-head);color:var(--gold)}

/* speeds */
.speeds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.speed{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;position:relative;overflow:hidden}
.speed::before{content:"";position:absolute;width:140%;aspect-ratio:1;left:-20%;top:-120%;border-radius:50%;border:1px dashed rgba(94,231,223,.25);animation:spin 20s linear infinite}
.speed b{display:block;font:800 clamp(30px,4vw,48px) var(--f-head);color:var(--gold);direction:ltr}
.speed span{color:var(--muted);font-size:15px;line-height:1.7}

/* eclipse */
.eclipse{position:relative;height:280px;margin:20px auto 10px;max-width:700px;overflow:hidden;--p:0}
.e-sun,.e-moon{position:absolute;top:50%;width:170px;height:170px;margin-top:-85px;border-radius:50%}
.e-sun{left:50%;margin-left:-85px;background:radial-gradient(circle,#fff6c9,#ffc94a 55%,#ff8a1f);box-shadow:0 0 calc(40px + var(--p)*80px) calc(10px + var(--p)*30px) rgba(255,200,90,calc(.5 + var(--p)*.4))}
.e-moon{left:calc(50% - 85px + (1 - var(--p)) * 330px);background:radial-gradient(circle at 40% 40%,#1b2140,#05060c);box-shadow:inset -8px -8px 20px rgba(255,255,255,.05)}
.e-hint{position:absolute;bottom:0;width:100%;text-align:center;color:var(--muted);font-size:14px;margin:0;opacity:calc(1 - var(--p))}

/* compare */
.compare{max-width:560px;margin:34px auto}
.cmp-box{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:534/749;background:#fff;--x:50%;border:1px solid var(--line)}
.cmp-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--gold);pointer-events:none}
.cmp-handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(245,194,107,.3)}
.cmp-handle span::before{content:"⇆";position:absolute;inset:0;display:grid;place-items:center;color:#1b1300;font-weight:800;line-height:1}
.cmp-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-top:8px}

/* versus */
.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:24px auto 50px;max-width:900px}
.versus figure{margin:0;border-radius:14px;overflow:hidden;background:#fff;transition:.5s}
.versus b{font:800 30px var(--f-head);color:var(--red);text-shadow:0 0 20px rgba(224,87,79,.6);animation:pulseText 2s infinite}
.versus.in figure:first-child{animation:slideR .9s both}
.versus.in figure:last-child{animation:slideL .9s both}

/* post / quotes */
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,40px);position:relative}
.post::before{content:"”";position:absolute;top:-30px;right:24px;font:120px/1 var(--f-ayah);color:var(--gold);opacity:.5}
.ayah{font-family:var(--f-ayah);font-size:clamp(21px,2.3vw,26px);line-height:2.1;margin:22px 0;padding:22px 28px;border-radius:18px;background:linear-gradient(135deg,rgba(245,194,107,.12),rgba(245,194,107,.03));border:1px solid rgba(245,194,107,.3);color:#fff3da;position:relative}
.ayah p{margin:0;text-align:center !important}
.ayah p::before{content:"﴿ ";color:var(--gold)}.ayah p::after{content:" ﴾";color:var(--gold)}
.ayah cite{display:block;text-align:center;font:500 15px var(--f-body);color:var(--gold);margin-top:8px;font-style:normal}
.truths{list-style:none;padding:0;margin:30px 0;display:grid;gap:12px}
.truths li{padding:18px 60px 18px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;position:relative;font-weight:700}
.truths li::before{content:"✦";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:22px}

/* shubuhat */
.shubuhat-tools{display:flex;gap:12px;margin:30px 0 20px;flex-wrap:wrap}
.shubuhat-tools input{flex:1;min-width:220px;font:16px var(--f-body);padding:13px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);outline:none}
.shubuhat-tools input:focus{border-color:var(--gold)}
.shubuhat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.shubha{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .3s,background .3s}
.shubha.open{grid-column:1/-1;border-color:rgba(245,194,107,.45);background:rgba(245,194,107,.05)}
.shubha.hide{display:none}
.shubha-head{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;color:var(--ink);text-align:right;padding:18px 20px;cursor:pointer;font:inherit}
.shubha-head .num{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font:800 22px var(--f-head);color:#1b1300;background:linear-gradient(135deg,var(--gold2),var(--gold))}
.shubha-head .t{flex:1;display:flex;flex-direction:column;line-height:1.5}
.shubha-head strong{font-size:19px}
.shubha-head small{color:var(--muted);font-size:14px;margin-top:2px}
.chev{width:12px;height:12px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);transition:.3s;flex:none}
.shubha.open .chev{transform:rotate(135deg)}
.shubha-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.shubha.open .shubha-body{grid-template-rows:1fr}
.shubha-body .inner{overflow:hidden;padding:0 24px}
.shubha.open .inner{padding-bottom:18px}
.shubha-body p{margin:0 0 14px}
.shubha .reveal,.summary .reveal{opacity:1;transform:none}
mark{background:rgba(245,194,107,.35);color:inherit;border-radius:4px}
.summary{margin-top:50px;padding:clamp(22px,4vw,44px);border-radius:var(--radius);background:linear-gradient(135deg,rgba(224,87,79,.14),rgba(79,124,255,.1));border:1px solid rgba(224,87,79,.35)}
.summary h3{font:700 32px var(--f-head);margin:0 0 10px;color:var(--gold2)}

/* final */
.final{text-align:center;background:radial-gradient(700px 400px at 50% 30%,rgba(245,194,107,.12),transparent)}
.poll{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0 50px}
.poll-msg{flex-basis:100%;min-height:2em;color:var(--teal);font-weight:700;margin:6px 0 0}
.poll .chosen{outline:3px solid var(--teal);outline-offset:3px}
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:right}

.footer{border-top:1px solid var(--line);padding:40px 20px;text-align:center;color:var(--muted);font-size:15px}
.share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.share a{color:var(--ink);text-decoration:none;padding:6px 16px;border:1px solid var(--line);border-radius:999px;transition:.25s}
.share a:hover{background:var(--gold);color:#1b1300}
.to-top{position:fixed;bottom:22px;left:22px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1b1300;font-weight:800;text-decoration:none;font-size:22px;opacity:0;transform:translateY(20px);transition:.4s;z-index:40}
.to-top.show{opacity:1;transform:none}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.media.reveal.tilt{transform:perspective(900px) rotateY(-25deg) translateY(40px)}
.media.reveal.tilt.in{transform:perspective(900px) rotateY(-6deg)}
.spin-in.reveal{transform:rotate(-40deg) scale(.6)}
.spin-in.reveal.in{transform:none}

@keyframes spin{to{transform:rotate(360deg)}}
.orbit{animation-name:orbitSpin}
@keyframes orbitSpin{from{transform:translateZ(120px) rotate(0)}to{transform:translateZ(120px) rotate(360deg)}}
@keyframes bbS{from{transform:translateX(-330%) rotate(0) rotateX(-64deg)}to{transform:translateX(-330%) rotate(-360deg) rotateX(-64deg)}}
@keyframes bbM{from{transform:translateX(330%) rotate(0) rotateX(-64deg)}to{transform:translateX(330%) rotate(-360deg) rotateX(-64deg)}}
@keyframes shine{to{background-position:300% 0}}
@keyframes charIn{to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}}
@keyframes sheen{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes bob{50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(224,87,79,0)}100%{box-shadow:0 0 0 0 rgba(224,87,79,0)}}
@keyframes pulseText{50%{transform:scale(1.2)}}
@keyframes slideR{from{opacity:0;transform:translateX(80px)}}
@keyframes slideL{from{opacity:0;transform:translateX(-80px)}}

/* responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:100px}
  .hero .lead{margin-inline:auto}.cta{justify-content:center}
  .scene{width:min(92vw,480px);order:-1}
  .two{grid-template-columns:1fr}
  .videos,.gallery.three{grid-template-columns:1fr}
  .shubuhat-grid{grid-template-columns:1fr}
  .burger{display:block}
  .nav{position:fixed;top:0;bottom:0;right:0;width:min(78vw,300px);flex-direction:column;padding:90px 20px;background:rgba(5,8,22,.96);backdrop-filter:blur(14px);transform:translateX(100%);transition:.4s;border-left:1px solid var(--line)}
  .nav a{font-size:18px;padding:10px 16px}
  .nav.open{transform:none}
  .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded=true] span:nth-child(2){opacity:0}
  .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger{position:relative;z-index:2}
}
@media (max-width:620px){
  body{font-size:17px}
  .speeds{grid-template-columns:1fr}
  .gallery.two-col{grid-template-columns:1fr}
  .eclipse{height:200px}.e-sun,.e-moon{width:120px;height:120px;margin-top:-60px}
  .e-sun{margin-left:-60px}.e-moon{left:calc(50% - 60px + (1 - var(--p)) * 200px)}
  .versus b{font-size:20px}
  .shubha-head{padding:14px}.shubha-head .num{width:42px;height:42px;font-size:18px}
  .ayah{padding:16px}
  .copy p,.narrow p{text-align:right}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}