/* Agoras. This file is served to paying members. The feed behind it, and the timing that makes it worth paying for, are ours. Want one this fast? Learn to build it. Copying ours is theft. */

















:root{--lh-ease:cubic-bezier(.22,.61,.36,1)}




:root[data-rail="icons"] .rail-brand img.rail-logo,
:root[data-rail="full"] .rail-brand img.rail-logo,
:root[data-rail="full"] .rail-brand .rail-goras-img{pointer-events:auto}



.rail .rail-brand[data-tip]::after{display:none !important}





@keyframes lh-sheen{
  0%{background-position:100% 0}
  60%,100%{background-position:0% 0}
}









.rail .rail-brand::before{
  content:"";display:block !important;position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 60%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:lh-sheen 3s cubic-bezier(.45,.05,.55,.95) infinite;
}
:root[data-mode="dark"] .rail .rail-brand::before{
  background-image:linear-gradient(105deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.42) 50%,rgba(0,0,0,0) 60%);
}
:root[data-rail="icons"] .rail .rail-brand::before,
:root[data-rail="full"][data-rail-peek] .rail .rail-brand::before{
  -webkit-mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3);mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3);
  -webkit-mask-size:30px 30px;mask-size:30px 30px;
  -webkit-mask-position:13.0px 13.0px;mask-position:13.0px 13.0px;
}
:root[data-rail="full"]:not([data-rail-peek]) .rail .rail-brand::before{
  -webkit-mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3),url(/static/jp/icons/agoras-goras-light.png?v=1);
          mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3),url(/static/jp/icons/agoras-goras-light.png?v=1);
  -webkit-mask-size:20px 20px,85.0px 24.7px;mask-size:20px 20px,85.0px 24.7px;
  -webkit-mask-position:22.5px 17.0px,44.3px 18.4px;mask-position:22.5px 17.0px,44.3px 18.4px;
}
@media (max-height:700px){
  :root[data-rail="icons"] .rail .rail-brand::before,
  :root[data-rail="full"][data-rail-peek] .rail .rail-brand::before{
    -webkit-mask-size:26px 26px;mask-size:26px 26px;
    -webkit-mask-position:11.0px 11.0px;mask-position:11.0px 11.0px;
  }
  :root[data-rail="full"]:not([data-rail-peek]) .rail .rail-brand::before{
    -webkit-mask-size:18px 18px,76.5px 22.2px;mask-size:18px 18px,76.5px 22.2px;
    -webkit-mask-position:27.7px 14.0px,47.6px 15.2px;mask-position:27.7px 14.0px,47.6px 15.2px;
  }
}
@media (max-width:560px){
  :root[data-rail="icons"] .rail .rail-brand::before,
  :root[data-rail="full"] .rail .rail-brand::before{
    -webkit-mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3);mask-image:url(/static/jp/icons/agoras-mark-light.png?v=3);
    -webkit-mask-size:28px 28px;mask-size:28px 28px;-webkit-mask-position:8px 8px;mask-position:8px 8px;
  }
}





:root[data-rail="icons"] .rail-brand img.rail-logo{
  transition:opacity .22s var(--rf-ease,ease) .08s,
             translate .7s var(--lh-ease),scale .7s var(--lh-ease),rotate .7s var(--lh-ease);
}
:root[data-rail="icons"] .rail-brand:hover img.rail-logo{translate:0 -2px;scale:1.04;rotate:-1.5deg}


:root[data-rail="full"] .rail-brand img.rail-logo{
  transition:transform .5s var(--lh-ease),
             translate .7s var(--lh-ease),scale .7s var(--lh-ease),rotate .7s var(--lh-ease);
}
:root[data-rail="full"] .rail-brand:hover img.rail-logo{translate:0 -2px;scale:1.04;rotate:-1.5deg}
.rail-goras{transition:clip-path .34s var(--rf-ease,ease) .28s,translate .7s var(--lh-ease),scale .7s var(--lh-ease)}
:root[data-rail-anim] .rail-goras{transition:clip-path .18s var(--rf-ease,ease) 0s,translate .7s var(--lh-ease),scale .7s var(--lh-ease)}
.rail-goras{transform-origin:0 100%}
:root[data-rail="full"] .rail-brand:hover .rail-goras{translate:0 -1.5px;scale:1.02}

@media (prefers-reduced-motion:reduce){
  .rail .rail-brand::before{animation:none;opacity:0}
  :root[data-rail] .rail-brand:hover img.rail-logo,
  :root[data-rail] .rail-brand:hover .rail-goras{translate:none;scale:none;rotate:none}
}