/* ROKIVENT motion system. One set of tokens, one palette mechanism, used by the opening story and the rest of the site.
   Tokens:   --m-ease (settle)  --m-drop (drop in with a small bounce)  --m-melt (colour melt between sections)
   Flavours: the story section carries data-flavour="whole|torn|party|concert|campus". Each flavour is only a set of CSS variables.
   A section with its own data-flavour changes the page when it crosses the middle of the screen (see js/motion.js). */
:root{--m-ease:cubic-bezier(.2,.8,.2,1);--m-drop:cubic-bezier(.2,.9,.25,1.15);--m-pop:cubic-bezier(.2,.9,.3,1.3);--m-melt:600ms}
html.rs-off #rstory{display:none}

#rstory{display:block;width:100%;position:relative;container-type:inline-size;background:var(--rs-bg);color:var(--rs-ink);transition:background-color var(--m-melt),color var(--m-melt);
 --rs-bg:var(--paper);--rs-ink:var(--tx);--rs-word:var(--tx);--rs-mut:var(--g2);--rs-tk:var(--brand);--rs-tkx:var(--onb);--rs-btn:var(--brand);--rs-btnx:var(--onb);--rs-fx:var(--brand)}
#rstory[data-flavour="torn"]{--rs-bg:rgb(21,128,61);--rs-ink:#fff;--rs-word:#fff;--rs-mut:rgb(220,242,228);--rs-tk:#fff;--rs-tkx:rgb(10,70,35);--rs-btn:#fff;--rs-btnx:rgb(10,70,35);--rs-fx:rgb(187,247,208)}
#rstory[data-flavour="party"]{--rs-bg:rgb(6,25,13);--rs-ink:rgb(230,244,234);--rs-word:rgb(34,197,94);--rs-mut:rgb(150,185,163);--rs-tk:#fff;--rs-tkx:rgb(10,70,35);--rs-btn:rgb(34,197,94);--rs-btnx:rgb(4,19,10);--rs-fx:rgb(34,197,94)}
#rstory[data-flavour="concert"]{--rs-bg:rgb(34,197,94);--rs-ink:rgb(4,28,14);--rs-word:rgb(4,28,14);--rs-mut:rgb(10,60,30);--rs-tk:rgb(6,25,13);--rs-tkx:rgb(34,197,94);--rs-btn:rgb(6,25,13);--rs-btnx:rgb(230,244,234);--rs-fx:rgb(6,60,30)}
#rstory[data-flavour="campus"]{--rs-bg:rgb(236,252,240);--rs-ink:rgb(11,26,17);--rs-word:rgb(21,128,61);--rs-mut:rgb(73,100,82);--rs-tk:rgb(21,128,61);--rs-tkx:#fff;--rs-btn:rgb(21,128,61);--rs-btnx:#fff;--rs-fx:rgb(21,128,61)}

.rs-bar{position:sticky;top:0;height:0;z-index:6}
.rs-skip{position:absolute;right:16px;top:72px;display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1.5px solid color-mix(in srgb,var(--rs-ink) 30%,transparent);border-radius:10px;background:color-mix(in srgb,var(--rs-bg) 70%,transparent);backdrop-filter:blur(8px);color:var(--rs-ink);font:700 14px var(--f2);cursor:pointer;text-decoration:none;transition:border-color .2s,color var(--m-melt),background-color var(--m-melt)}
.rs-skip:hover{border-color:var(--rs-ink)}
@media(min-width:961px){.rs-skip{top:16px}}

/* part 1: the ticket that tears */
.rs-tear{position:relative}
.rs-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
.rs-beats{margin-top:-100svh}.rs-beat{height:100svh}
.rs-tk{--w:min(92cqw,920px);--ar:.42;position:relative;width:var(--w);height:calc(var(--w)*var(--ar));transform:rotate(-4deg)}
.rs-part{position:absolute;top:0;bottom:0;background:var(--rs-tk);color:var(--rs-tkx);transition:background-color var(--m-melt),color var(--m-melt);will-change:transform}
.rs-main{left:0;width:73%;border-radius:22px 0 0 22px;padding:calc(var(--w)*.04);display:flex;flex-direction:column;justify-content:space-between;
 -webkit-mask:radial-gradient(circle at 100% 0,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle at 100% 0,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) bottom/100% 51% no-repeat}
