/* ============================================================
   SnapDash shared site styles (index + join)
   Palette mirrors the app: deep purple nights, gold accents.
   ============================================================ */

/* ============ tokens ============ */
:root{
  --purple:#6C3EF5; --purple-2:#7B4DFF; --purple-deep:#3B1AA6;
  --night:#120C2E; --night-2:#1D1546; --night-3:#241357;
  --magenta:#E5397F; --coral:#FF6B57; --orange:#FF9F1C;
  --yellow:#FFD31D; --gold:#FFB13C;
  --green:#2ED573; --green-dark:#1FA85A;
  --teal:#17C3B2; --sky:#56CCF2; --blue:#2F80ED;
  --ink:#241A4A; --ink-soft:#4A3F78; --ink-faint:#8B84AD;
  --w70:rgba(255,255,255,.7); --w55:rgba(255,255,255,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  width:100%;
  max-width:100%;
}
body{
  font-family:'Nunito',system-ui,sans-serif;background:var(--night);color:#fff;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  width:100%;
  max-width:100%;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  touch-action:pan-y;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,3vw,40px);position:relative;width:100%}
section{position:relative;overflow-x:clip;max-width:100%}
.pad{padding:clamp(64px,8vw,104px) 0}
@media(max-width:640px){
  .wrap{padding:0 16px}
}

/* ============ atmosphere ============ */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  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%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ nav ============ */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(18,12,46,.7);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
nav.site .row{max-width:1280px;margin:0 auto;padding:12px clamp(20px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:14px}
nav.site .brand{display:flex;align-items:center;gap:11px}
nav.site .brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
nav.site .brand span{font-weight:900;font-size:19px}
nav.site .links{display:flex;gap:22px;font-weight:800;font-size:14px;color:var(--w70)}
nav.site .links a:hover{color:var(--yellow)}
@media(max-width:880px){nav.site .links{display:none}}
.pill-cta{
  display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;
  background:linear-gradient(135deg,var(--magenta),var(--coral));
  padding:9px 18px;border-radius:999px;box-shadow:0 8px 22px rgba(229,57,127,.4);
  transition:transform .16s;
}
.pill-cta:hover{transform:translateY(-2px)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:900;font-size:16px;cursor:pointer;border:0;
  border-radius:999px;padding:15px 30px;color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--coral));
  box-shadow:0 6px 0 #B02257, 0 18px 36px rgba(229,57,127,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 3px 0 #B02257, 0 10px 22px rgba(229,57,127,.3)}
