body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#fff}header{background:#121212;color:#fff;padding:10px;text-align:center;padding-top:env(safe-area-inset-top)}main{padding:.3em;text-align:center}.header-logo{display:flex;justify-content:center;align-items:center;height:100%}.header-logo img{max-height:100px;height:auto;width:auto;border-radius:8px}:root{--stagger-delay: .08s;--title-move-up: -165%;--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}.index-cards{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 100px - 1em);gap:1em;box-sizing:border-box;padding-bottom:1em}.bottom-spacer{height:1em;flex-shrink:0;width:100%}.index-card-wrapper{--theme-color: #d4a04f;--s: 20px;--animation-timing: .3s;--pad: 2px;--border-radius: 8px;position:relative;width:75%;height:30%;overflow:visible;transition:transform .4s var(--ease-smooth);display:flex;align-items:center;justify-content:center}.index-card{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:8px;cursor:pointer;transition:transform .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth);text-decoration:none;color:inherit;will-change:transform}.index-card:hover:not(.hover-enabled){transform:scale(1.03);box-shadow:0 12px 24px #0000004d}.index-card-wrapper:has(.index-card.hover-enabled){transform:scale(1.03)}.index-card-wrapper:hover:has(.index-card.hover-enabled){transition:transform 0s}.index-card-wrapper:has(.index-card.hover-enabled):not(:hover){transform:scale(1.03);transition:transform .4s var(--ease-smooth)}.index-card.hover-enabled{transform:none;box-shadow:none}.index-card-wrapper:hover .index-card.hover-enabled{transition:transform 0s,box-shadow 0s}.index-card.hover-enabled:hover{transform:none}.scrolling-background{position:absolute;top:0;left:0;width:150%;height:150%;animation:scroll-bg 70s linear infinite;z-index:-2;filter:brightness(70%);clip-path:inset(0 round var(--border-radius))}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;justify-content:center;align-items:center;text-align:center;color:#fff;transition:background .4s var(--ease-smooth);pointer-events:none;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);z-index:1;clip-path:inset(0 round var(--border-radius))}.index-cards .overlay h3{font-size:clamp(.9em,2vh,1.5em);color:#fff;position:absolute;transform:translateY(0);text-align:center;width:100%;margin:0;font-weight:600;letter-spacing:.5px;transition:transform .6s var(--ease-smooth);text-shadow:0 3px 6px rgba(0,0,0,.7)}.index-cards .staggered{display:flex;flex-direction:column;align-items:center;gap:clamp(.3em,.8vh,.5em);margin-top:clamp(.8em,1.8vh,1.2em);position:relative}.index-cards .index-card.tvshows-card .staggered,.index-cards .index-card.music-card .staggered{margin-top:clamp(1.2em,2.5vh,1.8em)}.index-cards .staggered:before{content:"";position:absolute;top:calc(var(--separator-top, -.75) * clamp(.9em,1.6vh,1em));left:50%;transform:translate(-50%) scaleX(0);width:var(--separator-width, 90px);height:clamp(2px,.3vh,2.5px);background:linear-gradient(90deg,transparent,rgba(212,160,79,.8),transparent);transition:transform .2s var(--ease-smooth),opacity .2s var(--ease-smooth),width .2s var(--ease-smooth);opacity:0}.index-cards .staggered .stat-item:first-of-type{margin-top:calc(var(--separator-spacing, .75) * clamp(.9em,1.6vh,1em))}.index-cards .index-card.tvshows-card .staggered .stat-item:first-of-type,.index-cards .index-card.music-card .staggered .stat-item:first-of-type{margin-top:calc(var(--separator-spacing, .75) * clamp(.9em,1.6vh,1em) + clamp(.4em,1vh,.6em))}.index-card:hover .staggered:before,.index-card.hover-enabled .staggered:before{transform:translate(-50%) scaleX(1);opacity:1;transition:transform .4s var(--ease-smooth) .3s,opacity .4s var(--ease-smooth) .3s}.staggered div.hidden{opacity:0;visibility:hidden;transform:translateY(20px);transition:none}.stat-item{display:flex;align-items:baseline;justify-content:center;gap:.4em;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .5s var(--ease-smooth),transform .5s var(--ease-smooth),visibility 0s linear .5s}.index-cards .stat-number{font-size:clamp(1.1em,2.1vh,1.6em);font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 20px rgba(212,160,79,.3);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}.index-cards .stat-label{font-size:clamp(.5em,1vh,.75em);font-weight:500;color:#ffffffbf;text-shadow:0 1px 4px rgba(0,0,0,.7);letter-spacing:1px;text-transform:uppercase;margin-left:.2em}.stat-size{margin-top:.2em;padding-top:.4em;border-top:1px solid rgba(255,255,255,.15)}.index-cards .stat-size .stat-number{font-size:clamp(.9em,1.6vh,1.2em);font-weight:600;color:#ffffffe6;text-shadow:0 2px 8px rgba(0,0,0,.8)}.staggered .stat-item.data-loaded{visibility:visible;transition:opacity .5s var(--ease-smooth),transform .5s var(--ease-smooth)}.index-card:hover .staggered .stat-item.data-loaded,.index-card.hover-enabled .staggered .stat-item.data-loaded{opacity:1;transform:translateY(0);transition-delay:calc(var(--stagger-delay) * var(--stagger-index, 1))}.index-card:hover .overlay,.index-card.hover-enabled .overlay{background:#000000a6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.index-card:hover .overlay h3{transform:translateY(var(--title-move-up))}.scrolling-background.movies{background:url(/assets/movies_index-DrV3oCNR.webp) no-repeat center center/cover}.scrolling-background.tvshows{background:url(/assets/shows_index-CfsLgm_P.webp) no-repeat center center/cover}.scrolling-background.music{background:url(/assets/music_index-Dr6Eu0LO.webp) no-repeat center center/cover}@keyframes scroll-bg{0%{transform:translate(0) scale(1.1)}50%{transform:translate(-20%,-20%) scale(1.1)}to{transform:translate(0) scale(1.1)}}body:has(.index-cards){overflow:hidden;margin:0;padding:0;height:100vh}.info-icon{position:absolute;left:5%;transform:translateY(-0%);font-size:2.5em;color:#fff;text-align:center;cursor:pointer;z-index:2;transition:opacity .3s ease,transform .5s ease-in-out;pointer-events:auto}.info-icon.hidden{opacity:0;pointer-events:none}.index-card.hover-enabled .overlay h3{transform:translateY(var(--title-move-up));transition:transform .6s var(--ease-smooth)}.index-card-wrapper:before{content:"";position:absolute;box-sizing:border-box;inset:calc(-1 * var(--pad));padding:var(--pad);border:2px solid rgba(255,255,255,.2);border-radius:var(--border-radius);background:transparent content-box;mask:conic-gradient(#000 0 0) content-box,conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s));-webkit-mask:conic-gradient(#000 0 0) content-box,conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s));-webkit-mask-composite:xor;mask-composite:exclude;backface-visibility:hidden;pointer-events:none;transition:inset var(--animation-timing) ease,padding var(--animation-timing) ease,border-color var(--animation-timing) ease,opacity var(--animation-timing) ease;will-change:inset,padding;z-index:1000;opacity:0}.index-card-wrapper:has(.index-card.hover-enabled){--pad: 7px}.index-card-wrapper:has(.index-card.hover-enabled):before{opacity:1;border-color:var(--theme-color)}
