@font-face{font-family:"Fredoka";src:url(fonts/fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-500.ttf) format("truetype");font-weight:400 500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-600.ttf) format("truetype");font-weight:600 700;font-display:swap}
:root{--bg:#03041c;--bg2:#080a2e;--ink:#eef0ff;--dim:#a3abdb;--cyan:#2ee6ff;--violet:#a36bff;--pink:#e06bff;--line:rgba(140,150,255,.18);--card:rgba(20,24,72,.55);
  --display:"Fredoka",ui-rounded,system-ui,sans-serif;--body:"Space Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font:400 17px/1.6 var(--body);color:var(--ink);background:var(--bg);overflow-x:hidden;min-height:100vh}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky .grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(90,110,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,110,255,.07) 1px,transparent 1px);background-size:56px 56px;transform:perspective(900px) rotateX(58deg) translateY(10%);animation:drift 18s linear infinite}
.sky .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.sky .g1{width:520px;height:520px;left:-140px;top:30vh;background:#1b3cff;animation:float 16s ease-in-out infinite}
.sky .g2{width:460px;height:460px;right:-120px;top:-80px;background:#7a2cff;animation:float 19s ease-in-out infinite reverse}
@keyframes drift{to{background-position:0 56px,0 0}}
@keyframes float{50%{transform:translate(40px,-50px) scale(1.1)}}

.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:12px;font:600 24px/1 var(--display);text-decoration:none;letter-spacing:.01em}
.logo img{border-radius:50%;box-shadow:0 0 18px rgba(46,230,255,.45)}
.top nav{display:flex;gap:26px;font-size:15px}
.top nav a{text-decoration:none;color:var(--dim);transition:color .2s}
.top nav a:hover{color:var(--cyan)}

.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-copy{position:relative;z-index:2;padding:40px 0 90px}
.kicker{font:600 13px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
h1{font:600 clamp(48px,8.4vw,108px)/.98 var(--display);margin:18px 0 26px;letter-spacing:-.01em}
h1 .word{display:inline-block;transform-origin:50% 100%;background:linear-gradient(180deg,#fff 30%,#b9c3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .word:nth-of-type(2),h1 .word:nth-of-type(4),h1 .word:nth-of-type(6){background:linear-gradient(100deg,var(--cyan),var(--violet) 70%,var(--pink));-webkit-background-clip:text;background-clip:text}
h1 .word.boing{animation:boing .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes boing{0%{transform:scale(1,1)}22%{transform:scale(1.14,.78)}48%{transform:scale(.92,1.12) translateY(-6px)}72%{transform:scale(1.03,.97)}100%{transform:none}}
.lede{max-width:560px;font-size:19px;color:var(--dim)}
.hero-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;color:#060720;background:linear-gradient(100deg,var(--cyan),var(--violet));box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 10px 30px rgba(110,90,255,.45);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 16px 40px rgba(46,230,255,.45)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1.5px var(--line) inset}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--cyan) inset}
.chip{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:600 15px/1 var(--body);color:var(--cyan);box-shadow:0 0 0 1.5px rgba(46,230,255,.45) inset}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.6);opacity:.5}}
.hint{margin-top:22px;font-size:13px;color:var(--dim);opacity:.8}

/* The scripts-off picture: a ball hops along the logo's arcs on CSS alone. The canvas replaces it once pogo.js runs. */
.still-hop{position:absolute;right:max(0px,calc(50% - 640px));bottom:10%;width:min(620px,60vw);z-index:1;overflow:visible}
.still-hop .arc{fill:none;stroke:url(#trail);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(46,230,255,.7));stroke-dasharray:820;stroke-dashoffset:820;animation:draw 3.2s ease-in-out infinite}
.still-hop .pad{fill:rgba(46,230,255,.75);filter:drop-shadow(0 0 10px var(--cyan))}
.still-hop .ball{offset-path:path("M70 232 C 120 40, 210 40, 260 210 C 300 70, 400 60, 470 120");offset-rotate:0deg;animation:ride 3.2s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(170,100,255,.9))}
@keyframes draw{0%{stroke-dashoffset:820}70%,100%{stroke-dashoffset:0}}
@keyframes ride{0%{offset-distance:0%}70%,100%{offset-distance:100%}}
.js .still-hop{display:none}

section{position:relative}
.section-head{margin-bottom:30px}
.section-head h2{font:600 clamp(34px,4.6vw,54px)/1.05 var(--display);margin-top:10px}
.films,.kinds,.follow{padding:70px 0}
.shelf+.shelf{margin-top:44px}
.shelf h3{font:600 20px/1 var(--display);color:var(--dim);margin-bottom:18px}
.reel{list-style:none;display:grid;gap:22px}
.reel.tall{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.reel.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.film{min-width:0}
.film a{display:block;text-decoration:none}
.film .cover{display:block;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.film a:hover .cover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 0 0 1.5px var(--cyan),0 18px 40px rgba(46,230,255,.25)}
.film img{width:100%;height:auto}
.film h4{font:600 19px/1.25 var(--display);margin-top:12px;overflow-wrap:anywhere}
.film p{font-size:13px;color:var(--dim);margin-top:4px}
.film .also a{display:inline;color:var(--cyan);margin-right:10px}
.empty{display:flex;align-items:center;gap:26px;padding:30px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line);max-width:760px}
.empty p:not(.kicker){color:var(--dim);margin-top:8px}
.empty-orb{flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e3a8ff 22%,#8f45ff 60%,#3b1fd8);box-shadow:0 0 30px rgba(170,100,255,.8);animation:hop 1.4s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes hop{0%{transform:translateY(14px) scale(1.12,.86)}25%{transform:translateY(4px) scale(1,1)}100%{transform:translateY(-22px)}}

.cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{padding:30px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 0 0 1.5px var(--violet),0 20px 50px rgba(120,80,255,.3)}
.card h3{font:600 26px/1.1 var(--display);margin:22px 0 10px}
.card p{color:var(--dim);font-size:16px}
.icon{display:flex;gap:8px;align-items:flex-end;height:46px}
.icon i{display:block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 30%,#1460ff);box-shadow:0 0 16px rgba(46,230,255,.7);animation:hop .9s cubic-bezier(.5,0,.5,1) infinite alternate}
.c2 .icon i{width:22px;height:22px;background:radial-gradient(circle at 35% 30%,#fff,var(--violet) 30%,#4a1fd8);box-shadow:0 0 16px rgba(163,107,255,.8)}
.c3 .icon i{width:18px;height:18px;background:radial-gradient(circle at 35% 30%,#fff,var(--pink) 30%,#8a1fd8);box-shadow:0 0 16px rgba(224,107,255,.8)}
.icon i:nth-child(2){animation-delay:.18s}.icon i:nth-child(3){animation-delay:.36s}

.topics{padding:70px 0 40px;overflow:hidden}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.chips a{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font:500 16px/1 var(--body);background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .3s cubic-bezier(.3,1.7,.5,1),box-shadow .3s,color .3s}
.chips a:hover{transform:translateY(-6px) scale(1.06);color:var(--cyan);box-shadow:0 0 0 1.5px var(--cyan),0 10px 24px rgba(46,230,255,.25)}
.ticker{margin-top:60px;border-block:1px solid var(--line);padding:18px 0;overflow:hidden;white-space:nowrap}
.tick-track{display:inline-flex;animation:tick 28s linear infinite}
.tick-track span{font:600 clamp(26px,4vw,44px)/1 var(--display);padding-right:.4em;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes tick{to{transform:translateX(-50%)}}

.channels{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.channels a{display:flex;justify-content:space-between;gap:12px;padding:20px 24px;border-radius:18px;text-decoration:none;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.channels a span:first-child{font:600 19px/1.2 var(--display)}
.channels a span:last-child{color:var(--dim);font-size:15px;overflow-wrap:anywhere}
.channels a:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--cyan),0 14px 30px rgba(46,230,255,.2)}
.disclosure{margin-top:30px;max-width:720px;font-size:14px;color:var(--dim)}
.foot{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--dim)}
.small{font-size:13px}
.foot a{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.still-hop .arc{stroke-dashoffset:0}.still-hop .ball{offset-distance:100%}}
@media (max-width:860px){.cards{grid-template-columns:1fr}.still-hop{width:90vw;right:-10vw;bottom:2%;opacity:.55}}
@media (max-width:560px){body{font-size:16px}.top{flex-wrap:wrap}.top nav{gap:16px;font-size:14px}.lede{font-size:17px}.reel.tall{grid-template-columns:repeat(2,minmax(0,1fr))}.reel.wide{grid-template-columns:1fr}.empty{flex-direction:column;align-items:flex-start}.hero{min-height:auto}.hero-copy{padding:30px 0 70px}}