/* The Colin Times : motion layer. Everything here moves on its own, no tap needed. */

/* ---- press run: the masthead assembles itself after the unfold ---- */
html.js .ticker{transition:transform .7s cubic-bezier(.2,.8,.2,1) .05s,opacity .5s .05s}
html.js:not(.pressed) .ticker{transform:translateY(-100%);opacity:0}
html.js .mast-title{transition:opacity .9s .2s,filter .9s .2s,transform 1.2s .2s cubic-bezier(.2,.8,.2,1)}
html.js:not(.pressed) .mast-title{opacity:0;filter:blur(8px);transform:scale(1.05)}
html.js .ear{transition:opacity .7s .75s,transform .8s .75s cubic-bezier(.2,.8,.2,1)}
html.js:not(.pressed) .ear-l{opacity:0;transform:translateX(-26px)}
html.js:not(.pressed) .ear-r{opacity:0;transform:translateX(26px)}
html.js .motto{transition:opacity .8s 1s}
html.js:not(.pressed) .motto{opacity:0}
html.js .dateline{clip-path:inset(0 0 0 0);transition:clip-path 1.1s .85s cubic-bezier(.6,0,.2,1)}
html.js:not(.pressed) .dateline{clip-path:inset(0 50% 0 50%)}
html.js .special{transition:opacity .2s 1.6s,transform .5s 1.6s cubic-bezier(.2,1.7,.4,1)}
html.js:not(.pressed) .special{opacity:0;transform:scale(1.6) rotate(-2deg)}
html.js .index,html.js .howto{transition:opacity .7s 1.5s}
html.js:not(.pressed) .index,html.js:not(.pressed) .howto{opacity:0}

/* ---- live bits ---- */
.ticker-tag{display:flex;align-items:center;gap:7px}
.ticker-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:live 1.4s ease-in-out infinite}
.ticker:hover .ticker-track,.ticker:active .ticker-track{animation-play-state:paused}
.clock{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:var(--accent)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:live 1.4s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
.index-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}

.ear{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.ear-ico{width:22px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.flake{animation:spin 9s linear infinite;transform-origin:50% 50%;height:22px}
.cup .st{animation:steam 2.2s ease-in-out infinite}
.cup .s2{animation-delay:.7s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- headlines print in, word by word ---- */
.hed .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em 0;margin:0 -.04em -.14em 0}
.hed .w>span{display:inline-block;transform:translateY(108%);transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.hed.go .w>span{transform:none}

/* kicker rule draws across */
.kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:left center;transition:transform 1s .25s cubic-bezier(.6,0,.2,1)}
.reveal.in .kicker::after,html:not(.js) .kicker::after{transform:scaleX(1)}
#sports .kicker::after{display:none}

/* staggered entrances: tiles, ads, chips, links, redactions */
html.js [data-stagger]>*{opacity:0;transform:translateY(12px)}
html.js [data-stagger].go>*{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),background .15s,color .15s;transition-delay:calc(var(--i,0) * 55ms)}
html.js [data-stagger].go>.chip:disabled{opacity:.3}

/* by the numbers */
.g12{grid-column:1/-1}
.tiles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-left:1px solid var(--ink);margin-top:6px}
.tile{padding:14px 12px 15px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.tile b{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(38px,11vw,54px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent)}
.tile span{display:block;margin-top:7px;font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1.35;letter-spacing:.04em;text-transform:uppercase}
@media (min-width:900px){.tiles{grid-template-columns:repeat(6,1fr)}}

/* photo breathes */
.photo-btn img{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translate(-1.2%,1%)}}

/* Christmas sky */
.shoot{position:absolute;top:9%;left:-25%;width:110px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(17deg);opacity:0;pointer-events:none;animation:shoot 10s ease-in 2.5s infinite}
@keyframes shoot{0%{opacity:0;left:-25%;top:9%}2%{opacity:1}13%{opacity:0;left:120%;top:46%}100%{opacity:0;left:120%;top:46%}}
.cd-num.tock{animation:tock .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes tock{0%{transform:scale(1.14);color:#f2c14e}100%{transform:scale(1)}}
.big-line{animation:glow 4.5s ease-in-out infinite}
@keyframes glow{50%{text-shadow:0 0 22px rgba(242,193,78,.55)}}

/* pointing hands nudge toward the thing to tap */
.how .hand,.howto .hand,.tap-hint .hand,.coin-cap .hand{animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}

/* idle invitations */
.board-timer i{font-style:normal;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.redact:not(.open) span::after{background:linear-gradient(100deg,var(--ink) 42%,#5a554c 50%,var(--ink) 58%);background-size:320% 100%;animation:sheen 3.6s linear infinite}
.redactions li:nth-child(2n) .redact span::after{animation-delay:-1.2s}
.redactions li:nth-child(3n) .redact span::after{animation-delay:-2.3s}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.card:not(.dealt) .card-in{animation:wobble 4.5s ease-in-out infinite}
@keyframes wobble{0%,70%,100%{transform:rotateY(0) rotateZ(0)}78%{transform:rotateY(-16deg) rotateZ(-1.2deg)}88%{transform:rotateY(12deg) rotateZ(1deg)}}
.coin-toss{animation:rock 3.4s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.coin-face::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);background-size:300% 100%;animation:sheen 4.2s linear infinite;pointer-events:none}
.ttt-status.turn::after{content:"";display:inline-block;width:2px;height:1em;margin-left:5px;vertical-align:-.12em;background:var(--accent);animation:blink 1s steps(1) infinite}
.cell:not(:disabled):hover{background:rgba(27,25,21,.05)}

/* main buttons catch the light */
.btn-red{position:relative;overflow:hidden}
.btn-red:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:gloss 4.2s ease-in-out infinite}
@keyframes gloss{0%,55%{left:-60%}100%{left:130%}}

/* the editor signs the letter */
html.js .signoff em{clip-path:inset(0 100% -10% 0);transition:clip-path 1.5s .7s cubic-bezier(.5,0,.3,1)}
html.js .reveal.in .signoff em{clip-path:inset(0 -5% -10% 0)}

/* frozen test mode and reduced motion: show every end state */
html.still .hed .w>span,html.still [data-stagger]>*{transform:none;opacity:1}
html.still .kicker::after{transform:scaleX(1)}
html.js.still .signoff em{clip-path:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .ticker-track{animation:none!important}
  .shoot{display:none}
}