/* Micro-interactions (round 3): a lit word glows warm, an answer clears out of mist, the plus turns into a monogram bar,
   cards tilt toward the pointer, nav underlines grow from the pointer's side, and «Se dagen igjen» gets a sunrise.
   Linked after every other stylesheet. Everything here is off under reduced motion and the motion pause (html.is-still);
   what animates is transform and opacity, except the word glow (colour and text-shadow on a few words) and the answer's blur (brief). */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Manifesto: a word that lights flares towards Low Sun and settles into the ink; at rest nothing changes */
  html.motion:not(.is-still) .manifest-text span[aria-hidden].lit { animation: mc-glow .9s ease-out both; }
  @keyframes mc-glow {
    0% { color: color-mix(in srgb, var(--lowsun) 62%, var(--ink)); text-shadow: 0 0 .45em rgb(233 184 143 / .9); }
    30% { color: color-mix(in srgb, var(--lowsun) 40%, var(--ink)); text-shadow: 0 0 .35em rgb(233 184 143 / .55); }
  }

  /* 2. FAQ: the answer clears out of mist each time it opens */
  html.motion:not(.is-still) .faq details[open] > p { animation: mc-mist .5s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes mc-mist { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }

  html:not(.is-still) .faq summary::after, html:not(.is-still) .faq summary::before { transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }

  /* 4. Nav: the underline grows from the side the pointer came in, and leaves toward the side it went out (micro.js sets --mc-from) */
  html:not(.is-still) .nav ul a:not(.pill)::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 10px; height: 1px; background: currentColor; opacity: .7; pointer-events: none;
    transform: scaleX(0); transform-origin: var(--mc-from, 0%) 50%; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  html:not(.is-still) .nav ul a:not(.pill) { position: relative; }
  @media (hover: hover) and (pointer: fine) { html:not(.is-still) .nav ul a:not(.pill):hover::after { transform: scaleX(1); } }

  /* 4. «Se dagen igjen»: a Low Sun glow rises from the button's bottom edge, with the drawn sun */
  html:not(.is-still) .newday { position: relative; isolation: isolate; overflow: hidden; }
  html:not(.is-still) .newday::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: 0; height: 200%; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 50%, rgb(233 184 143 / .42), rgb(233 184 143 / .14) 55%, rgb(233 184 143 / 0) 75%);
    opacity: 0; transform: translateY(42%); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; }
  html:not(.is-still) .newday:is(:hover, :focus-visible)::before { opacity: 1; transform: translateY(0); }
}

/* 2. The plus: one bar lies flat, one stands; open, the standing bar folds away and the flat one becomes a slanted
   monogram bar (3:4, the logo's lean). The state shows without motion too; only its transition is fenced above. */
.faq summary { position: relative; }
.faq summary::after { height: 4px; background: currentColor; transform: scaleY(.375); transition: none; }
.faq summary::before { content: ""; position: absolute; right: 6.25px; top: 50%; width: 1.5px; height: 14px; margin-top: -7px; background: currentColor; pointer-events: none; }
.faq details[open] summary::after { transform: skewX(-36.87deg); }
.faq details[open] summary::before { transform: scaleY(0); opacity: 0; }

/* 3. Project cards (fine pointer): micro.js writes --mc-x and --mc-y (-1 .. 1) on the hovered card only.
   The card turns to face the pointer, a soft light sits on that side, and the painting slides a little the other way. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html.motion:not(.is-still):not(.mat-paper) .proj[data-reveal] { position: relative; overflow: clip;
    transition: clip-path .9s var(--ease-io), translate .6s var(--ease-out), box-shadow .6s var(--ease-out), transform .8s var(--ease-out); }
  html.motion:not(.is-still):not(.mat-paper) .proj[data-reveal].mc-tilt { transition: clip-path .9s var(--ease-io), translate .6s var(--ease-out), box-shadow .6s var(--ease-out), transform .35s var(--ease-out);
    transform: perspective(900px) rotateX(calc(var(--mc-y, 0) * -4deg)) rotateY(calc(var(--mc-x, 0) * 4deg)); }
  /* The sheen sits between the glass and the text (negative layer in the card's own stacking context) */
  html.motion:not(.is-still):not(.mat-paper) .proj[data-reveal]::after { content: ""; position: absolute; z-index: -1; inset: -50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 255 255 / .5), rgb(255 255 255 / .16) 45%, rgb(255 255 255 / 0));
    opacity: 0; transform: translate(calc(var(--mc-x, 0) * 25%), calc(var(--mc-y, 0) * 25%)); transition: opacity .6s ease, transform .35s var(--ease-out); }
  html.motion:not(.is-still):not(.mat-paper) .proj[data-reveal].mc-tilt::after { opacity: 1; }
  /* The painting is an inner element, so it moves under paper too (paper.css owns the sheet: no tilt, no sheen there) */
  html.motion:not(.is-still) .proj-window picture { transform: translate3d(calc(var(--mc-x, 0) * -5px), calc(var(--mc-y, 0) * -4px), 0); transition: transform .5s var(--ease-out); }
}

/* 3. Phones (cards stacked): the painting in each card drifts a few px against the page's scroll (micro.js writes --mc-drift, -1 .. 1) */
@media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  html.motion:not(.is-still) .projects:not(.is-pinned) .proj-window img { transform: translate3d(0, calc(var(--mc-drift, 0) * -6px), 0); }
}