/* MovieMunch redesign layer: loaded last. Typography, footer, Surprise me, motion, focus and TV sizing. */

/* ---------- type: Fredoka for headings and controls, Nunito for reading ---------- */
h1,h2,h3,h4,.btn,.tab,.bigplay,.seg button{font-family:var(--display)}
.pagehead h1,.msg h1,.dbody h2{font-weight:600;letter-spacing:-.015em}
.seasons h3{font-weight:600;letter-spacing:0}
.t{font-family:var(--display);font-weight:500;font-size:15px}
.btn{font-weight:600}

/* ---------- Surprise me (popcorn bucket) ---------- */
.bucketico{display:inline-block;width:22px;height:22px;flex:0 0 auto;background:url(../img/icon-180.png) center/contain no-repeat}
.surprise{position:relative;overflow:visible}
.surprise.shaking .bucketico{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,80%{transform:rotate(10deg)}30%,50%,70%{transform:rotate(-16deg) translateY(-2px)}40%,60%{transform:rotate(16deg) translateY(-2px)}}
.kernel{position:absolute;left:26px;top:30%;width:14px;height:12px;border-radius:50% 50% 45% 45%;background:#FFF4DE;pointer-events:none;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.3);animation:fly .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fly{0%{transform:translate(-50%,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1);opacity:0}}

/* ---------- footer ---------- */
footer{padding:0 var(--gut) calc(36px + env(safe-area-inset-bottom,0px));border-top:0;color:var(--mute);font-size:14px;line-height:1.6;margin-top:clamp(20px,3vw,40px)}
.fwrap{padding:36px clamp(22px,4vw,44px) 26px;border-radius:28px;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift)}
.ftop{display:grid;grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(110px,1fr));gap:28px}
.fbrand img{height:26px;width:auto}
.fbrand p{margin-top:12px;max-width:30ch;color:var(--soft)}
.fcol h4{font-weight:600;font-size:15px;color:var(--ink);margin-bottom:10px}
.fcol a,.fcol button{display:block;padding:4px 0;color:var(--mute);text-decoration:none;font-weight:600;text-align:left;transition:color .15s,transform .15s}
.fcol a:hover,.fcol button:hover{color:var(--butter);transform:translateX(3px)}
.fbottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid var(--edge);font-size:13px}
.fbottom p{max-width:78ch}
.fbottom .mini{display:flex;align-items:center;gap:8px;white-space:nowrap}
body.hasanchor footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media(max-width:860px){.ftop{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}

/* ---------- motion: one entrance on load, shelves ripple in as they arrive ---------- */
@keyframes mm-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes mm-drop{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
#bar{animation:mm-drop .6s cubic-bezier(.2,.8,.2,1) both}
#hero{animation:mm-rise .7s .08s cubic-bezier(.2,.8,.2,1) both}
.hcopy.swap>*{animation:mm-rise .5s cubic-bezier(.2,.8,.2,1) both}
.hcopy.swap>:nth-child(2){animation-delay:.05s}.hcopy.swap>:nth-child(3){animation-delay:.1s}.hcopy.swap>:nth-child(4){animation-delay:.15s}
.shelf.reveal h2{animation:mm-rise .5s cubic-bezier(.2,.8,.2,1) both}
.shelf.reveal .card{animation:mm-rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.shelf.reveal:not(.in) h2,.shelf.reveal:not(.in) .card{animation-play-state:paused}

/* ---------- focus: a clear ring for keyboards and TV remotes ---------- */
.card:focus-visible .img{outline:3px solid var(--butter);outline-offset:3px;transform:translateY(-3px) scale(1.04)}
.btn:focus-visible,.tab:focus-visible,.arrows button:focus-visible,.fcol :focus-visible,.thumb:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

/* ---------- screens ---------- */
@media(max-height:500px) and (orientation:landscape){#hero{min-height:300px}.hcopy p{display:none}}
/* big screens and TVs: scale the whole interface up so it reads from the sofa, and go lighter on blur for weak TV graphics chips */
@media(min-width:2200px){html{zoom:1.25}:root{--blur:blur(16px) saturate(150%)}.amb{filter:blur(70px) saturate(1.3)}}
@media(min-width:3000px){html{zoom:1.7}}

@media(prefers-reduced-motion:reduce){.shelf.reveal h2,.shelf.reveal .card{opacity:1}}

/* ---------- footer pages (FAQ, Contact, Report, Terms, Privacy, Copyright) ---------- */
.bucketico.big{width:46px;height:46px}
.infodlg{border:0;padding:clamp(0px,4vh,48px) clamp(0px,3vw,40px);background:transparent;color:var(--ink);width:100%;height:100%;max-width:none;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.infodlg::backdrop{background:rgba(10,8,12,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.infodlg[open] .sheet{animation:up .3s cubic-bezier(.2,.8,.2,1) both}
.infosheet{width:min(780px,100%);padding:clamp(24px,4vw,44px)}
.infohead{display:flex;align-items:center;gap:16px;padding-right:44px;margin-bottom:22px}
.infohead h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.05}
.infohead p{color:var(--soft);margin-top:4px}
.infobody{color:var(--soft);line-height:1.65;font-size:16px}
.infobody>p,.infobody>ul{margin:0 0 14px;max-width:68ch}
.infobody h3{color:var(--ink);font-size:18px;font-weight:600;margin:24px 0 6px}
.infobody ul{padding-left:20px;list-style:disc}
.infobody li{margin:4px 0}
.infobody a:not(.btn){color:var(--butter);font-weight:700}
.infomail{font-size:20px}
.infoacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.infoacts .btn{text-decoration:none}
.qa{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--edge);margin-bottom:8px;transition:background .15s}
.qa[open]{background:rgba(255,255,255,.08)}
.qa summary{list-style:none;cursor:pointer;padding:15px 48px 15px 18px;position:relative;font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;font-size:22px;color:var(--butter);transition:rotate .2s}
.qa[open] summary:after{rotate:45deg}
.qa>div{padding:0 18px 16px}
.qa>div p{margin:0}
.infofield{display:block;margin:12px 0}
.infofield span{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.infofield .afield{width:100%}
.infofield textarea.afield{resize:vertical;min-height:120px;border-radius:18px;font:inherit}
.infonav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:20px;border-top:1px solid var(--edge)}
.infonav a{padding:7px 14px;border-radius:999px;background:var(--glass-2);border:1px solid var(--edge);text-decoration:none;font-weight:600;font-size:14px;color:var(--soft)}
.infonav a:hover{color:var(--ink);background:var(--glass-3)}
@media(max-width:720px){.infodlg{padding:0}.infosheet{border-radius:0;min-height:100%}}

/* Premium popup: bucket on top */
.pdlg .bucketico.big{display:block;margin:0 auto 10px}
.infofield select.afield{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background:rgba(255,255,255,.06) linear-gradient(45deg,transparent 50%,var(--soft) 50%) calc(100% - 22px) 55%/6px 6px no-repeat,
  rgba(255,255,255,.06) linear-gradient(135deg,var(--soft) 50%,transparent 50%) calc(100% - 16px) 55%/6px 6px no-repeat}
.infofield select.afield option{background:#1E1A24;color:var(--ink)}

/* ---------- More to munch: endless suggestions ---------- */
.more{margin-top:clamp(10px,2vw,24px)}
.more .shelf{margin-bottom:6px}
.morefeed{padding-bottom:10px}
.moreacts{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px var(--gut) clamp(40px,5vw,64px)}
.morebtn{height:52px;padding:0 28px;font-size:17px;position:relative}
.morebtn.loading .bucketico{animation:shake .7s cubic-bezier(.36,.07,.19,.97) infinite}
.morenote{color:var(--mute);font-size:14px;text-align:center;max-width:46ch}
.morenote:empty{display:none}
.popin{animation:mm-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 30ms)}

/* ---------- Top 10 numbers: solid butter digits that sit beside the poster (sized from the font, so two digits fit) ---------- */
.rank{--fs:clamp(80px,7.6vw,116px);--off:calc(var(--fs) * .7);width:calc(clamp(128px,12vw,170px) + var(--off))}
.rank.two{--off:calc(var(--fs) * 1.3)}
.rank .num{z-index:0;left:auto;right:calc(100% - var(--off) - 6px);bottom:-4px;text-align:right;white-space:nowrap;
  font-family:Nunito,ui-rounded,system-ui,sans-serif;font-weight:800;font-size:var(--fs);line-height:.8;letter-spacing:-.06em;
  -webkit-text-stroke:0;color:var(--butter);
  background:linear-gradient(180deg,#FFD866 0%,var(--butter) 45%,#E8860C 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));opacity:.92;transition:opacity .2s,transform .2s}
.rank:hover .num,.rank:focus-visible .num{opacity:1;transform:translateY(-2px)}

/* ---------- a little more butter ---------- */
/* mobile menu: butter dot on the current section */
@media(max-width:960px){.tab[aria-current=page]:before{content:"";width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--butter);flex:0 0 auto}}
/* shelf titles get a butter tick */
.shelf h2{display:flex;align-items:center;gap:10px}
.shelf h2:before{content:"";width:5px;height:.95em;border-radius:3px;background:var(--butter);flex:0 0 auto}
/* "Film" / "Series" pill in the hero and on title pages */
.kind{background:rgba(251,176,19,.16);color:var(--butter);box-shadow:inset 0 0 0 1px rgba(251,176,19,.35)}
/* posters: a thin butter ring on hover */
.card:hover .img{box-shadow:0 0 0 2px rgba(251,176,19,.75),0 14px 34px rgba(0,0,0,.45)}
/* shelf arrows and search pick up the accent when used */
.arrows button:hover:not(:disabled){color:var(--butter)}
.search input:focus{border-color:rgba(251,176,19,.6);box-shadow:0 0 0 3px rgba(251,176,19,.15)}
::selection{background:rgba(251,176,19,.35);color:var(--ink)}

/* ---------- mobile search: the field slides open under the header ---------- */
@media(max-width:960px){
  #bar .search{display:block;order:5;flex:1 1 100%;max-height:0;opacity:0;margin:0;overflow:hidden;visibility:hidden;
    transform:translateY(-8px) scale(.98);transform-origin:top center;
    transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .2s,transform .32s cubic-bezier(.2,.9,.3,1.15),margin .32s,visibility 0s .32s}
  #bar.searchopen .search{max-height:64px;opacity:1;margin:2px 0 2px;visibility:visible;transform:none;
    transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .25s .05s,transform .35s cubic-bezier(.2,.9,.3,1.15),margin .32s,visibility 0s}
  #bar.searchopen .search input{animation:mm-searchglow .9s .1s ease-out both}
  .searchbtn{transition:background .2s,color .2s,transform .15s}
  .searchbtn svg{transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
  #bar.searchopen .searchbtn{background:rgba(251,176,19,.18);color:var(--butter)}
  #bar.searchopen .searchbtn svg{transform:rotate(90deg) scale(1.08)}
  .searchbtn:active{transform:scale(.9)}
}
@keyframes mm-searchglow{0%{box-shadow:0 0 0 0 rgba(251,176,19,.45)}100%{box-shadow:0 0 0 10px rgba(251,176,19,0)}}