/* pop layer (Oct 19, 7 AM): clean layout stays, motion + color + pops come back */
:root{--hl:#FF4FA3}
/* ---------- color accents (static, fine for reduced motion too) ---------- */
html.ntpop .hcard,html.ntpop .card,html.ntpop .mef,html.ntpop .pf figure{border:1.5px solid #111!important;box-shadow:5px 5px 0 var(--c,var(--hl))!important}
html.ntpop .hcard:hover,html.ntpop .card:hover,html.ntpop .mef:hover{background:color-mix(in srgb,var(--c,var(--hl)) 12%,#fff)!important;border-color:#000!important;box-shadow:7px 7px 0 var(--c,var(--hl))!important}
html.ntpop .hcard:active,html.ntpop .card:active,html.ntpop .mef:active{background:color-mix(in srgb,var(--c,var(--hl)) 22%,#fff)!important;box-shadow:2px 2px 0 var(--c,var(--hl))!important}
html.ntpop .hcard .ar{color:var(--c,#bbb)!important;font-weight:800!important}
html.ntpop .tile{border:1.5px solid #111!important;box-shadow:4px 4px 0 var(--c,var(--hl))!important}
html.ntpop .tile.on{box-shadow:4px 4px 0 var(--c,var(--hl))!important}
html.ntpop .tdc{border-top:5px solid var(--c,var(--hl))!important}
html.ntpop .soon{border:2px dashed var(--c,var(--hl))!important;background:color-mix(in srgb,var(--c,var(--hl)) 6%,#fff)!important}
html.ntpop .cta{box-shadow:3px 3px 0 var(--c,var(--hl))!important}
html.ntpop .cta:hover,html.ntpop .cta:active{box-shadow:1px 1px 0 var(--c,var(--hl))!important}
html.ntpop nav.nt5 a.on{box-shadow:3px 3px 0 var(--hl)!important}
html.ntpop h1 .w.inv{box-shadow:6px 6px 0 var(--hl)!important}
html.ntpop h2:not(.noline){background:linear-gradient(var(--hl2,var(--hl)),var(--hl2,var(--hl))) left bottom/46px 5px no-repeat!important;padding-bottom:12px!important;border-radius:0}
html.ntpop .pfemo{border:0!important;background:none!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;width:190px!important;height:190px!important}
html.ntpop .pfemo img{object-fit:contain!important;filter:drop-shadow(6px 8px 0 color-mix(in srgb,var(--hl) 45%,transparent))!important;border-radius:0!important}
html.ntpop .ticker{color:#888!important}
html.night.ntpop .hcard:hover,html.night.ntpop .card:hover,html.night.ntpop .mef:hover{background:#111!important}
/* particles */
.ppt{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;font-size:20px;line-height:1;will-change:transform,opacity;animation:pptf .75s cubic-bezier(.15,.7,.3,1) forwards}
.ppt.sq{width:9px;height:9px;border-radius:2px}.ppt.dot{width:8px;height:8px;border-radius:50%}
@keyframes pptf{0%{opacity:1;transform:translate(var(--x0),var(--y0)) scale(.4) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y1)) scale(1) rotate(var(--r))}}

@media (prefers-reduced-motion:no-preference){
@keyframes ntbounce{0%{opacity:0;translate:0 34px;scale:.82}55%{opacity:1;translate:0 -6px;scale:1.03}75%{translate:0 2px;scale:.99}100%{opacity:1;translate:0 0;scale:1}}
@keyframes ntpopb{0%{scale:1}25%{scale:.9}55%{scale:1.09}75%{scale:.97}100%{scale:1}}
@keyframes ltpop{0%{opacity:0;translate:0 .55em;scale:.2;rotate:-18deg}60%{opacity:1;translate:0 -.08em;scale:1.18;rotate:4deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes ebob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-6deg}}
@keyframes ewig{0%,100%{rotate:0deg}25%{rotate:-9deg}75%{rotate:9deg}}
@keyframes espin{0%{rotate:0deg;scale:1}50%{scale:1.35}100%{rotate:360deg;scale:1}}
@keyframes navin{0%{opacity:0;translate:0 -14px;scale:.7}60%{opacity:1;translate:0 3px;scale:1.06}100%{opacity:1;translate:0 0;scale:1}}
@keyframes ntdpop{0%{opacity:0;scale:.35;translate:0 40px}55%{opacity:1;scale:1.07;translate:0 -6px}75%{scale:.97;translate:0 2px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes ntdring{0%,100%{rotate:0deg;scale:1}10%{rotate:-14deg;scale:1.15}20%{rotate:12deg}30%{rotate:-8deg}40%{rotate:0deg;scale:1}}
@keyframes facein{0%{opacity:0;scale:.3;rotate:-25deg}60%{opacity:1;scale:1.1;rotate:6deg}100%{opacity:1;scale:1;rotate:0deg}}

/* bounce-in on scroll (JS adds .pz, then .pin when visible) */
html.ntpop .pz{opacity:0!important;animation:none!important}
html.ntpop .pz.pin{opacity:1!important;animation:ntbounce .7s cubic-bezier(.25,1,.4,1) var(--pd,0s) backwards!important}
/* springy hover / tap (scale property, so calm's transform:none can't block it) */
html.ntpop .hcard,html.ntpop .card,html.ntpop .mef,html.ntpop .tile,html.ntpop .cta,html.ntpop nav.nt5 a,html.ntpop .pf figure,html.ntpop .qb,html.ntpop .lgc,html.ntpop .soon,html.ntpop .tdgeo,html.ntpop .dmspin,html.ntpop .dmagain{transition:scale .45s cubic-bezier(.3,1.9,.5,1),background .2s,box-shadow .2s,border-color .2s!important}
@media (hover:hover){html.ntpop .hcard:hover,html.ntpop .card:hover,html.ntpop .mef:hover,html.ntpop .tile:hover,html.ntpop .pf figure:hover,html.ntpop .soon:hover{scale:1.025}html.ntpop .cta:hover,html.ntpop nav.nt5 a:hover,html.ntpop .qb:hover{scale:1.06}}
html.ntpop .hcard:active,html.ntpop .card:active,html.ntpop .mef:active,html.ntpop .tile:active,html.ntpop .pf figure:active,html.ntpop .soon:active{scale:.965;transition-duration:.12s!important}
html.ntpop .cta:active,html.ntpop nav.nt5 a:active,html.ntpop .qb:active,html.ntpop .lgc:active,html.ntpop .tdgeo:active{scale:.92;transition-duration:.1s!important}
html.ntpop .pz.pin.pdone{animation:none!important;opacity:1!important}
html.ntpop .ppop.ppop.ppop.ppop{animation:ntpopb .5s cubic-bezier(.3,1.6,.5,1)!important}
/* headline letters */
html.ntpop h1 .w{animation:none!important;opacity:1!important}
html.ntpop .lt{display:inline-block;animation:ltpop .55s cubic-bezier(.2,1.5,.4,1) calc(.08s + var(--i,0)*38ms) backwards}
html.ntpop .lt.ebob{animation:ltpop .55s cubic-bezier(.2,1.5,.4,1) calc(.08s + var(--i,0)*38ms) backwards,ebob 2.6s calc(1.2s + var(--i,0)*38ms) ease-in-out infinite}
html.ntpop .ltw{white-space:nowrap}
/* emojis bob gently */
html.ntpop .ebob{display:inline-block;animation:ebob 2.8s var(--bd,0s) ease-in-out infinite}
html.ntpop .hcard .he,html.ntpop .tile .te,html.ntpop .mfe,html.ntpop .soon .emo,html.ntpop .floaters .emo,html.ntpop .tdshabgrid .e,html.ntpop .tdwxnow .e,html.ntpop .dmcard .dmem,html.ntpop .qres .qbig,html.ntpop nav.nt5 a.on i,html.ntpop .tile.on .te{display:inline-block;animation:ebob 2.8s var(--bd,0s) ease-in-out infinite!important}
html.ntpop .hcard:nth-child(2n) .he,html.ntpop .mef:nth-child(2n) .mfe,html.ntpop .tile:nth-child(2n) .te{animation-duration:3.3s!important;--bd:.4s}
html.ntpop .hcard:nth-child(3n) .he,html.ntpop .mef:nth-child(3n) .mfe,html.ntpop .tile:nth-child(3n) .te{animation-name:ewig!important;animation-duration:3s!important;--bd:.8s}
html.ntpop .espin.espin.espin.espin{animation:espin .6s cubic-bezier(.3,1.5,.5,1)!important}
/* nav */
html.ntpop nav.nt5 a{animation:navin .5s cubic-bezier(.25,1.4,.45,1) backwards!important}
html.ntpop nav.nt5 a:nth-child(2){animation-delay:.05s!important}html.ntpop nav.nt5 a:nth-child(3){animation-delay:.1s!important}html.ntpop nav.nt5 a:nth-child(4){animation-delay:.15s!important}html.ntpop nav.nt5 a:nth-child(5){animation-delay:.2s!important}
/* softer, springier reveal for text blocks */
html.ntpop .rev{transition:opacity .6s ease,transform .7s cubic-bezier(.25,1.5,.45,1)!important;transform:translateY(22px)!important}
html.ntpop .rev.in{transform:none!important}
/* about: emoji face */
html.ntpop .pfemo{animation:facein .8s .15s cubic-bezier(.2,1.5,.4,1) backwards!important}
html.ntpop .pfemo img{animation:ebob 3.2s 1.2s ease-in-out infinite;transition:scale .4s cubic-bezier(.3,1.9,.5,1)}
html.ntpop .pfemo:active img{scale:.92}
/* disclaimer: pop/bounce in, colorful */
html.ntpop #ntdisc .ntdc{animation:ntdpop .6s cubic-bezier(.25,1.2,.4,1) both!important}
html.ntpop #ntdisc .ntde{display:inline-block!important;animation:ntdring 2.2s .7s ease-in-out infinite!important}
}
/* disclaimer colors (any motion setting) */
html.ntpop #ntdisc .ntdc{border:2px solid #000!important;box-shadow:8px 8px 0 #FF4FA3!important;background:#fff!important}
html.ntpop #ntdisc h3{display:inline-block;background:#FFD600;padding:2px 10px!important;border-radius:6px}
html.ntpop #ntdisc .ntdb a{box-shadow:3px 3px 0 #3D7BFF!important}
html.ntpop #ntdisc .ntdb a.wa{box-shadow:3px 3px 0 #00D68F!important}

/* EVERY emoji alive (Oct 19, 7:48 AM ask): bigger loops, random auto-pops, big tap POP */
@media (prefers-reduced-motion:no-preference){
@keyframes ek0{0%,100%{translate:0 0;rotate:-9deg}50%{translate:0 -.32em;rotate:9deg}}
@keyframes ek1{0%,100%{rotate:0deg}20%{rotate:-17deg}40%{rotate:15deg}60%{rotate:-12deg}80%{rotate:10deg}}
@keyframes ek2{0%,48%,100%{rotate:0deg;translate:0 0}4%{rotate:-22deg;translate:-.08em 0}8%{rotate:20deg;translate:.08em 0}12%{rotate:-18deg;translate:-.06em 0}16%{rotate:16deg;translate:.06em 0}20%{rotate:-12deg}24%{rotate:10deg}28%{rotate:-6deg}32%{rotate:0deg}70%{rotate:-6deg;translate:0 -.08em}85%{rotate:6deg}}
@keyframes ek3{0%,40%,100%{translate:0 0;scale:1;rotate:0deg}8%{translate:0 .04em;scale:1.18 .82}20%{translate:0 -.6em;scale:.92 1.12;rotate:-12deg}30%{translate:0 0;scale:1.2 .8;rotate:6deg}35%{scale:.95 1.06;rotate:0deg}70%{rotate:-7deg}85%{rotate:7deg}}
@keyframes ek4{0%,45%,100%{translate:0 0;rotate:0deg;scale:1}15%{translate:0 -.45em;rotate:180deg;scale:1.2}30%{translate:0 0;rotate:360deg;scale:1}36%{scale:1.15 .85}42%{scale:1}70%{rotate:368deg}85%{rotate:352deg}}
@keyframes ek5{0%,40%,100%{scale:1;rotate:0deg}8%{scale:1.32;rotate:-6deg}16%{scale:.94}24%{scale:1.26;rotate:6deg}32%{scale:1}70%{rotate:-8deg;translate:0 -.12em}}
@keyframes eauto{0%{scale:1;translate:0 0;rotate:0deg}22%{scale:var(--as,1.85);translate:0 -.35em;rotate:-14deg}40%{scale:calc(var(--as,1.85) - .4);rotate:12deg}58%{scale:calc(var(--as,1.85) - .25);rotate:-6deg}78%{scale:.9;translate:0 0;rotate:3deg}100%{scale:1;rotate:0deg}}
@keyframes eautos{0%{scale:1;translate:0 0;rotate:0deg}30%{scale:var(--as,1.8);translate:0 -.5em;rotate:200deg}60%{scale:1.3;translate:0 0;rotate:360deg}80%{scale:.9;rotate:360deg}100%{scale:1;rotate:360deg}}
@keyframes ebig{0%{scale:1;opacity:1;rotate:0deg}12%{scale:var(--b1,2.1);opacity:1;rotate:-14deg}22%{scale:var(--b2,2.7);opacity:0;rotate:10deg}68%{scale:.1;opacity:0;rotate:0deg}84%{scale:1.3;opacity:1;rotate:-8deg}93%{scale:.92;rotate:4deg}100%{scale:1;opacity:1;rotate:0deg}}
.emx{display:inline-block;transform-origin:50% 60%;animation:ek0 var(--ed,2s) var(--bd,0s) ease-in-out infinite}
html .emx.k1{animation-name:ek1}html .emx.k2{animation-name:ek2;animation-timing-function:linear}html .emx.k3{animation-name:ek3}html .emx.k4{animation-name:ek4}html .emx.k5{animation-name:ek5}
html .emx.eoff{animation-play-state:paused}
html .emx.eauto.eauto{animation:eauto .85s cubic-bezier(.3,1.4,.5,1)!important;position:relative;z-index:5}
html .emx.eauto.espn{animation:eautos .85s cubic-bezier(.3,1.2,.5,1)!important}
html .emx.ebig.ebig.ebig{animation:ebig 1.45s cubic-bezier(.3,1.2,.5,1)!important;position:relative;z-index:6}
.ppt{z-index:9998}
}
@media (prefers-reduced-motion:reduce){.ppt{display:none}}