/* layout: one long dive. The page starts at the surface of the stream overlay's sea and gets deeper as you scroll,
   ending on the overlay's seabed. Sections sit in one 1120px column; headings are the real twitch panel plaques. */
:root{
  --surface:#9CC5EE; --sea:#4B7FC1; --sea-2:#285A9F; --deep:#113472; --abyss:#091D47;
  --glass:#D9EAFE; --glass-2:#C2DBFA; --ink:#0B2552; --ink-2:#3B5E93; --white:#FFFFFF;
  --pane:rgba(9,32,82,.34); --pane-line:rgba(255,255,255,.22); --row:rgba(255,255,255,.08); --row-hi:rgba(255,255,255,.16); --soft:#C3D9F6;
  --silhouette:rgba(6,24,62,.5);
  --twitch:#8C4FF5; --pink:#FF5C8D; --gold:#FFCD3C;
  --script:"Yellowtail","Brush Script MT",cursive;
  --ui:"Quicksand","Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
html{background:var(--deep)}
body{position:relative;background:var(--deep);color:var(--white);font:500 16px/1.55 var(--ui);overflow-x:hidden}

/* ---------- the ocean: fixed water whose colour deepens with scroll, ripple bands, rays, bubbles ---------- */
.water{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2C5FA4;pointer-events:none}
.water video,.water .still{position:absolute;left:0;top:0;width:100%;height:var(--box,175vh);object-fit:cover;object-position:50% 0;transform:translate3d(0,var(--cam,0px),0);will-change:transform}
.water .still{background:url(sea-poster.webp) 50% 0/cover no-repeat}
.water .tint{position:absolute;inset:0;background:rgb(6,22,60);opacity:var(--tint,0)}
/* sea life lives in the page (so it scrolls) but drifts at its own depth */
.life{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.life>*{position:absolute;will-change:transform}
.whale{left:0;width:100%}
@keyframes swimR{from{transform:translateX(110vw) scaleX(-1)}to{transform:translateX(-80vw) scaleX(-1)}}
.whale svg{display:block;width:min(70vw,760px);animation:swimR 110s linear infinite;animation-delay:-45s}
main,footer{position:relative;z-index:1}
.life .w{fill:rgba(6,24,62,.26)}
*{box-sizing:border-box}
img{display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ---------- hero: the surface ---------- */
.hero{position:relative;z-index:1;overflow:hidden}
.rays{position:absolute;inset:-20% -20% 40%;background:repeating-linear-gradient(100deg,transparent 0 90px,rgba(255,255,255,.12) 90px 130px,transparent 130px 240px,rgba(255,255,255,.08) 240px 262px,transparent 262px 380px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);transform-origin:50% 0;animation:sway 13s ease-in-out infinite alternate;pointer-events:none}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:22px;padding-block:18px}
.nav .mark{font:400 30px/1 var(--script);text-decoration:none;text-shadow:0 2px 0 rgba(11,37,82,.35);margin-right:auto;display:flex;align-items:center;gap:8px}
.nav .mark img{width:30px;height:30px}
.nav a.l{font-weight:700;font-size:15px;text-decoration:none;opacity:.92;text-shadow:0 1px 0 rgba(11,37,82,.3)}
.nav a.l:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;min-height:640px}
.hero-txt{align-self:center;padding-block:40px 120px}
.status{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;background:rgba(9,29,71,.5);border:1px solid rgba(255,255,255,.35);font-weight:700;font-size:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.status i{width:9px;height:9px;border-radius:50%;background:#A9C0DE;box-shadow:0 0 0 3px rgba(169,192,222,.25)}
.status.live i{background:#EB303E;box-shadow:0 0 0 3px rgba(235,48,62,.3)}
h1{margin:18px 0 6px;font:400 clamp(92px,13vw,176px)/.95 var(--script);letter-spacing:-.01em;padding:0 .12em .1em 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' preserveAspectRatio='none'%3E%3Cpath d='M0 58 Q30 46 60 58 T120 58 T180 58 T240 58 V74 Q210 64 180 74 T120 74 T60 74 T0 74Z' fill='%2394BDF0' fill-opacity='.55'/%3E%3Cpath d='M0 30 Q30 22 60 30 T120 30 T180 30 T240 30 V36 Q210 30 180 36 T120 36 T60 36 T0 36Z' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E") 0 0/320px 100% repeat-x,linear-gradient(180deg,#FFFFFF 28%,#D3E6FF 62%,#A9CBF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(214,234,255,.55);filter:drop-shadow(0 3px 0 #1A4A92) drop-shadow(0 0 24px rgba(200,228,255,.35));animation:tide 7s linear infinite}
@keyframes tide{to{background-position:240px 0,0 0}}
.lede{max-width:30ch;font-size:clamp(18px,1.7vw,21px);font-weight:600;margin:0 0 26px;text-shadow:0 1px 0 rgba(11,37,82,.35)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:0;transition:transform .15s,box-shadow .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn.tw{background:var(--twitch);color:var(--white);box-shadow:0 10px 24px -10px rgba(80,30,180,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.gl{background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 10px 24px -14px rgba(9,29,71,.8)}
.icons{display:flex;gap:6px;margin-top:18px}
.icons a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(9,29,71,.35);border:1px solid rgba(255,255,255,.3);transition:background .15s}
.icons a:hover{background:rgba(9,29,71,.6)}
.icons svg{width:18px;height:18px}

/* the model in the hero: stacked expression frames, poke him */
.me{position:relative;align-self:end;justify-self:center;width:min(100%,500px);aspect-ratio:431/560;margin-bottom:-6px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.me .body{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
.me .body.boing{animation:boing .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes breathe{50%{transform:translateY(4px) scaleY(.994)}}
@keyframes boing{30%{transform:scale(1.04,.95) rotate(var(--tilt,0deg))}60%{transform:scale(.98,1.02)}}
.me img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;-webkit-mask:linear-gradient(#000 78%,transparent 99%);mask:linear-gradient(#000 78%,transparent 99%);pointer-events:none;user-select:none}
.me img.on{visibility:visible}
.me .sym{position:absolute;left:73%;top:5%;width:18%;transform:translate(-50%,-50%);display:none;pointer-events:none}
.me .sym.on{display:block;animation:symIn .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes symIn{from{transform:translate(-50%,-50%) scale(.2) rotate(-25deg)}}
.say{position:absolute;right:66%;top:9%;z-index:2;max-width:220px;padding:10px 16px;border-radius:18px 18px 4px 18px;background:var(--white);color:var(--ink);font-weight:700;font-size:15px;line-height:1.3;
  box-shadow:0 12px 30px -12px rgba(9,29,71,.7);opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;transition:opacity .2s,transform .25s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.say.on{opacity:1;transform:none}
.poke{position:absolute;left:4%;bottom:28%;z-index:2;font:400 24px/1 var(--script);transform:rotate(-8deg);text-shadow:0 2px 0 rgba(11,37,82,.4);pointer-events:none;transition:opacity .4s}
.poke svg{display:block;width:46px;margin:4px 0 0 30px}
.poke.gone{opacity:0}

/* ---------- sections ---------- */
section{position:relative;padding-block:72px}
.head{display:flex;align-items:flex-end;gap:10px 28px;flex-wrap:wrap;margin-bottom:30px}
/* around the plaque: bubbles that drift up off its edges, and specks of light */
.ttl .out i{position:absolute;border-radius:50%;border:1.5px solid rgba(190,225,255,.9);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.12) 40%,transparent 70%);box-shadow:inset 0 0 6px rgba(120,180,255,.55),0 0 8px rgba(150,200,255,.25);animation:pout ease-in-out infinite}
@keyframes pout{0%{transform:translate(0,14px) scale(.6);opacity:0}20%{opacity:1}70%{opacity:1}100%{transform:translate(var(--dx,8px),-46px) scale(1);opacity:0}}
.ttl .out b{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(210,235,255,.85);box-shadow:0 0 6px rgba(200,230,255,.8);animation:twinkle ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.1;transform:translateY(0)}to{opacity:.9;transform:translateY(-8px)}}
/* pop in like the overlay alert: a squash, then settle */
html.js .head.rv .ttl{scale:.6}
html.js .head.rv.in .ttl{scale:1;transition:scale .75s cubic-bezier(.2,1.6,.35,1)}
.head p{margin:0 0 14px;max-width:44ch;font-size:17px;font-weight:600;opacity:.92}
.ttl{position:relative;margin:0;display:grid;justify-items:start}
.ttl small{position:relative;z-index:1;margin:0 0 -.35em .5em;font:700 clamp(15px,1.4vw,19px)/1 var(--ui);letter-spacing:.06em;color:#EAF4FF;text-shadow:0 2px 0 rgba(14,52,114,.5)}
.ttl>span:not(.out){position:relative;font:400 clamp(66px,7.6vw,108px)/1.05 var(--script);letter-spacing:-.005em;padding:0 .16em .12em .04em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' preserveAspectRatio='none'%3E%3Cpath d='M0 58 Q30 46 60 58 T120 58 T180 58 T240 58 V74 Q210 64 180 74 T120 74 T60 74 T0 74Z' fill='%2394BDF0' fill-opacity='.55'/%3E%3Cpath d='M0 30 Q30 22 60 30 T120 30 T180 30 T240 30 V36 Q210 30 180 36 T120 36 T60 36 T0 36Z' fill='%23FFFFFF' fill-opacity='.9'/%3E%3C/svg%3E") 0 0/240px 100% repeat-x,linear-gradient(180deg,#FFFFFF 28%,#D3E6FF 62%,#A9CBF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(214,234,255,.55);filter:drop-shadow(0 3px 0 #1A4A92) drop-shadow(0 0 24px rgba(200,228,255,.35));animation:tide 7s linear infinite}
.ttl>span:not(.out)::after{content:"";position:absolute;right:.2em;bottom:.04em;width:1.3em;height:4px;border-radius:4px;background:rgba(235,245,255,.9);box-shadow:0 0 10px rgba(200,228,255,.8);-webkit-text-stroke:0}
.ttl>span:not(.out)::before{content:"";position:absolute;left:-.42em;top:.62em;width:.34em;height:4px;border-radius:4px;background:rgba(235,245,255,.85);box-shadow:0 0 10px rgba(200,228,255,.8)}
.ttl .out{position:absolute;inset:-26px -30px;pointer-events:none}
.card{background:var(--pane);color:var(--white);border-radius:26px;border:1px solid var(--pane-line);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 60px -34px rgba(0,8,30,.7);padding:26px}
.card h3{margin:0 0 6px;font-size:19px}
.muted{color:var(--soft)}

/* about */
.about{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.big{margin:0 0 22px;font-size:clamp(22px,2.4vw,30px);line-height:1.35;font-weight:600;max-width:32ch;text-wrap:balance}
.big b{font-weight:700;color:#FFF3B0}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.facts span{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);font-weight:700;font-size:14px}
.pile{position:relative;height:300px}
.pile img{position:absolute;width:190px;filter:drop-shadow(0 16px 20px rgba(4,18,52,.45));transition:transform .25s}
.pile img:nth-child(1){left:6%;top:4%;transform:rotate(-10deg)}
.pile img:nth-child(2){left:40%;top:0;transform:rotate(8deg);width:170px}
.pile img:nth-child(3){left:22%;top:38%;transform:rotate(-2deg);width:210px}
.pile img:hover{transform:rotate(0) scale(1.06)}

/* throw */
.throw{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.cam{position:relative;width:100%;aspect-ratio:1257/948}
.cam>img{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.stage{position:absolute;left:13.1%;top:11.6%;width:76.1%;height:73.4%;border-radius:2.4%/3.2%;background:linear-gradient(180deg,#E8F2FF 0%,#BFD8F7 62%,#9BBEEC 100%);
  --toy-model-h:94%;--toy-pop-font:var(--ui);--toy-pop-size:22px;--toy-floor:rgba(26,64,138,.16)}
.stage .hint{position:absolute;left:50%;top:10px;z-index:5;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.75);padding:3px 11px;border-radius:999px;white-space:nowrap;transition:opacity .4s;pointer-events:none}
.stage .hint.gone{opacity:0}
.alert{position:absolute;left:50%;top:12px;z-index:6;transform:translate(-50%,-150%);padding:7px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--white);white-space:nowrap;background:linear-gradient(180deg,#5F8FD0,#123B7A);border:1.5px solid rgba(255,255,255,.9);transition:transform .4s cubic-bezier(.2,1.5,.4,1)}
.alert.on{transform:translate(-50%,0)}
.tray{display:flex;gap:8px;margin:6px auto 0;width:76%}
.tray button{flex:1;min-width:0;aspect-ratio:1;border-radius:16px;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.22);display:grid;place-items:center;padding:7px;transition:transform .12s,background .12s}
.tray button img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.tray button:hover{transform:translateY(-3px);background:rgba(255,255,255,.4)}
.tray button[aria-pressed="true"]{background:var(--white);border-color:var(--gold)}
.real h3{font-size:22px}
.rules{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:6px}
.rules li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--row);font-weight:700;font-size:15px}
.rules li span{margin-left:auto;color:var(--soft);font-variant-numeric:tabular-nums}
.rules img{width:26px;height:26px}
.tries{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:0;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;background:var(--row-hi);color:var(--white);box-shadow:inset 0 0 0 1px var(--pane-line)}
.chip:hover{background:rgba(255,255,255,.26)}
.chip.sub{background:var(--pink);color:var(--white);box-shadow:none}
.chip.raid{background:var(--deep);color:var(--white);box-shadow:none}
.score{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--pane-line);font-weight:700;font-size:14px;color:var(--soft)}
.score b{display:block;font-size:26px;color:var(--white);font-variant-numeric:tabular-nums;line-height:1.1}

/* emotes */
.sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 6px}
.sheet button{border:0;background:none;padding:6px 4px;border-radius:18px;display:grid;justify-items:center;gap:4px;color:var(--soft);font-weight:700;font-size:12.5px;transition:background .15s}
.sheet button img{width:100%;max-width:130px;aspect-ratio:1;filter:drop-shadow(0 12px 14px rgba(0,10,40,.35));transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.sheet button:hover{color:var(--white)}
.sheet button:hover img{transform:rotate(-6deg) scale(1.08)}
.sheet button.copied span{color:#9CF0C8}

/* links + business */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.links a{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;background:var(--row);text-decoration:none;font-weight:700;transition:background .15s,transform .15s}
.links a:hover{background:var(--row-hi);transform:translateX(3px)}
.links a.tw{background:var(--twitch);color:var(--white)}
.links svg{width:22px;height:22px;flex:none}
.links span{margin-left:auto;font-weight:600;font-size:14px;opacity:.75}
.biz{margin-top:0}
.nosched{margin:14px 4px 0;font-weight:600;color:var(--soft);max-width:44ch}
.mail{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.mail code{font:700 17px/1 var(--ui);background:var(--row-hi);padding:12px 16px;border-radius:12px;user-select:all}

/* footer: the seabed */
footer{position:relative;margin-top:40px;min-height:min(46vh,420px);display:grid;align-items:end}
footer .wrap{position:relative;width:100%;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding-block:0 26px;font-weight:700;font-size:14px}
footer .wrap b{font:400 40px/1 var(--script)}
footer .wrap span{opacity:.75}

/* toast */
.toast{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;
  background:var(--glass);color:var(--ink);border:2px solid var(--white);box-shadow:0 18px 40px -16px rgba(4,20,60,.7);font-weight:700;transform:translateY(170%);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.toast.on{transform:none}
.toast .ic{width:40px;height:40px;display:grid;place-items:center;font-size:22px}
.toast .ic img{width:100%;height:100%}
.toast small{display:block;color:var(--ink-2);font-weight:600}

@media (max-width:900px){
  .nav a.l{display:none}
  .hero-in{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding-block:10px 0}
  .me{width:min(88%,420px);margin-top:10px}
  .say{right:auto;left:0;top:2%}
  .about,.throw,.duo{grid-template-columns:1fr}
  .pile{height:220px;max-width:420px}
  .pile img{width:140px}.pile img:nth-child(2){width:124px}.pile img:nth-child(3){width:150px}
  .sheet{grid-template-columns:repeat(4,1fr)}
  .tray{width:100%}
  .cam{width:118%;margin-left:-9%}
  section{padding-block:52px}
  .head p{margin-bottom:0}
}
/* ---------- the panels live underwater: they drift, water light plays over the glass, and they lean toward the cursor ---------- */
@keyframes float{from{translate:0 0}to{translate:0 -9px}}
@keyframes floatR{from{translate:0 0;rotate:-1.4deg}to{translate:0 -7px;rotate:1.4deg}}
@keyframes caus{to{background-position:520px 260px}}
.ttl{animation:floatR 6s ease-in-out infinite alternate}
#throw .ttl,#links .ttl{animation-delay:-2.6s}
.card{position:relative;overflow:hidden;animation:float 7s ease-in-out infinite alternate;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .9s ease,scale 1s cubic-bezier(.2,.8,.2,1)}
.card.tilt{transition:transform .12s linear,opacity .9s ease,scale 1s cubic-bezier(.2,.8,.2,1)}
.card.real{animation-delay:-2s}.card.biz{animation-delay:-4.6s}.links.card{animation-delay:-1.2s}#emotes .card{animation-duration:9s}
.card::before{content:"";position:absolute;inset:-40%;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 .9 0 0 0 0 .75 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");background-size:520px 520px;opacity:.15;mix-blend-mode:screen;animation:caus 24s linear infinite}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(480px circle at var(--gx,50%) var(--gy,-40%),rgba(255,255,255,.17),transparent 62%);opacity:0;transition:opacity .35s}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.cam{animation:float 8s ease-in-out infinite alternate;animation-delay:-3.3s}
.pile img{animation:float 6s ease-in-out infinite alternate}
.pile img:nth-child(2){animation-delay:-2s;animation-duration:7s}.pile img:nth-child(3){animation-delay:-4s;animation-duration:5.2s}
.sheet button{animation:float 4.8s ease-in-out infinite alternate}
.sheet button:nth-child(2n){animation-delay:-1.7s;animation-duration:5.6s}.sheet button:nth-child(3n){animation-delay:-3.1s;animation-duration:4.2s}
.sheet button:nth-child(5n){animation-delay:-.6s}
/* things settle into place as they come into view (they start visible, just slightly back) */
html.js .rv{opacity:.3;scale:.95;transition:opacity .9s ease,scale 1s cubic-bezier(.2,.8,.2,1)}
html.js .card.rv{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .9s ease,scale 1s cubic-bezier(.2,.8,.2,1)}
html.js .rv.in{opacity:1;scale:1}
@media (max-width:900px){.card{animation:none}}
@media (prefers-reduced-motion:reduce){h1,.ttl>span,.me .body,.ttl,.card,.card::before,.cam,.pile img,.sheet button{animation:none}.whale,.ttl .out,.motes{display:none}}
/* tiny bubbles drifting up inside the glass panels */
.motes{position:absolute;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;border-radius:inherit}
.motes i{position:absolute;bottom:-10px;border-radius:50%;border:1px solid rgba(200,230,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 18%,transparent 55%);animation:cin linear infinite}
@keyframes cin{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translate(var(--dx,10px),calc(-1 * var(--h,400px)));opacity:0}}