/* Ryvenna Studios. A storybook castle at twilight: violet and pink skies, chunky rounded capitals,
   lilac cards with a 3D piece of the game popping out of them, red brush-cut buttons, white game
   cards. The hero's heroes rise onto the castle wall as you scroll (js/site.js sets --p). */
:root{
  --night:#1d0e3d;--deep:#2a1450;--plum:#3a1a66;--violet:#6d4dff;--orchid:#b46bff;--pink:#ff8fd0;
  --lilac:#e6c9f7;--lilac2:#d3a8f0;--ink:#24104a;--red:#ef2b2d;--red2:#b3121a;--gold:#ffc94a;
  --on:#fff;--on2:#e3d4ff;--muted:#6b5a8e;
  --display:'Lilita One',system-ui,sans-serif;--body:'Fredoka',system-ui,sans-serif;--brandfont:Cinzel,serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:60px}
body{margin:0;background:var(--night);color:var(--on);font:400 17px/1.6 var(--body);overflow-x:hidden}
main,footer{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 14px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;margin:0;letter-spacing:.01em}
h1{font-size:clamp(58px,9.4vw,138px)}
h2{font-size:clamp(40px,5.6vw,76px);margin-bottom:16px}
h3{font-size:28px}
.center{text-align:center}
.center p{max-width:620px;margin-left:auto;margin-right:auto}