.rs-stub{right:0;width:27%;border-radius:0 22px 22px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--w)*.03);transform-origin:0 100%;
 -webkit-mask:radial-gradient(circle at 0 0,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle at 0 0,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 calc(var(--w)*.022),#000 calc(var(--w)*.022 + 1px)) bottom/100% 51% no-repeat}
.rs-stub::before{content:"";position:absolute;left:0;top:calc(var(--w)*.03);bottom:calc(var(--w)*.03);border-left:3px dashed currentColor;opacity:.45}
.rs-eyebrow{margin:0;font:800 clamp(10px,1.5vw,15px) var(--f2);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.rs-brand{margin:0;font:900 calc(var(--w)*.122)/.8 var(--f1);letter-spacing:-.05em}
.rs-tags{margin:0;font:700 clamp(11px,1.7vw,17px) var(--f2);opacity:.85}
.rs-admit{font:800 clamp(10px,1.5vw,15px) var(--f2);letter-spacing:.24em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.rs-stub svg{width:calc(var(--w)*.13);height:calc(var(--w)*.13);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rs-burst{position:absolute;right:27%;top:50%;width:0;height:0}
.rs-burst i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);background:var(--rs-fx);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;will-change:transform}
.rs-after{position:absolute;left:0;right:0;bottom:calc(10svh + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 16px;text-align:center;opacity:0;pointer-events:none}
.rs-after p{margin:0;font:700 clamp(16px,2.4vw,22px)/1.4 var(--f2)}
.rs-b{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:0;border-radius:10px;background:var(--rs-btn);color:var(--rs-btnx);font:800 15px var(--f2);text-decoration:none;cursor:pointer;transition:background-color var(--m-melt),color var(--m-melt),transform .2s}.rs-b:hover{transform:translateY(-2px)}
.rs-after.on{pointer-events:auto}

/* part 2: one scene per flavour. A giant word, a ticket that drops in, and pieces that drift at their own speed. */
.rs-fl{position:relative;min-height:110svh;display:grid;place-items:center;overflow:clip;padding:90px 16px}
.rs-kick{position:absolute;z-index:2;left:0;right:0;top:calc(50% - var(--wsz)*.4 - 36px);margin:0;text-align:center;font:800 13px var(--f2);letter-spacing:.2em;text-transform:uppercase;color:var(--rs-mut);transition:color var(--m-melt)}
.rs-word{position:relative;z-index:1;margin:0;font:900 var(--wsz)/.8 var(--f1);letter-spacing:-.055em;text-align:center;color:var(--rs-word);white-space:nowrap;transition:color var(--m-melt)}
.rs-hero{position:absolute;z-index:3;left:50%;top:60%;width:min(34cqw,380px);margin:calc(min(34cqw,380px)*-.33) 0 0 calc(min(34cqw,380px)*-.5);will-change:transform}
.rs-hero svg{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 28px rgb(0 0 0/.22))}
.rs-fx{position:absolute;left:var(--l);top:var(--t);width:var(--sz);height:var(--sz);z-index:2;color:var(--rs-fx);will-change:transform;pointer-events:none;transition:color var(--m-melt)}
.rs-fx svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rs-fx.f{opacity:.2}.rs-fx.f svg{fill:currentColor;stroke:none}
.rs-cta{position:absolute;z-index:4;left:0;right:0;bottom:calc(8svh + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 16px;text-align:center}
.rs-cta p{margin:0;font:700 clamp(16px,2.4vw,22px)/1.4 var(--f2);color:var(--rs-ink)}
.rs-fl .rs-hero svg,.rs-fl .rs-fx svg,.rs-fl .rs-word{opacity:0}
.rs-fl.rs-in .rs-hero svg{animation:rsdrop2 1s var(--m-drop) both}
.rs-fl.rs-in .rs-fx svg{animation:rspop .7s var(--m-pop) both;animation-delay:calc(var(--i,0)*90ms + 250ms)}
.rs-fl.rs-in .rs-word{animation:rsrise .8s var(--m-ease) both}
@keyframes rsdrop2{0%{opacity:0;transform:translateY(-70vh) rotate(-28deg) scale(.9)}60%{opacity:1}100%{opacity:1;transform:rotate(-9deg)}}
@keyframes rspop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}100%{opacity:1;transform:none}}
@keyframes rsrise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* arrival on load: the opening ticket drops in */
#rstory .rs-tk{animation:rsdrop 1s var(--m-drop) both}
@keyframes rsdrop{0%{translate:0 -60vh;scale:.9}100%{translate:0 0;scale:1}}
@container (max-width:760px){.rs-tk{--ar:.7}.rs-main{width:68%}.rs-stub{width:32%}.rs-burst{right:32%}.rs-brand{font-size:calc(var(--w)*.108)}.rs-eyebrow{font-size:10px}
 .rs-fx{width:min(var(--sz),26cqw);height:min(var(--sz),26cqw)}.rs-hero{width:min(50cqw,300px);top:61%;margin:calc(min(50cqw,300px)*-.33) 0 0 calc(min(50cqw,300px)*-.5)}}

/* one layout per device. Phone: 16px gutters, ticket inside them. Tablet: wider gutters, bigger pieces. Laptop: words on the left, ticket on the right. */
@container (max-width:600px){.rs-tk{--w:calc(100cqw - 56px)}.rs-fl{padding:90px 16px}.rs-skip{right:16px}}
@container (min-width:601px) and (max-width:999px){.rs-tk{--w:min(78cqw,680px);--ar:.5}.rs-main{width:70%}.rs-stub{width:30%}.rs-burst{right:30%}.rs-brand{font-size:calc(var(--w)*.115)}.rs-fl{padding:100px 32px}#party.rs-fl{--wsz:24cqw!important}#concert.rs-fl{--wsz:17cqw!important}#campus.rs-fl{--wsz:18.5cqw!important}.rs-kick{font-size:15px;letter-spacing:.24em}.rs-hero{width:min(34cqw,340px);margin:calc(min(34cqw,340px)*-.33) 0 0 calc(min(34cqw,340px)*-.5)}.rs-after{bottom:calc(12svh + env(safe-area-inset-bottom))}.rs-cta{bottom:calc(10svh + env(safe-area-inset-bottom))}.rs-after p,.rs-cta p{font-size:20px}}
@container (min-width:1000px){.rs-tk{--w:min(62cqw,880px);--ar:.4}.rs-fl{place-items:center start;padding:110px 6cqw}.rs-word{text-align:left}.rs-kick{left:6cqw;right:auto;text-align:left;font-size:15px;letter-spacing:.26em}
 #party.rs-fl{--wsz:16cqw!important}#concert.rs-fl{--wsz:11.5cqw!important}#campus.rs-fl{--wsz:13cqw!important}
 .rs-hero{left:auto;right:6cqw;top:54%;width:min(27cqw,420px);margin:calc(min(27cqw,420px)*-.33) 0 0 0}
 .rs-fx{left:calc(60% + var(--l)*.38)}
 .rs-cta{left:6cqw;right:auto;align-items:flex-start;text-align:left;bottom:calc(9svh + env(safe-area-inset-bottom))}.rs-cta p{font-size:22px;max-width:30ch}
 .rs-after{bottom:calc(11svh + env(safe-area-inset-bottom))}.rs-after p{font-size:22px}}

#campus{min-height:135svh}
/* the quick-tour prompt waits until the story is over */
html.rs-live .tprompt{display:none!important}

/* the rest of the site speaks the same language: same easing, same rise, same lift */
@keyframes rk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.rk-js .rk-r{opacity:0}
html.rk-js .rk-r.rk-in{animation:rk-rise .6s var(--m-ease) both;animation-delay:var(--d,0s)}
#grid>*,.post{animation-timing-function:var(--m-ease)}
.btn,.b,.rs-b{transition-timing-function:var(--m-ease)}
.shell{animation:rk-rise .45s var(--m-ease) both}
@media(prefers-reduced-motion:reduce){.rs-tk{opacity:1;animation:none!important}#rstory,.rs-part,.rs-b,.rs-skip,.rs-kick,.rs-word,.rs-fx{transition:none}html.rk-js .rk-r{opacity:1}.shell{animation:none}}

/* first screen: a swipe or scroll hint, and small green fireworks */
.rs-hint{position:absolute;left:0;right:0;bottom:calc(150px + env(safe-area-inset-bottom));z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--rs-ink);font:800 14px var(--f2);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .5s,color var(--m-melt)}
#rstory .rs-hint{opacity:1;transition-delay:.9s}#rstory.rs-moved .rs-hint{opacity:0;transition-delay:0s}
.rs-hm{display:none}@media(hover:hover) and (pointer:fine){.rs-ht{display:none}.rs-hm{display:inline}}
.rs-hint svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:rshint 1.6s var(--m-ease) infinite}
@keyframes rshint{0%{transform:translateY(8px);opacity:0}40%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
@media(min-width:721px){.rs-hint{bottom:42px}}
.rs-fw{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.rs-fw i{position:absolute;left:var(--x);top:var(--y);width:0;height:0;color:var(--rs-fx)}
.rs-fw b{position:absolute;left:-1.5px;top:0;width:3px;height:12px;border-radius:2px;background:currentColor;opacity:0;transform:rotate(var(--a)) translateY(-8px);transform-origin:50% 0;animation:rsfw 4.4s var(--m-ease) infinite;animation-delay:var(--d)}
.rs-fw b:nth-child(even){height:7px}
@keyframes rsfw{0%{opacity:0;transform:rotate(var(--a)) translateY(-6px)}6%{opacity:.85}38%{opacity:0;transform:rotate(var(--a)) translateY(-62px)}100%{opacity:0;transform:rotate(var(--a)) translateY(-62px)}}
@media(min-width:1000px){@keyframes rsfw{0%{opacity:0;transform:rotate(var(--a)) translateY(-8px)}6%{opacity:.85}38%{opacity:0;transform:rotate(var(--a)) translateY(-96px)}100%{opacity:0;transform:rotate(var(--a)) translateY(-96px)}}}
@media(prefers-reduced-motion:reduce){.rs-fw{display:none}.rs-hint svg{animation:none;opacity:1}}