/* Aether — the halo: the work section. Light falls from above, a nimbus rises behind the project being revealed,
   the others wait on a ring of light, pale, until their turn. */
.hw{position:relative;background:var(--ivory)}
.hw__stage{position:sticky;top:0;touch-action:pan-y;height:100vh;height:100svh;overflow:hidden;
  background:linear-gradient(180deg,var(--ivory) 0%,rgba(247,244,236,0) 38%),radial-gradient(ellipse 70% 80% at 50% 38%,#FFFDF8 0%,var(--ivory) 50%,#EEE6D8 100%)}
.hw__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hw__scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hw__layer{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
.hw__cards{position:absolute;inset:0;z-index:3}
.hw__head{position:absolute;z-index:5;left:var(--gut);top:calc(96px + env(safe-area-inset-top,0px))}

/* a project */
.hc{position:absolute;left:0;top:0;margin:0;transform-origin:50% 100%;will-change:transform,opacity,filter;cursor:pointer}
.hc__in{position:relative;display:block}
.hc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;
  filter:grayscale(calc(var(--mono,0) * 1)) sepia(calc(var(--mono,0) * .42)) brightness(calc(1 + var(--mono,0) * .07)) contrast(calc(1 - var(--mono,0) * .12))}
.hc__flash{position:absolute;inset:-8%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,252,244,.95),rgba(255,252,244,0));opacity:var(--flash,0);mix-blend-mode:screen}

/* the frame: the site as a screen, lit from the front */
.hc__in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 40px 80px -30px rgba(74,69,46,.45);border-radius:3px;overflow:hidden}

/* the text */
.hw__info{position:absolute;z-index:5;left:50%;transform:translateX(-50%);width:min(620px,100% - 32px);display:grid;gap:8px;justify-items:center;text-align:center;pointer-events:none}
.hw__count{display:flex;align-items:center;gap:14px;color:var(--mute);font-family:var(--serif);letter-spacing:.2em;font-size:13px;text-transform:none}
.hw__count b{color:var(--charcoal);font-weight:400}
.hw__count i{display:block;width:70px;height:1px;background:var(--line);position:relative}
.hw__count i em{position:absolute;left:0;top:0;bottom:0;background:var(--charcoal);transition:width .8s var(--ease)}
.hw__name{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1.04;margin:0;letter-spacing:.01em}
.hw__name span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.25em);animation:hwLetter .9s var(--ease) forwards;animation-delay:calc(var(--k) * 38ms + 120ms)}
@keyframes hwLetter{to{opacity:1;filter:none;transform:none}}
.hw__row{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.hw__kind{color:var(--mute)}
.hw__go{display:flex;align-items:center;gap:14px;padding:13px 0;margin-block:-3px;color:var(--charcoal);text-decoration:none;pointer-events:auto}
.hw__go::after{content:"";width:34px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.hw__go:hover::after{width:60px}
.hw__fade{transition:opacity .5s var(--ease),transform .7s var(--ease),filter .5s;transition-delay:calc(var(--i,0) * 60ms)}
.hw__info.is-swap .hw__fade{opacity:0;transform:translateY(10px);filter:blur(5px);transition-delay:0s}

.hw__arrows{position:absolute;z-index:6;right:var(--gut);bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;gap:10px}
.hw__arrows button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:rgba(247,244,236,.5);transition:border-color .3s,background .3s}
.hw__arrows button:hover{border-color:var(--charcoal);background:rgba(247,244,236,.9)}
.hw__arrows svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.2}

.hw__hint{position:absolute;z-index:6;left:var(--gut);bottom:calc(26px + env(safe-area-inset-bottom,0px));height:46px;margin:0;display:flex;align-items:center;gap:10px;color:var(--mute);
  transition:opacity .6s var(--ease)}
.hw__hint svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;animation:hwNudge 2.4s var(--ease-io) infinite}
.hw__hint svg:last-child{animation-direction:reverse}
@keyframes hwNudge{0%,100%{transform:none}50%{transform:translateX(-4px)}}
.hw__hint.is-gone{opacity:0}
@media (max-width:760px){
  .hw__hint{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .hw__head{display:none}
  .hw__name{font-size:32px}
  .hw__arrows{right:var(--gut);bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.hw__hint svg{animation:none}.hw__fade{transition:none}.hw__name span{animation:none;opacity:1;filter:none;transform:none}}