.btn.gold{background:linear-gradient(135deg,#FFE066,var(--gold));color:#5A3A00;box-shadow:0 6px 0 #C77E14, 0 18px 36px rgba(255,177,60,.35)}
.btn.gold:active{box-shadow:0 3px 0 #C77E14, 0 10px 22px rgba(255,177,60,.3)}
.btn.ghost{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.22);box-shadow:none}
.btn.ghost:hover{border-color:rgba(255,255,255,.45)}

/* ============ type helpers ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:12px;
  letter-spacing:2.6px;text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:16px;
}
h1{font-size:clamp(38px,5.2vw,76px);font-weight:900;line-height:1.02;letter-spacing:-.5px}
h2{font-size:clamp(27px,3.6vw,46px);font-weight:900;line-height:1.08;letter-spacing:-.4px}
.lead{font-size:clamp(15.5px,1.35vw,18.5px);font-weight:600;line-height:1.6;color:rgba(224,216,250,.8);margin-top:14px}
.hl{
  color:var(--yellow);
  background-image:linear-gradient(90deg,var(--magenta),var(--coral));
  background-repeat:no-repeat;background-size:100% .3em;background-position:0 90%;
  padding:0 .05em;
}
.ic{width:1em;height:1em;flex:none;fill:currentColor}

/* ============================================================
   Phone frame around REAL app screenshots
   ============================================================ */
.shot{
  position:relative;width:100%;
  border-radius:clamp(26px,11%,44px);padding:2.7%;
  background:linear-gradient(160deg,#39306e,#150f33 60%,#0c0822);
  box-shadow:
    0 50px 100px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.shot img{width:100%;border-radius:clamp(20px,9%,36px);background:#1a1040}

/* ============ hero ============ */
.hero{
  position:relative;z-index:2;overflow:hidden;
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(108,62,245,.5), transparent 60%),
    radial-gradient(760px 560px at -10% 108%, rgba(229,57,127,.26), transparent 55%),
    linear-gradient(178deg,#251461 0%,var(--night) 72%);
}
.hero .wrap{
  min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(20px,4vw,56px);padding-top:96px;padding-bottom:56px;
}
.hero .kicker{background:rgba(255,211,29,.12);border:1px solid rgba(255,211,29,.4);color:var(--yellow)}
.hero .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero .logo{width:min(380px,74%);margin-bottom:20px;filter:drop-shadow(0 16px 36px rgba(0,0,0,.45))}
.hero h1{margin:6px 0 16px}
.hero .sub{max-width:540px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}
.hero .proof{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .proof .p{
  display:flex;align-items:center;gap:9px;font-weight:800;font-size:13.5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:9px 16px;color:rgba(236,230,255,.9);
}
.hero .proof .p .ic{color:var(--yellow);font-size:15px}

.hero .stage{position:relative;display:flex;justify-content:center;perspective:1300px;overflow:visible;max-width:100%}
.hero .stage::before{
  content:"";position:absolute;inset:-12% -10%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(123,77,255,.4), transparent 70%);
}
/* fanned trio of real screenshots: big center phone, two tucked behind */
.hero .trio{
  display:flex;align-items:center;justify-content:center;position:relative;
  transform-style:preserve-3d;transition:transform .25s ease-out;max-width:100%;
}
.hero .trio .phone-wrap{position:relative;max-width:100%}
.hero .trio .main{width:min(270px,21vw);min-width:210px;z-index:3}
.hero .trio .side{width:min(200px,15.5vw);min-width:150px;z-index:2}
.hero .trio .sl{margin-right:-40px;transform:rotate(-6deg) translateY(30px)}
.hero .trio .sr{margin-left:-40px;transform:rotate(6deg) translateY(30px)}
.hero .f-chip{
  position:absolute;background:#fff;border-radius:22px;padding:11px;z-index:5;
  box-shadow:0 18px 40px rgba(6,3,26,.5);animation:bob 5.2s ease-in-out infinite;
}
.hero .f-chip img{width:52px;height:52px}
@keyframes bob{50%{transform:translateY(-13px) rotate(3deg)}}
.hero .fc-1{top:9%;left:2%;animation-delay:.2s}
.hero .fc-2{top:44%;right:-6%;animation-delay:1.3s}
.hero .fc-2 img{width:62px;height:62px}
.hero .fc-3{bottom:-4%;left:-2%;animation-delay:2.2s}
.v-badge{
  position:absolute;top:12%;right:-3%;z-index:6;
  background:var(--green);color:#fff;font-weight:900;font-size:14.5px;
  padding:11px 17px;border-radius:15px;display:flex;align-items:center;gap:8px;
  box-shadow:0 16px 36px rgba(31,168,90,.5);animation:bob 4.5s .7s ease-in-out infinite;
}
.v-badge .ck{width:20px;height:20px;background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--green-dark);font-size:12px;font-weight:900}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:104px}
  .hero .sub{margin:0 auto}
  .hero .logo{margin:0 auto 18px}
  .hero .cta,.hero .proof{justify-content:center}
  .hero .stage{margin-top:40px;overflow:hidden;padding:8px}
  .hero .trio .main{width:min(250px,44vw);min-width:0}
  .hero .trio .side{width:min(185px,32vw);min-width:0}
  .hero .trio .sl{margin-right:-26px}
  .hero .trio .sr{margin-left:-26px}
}
@media(max-width:640px){
  .hero .trio .main{width:45vw}
  .hero .trio .side{width:33vw}
  .hero .trio .sl{margin-right:-7vw;transform:rotate(-6deg) translateY(18px)}
  .hero .trio .sr{margin-left:-7vw;transform:rotate(6deg) translateY(18px)}
  .hero .f-chip{padding:8px;border-radius:16px}
  .hero .f-chip img{width:36px;height:36px}
  .hero .fc-2 img{width:44px;height:44px}
  .hero .fc-1{top:2%;left:0}.hero .fc-2{right:0;top:56%}.hero .fc-3{bottom:1%;left:2%}
  .v-badge{top:6%;right:0;font-size:12.5px;padding:8px 13px}
}

/* ============ marquee ============ */
.marquee-shell{overflow:hidden;width:100%;max-width:100%}
.marquee{position:relative;z-index:3;background:var(--yellow);padding:16px 0;overflow:hidden;transform:rotate(-1.2deg) scale(1.03);box-shadow:0 -10px 44px rgba(0,0,0,.35);width:110%;margin-left:-5%}
.marquee .track{display:flex;gap:15px;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .tile{background:#fff;border-radius:15px;padding:8px;box-shadow:0 5px 14px rgba(36,26,74,.2);flex:none}
.marquee .tile img{width:50px;height:50px}
.marquee.rev{transform:rotate(1.2deg) scale(1.03);background:var(--magenta)}
.marquee.rev .track{animation-direction:reverse}
@media(max-width:640px){
  .marquee{transform:none;width:100%;margin-left:0;scale:none}
  .marquee.rev{transform:none}
}

/* ============ how ============ */
.how{background:var(--night-2)}
.how .head{text-align:center;max-width:620px;margin:0 auto 50px}
.how .eyebrow{background:rgba(86,204,242,.12);border:1px solid rgba(86,204,242,.4);color:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:26px;padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .22s ease,border-color .22s;
}
.step:hover{transform:translateY(-7px);border-color:rgba(255,211,29,.5)}
.step .num{position:absolute;top:2px;right:16px;font-size:74px;font-weight:900;color:rgba(255,255,255,.05);line-height:1}
.step .ico{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:26px;color:#fff;margin-bottom:18px;box-shadow:0 10px 22px rgba(0,0,0,.3)}
.step:nth-child(1) .ico{background:linear-gradient(135deg,var(--sky),var(--blue))}
.step:nth-child(2) .ico{background:linear-gradient(135deg,var(--orange),var(--coral))}
.step:nth-child(3) .ico{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.step h3{font-size:20px;font-weight:900;margin-bottom:8px}
.step p{color:rgba(220,212,248,.72);font-weight:600;line-height:1.55;font-size:14.5px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ============ modes: alternating splits with real screenshots ============ */
.modes{background:linear-gradient(180deg,var(--night),var(--night-3))}
.modes .head{text-align:center;max-width:660px;margin:0 auto 12px}
.modes .eyebrow{background:rgba(255,159,28,.14);border:1px solid rgba(255,159,28,.5);color:#FFC46B}
.mode-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(48px,6vw,84px)}
.mode-split.flip .art{order:2}
.mode-split .art{display:flex;justify-content:center;position:relative}
.mode-split .art .phone-wrap{width:min(290px,66vw);position:relative}
.mode-split .art::before{
  content:"";position:absolute;inset:-8% -18%;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(123,77,255,.28), transparent 70%);
}
.mode-split .tagchip{
  display:inline-flex;font-size:11px;font-weight:900;letter-spacing:1.6px;
  text-transform:uppercase;border-radius:999px;padding:6px 13px;margin-bottom:14px;
}
.mode-split h3{font-size:clamp(23px,2.6vw,32px);font-weight:900;line-height:1.1}
.mode-split .lead{margin-top:10px}
.ticks{margin-top:20px;display:grid;gap:11px}
.tick{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:15px;color:rgba(240,236,255,.92)}
.tick .tk{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
@media(max-width:880px){
  .mode-split{grid-template-columns:1fr;text-align:center}
  .mode-split .art{order:-1 !important}
  .tick{justify-content:center;text-align:left}
}

/* ============ ranked ladder ============ */
.ladder{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.ladder .t{
  display:flex;flex-direction:column;gap:2px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:9px 14px;min-width:76px;
}
.ladder .t b{font-size:13.5px;font-weight:900}
.ladder .t span{font-size:11px;font-weight:800;color:var(--w55)}
@media(max-width:880px){.ladder{justify-content:center}}

/* ============ solo practice + daily hunt strip ============ */
.also-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(48px,6vw,72px)}
.mini{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:20px 22px;
}
.mini b{display:flex;gap:9px;align-items:center;font-size:16px;font-weight:900;margin-bottom:6px}
.mini b .ic{color:var(--yellow);font-size:17px}
.mini span{font-size:14px;font-weight:600;color:rgba(220,212,248,.72);line-height:1.55}
@media(max-width:820px){.also-grid{grid-template-columns:1fr}}

/* ============ dashpass & shop ============ */
.extras{background:var(--night-2)}
.extras .mode-split{margin-top:0}
.art.duo{gap:16px}
.art.duo .phone-wrap{width:min(215px,34vw)}
.art.duo .phone-wrap:last-child{transform:translateY(26px) rotate(3deg)}
@media(max-width:880px){
  .art.duo .phone-wrap{width:min(200px,40vw)}
}

/* ============ worlds ============ */
.worlds{background:var(--night)}
.worlds .head{text-align:center;max-width:680px;margin:0 auto 46px}
.worlds .eyebrow{background:rgba(255,107,87,.14);border:1px solid rgba(255,107,87,.5);color:#FFA595}
.w-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.world{
  border-radius:20px;overflow:hidden;position:relative;
  background:var(--night-2);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 32px rgba(6,3,26,.4);transition:transform .2s ease,border-color .2s;
}
.world:hover{transform:translateY(-6px);border-color:rgba(255,211,29,.45)}
.world img{width:100%;aspect-ratio:1;object-fit:cover}
.world .txt{padding:12px 14px 14px}
.world h3{font-size:15.5px;font-weight:900}
.world p{font-size:12px;font-weight:700;color:var(--w55);margin-top:2px}
.world .n{
  position:absolute;top:10px;right:10px;font-size:11px;font-weight:900;
  background:rgba(18,12,46,.75);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:4px 9px;backdrop-filter:blur(4px);
}
.world .packtag{
  position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:900;letter-spacing:1px;
  text-transform:uppercase;color:#5A3A00;
  background:linear-gradient(135deg,#FFE066,var(--gold));
  border-radius:999px;padding:4px 9px;box-shadow:0 4px 10px rgba(0,0,0,.3);
}
@media(max-width:1020px){.w-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.w-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.coin-note{margin-top:22px;font-size:13.5px;font-weight:700;color:var(--w55);text-align:center}
.coin-note b{color:var(--yellow)}

/* ============ characters ============ */
.chars{background:linear-gradient(180deg,var(--night-3),var(--night))}
.chars .head{text-align:center;max-width:640px;margin:0 auto 46px}
.chars .eyebrow{background:rgba(255,159,28,.14);border:1px solid rgba(255,159,28,.5);color:#FFC46B}
.c-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.char{
  border-radius:24px;padding:14px 14px 16px;text-align:center;
  background:linear-gradient(var(--night-2),var(--night-2)) padding-box,
             var(--ring,linear-gradient(135deg,#7B4DFF,#FFD31D)) border-box;
  border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease;
}
.char:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(6,3,26,.5)}
.char .art{aspect-ratio:1;border-radius:18px;overflow:hidden;margin-bottom:12px;background:#0e0925}
.char .art img{width:100%;height:100%;object-fit:cover}
.char b{font-size:16px;font-weight:900;display:block}
.char span{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:rgba(220,212,248,.6);line-height:1.4}
.char .unlock{
  display:inline-block;margin-top:9px;font-size:10.5px;font-weight:900;letter-spacing:.6px;
  text-transform:uppercase;border-radius:999px;padding:4px 10px;
  background:rgba(255,211,29,.1);border:1px solid rgba(255,211,29,.35);color:var(--yellow);
}
@media(max-width:880px){.c-grid{grid-template-columns:1fr 1fr}}

/* ============ parents band ============ */
.band{border-radius:30px;overflow:hidden;position:relative}
.band .in{padding:clamp(36px,5vw,56px)}
.band.priv{
  background:linear-gradient(135deg,var(--green-dark),#0E7040);
  border:1px solid rgba(255,255,255,.14);text-align:center;
}
.band.priv .lead{color:rgba(235,255,244,.92);max-width:680px;margin:14px auto 0}
.priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;text-align:left}
.priv-grid .p{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:18px;
}
.priv-grid .p b{display:flex;gap:9px;align-items:center;font-size:15px;font-weight:900;margin-bottom:6px}
.priv-grid .p b .ic{color:var(--yellow);font-size:17px}
.priv-grid .p span{font-size:13px;font-weight:700;color:rgba(235,255,244,.85);line-height:1.5}
.priv-link{display:inline-block;margin-top:26px;font-weight:900;font-size:14px;color:#fff;border-bottom:2px solid rgba(255,255,255,.5)}
.priv-link:hover{border-color:#fff}
@media(max-width:820px){.priv-grid{grid-template-columns:1fr}}

/* ============ faq ============ */
.faq{background:linear-gradient(180deg,var(--night-3),var(--night))}
.faq .head{text-align:center;max-width:620px;margin:0 auto 40px}
.faq .eyebrow{background:rgba(123,77,255,.16);border:1px solid rgba(148,110,255,.5);color:#BBA5FF}
.faq-list{max-width:760px;margin:0 auto;display:grid;gap:11px}
.faq-list details{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
.faq-list details[open]{border-color:rgba(255,211,29,.55)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:17px 21px;font-weight:900;font-size:15.5px;gap:14px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .plus{flex:none;width:25px;height:25px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:16px;font-weight:900;transition:transform .25s}
.faq-list details[open] .plus{transform:rotate(45deg)}
.faq-list .a{padding:0 21px 19px;color:rgba(220,212,248,.78);font-weight:600;line-height:1.6;font-size:14.5px}

/* ============ final ============ */
.final{
  background:
    radial-gradient(800px 440px at 50% 0%, rgba(108,62,245,.5), transparent 65%),
    var(--night);
  text-align:center;
}
.final .icon{width:104px;margin:0 auto 22px;border-radius:24px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite}
.final .lead{max-width:520px;margin:14px auto 0}
.final .cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.store-note{margin-top:18px;font-size:13px;font-weight:700;color:var(--w55)}
.store-note a{color:var(--yellow);font-weight:800}

/* ============ footer ============ */
footer{
  padding:30px 0 36px;text-align:center;border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);font-weight:600;font-size:13px;background:var(--night);
}
footer .frow{display:flex;justify-content:center;gap:20px;margin-bottom:12px;flex-wrap:wrap;font-weight:800}
footer a:hover{color:var(--yellow)}

/* ============ reveal ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@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}
}