/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOWER CURSOR – used on every page. Same setup as the old dot (js/cursor.js):
   the normal cursor is hidden and a flower image follows the mouse.
   (Real image cursors flickered in July and again now – this is the setup that works.)
   Linked in each page's <head>. JS: js/flower-cursor.js adds the cursor and moves it.
   Images: Assets/cursors/flower-cursor.png, -dark.png
   Over a case study tile, the flower morphs into a "view case study" label.
   Backup of the plain flower version: css/cursor-v1.css + js/flower-cursor-v1.js
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --cursor-size: 2rem;
  --cursor-layer: 99999;
  --cursor-morph-time: 600ms;                      /* shape change */
  --cursor-ease: cubic-bezier(0.65, 0, 0.35, 1);   /* slow start, slow finish – glides between shapes */
  --cursor-text-time: 200ms;                       /* how fast the words fade in / out */
  --cursor-text-delay: 350ms;                      /* words wait until the pill has mostly formed */

  --cursor-label-bg: #0A0A0A;
  --cursor-label-text: #FFFFFF;
  --cursor-label-size: 0.875rem;
  --cursor-label-pad-block: 0.5rem;
  --cursor-label-pad-inline: 0.875rem;
}

/* hide the normal cursor everywhere – !important so page styles (pointer, grab...) can't bring it back */
html,
html *,
html *::before,
html *::after {
  cursor: none !important;
}

/* the wrapper sits centred on the mouse */
.flower-cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--cursor-layer);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  will-change: translate;
  translate: calc(var(--mouse-x) - 50%) calc(var(--mouse-y) - 50%);
}

.flower-cursor.is-on {
  opacity: 1;
}

/* flower and label share the same centre point: one shrinks into it while the other grows out of it.
   Scale only, no fading, so it reads as one shape turning into the other. */
.flower-cursor img,
.cursor-label {
  grid-area: 1 / 1;
  transition: scale var(--cursor-morph-time) var(--cursor-ease);
}

.flower-cursor img {
  display: block;
  inline-size: var(--cursor-size);
  block-size: auto;
}

.cursor-label {
  padding-block: var(--cursor-label-pad-block);
  padding-inline: var(--cursor-label-pad-inline);
  background: var(--cursor-label-bg);
  color: var(--cursor-label-text);
  border-radius: 999rem;
  font-family: "Neue Montreal", Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--cursor-label-size);
  line-height: 1;
  white-space: nowrap;
  scale: 0;
}

/* over a case study: flower shrinks, pill grows */
.flower-cursor.is-case-study img {
  scale: 0;
}

.flower-cursor.is-case-study .cursor-label {
  scale: 1;
}

/* the words: hidden while the shape changes, then fade in once the pill is there.
   On the way out they vanish first, before the pill shrinks. */
.cursor-label-text {
  display: block;
  opacity: 0;
  transition: opacity var(--cursor-text-time) ease;
}

.flower-cursor.is-case-study .cursor-label-text {
  opacity: 1;
  transition-delay: var(--cursor-text-delay);
}

@media (prefers-reduced-motion: reduce) {
  .flower-cursor img,
  .cursor-label,
  .cursor-label-text {
    transition: none;
  }
}