/* ══════════════════════════════════════════════════════════════════════════
   INDEX — hero corner labels, About links and
   the highlights panel that slides in from the right.

   Everything sits on the site's existing column grid: lines every two
   --col-step from --edge. Figma's 1500px frame maps onto it as
     Panel           grid line 2 → right edge
     Panel content   grid line 3 (50vw) → --edge from the right
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Motion — strong ease-out for entrances.
     The drawer moves on a curve measured from a reference: a ~400ms wind-up,
     a pop through the middle, then a long settle. Out plays on the same
     curve and timing as in, as the reference does. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.7, 0.1, 0.1, 1);

  --wp-left:      calc(var(--edge) + var(--col-step) * 4);
  --wp-open-dur:  1200ms;
  --wp-close-dur: 1200ms;  /* same as open */
  --wp-scrim-dur: 500ms;   /* the overlay lands during the drawer's wind-up */
}


/* ── HERO CORNER LABELS ────────────────────────────────────────────────── */
.home-meta {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  z-index: 1;
  pointer-events: none;
}
.home-meta__role {
  font-size: 18px;
  line-height: 1.3;
  color: var(--blue);
}
.home-meta__year {
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
}


/* ── ABOUT LINKS ───────────────────────────────────────────────────────── */
/* The About copy is the hero blurb (.home-blurb). Its links step back to
   grey (#9f9f9f, the panel's muted ink) while a case study is open, so the
   case study leads. */
body.wp-open .intro__link {
  color: #9f9f9f;
  transition-duration: 360ms;
}

/* Line by line (js/line-reveal.js): the words move. */
.lr-w { position: relative; }

/* Links: same weight as the copy, marked by colour alone — a deep navy
   (#1156be), no underline until hovered. On hover a 1px line sweeps in from
   the left, as on the case-study window's rail links (.wp-rail__link); it
   leaves instantly. Drawn as a background so it can grow; the box isn't
   cloned per line, so a link that wraps draws across one line, then the
   next. */
.intro__link {
  --ul: currentColor;
  color: #1156be;
  text-decoration: none;
  background-image: linear-gradient(var(--ul), var(--ul));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .intro__link:hover {
    background-size: 100% 1px;
    transition: color 160ms ease, background-size 320ms cubic-bezier(0.77, 0, 0.175, 1);
  }
}
.intro__link:focus-visible {
  outline: 1.5px solid var(--blue);
  outline-offset: 2px;
}

/* ── HIGHLIGHTS PANEL ──────────────────────────────────────────────────── */
/* Case-study palette: near-black headings and labels, grey body copy —
   the blue stays with the page around it. */
.wp {
  --wp-ink:   #1a1a1a;
  --wp-muted: #9f9f9f;
  color: var(--wp-muted);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--wp-left);
  z-index: 60;                 /* over the fixed chrome + page nav (50) */
  background: var(--bg);
  box-shadow: 4px 4px 234px 0 rgba(0, 0, 0, 0.1);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;          /* keeps the wide shadow off-screen when closed */
  transition:
    transform var(--wp-close-dur) var(--ease-drawer),
    visibility 0s linear var(--wp-close-dur);
  will-change: transform;
}
.wp.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    transform var(--wp-open-dur) var(--ease-drawer),
    visibility 0s linear 0s;
}

/* Overlay — dims the page the drawer is covering. It fades in straight
   away, so it's mostly there before the drawer's pop; it never takes
   clicks (a click outside the panel still closes it, and the company
   links beside it still switch). */
.wp-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;                 /* over the page + nav (50), under the panel (60) */
  background: rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  /* Going out, it lifts in step with the drawer, on the drawer's curve. */
  transition: opacity var(--wp-close-dur) var(--ease-drawer);
}
body.wp-open .wp-scrim {
  opacity: 1;
  transition: opacity var(--wp-scrim-dur) var(--ease-out);
}

.wp__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.wp__scroll::-webkit-scrollbar { display: none; }