/* buttons: red, brush-cut, a little crooked */
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.btn-red{display:inline-flex;align-items:center;gap:9px;padding:13px 28px 11px;font:400 19px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;border:0;cursor:pointer;
  background:linear-gradient(180deg,#ff4a42,var(--red) 55%,var(--red2));clip-path:polygon(2% 10%,99% 0,100% 84%,95% 100%,0 92%);filter:drop-shadow(0 4px 0 #6a0610);transform:rotate(-1.5deg);transition:transform .2s,filter .2s}
.btn-red:hover{transform:rotate(-1.5deg) scale(1.06);filter:drop-shadow(0 6px 0 #6a0610) brightness(1.08)}
.btn-red i{font-style:normal;font-size:.75em}
.btn-red.big{font-size:26px;padding:17px 38px 15px}
.btn-red.off{background:linear-gradient(180deg,#a99cc4,#7c6e9c);filter:drop-shadow(0 4px 0 #3d3160);cursor:default}
.btn-red.off:hover{transform:rotate(-1.5deg)}
.btn-link{font:400 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* header: links either side of the studio's mark */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:center;height:84px;padding:0 28px;transition:background .3s,height .3s}
.top.solid{background:rgba(29,14,61,.9);backdrop-filter:blur(10px);height:66px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.top nav{display:flex;align-items:center;gap:30px;width:min(100%,980px)}
.top nav a{font:400 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;opacity:.9;transition:color .2s}
.top nav a:hover{color:var(--gold)}
.top nav a:nth-child(3){margin-right:auto}
.top .brand{position:absolute;left:50%;transform:translateX(-50%);flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff}
.brand span{font:700 17px/1 var(--brandfont);letter-spacing:.14em}
.brand small{font:400 9px/1 var(--display);letter-spacing:.4em;opacity:.75}
.top .brand img{width:34px;height:auto}
.menu{display:none;position:absolute;right:16px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px}
.menu span,.menu span::before,.menu span::after{display:block;width:24px;height:3px;border-radius:2px;background:#fff;position:relative;content:''}
.menu span::before{position:absolute;top:-8px}.menu span::after{position:absolute;top:8px}

/* the hero: a sticky stage; scrolling raises the heroes and drifts the layers */
.hero{position:relative;height:190vh;--p:0}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.layer{position:absolute;left:0;top:-4%;width:100%;height:110%;object-fit:cover;transform:translateY(calc(var(--p) * var(--d) * -14vh));will-change:transform}
.title{position:absolute;left:0;right:0;top:15vh;z-index:4;text-align:center;padding:0 20px;transform:translateY(calc(var(--p) * -9vh))}
.title h1{text-shadow:0 6px 0 rgba(70,10,90,.5),0 0 40px rgba(255,140,210,.45)}
.title p{opacity:calc(1 - var(--p) * 1.6);margin-top:16px;font:500 19px/1.4 var(--body);color:#ffe9f6;text-shadow:0 2px 10px rgba(40,0,60,.6)}
.front{position:absolute;left:0;right:0;bottom:0;height:72vh;z-index:6;transform:translateY(calc((1 - var(--p)) * 64vh));will-change:transform}
.front .heroes{position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;width:min(980px,100%)}
.front .heroes img{height:40vh;width:auto;margin:0 -4.6vh;filter:brightness(0) drop-shadow(0 0 1.5px #ff8fd0) drop-shadow(0 -6px 14px rgba(255,120,200,.5))}
.front .heroes .h1,.front .heroes .h4{height:37vh}
.front .heroes .drake{position:absolute;right:4%;bottom:27vh;height:19vh;margin:0;transform:scaleX(-1)}
.front .btn-red{position:absolute;left:50%;bottom:24vh;transform:translateX(-50%) rotate(-1.5deg);z-index:2}
.front .btn-red:hover{transform:translateX(-50%) rotate(-1.5deg) scale(1.06)}
.front .wall{position:absolute;left:0;bottom:0;width:100%;height:24vh;object-fit:cover;object-position:top;max-width:none}
.embers{position:absolute;inset:0;z-index:5;pointer-events:none}
.embers i{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,#ffd27a,#ff7a2a 60%,transparent 70%);animation:rise linear infinite;opacity:.9}
@keyframes rise{to{transform:translate(var(--dx),-110vh);opacity:0}}

/* inside the castle */
/* each room of the hall gets its own view of it, fading into the next */
.hall{position:relative;background:#1c0c38}
.hall>section{position:relative;max-width:none;background:linear-gradient(180deg,#1c0c38 0,rgba(28,12,56,.2) 22%,rgba(28,12,56,.2) 78%,#1c0c38 100%),url(../assets/scene/hall.svg) center bottom/cover}
.hall>section>*{position:relative}
.split{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:130px max(32px,calc((100% - var(--wrap)) / 2 + 32px))}
.split.flip{grid-template-columns:.9fr 1.1fr}
.split .copy{max-width:520px}
.split.flip .copy{justify-self:end}
.split .copy p{color:var(--on2)}
.split h2{text-shadow:0 4px 0 rgba(20,0,40,.45)}

/* the lilac card with a piece of the game popping out of it */
.tile{position:relative;justify-self:center;width:280px;margin:0;padding:14px 14px 20px;background:var(--lilac);border-radius:32px;box-shadow:0 26px 50px rgba(10,0,30,.5),inset 0 -6px 0 var(--lilac2);transform:rotate(var(--tilt,-4deg))}
.tile .art{position:relative;height:270px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#8a5ad0,#3a1a78 75%)}
.tile .art img{position:absolute;left:50%;bottom:4%;width:128%;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 16px 18px rgba(20,0,40,.5))}
.tile figcaption{margin-top:16px;text-align:center;font:400 25px/1 var(--display);color:var(--ink);text-transform:uppercase}
.tile.small{width:230px}.tile.small .art{height:210px}

.mission{position:relative;padding:110px max(32px,calc((100% - var(--wrap)) / 2 + 32px)) 140px}
.mission .center p{color:var(--on2);font-size:19px}
.mission-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:30px;margin-top:70px}
.mission-row h3{font-size:clamp(32px,3.6vw,46px);margin-bottom:14px}
.mission-row p{color:var(--on2);max-width:360px}
.chest{width:min(100%,380px);justify-self:center;filter:drop-shadow(0 30px 30px rgba(10,0,30,.55))}

/* the games: white cards in a row you can swipe */
.games{position:relative;padding:120px 0 110px;background:linear-gradient(180deg,rgba(29,14,61,.9),rgba(29,14,61,.75)),url(../assets/scene/mid.svg) center/cover}
.head{padding:0 24px;margin-bottom:46px}
.head p{color:var(--on2)}
.rail{position:relative;max-width:1320px;margin:0 auto}
.track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(32px,calc((100% - 960px) / 2)) 30px;scrollbar-width:none;outline:none}
.track::-webkit-scrollbar{display:none}
.game{position:relative;flex:0 0 min(960px,86vw);scroll-snap-align:center;display:grid;grid-template-columns:1fr;gap:22px;padding:22px;background:#fff;color:var(--ink);border-radius:30px;box-shadow:0 30px 60px rgba(10,0,30,.45)}
.shots{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.shots .main{grid-row:span 2;aspect-ratio:auto;height:100%}
.shot{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;background:linear-gradient(160deg,#8a5ad0,#3a1a78)}
.shot.pose{object-fit:contain;padding:6px}
button.shot{position:relative;padding:0;border:0;cursor:pointer;overflow:hidden}
button.shot img{width:100%;height:100%;object-fit:cover}
button.shot i{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:22px;box-shadow:0 0 0 8px rgba(255,255,255,.35);transition:transform .2s}
button.shot:hover i{transform:scale(1.12)}
.info{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px 36px;align-items:start}
.info h3{display:flex;align-items:center;gap:12px;font-size:clamp(26px,3vw,36px);color:var(--ink)}
.info h3 img{width:54px;height:54px;border-radius:14px;flex:none}
.info p{margin:0;color:#4a3a6e;font-size:16px}
.info .btns{grid-column:2;margin-top:4px}
.badge{position:absolute;top:34px;left:34px;padding:7px 12px 5px;border-radius:10px;font:400 14px/1 var(--display);letter-spacing:.1em;color:var(--gold);background:rgba(20,8,40,.75)}
.badge.live{display:flex;align-items:center;gap:7px;color:#5dff8a}
.badge.live b,.dotlive{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5dff8a;box-shadow:0 0 10px #5dff8a;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}
.arrow{position:absolute;top:44%;z-index:3;width:54px;height:54px;border:0;border-radius:50%;background:var(--red);color:#fff;font:400 34px/1 var(--display);cursor:pointer;filter:drop-shadow(0 4px 0 #6a0610)}
.arrow.prev{left:12px}.arrow.next{right:12px}

/* the heroes */
.heroes-sec{position:relative;padding:120px 24px 130px;background:linear-gradient(180deg,rgba(29,14,61,.82),rgba(42,20,80,.92)),url(../assets/scene/near.svg) center/cover}
.crew{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1240px;margin:0 auto}
.hero-card{position:relative;display:flex;flex-direction:column;padding:22px 18px 0;background:var(--lilac);color:var(--ink);border-radius:26px;box-shadow:0 24px 46px rgba(10,0,30,.45)}
.hero-card:nth-child(even){transform:translateY(24px)}
.hero-card h3{font-size:24px;color:var(--ink);margin-bottom:8px}
.hero-card p{font-size:14px;line-height:1.45;color:#4a3a6e;margin-bottom:8px}
.hero-card ul{margin:0 0 6px;padding:0;list-style:none;font:500 13px/1.6 var(--body);color:var(--ink)}
.hero-card li::before{content:'✦ ';color:var(--red)}
.sil{position:relative;margin:auto -18px 0;height:210px;overflow:hidden;border-radius:0 0 26px 26px}
.sil::before{content:'';position:absolute;left:12%;right:4%;bottom:26px;height:62%;background:var(--red);clip-path:polygon(0 30%,70% 0,100% 18%,92% 70%,20% 100%,6% 72%);opacity:.95}
.sil img{position:absolute;left:50%;bottom:-8px;height:120%;width:auto;max-width:none;transform:translateX(-50%);filter:brightness(0)}
.hero-card .btn-red{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%) rotate(-1.5deg);font-size:17px;padding:11px 26px 9px}
.hero-card .btn-red:hover{transform:translateX(-50%) rotate(-1.5deg) scale(1.06)}

/* trailer, live numbers, $RYVEN, news */
.trailer{position:relative;min-height:80vh;display:grid;place-items:center;padding:110px 24px;overflow:hidden}
.trailer .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) hue-rotate(-30deg) brightness(.5)}
.trailer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(109,77,255,.25),rgba(29,14,61,.85) 70%);z-index:1}
.trailer .center{position:relative;z-index:2}
.play-trailer.big{width:120px;height:120px;margin:26px auto 0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--red);color:#fff;font:400 40px/1 var(--display);cursor:pointer;box-shadow:0 0 0 14px rgba(239,43,45,.25),0 0 0 28px rgba(239,43,45,.12);transition:transform .2s}
.play-trailer.big:hover{transform:scale(1.08)}
.play-trailer i{font-style:normal;margin-left:6px}

.live-sec{padding:110px 24px;background:linear-gradient(180deg,var(--deep),var(--plum))}
.live-sec h2{display:flex;align-items:center;justify-content:center;gap:16px}
.live-sec .center p{color:var(--on2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:40px auto 0}
.stat{padding:26px 16px;text-align:center;background:var(--lilac);color:var(--ink);border-radius:24px;box-shadow:inset 0 -6px 0 var(--lilac2)}
.stat:nth-child(odd){transform:rotate(-2deg)}.stat:nth-child(even){transform:rotate(2deg)}
.stat b{display:block;font:400 clamp(40px,4.6vw,60px)/1 var(--display);color:var(--ink)}
.stat span{font:500 15px/1.3 var(--body);color:#4a3a6e}

.ryven{background:none}
.ryven .copy p,.ryven .points{color:var(--on2)}
.points{padding:0;margin:0 0 6px;list-style:none}
.points li{padding-left:26px;position:relative;margin-bottom:6px}
.points li::before{content:'✦';position:absolute;left:0;color:var(--gold)}
.ryven .btn-link{color:#fff}
.token{width:min(100%,380px);justify-self:center;filter:drop-shadow(0 30px 40px rgba(180,107,255,.45))}

.news{padding:110px 24px 130px;background:linear-gradient(180deg,var(--night),var(--deep))}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto}
.post{display:flex;flex-direction:column;padding:14px 14px 22px;background:#fff;color:var(--ink);border-radius:26px;text-decoration:none;box-shadow:0 24px 46px rgba(10,0,30,.4);transition:transform .25s}
.post:hover{transform:translateY(-6px) rotate(-1deg)}
.post img{border-radius:18px;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px}
.post time{font:500 13px/1 var(--body);color:var(--muted);padding:0 8px}
.post h3{margin:8px 8px 8px;color:var(--ink);font-size:26px}
.post p{margin:0 8px;color:#4a3a6e;font-size:15px}

/* footer: a hanging pennant with the mark, the last call to play, then links */
footer{position:relative;background:#14082a url(../assets/scene/hall.svg) center bottom/cover;color:#fff}
footer::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--deep),rgba(20,8,42,.82) 30%,rgba(20,8,42,.9))}
.foot{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 28px 30px;display:grid;grid-template-columns:auto 1fr;gap:20px 60px;align-items:end}
.pennant{grid-row:span 2;display:flex;flex-direction:column;align-items:center;gap:4px;width:220px;padding:46px 20px 70px;background:linear-gradient(180deg,#7a2a8c,#5a1a72);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);box-shadow:inset 0 10px 0 #4a1258}
.pennant img{width:96px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.pennant b{font:700 22px/1 var(--brandfont);letter-spacing:.14em;margin-top:8px}
.pennant small{font:400 11px/1 var(--display);letter-spacing:.45em;opacity:.8}
.cta{padding-top:90px}
.cta h2{font-size:clamp(40px,5vw,68px)}
.foot .row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot nav a{font:400 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;opacity:.85}
.foot nav a:hover{color:var(--gold);opacity:1}
.legal{grid-column:1/-1;margin:10px 0 0;font-size:13px;color:#b9a8dc}
/* social links: each platform's own mark, white on a violet coin with a gold rim, tilting like the buttons */
.join{margin:30px 0 12px;font:400 18px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.foot .row .socials{margin-left:auto}
.foot:has(.socials.big) .row .socials{display:none} /* the home page has the big ones by the play button */
.soc{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;text-decoration:none;
  background:linear-gradient(145deg,var(--violet),var(--orchid));box-shadow:inset 0 0 0 2px rgba(255,201,74,.6),0 4px 0 #3b1d86;transition:transform .2s,box-shadow .2s}
.soc svg{width:20px;height:20px;fill:currentColor}
.soc:hover,.soc:focus-visible{transform:rotate(-6deg) scale(1.1);box-shadow:inset 0 0 0 2px var(--gold),0 4px 0 #3b1d86,0 0 20px rgba(255,201,74,.55)}
.socials.big{gap:14px}
.socials.big .soc{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;padding:12px 22px 11px 16px;border-radius:40px;font:400 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.socials.big .soc svg{width:22px;height:22px}

/* the trailer window */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,4,24,.88)}
.modal-body{position:relative;width:min(1100px,100%)}
.modal-body video{width:100%;border-radius:18px;background:#000}
.modal-x{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--red);color:#fff;font:400 20px/1 var(--display);cursor:pointer}

/* news pages */
.page .top{background:rgba(29,14,61,.94);height:66px}
.article{padding:120px 24px 90px;background:linear-gradient(180deg,var(--night),var(--deep))}
.article .wrap{max-width:780px;margin:0 auto}
.article time{font:500 14px/1 var(--body);color:var(--pink)}
.article h1{font-size:clamp(42px,6vw,72px);margin:10px 0 24px}
.article .cover{border-radius:24px;margin-bottom:26px}
.article p{color:var(--on2)}
.article .back{display:inline-block;margin-top:26px;color:var(--pink)}
.page .foot{grid-template-columns:1fr}
.legal a{color:inherit}
.legal a:hover{color:var(--gold)}
/* the terms and privacy pages */
.legal-doc h2{font-size:clamp(26px,3.4vw,34px);margin:38px 0 12px;color:var(--gold)}
.legal-doc ul{margin:0 0 14px;padding-left:22px;color:var(--on2)}
.legal-doc li{margin-bottom:10px}
.legal-doc b{color:#fff;font-weight:600}
.legal-doc .wrap a:not(.back){color:var(--pink)}

/* reveals: hidden only when scripts run */
.js [data-reveal]{opacity:0;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal="up"]{transform:translateY(40px)}
.js [data-reveal="zoom"]{transform:scale(.88) rotate(var(--tilt,0deg))}
.js [data-reveal].in{opacity:1;transform:none}
.js .tile[data-reveal].in{transform:rotate(var(--tilt,-4deg))}
[data-float]{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -14px}}

/* phones and small tablets */
@media (max-width:900px){
  .top{justify-content:flex-start;height:64px}
  .top .brand{position:static;transform:none;flex-direction:row;gap:8px}
  .top .brand img{width:28px}
  .menu{display:block}
  .top nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;width:auto;padding:8px 0 16px;background:rgba(29,14,61,.97)}
  .top nav.open{display:flex}
  .top nav a{padding:14px 24px;font-size:18px}
  .top nav a:nth-child(3){margin-right:0}
  .hero{height:170vh}
  .title{top:13vh}
  .front .heroes img{height:27vh;margin:0 -3.2vh}
  .front .heroes .h1,.front .heroes .h4{height:24vh}
  .front .heroes .drake{height:13vh;bottom:24vh}
  .front .wall{height:20vh}
  .front .heroes{bottom:13vh}
  .front .btn-red{bottom:19vh}
  .split,.split.flip{grid-template-columns:1fr;gap:70px;padding:90px 24px}
  .split.flip .copy{justify-self:start;order:-1}
  .mission-row{grid-template-columns:1fr;justify-items:center;text-align:center}
  .mission-row p{margin-left:auto;margin-right:auto}
  .shots{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .shots .main{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .info{grid-template-columns:1fr}
  .info .btns{grid-column:1}
  .arrow{display:none}
  .crew{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 40px;gap:16px}
  .hero-card{flex:0 0 230px;scroll-snap-align:center}
  .hero-card:nth-child(even){transform:none}
  .stats{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pennant{grid-row:auto}
  .cta{padding-top:10px}
  .foot .row{justify-content:center}
  .foot nav{justify-content:center}
  .socials,.foot .row .socials{justify-content:center;margin:0 auto}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh;--p:1 !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .tile[data-reveal]{transform:rotate(var(--tilt,-4deg)) !important}
  [data-float]{animation:none !important}
  .embers{display:none}
  .badge.live b,.dotlive{animation:none}
}