/* "A year of you." (index.html #yearwall, assets/cx-wall.js): three rows of the made-up creators' designed avatar
   posts drift sideways in alternating directions under a slight perspective tilt, edges fading into the page, with a
   glass panel and a huge 365 over the centre. The markup holds one run of tiles per row; the script adds an
   aria-hidden copy (the loop moves the track by exactly one run) and .is-live. Without it, or with reduced motion,
   the rows stand still, centred and offset like brickwork. Follows the site theme. */

.cx-wall{position:relative;overflow:clip;isolation:isolate;
  --t:clamp(112px,11.6vw,224px);--g:clamp(10px,1.1vw,18px);
  --c365:linear-gradient(100deg,light-dark(#00aef5,#22d3ff),light-dark(#0a6cff,#4d94ff) 30%,light-dark(#d10fc6,#f24ce0) 58%,light-dark(#ff5200,#ff7a1a) 82%,light-dark(#ff8a00,#ffb020))}
.cx-wall::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 30% at 50% 58%,light-dark(oklch(.9 .08 330/.28),oklch(.45 .16 300/.32)),transparent 70%),
  radial-gradient(30% 24% at 30% 66%,light-dark(oklch(.9 .09 220/.24),oklch(.45 .12 230/.26)),transparent 70%)}

.cx-wall-head{display:grid;justify-items:center;text-align:center;gap:16px;margin-bottom:clamp(20px,3vw,40px)}
.cx-wall h2{font-size:clamp(2.7rem,1.3rem + 5vw,6rem);line-height:.92;letter-spacing:-.05em}
.cx-wall h2 em{font-style:normal;color:var(--accent-text)}
.cx-wall-num{color:var(--ink)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .cx-wall h2 em,.cx-wall-num{color:transparent;background:var(--c365);-webkit-background-clip:text;background-clip:text}
}
.cx-wall .eyebrow::before{display:none}
.cx-wall .lede{max-width:50ch;margin-inline:auto}

/* ---------- the stage: a clipped, faded window onto a tilted wall ---------- */
.cx-wall-stage{position:relative;margin-block:clamp(4px,1vw,12px)}
.cx-wall-view{position:relative;overflow:clip;perspective:1500px;perspective-origin:50% 30%;
  height:calc(var(--t) * 3.55 + var(--g) * 2);
  --fx:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  --fy:linear-gradient(180deg,transparent,#000 15%,#000 82%,transparent);
  -webkit-mask-image:var(--fx),var(--fy);-webkit-mask-composite:source-in;
  mask-image:var(--fx),var(--fy);mask-composite:intersect}
.cx-wall-rows{position:absolute;left:-6%;right:-6%;top:50%;display:grid;gap:var(--g);
  transform:translateY(-50%) rotateX(13deg) rotateZ(-4.5deg);transform-origin:50% 50%}
.cx-wall-row{display:flex;justify-content:center;min-width:0}
.cx-wall-row:nth-child(2){translate:calc(var(--t) * -.55) 0}
.cx-wall-track{display:flex;flex:none;width:max-content}
.cx-wall-run{display:flex;flex:none;gap:var(--g);padding-inline-end:var(--g)}

.cx-wall-tile{position:relative;flex:none;width:var(--t);aspect-ratio:4/5;border-radius:calc(var(--t) * .055);overflow:hidden;
  background:var(--surface-3);
  box-shadow:0 0 0 1px light-dark(oklch(.25 .03 265/.08),oklch(1 0 0/.08)),0 1px 2px oklch(0 0 0/.12),0 18px 34px -16px oklch(0 0 0/.42);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cx-wall-tile img{width:100%;height:100%;object-fit:cover}
.cx-wall-tile:hover{transform:translateY(-6px) scale(1.035);
  box-shadow:0 0 0 2px var(--accent),0 2px 4px oklch(0 0 0/.15),0 30px 50px -18px oklch(0 0 0/.55)}

/* tiny day badges: a few tiles carry a day of the year */
.cx-wall-day{position:absolute;left:7%;top:5.5%;display:inline-flex;align-items:center;gap:.5em;padding:.48em .72em;border-radius:999px;
  font:600 clamp(.55rem,.48rem + .22vw,.74rem)/1 var(--f-mono);letter-spacing:.04em;color:#fff;
  background:oklch(.17 .02 265/.72);box-shadow:inset 0 0 0 1px oklch(1 0 0/.2),0 4px 12px -4px oklch(0 0 0/.5)}
.cx-wall-day::before{content:"";width:.56em;height:.56em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .2em oklch(.88 .19 125/.25)}
.cx-wall-day.is-fest::before{background:oklch(.82 .16 70);box-shadow:0 0 0 .2em oklch(.82 .16 70/.3)}

/* hover caption (cx-wall.js adds it from creators.js): whose post, and where */
.cx-wall-tip{position:absolute;inset:auto 0 0;padding:28% 8% 7%;font:600 clamp(.56rem,.5rem + .2vw,.74rem)/1.3 var(--f-mono);color:#fff;
  background:linear-gradient(transparent,oklch(.12 .02 265/.85));opacity:0;transform:translateY(8px);
  transition:opacity .35s,transform .45s var(--ease)}
.cx-wall-tile:hover .cx-wall-tip{opacity:1;transform:none}

/* ---------- the glass panel ---------- */
.cx-wall-panel{position:absolute;left:50%;top:50%;z-index:2;translate:-50% -50%;width:max-content;max-width:calc(100% - 2 * var(--gutter));
  display:grid;justify-items:center;text-align:center;padding:clamp(20px,2.6vw,38px) clamp(26px,4.4vw,68px) clamp(18px,2.2vw,30px);
  border-radius:clamp(22px,2.6vw,38px);
  background:linear-gradient(160deg,light-dark(oklch(1 0 0/.72),oklch(.24 .02 265/.6)),light-dark(oklch(.98 .006 95/.5),oklch(.13 .016 265/.52)));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid light-dark(oklch(1 0 0/.85),oklch(1 0 0/.16));
  box-shadow:inset 0 1px 0 light-dark(oklch(1 0 0/.9),oklch(1 0 0/.18)),0 1px 2px oklch(0 0 0/.08),
    0 40px 90px -36px light-dark(oklch(.3 .05 300/.5),oklch(0 0 0/.75))}
.cx-wall-num{font:800 clamp(5.2rem,2.6rem + 11vw,12.5rem)/.8 var(--f-display);font-stretch:82%;letter-spacing:-.065em;
  padding:.04em .06em .02em 0;filter:drop-shadow(0 10px 24px light-dark(oklch(.6 .2 330/.22),oklch(.6 .2 330/.35)))}
.cx-wall-sub{margin-top:clamp(8px,1vw,14px);font:600 clamp(1.02rem,.88rem + .6vw,1.5rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.cx-wall-k{display:flex;align-items:center;gap:10px;margin-top:clamp(12px,1.4vw,18px);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cx-wall-k i{position:relative;width:clamp(56px,8vw,120px);height:2px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.cx-wall-k i::after{content:"";position:absolute;inset:0;background:var(--c365);transform-origin:left;transform:scaleX(.36)}

.cx-wall-pause{position:absolute;right:var(--gutter);bottom:clamp(6px,1.2vw,16px);z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--ink);background:var(--glass);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background .25s,transform .25s var(--ease)}
.cx-wall-pause:hover{background:var(--surface);transform:scale(1.06)}
.cx-wall-pause svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cx-wall-pause .cx-i-pause{fill:none}
.cx-wall-pause[aria-pressed="true"] .cx-i-pause,.cx-wall-pause:not([aria-pressed="true"]) .cx-i-play{display:none}
.cx-wall-pause:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.cx-wall-foot{display:grid;justify-items:center;gap:16px;margin-top:clamp(24px,3.4vw,44px);text-align:center}
.cx-wall-note{text-wrap:balance;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}

/* ---------- the drift (only once the script has added the copies) ---------- */
@keyframes cx-wall-l{to{transform:translate3d(-50%,0,0)}}
@keyframes cx-wall-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.cx-wall.is-live .cx-wall-row{justify-content:flex-start}
.cx-wall.is-live .cx-wall-track{will-change:transform;animation:cx-wall-l var(--dur,110s) linear var(--del,0s) infinite}
.cx-wall.is-live .cx-wall-row[data-dir="r"] .cx-wall-track{animation-name:cx-wall-r}
.cx-wall-row:nth-child(1){--dur:118s;--del:-14s}
.cx-wall-row:nth-child(2){--dur:142s;--del:-61s}
.cx-wall-row:nth-child(3){--dur:128s;--del:-37s}
.cx-wall.is-off .cx-wall-track,.cx-wall.is-live .cx-wall-row:hover .cx-wall-track{animation-play-state:paused}

@media (max-width:640px){
  .cx-wall{--t:clamp(96px,30vw,128px)}
  .cx-wall-view{height:calc(var(--t) * 3.7 + var(--g) * 2)}
  .cx-wall-rows{transform:translateY(-50%) rotateX(10deg) rotateZ(-6deg)}
  .cx-wall-panel{padding-inline:22px;-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
  .cx-wall-day{font-size:.5rem}
}
@media (hover:none){.cx-wall-tile:hover{transform:none}.cx-wall-tip{display:none}}
@media (prefers-reduced-motion:reduce){
  .cx-wall .cx-wall-track{animation:none!important}
  .cx-wall-pause{display:none}
  .cx-wall-tile,.cx-wall-tip{transition:none}
}
@media print{.cx-wall-pause{display:none}}