.wp-entry {
  display: grid;
  /* Rail two columns wide, or wider if its longest item needs it (keeping
     its 24px gap); the content takes the rest. */
  grid-template-columns: auto minmax(0, 1fr);
  padding-right: var(--edge);
}
.wp-entry[hidden] { display: none; }

/* Content swap between companies: a quick fade + settle. */
.wp-entry.is-entering { animation: wp-enter 420ms var(--ease-out) both; }
@keyframes wp-enter {
  from { opacity: 0; transform: translateY(10px); }
}

/* Left rail — pinned while the projects scroll past. */
.wp-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: var(--edge) 24px var(--edge) var(--edge);
  font-size: 12px;
  line-height: normal;
  /* Head at the top, site link at the foot, project links centred on the
     full height — all in flow (overlapping rows), so the rail is always at
     least as wide as its longest item and the content can't run over it. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-width: calc(var(--col-step) * 2);
}
.wp-rail > * { grid-column: 1; }    /* one column: the overlapping rows stack, not sit side by side */
.wp-rail__head { grid-row: 1; }
.wp-rail__head { display: flex; flex-direction: column; }
.wp-rail__name {
  margin-top: 24px;
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);   /* 16px → 14px, as the body */
  font-weight: normal;
  line-height: normal;
}
/* The company's field, in grey under its name. */
.wp-rail__tag {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: normal;
  color: var(--wp-muted);
}
/* Focus moves here when the panel opens (so keyboard and screen-reader users
   land in it); it isn't interactive, so no focus ring. */
.wp-rail__name:focus { outline: none; }

/* The project links sit centred in the viewport height (the rail is the
   full-height sticky column), level with the left edge of the rail. */
