/* STRUCTURA DIGITAL — motion layer (CSS).
   Additive only: no layout, spacing, colour or typography changes.
   It (a) holds the hero back for the first paint, (b) draws the cursor/finger grid spotlight,
   and (c) upgrades the hover of case cards. */

/* First-paint gate. A tiny <head> snippet adds .mo (plus a 2.5s safety timer that removes it again);
   motion.js removes .mo as soon as the hero parts are in their start state. */
.mo .hero { visibility: hidden; }

/* Split heading used by the intro (motion.js restores the original markup when the intro ends). */
.mo-word { display: inline-block; white-space: nowrap; }

/* ---------- Grid spotlight ----------
   The copper copy of the 38px grid is revealed around the cursor (desktop) or the finger (touch).
   .mo-spot is a document-sized clip layer that scrolls together with the page (it is NOT fixed): on touch
   devices the compositor scrolls the page without waiting for JS, so anything repositioned from a scroll
   handler lags behind the real grid. The small .mo-lens inside it is moved in page coordinates, and
   motion.js offsets its background so the copper lines sit exactly on the page grid lines. */
.mo-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;     /* fade-out only */
}
.mo-spot.on { opacity: 1; transition: none; }   /* appears instantly: a quick swipe must not outrun the fade-in */
.mo-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  will-change: transform;
  background-image:
    linear-gradient(rgba(224, 153, 92, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 153, 92, .24) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(220px circle at 50% 50%, #000 0, transparent 70%);
  mask-image: radial-gradient(220px circle at 50% 50%, #000 0, transparent 70%);
}
/* keep content above the spotlight without touching the real layout */
.mo-has-spot main,
.mo-has-spot .site-footer { position: relative; z-index: 1; }

/* ---------- Case cards ----------
   Corner marks grow out of the corner points along the frame lines (instead of the old colour fade),
   and the case title lights up when the whole frame is hovered. */
@media (prefers-reduced-motion: no-preference) {
  .card:has(.card-link)::before,
  .card:has(.card-link)::after {
    width: 0;
    height: 0;
    transition: width 360ms cubic-bezier(.2, .8, .2, 1),
                height 360ms cubic-bezier(.2, .8, .2, 1),
                border-color 90ms linear;
  }
  .card:has(.card-link):hover::before,
  .card:has(.card-link):hover::after,
  .card:has(.card-link):focus-within::before,
  .card:has(.card-link):focus-within::after {
    width: 11px;
    height: 11px;
  }
}
/* Corner marks are decorative: without this, the bottom-right one (it comes after the link in the DOM)
   grows into an 11x11 dead zone on hover that swallows the click. */
.card:has(.card-link)::before,
.card:has(.card-link)::after { pointer-events: none; }
.card:has(.card-link):hover .card-title,
.card:has(.card-link):focus-within .card-title { color: var(--color-accent); }

/* The whole frame is the link: an invisible layer of the link stretches over the card
   (the card is already position: relative). This is plain CSS, it can live in styles.css instead.
   Keyboard focus outlines the whole frame, not only the text block. */
.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}