/* Generated link covers (covers.js), then card state and patterns.
   Covers size from their own width (cqw)
   and height (cqh): on phones the frame is capped at 210px tall, so it can be
   much wider than its usual 16:9. Only transform and opacity animate; each
   animation sets only its start, so with motion off every cover is complete. */
.cardle-cover{container-type:size;background:oklch(40% .1 262)}
.cardle-cover::after{display:none}
.cc-fill{position:absolute;inset:0;display:block;overflow:hidden}
.cc-fill svg{display:block;width:100%;height:100%}
.cc-scrim{position:absolute;z-index:1;left:0;right:0;bottom:0;height:48%;background:linear-gradient(transparent,oklch(16% .04 270/.62));pointer-events:none}
.cc-meta{position:absolute;z-index:2;left:3.5cqw;right:3.5cqw;bottom:min(3cqw,6cqh);display:flex;align-items:center;gap:min(2.4cqw,4.5cqh);color:#fff;font:700 max(11px,min(3.6cqw,6.8cqh)) var(--font-body);text-shadow:0 1px 8px oklch(20% .05 270/.5)}
.cc-meta b{display:grid;place-items:center;flex:0 0 auto;width:max(22px,min(7cqw,13cqh));aspect-ratio:1;border-radius:7px;background:oklch(100% 0 0/.24);font:700 max(11px,min(3.6cqw,6.8cqh)) var(--font-display);text-shadow:none}
.cc-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-meta em{margin-left:auto;padding:3px 10px;border-radius:999px;background:oklch(100% 0 0/.92);color:oklch(38% .14 262);font-style:normal;text-shadow:none}
.cc-light .cc-meta{color:var(--cc-ink);text-shadow:none}
.cc-light .cc-meta b{background:color-mix(in oklch,var(--cc-ink) 12%,transparent)}
.cc-light .cc-meta em{background:var(--cc-ink);color:#fff}

/* Editorial (articles): the title's two most distinctive words. */
.cc-ed-kicker{position:absolute;left:5cqw;top:min(5cqw,9.4cqh);max-width:72cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 max(9px,min(2.9cqw,5.4cqh)) var(--font-body);letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.cc-ed-words{position:absolute;left:4.5cqw;top:min(11.5cqw,21.6cqh);display:flex;flex-direction:column;gap:min(.8cqw,1.5cqh)}
.cc-ed-words b{font-family:var(--font-display);font-weight:700;font-size:min(calc(150cqw / var(--len)),15cqw,28cqh);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
/* The outline needs its own colour: currentColor would be the transparent fill. */
.cc-ed-words b+b{margin-left:9cqw;color:transparent;-webkit-text-stroke:max(1px,.35cqw) var(--cc-ink)}
.cc-ed-dot{position:absolute;width:min(40cqw,75cqh);aspect-ratio:1;border-radius:50%}
.cc-in-view:not(.cc-seen) .cc-ed-words b:first-child{animation:ccSlideIn .75s cubic-bezier(.2,.8,.2,1) .1s both}
.cc-in-view:not(.cc-seen) .cc-ed-words b+b{animation:ccSlideBack .75s cubic-bezier(.2,.8,.2,1) .22s both}
.cc-in-view:not(.cc-seen) .cc-ed-dot{animation:ccPop .7s cubic-bezier(.3,1.4,.5,1) both}

/* Signal (video files): a waveform and a playhead that moves while on screen. */
.cc-bar{transform-box:fill-box;transform-origin:center}
.cc-in-view:not(.cc-seen) .cc-bar{animation:ccGrow .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--n) * 9ms)}
.cc-played{position:absolute;left:5%;top:14%;bottom:14%;width:90%;background:linear-gradient(90deg,transparent,var(--cc-accent));opacity:.28;transform-origin:left;transform:scaleX(0);animation:ccFill 10s linear infinite paused}
.cc-head{position:absolute;left:5%;top:12%;bottom:12%;width:2px;border-radius:2px;background:var(--cc-accent);box-shadow:0 0 12px var(--cc-accent);animation:ccPlay 10s linear infinite paused}
.cc-head::after{content:'';position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--cc-accent)}
.cc-visible .cc-played,.cc-visible .cc-head{animation-play-state:running}

/* Postcard (bookmarks): the stamp lands, then the postmark. */
.cc-stamp,.cc-mark,.cc-waves{transform-box:fill-box;transform-origin:center}
.cc-in-view:not(.cc-seen) .cc-stamp{animation:ccThunk .55s cubic-bezier(.3,1.45,.5,1) .1s both}
.cc-in-view:not(.cc-seen) .cc-mark{animation:ccMark .45s ease .5s both}
.cc-in-view:not(.cc-seen) .cc-waves{animation:ccFade .4s ease .62s both}

/* Card state (aurora-feed.js) and patterns (covers.js). The feed card itself
   carries data-cc-key, so it gets the same cc-in-view / cc-visible / cc-seen
   classes as covers. */
.aurora-type-badge{position:relative}
/* Reminders: a ring around the badge drains toward the due time. */
.cs-ring{position:absolute;inset:-5px;width:46px;height:46px;overflow:visible;pointer-events:none}
.cs-ring rect{fill:none;stroke-width:2.5}
.cs-ring-track{stroke:var(--track)}
.cs-ring-fill{stroke:oklch(60% .14 230);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--off)}
.cc-in-view:not(.cc-seen) .cs-ring-fill{animation:csRing 1.2s cubic-bezier(.3,.7,.2,1) .15s both}
/* Due today or overdue: a warm ring, eyebrow and a pulse while on screen. */
.cs-urgent .cs-ring-fill{stroke:oklch(68% .17 45)}
.cs-urgent .aurora-card-heading>span{color:oklch(55% .16 45)}
.cs-urgent .aurora-type-badge::after{content:'';position:absolute;inset:-5px;border:2px solid oklch(68% .17 45);border-radius:16px;opacity:0;pointer-events:none;animation:csHalo 2.4s ease-out infinite paused}
.cs-urgent.cc-visible .aurora-type-badge::after{animation-play-state:running}
/* Work: checklist progress. */
.cs-progress{height:6px;margin-top:10px;border-radius:6px;background:var(--track);overflow:hidden}
.cs-progress i{display:block;height:100%;border-radius:inherit;background:var(--grad-brand);transform-origin:left;transform:scaleX(var(--p))}
.cc-in-view:not(.cc-seen) .cs-progress i{animation:csFill 1s cubic-bezier(.3,.7,.2,1) .2s both}
/* Dealt and sample cards: trial days left, inside the existing pill. */
.cs-life{display:inline-block;width:28px;height:4px;margin-right:6px;vertical-align:middle;border-radius:4px;background:var(--track);overflow:hidden}
.cs-life b{display:block;height:100%;background:linear-gradient(90deg,oklch(68% .15 60),oklch(62% .14 250));transform-origin:left;transform:scaleX(var(--p))}
.cc-in-view:not(.cc-seen) .cs-life b{animation:csDrain 1.3s cubic-bezier(.3,.7,.2,1) .25s both}
/* GitHub issues: a status light that pulses while assigned. */
.cs-status{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border:1px solid var(--border);border-radius:999px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.cs-status i{position:relative;width:8px;height:8px;border-radius:50%;background:oklch(62% .16 150)}
.cs-status-done i{background:oklch(55% .12 300)}
.cs-status-in_progress i::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:csBeacon 2s ease-out infinite paused}
.cc-visible .cs-status-in_progress i::after{animation-play-state:running}
/* Patterns behind cards without a link: clipped to the card, under its content. */
.aurora-card-inner>:not(.cs-pattern){position:relative;z-index:1}
.cs-pattern{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cs-pattern>span{position:absolute;right:-34px;top:50%;width:150px;height:150px;margin-top:-75px;color:var(--accent-2);opacity:.12}
.cs-pattern-reminder>span{color:oklch(60% .14 230)}
.cs-pattern-kanban>span{color:oklch(40% .04 265)}
.cs-pattern-family>span{color:oklch(56% .15 245)}
.cs-pattern svg{display:block;width:100%;height:100%;overflow:visible}
.cs-pattern svg *{transform-box:fill-box;transform-origin:center}
.cs-ripple{animation:csRipple 3.6s ease-out infinite paused;animation-delay:calc(var(--n) * -1.2s)}
.cs-spin{animation:csSpin 40s linear infinite paused}
.cs-commit{animation:csCommit 3s ease-in-out infinite paused;animation-delay:calc(var(--n) * .4s)}
.cs-cell{opacity:.35;animation:csCell 4s ease-in-out infinite paused;animation-delay:calc(var(--n) * -.37s)}
.cc-visible .cs-ripple,.cc-visible .cs-spin,.cc-visible .cs-commit,.cc-visible .cs-cell{animation-play-state:running}

@keyframes csRing{from{stroke-dashoffset:0}}
@keyframes csHalo{0%{transform:scale(.95);opacity:.6}70%,100%{transform:scale(1.4);opacity:0}}
@keyframes csFill{from{transform:scaleX(0)}}
@keyframes csDrain{from{transform:scaleX(1)}}
@keyframes csBeacon{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}
@keyframes csRipple{from{transform:scale(.25);opacity:1}to{transform:scale(1);opacity:0}}
@keyframes csSpin{to{transform:rotate(360deg)}}
@keyframes csCommit{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.6)}}
@keyframes csCell{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ccSlideIn{from{transform:translateX(-14%);opacity:0}}
@keyframes ccSlideBack{from{transform:translateX(14%);opacity:0}}
@keyframes ccPop{from{transform:scale(.3);opacity:0}}
@keyframes ccGrow{from{transform:scaleY(.05)}}
@keyframes ccPlay{from{transform:translateX(0)}to{transform:translateX(90cqw)}}
@keyframes ccFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ccThunk{from{transform:scale(1.45) rotate(-14deg);opacity:0}}
@keyframes ccMark{from{transform:scale(1.3);opacity:0}}
@keyframes ccFade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.cardle-cover *,.cardle-cover *::after,.aurora-feed-card [class*="cs-"],.aurora-feed-card [class*="cs-"]::after,.cs-urgent .aurora-type-badge::after{animation:none!important}}