.wp-rail__nav {
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-rail__link,
.wp-rail__site {
  color: inherit;
  text-decoration: none;
  width: fit-content;
}
/* Underline drawn as a 1px background line (same spot, weight and 50% blue
   as the About links' underline) so it can sweep: the newly active item's
   line grows in from the left; the previous item's simply disappears. The
   transition lives only on the "on" states, so turning off is instant. */
.wp-rail__link {
  --ul: color-mix(in srgb, currentColor 50%, transparent);
  outline: none;
  background-image: linear-gradient(var(--ul), var(--ul));
  background-repeat: no-repeat;
  background-position: left bottom;           /* grows from the left */
  background-size: 0% 1px;
}
.wp-rail__link.is-active,
.wp-rail__link:focus-visible {
  background-size: 100% 1px;
  transition: background-size 320ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (hover: hover) and (pointer: fine) {
  .wp-rail__link:hover {
    --ul: currentColor;
    background-size: 100% 1px;
    transition: background-size 320ms cubic-bezier(0.77, 0, 0.175, 1);
  }
}
.wp-rail__site:hover,
.wp-rail__site:focus-visible { text-decoration: underline; outline: none; }
@media (prefers-reduced-motion: reduce) {
  .wp-rail__link { transition: none; }
}
.wp-rail__site {
  grid-row: 3;
  align-self: end;
}

/* Shared (Close) control — bottom of the rail, bracketed like the page nav. */
/* On desktop the panel closes with Esc, a click outside it, or Back, so the
   (Close) link is hidden. Under 900px the panel fills the screen with
   nothing outside it to click, so (Close) returns top-right there. */
.wp-close {
  display: none;
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--wp-ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.wp-close__text::before { content: '('; }
.wp-close__text::after  { content: ')'; }
.wp-close__icon { display: none; }
.wp-close:active  { transform: scale(0.97); }
.wp-close:focus-visible { outline: 1.5px solid var(--wp-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wp-close:hover { text-decoration: underline; }
}

/* Logo tile — the same card as the hover image, at 58px: the Hover_*.png
   is cropped to its card (it carries 30/43px of baked shadow at 240px) and
   the shadow is drawn here so it follows the 6px corners. */
.wp-logo {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.wp-logo > img {
  position: absolute;
  left: -12.5%;
  top: -12.5%;
  width: 130.42%;
  height: 130%;
  max-width: none;
  display: block;
}
/* A flat, full-bleed tile (no baked shadow margin to crop) fills the box. */
.wp-logo > img.is-plain {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main column */
.wp-main {
  padding: var(--edge) 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.wp-block { scroll-margin-top: var(--edge); }

/* Project shot — plain image, 6px corners, no stroke or corner brackets. */
.wp-shot {
  position: relative;
  aspect-ratio: 702 / 405;      /* each carousel sets its own in index.html: the
                                   typical (median) shape of its images, so most
                                   show whole instead of cropped */
  margin: 0 0 40px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--wp-ink) 4%, var(--bg));
}
.wp-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero header — a looping showcase video at the top of an entry (CommBank).
   Same frame as a project shot, at the video's 16:9; it sits flush at the
   top of the column, so the intro under it drops its logo-centring offset. */
.wp-hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-width: 0;
  margin: 0;
  background: #faec20;              /* the video's own stage colour while it loads */
}
.wp-shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}
.wp-hero + .wp-block[id$="-intro"] > .wp-copy:first-child { padding-top: 0; }

/* Morph slider (js/morph-slider.js): a stack of the project's images, one
   showing. The shared WebGL canvas sits over the stack only while a change
   is rendering, and hands back to the <img> at the same frame. */
.wp-shot img + img { opacity: 0; }        /* before JS: just the first */
.wp-shot.is-slider img { opacity: 0; transition: opacity 400ms ease; }
.wp-shot.is-slider img.is-active,
.wp-shot.is-slider img.is-next { opacity: 1; }
.wp-shot.is-morphing img { transition: none; }
.wp-shot.is-slider { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.wp-shot.is-dragging { cursor: grabbing; }
.wp-shot.is-slider:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue); }
.wp-shot__morph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.wp-shot__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wp-shot__btn {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.wp-shot__btn--prev { left: 16px; }
.wp-shot__btn--next { right: 16px; }
.wp-shot__btn--next svg { transform: scaleX(-1); }
.wp-shot__btn:active { transform: scale(0.95); }
.wp-shot:focus-within .wp-shot__btn { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wp-shot:hover .wp-shot__btn { opacity: 1; transform: none; }
  .wp-shot:hover .wp-shot__btn:active { transform: scale(0.95); }
}
@media (hover: none) { .wp-shot__btn { display: none; } }
.wp-shot__btn:focus-visible { outline: 1.5px solid var(--blue); outline-offset: 2px; }
.wp-shot__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.wp-shot__dot {
  pointer-events: auto;
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: width 500ms var(--ease-out), background-color 300ms ease;
}
.wp-shot__dot::before { content: ''; position: absolute; inset: -6px -3px; }   /* bigger hit area */
.wp-shot__dot.is-active { width: 18px; background: #fff; }
.wp-shot__dot:focus-visible { outline: 1.5px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wp-shot.is-slider img, .wp-shot__btn, .wp-shot__dot { transition-duration: 200ms; }
}

.wp-copy {
  max-width: 589px;
  /* Body copy eases from 16px (1440px wide and up) down to 14px (768px and
     under), so it steps down a little with the screen. */
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);
  line-height: 1.58;
}
.wp-copy p + p { margin-top: 16px; }
.wp-copy__title {
  margin-bottom: 16px;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 768px) / 672), 18px);   /* 18px → 16px, as the body */
  font-weight: normal;
  line-height: 1.39;
}

.wp-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 34px;
  border-top: 1px solid color-mix(in srgb, var(--wp-ink) 20%, transparent);
  font-size: 12px;
  line-height: normal;
  color: var(--wp-ink);
}
.wp-rail__name,
.wp-rail__site,
.wp-copy__title { color: var(--wp-ink); }
/* An intro with no image above it starts with its first line centred on
   the logo in the rail, not at the top of the panel. Any images follow the
   text (Sweet Creative), a block's gap below it. */
.wp-block[id$="-intro"] > .wp-copy:first-child { padding-top: 17px; }
.wp-copy + .wp-shot { margin: 64px 0 0; }
.wp-shot + .wp-shot { margin-top: 40px; }   /* stacked carousels (Sweet Creative) */
/* Each company's intro reads in full ink; project write-ups stay grey. */
.wp-block[id$="-intro"] .wp-copy { color: var(--wp-ink); }


/* ── NARROW SCREENS ────────────────────────────────────────────────────── */
/* Under ~900px the 2+6 column split gets too tight: the panel goes full
   width, the rail becomes a header and the close moves top-right. */
/* 1200px and under: the case-study window opens one grid line further
   left (the second line, not the third), for more room. */
@media (max-width: 1200px) {
  :root { --wp-left: calc(var(--edge) + var(--col-step) * 2); }
}

@media (max-width: 900px) {
  :root { --wp-left: 0px; }

  .wp { border: 0; box-shadow: none; }
  .wp-entry {
    grid-template-columns: minmax(0, 1fr);   /* never wider than the sheet, whatever a child's intrinsic size (iOS Safari counts the video's 1920px) */
    padding: 0 var(--edge);
  }
  .wp-rail {
    position: static;
    height: auto;
    padding: 46px 0 0;                  /* clear of the handle */
  }
  .wp-rail__nav,
  .wp-rail__site { display: none; }
  .wp-logo { width: 38px; height: 38px; }
  .wp-rail__name { margin-top: 20px; }
  /* A sheet that rises from the bottom (same timing and curve as the
     desktop slide) and stops 32px short of the top, the overlay showing in
     that strip; rounded top corners and a grab handle. */
  .wp {
    top: 32px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transform: translate3d(0, 100%, 0);
  }
  .wp.is-open { transform: translate3d(0, 0, 0); }
  .wp::before {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% - 26px);
    width: 52px;
    height: 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--wp-ink) 10%, transparent);
    z-index: 3;
    pointer-events: none;
  }
  /* Close: the round button from the wider screens, floating at the
     bottom centre (it rides with the sheet). */
  .wp-close {
    display: flex;
    align-items: center;
    justify-content: center;
    top: auto;
    bottom: 24px;
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    z-index: 3;
  }
  .wp-close__icon { display: block; }
  .wp-close__text {                     /* kept for screen readers */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wp-close:hover { text-decoration: none; }
  .wp-main { padding-top: 32px; padding-bottom: 120px; gap: 56px; }   /* room under the last image for the close */
  .wp-block[id$="-intro"] > .wp-copy:first-child { padding-top: 0; }   /* no rail logo to centre on here */
  .wp-block[id$="-intro"] { margin-top: -24px; }   /* 32px under the lower rule, as above the upper one */
  .wp-hero + .wp-block[id$="-intro"] { margin-top: 0; }   /* the hero already sits between the rule and the copy */
  /* The sheet's single column has room for bigger type: everything +2px
     on the narrowest desktop sizes. */
  .wp-copy        { font-size: 16px; }
  .wp-copy__title { font-size: 18px; }
  .wp-rail__name  { font-size: 16px; }
  .wp-rail__tag,
  .wp-foot        { font-size: 14px; }
  /* The role and dates move up under the header, between two rules. */
  .wp-foot {
    order: -1;
    padding: 24px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wp-ink) 20%, transparent);
  }
  .wp-copy { max-width: none; }
}

/* Under 450px the panel's content column tightens: every gap between its
   elements comes down 8px (sections 56→48, image→text 40→32, text→image
   64→56, image→image 40→32). Spacing inside the copy is unchanged. */
@media (max-width: 449px) {
  .wp-main { gap: 48px; }
  .wp-shot { margin-bottom: 32px; }
  .wp-hero { margin-bottom: 0; }
  .wp-copy + .wp-shot { margin-top: 56px; }
  .wp-shot + .wp-shot { margin-top: 32px; }
}

@media (max-width: 600px) {
  .home-meta__role { font-size: 16px; }
  .home-meta__year { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No slide — the panel fades in place. */
  .wp { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .wp.is-open { opacity: 1; transition: opacity 200ms ease, visibility 0s linear 0s; }
  .wp-scrim, body.wp-open .wp-scrim { transition: opacity 200ms ease; }
  .wp-entry.is-entering { animation: wp-fade 200ms ease both; }
}
@keyframes wp-fade { from { opacity: 0; } }


/* A single-section entry has nothing to navigate between. */
.wp-rail__nav:has(> .wp-rail__link:only-child) { display: none; }


/* ── LINK HOVER PREVIEW ────────────────────────────────────────────────── */
/* Positioned + tilted by js/hover-preview.js; the card handles enter/exit. */
.hover-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;                 /* above the highlights panel */
  width: 52px;                 /* a 40px circle plus the card export's baked shadow margin */
  pointer-events: none;
  will-change: transform;
}
.hover-preview__card {
  position: relative;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transform: scale(0.9);
  /* The card's shadow lives here (not baked into the image) so it follows
     the rounded corners. Same function list in both states so it tweens. */
  filter: blur(4px) drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.06));
  transform-origin: 48% 48%;     /* grows from the circle's centre */
  /* Exit: quick. */
  transition: opacity 160ms ease, transform 160ms var(--ease-out), filter 160ms ease;
}
.hover-preview.is-visible .hover-preview__card {
  opacity: 1;
  transform: none;
  filter: blur(0px) drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.06));
  /* Enter: a touch slower, strong ease-out. */
  transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out), filter 240ms var(--ease-out);
}
/* Hover_*.png files are the finished card (80px + 10px of baked shadow on
   the top/left, ~14px right/bottom) and fill the box; clipping to the card
   trims that square shadow
   and rounds the corners. Older plain thumbnails are drawn as the same 80px
   card here. */
.hover-preview__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  /* The card sits at x/y 30–270 of the 313 × 312 export (the baked shadow
     spills further right and down), so trim to exactly that box. */
  /* …and cut to a circle on that card (its centre is 47.9% / 48.1% across
     and down, its half-width 38.3% of the box). */
  clip-path: circle(38.3% at 47.9% 48.1%);
  transition: opacity 150ms ease;
}
.hover-preview__card img.is-plain {
  inset: 5px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--bg);
  clip-path: none;
  border-radius: 50%;
}
.hover-preview__card img.is-fit {
  box-sizing: border-box;
  padding: 3px;                /* 34px artwork in the 40px circle */
  object-fit: contain;
}
.hover-preview__card img.is-active { opacity: 1; }

/* The X/Y readout would sit on the card — hide it while a preview is up. */
body.preview-on .cursor-coords { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .hover-preview__card,
  .hover-preview.is-visible .hover-preview__card { transform: none; filter: none; }
}


/* ── CLOSE BUTTON (js/close-cursor.js) ─────────────────────────────────── */
/* Rides the panel's left edge, tracking the pointer's height, while the
   pointer is over the About side of an open case study. */
/* The X/Y cursor readout steps away while a case study is open. */
body.wp-open .cursor-coords { opacity: 0 !important; }
/* While a case study is open the About links go inert: no hover image, no
   underline change, no switching — the whole side reads as "Close". */
body.wp-open .intro__link { pointer-events: none; }

.close-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
  will-change: transform;
}
.close-cursor__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;            /* 24px icon → 60px circle (no border) */
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
  transform: scale(0.9);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.close-cursor.is-on .close-cursor__pill {
  transform: none;
  opacity: 1;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.close-cursor__icon { display: block; }

@media (prefers-reduced-motion: reduce) {
  .close-cursor__pill,
  .close-cursor.is-on .close-cursor__pill { transform: none; }
}

/* ── REEL GALLERY (js/reel.js) — Sweet Creative's brand work ──────────── */
/* A frame the column's width (js sets its height to what the window leaves
   free) holding a tilted wall of small tiles; the edges fade into the page. */
.reel {
  position: relative;
  height: 480px;                /* js sets the height and width */
  max-width: 100%;
  margin: 64px 0 0;             /* same as the gap below it, to the footer line */
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.reel > img { display: none; }  /* the source list; js deals them into rows */
.reel__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.reel__row {
  display: flex;
  align-items: center;          /* tiles vary a little in height; js sets
                                   the row height (TILE_H) */
  width: max-content;
  will-change: transform;
}
.reel__tile {
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wp-ink) 4%, var(--bg));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.reel__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}