/* News, variant A: "Fresh" (assets/news/fresh.js). Tall cards stand upright on a shelf (after
   captioneer.com's "Freshly baked presets"): the middle one faces you, its neighbours turn towards it. */

@layer sections {
  .nf-head { display: grid; justify-items: center; gap: var(--space-4); margin-bottom: var(--space-7); text-align: center; }
  .nf-status { display: inline-flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: var(--type-small-size); line-height: 1.3; }
  /* The latest shot is marked: a moss dot with its ring (lime is never a dot on light) */
  .nf-ping { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong); }
  .nf-ping::before, .nf-ping::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
  .nf-ping::after { opacity: 0.35; }
  .nf-ping::before { opacity: 0; }

  .nf-show { position: relative; }
  .nf-stage {
    --nf-w: clamp(14rem, 19vw, 18rem);
    --nf-h: calc(var(--nf-w) * 16 / 9);
    position: relative; height: calc(var(--nf-h) + 64px);
    touch-action: pan-y; user-select: none; -webkit-user-select: none;
  }

  /* The shelf: a plate tipped back in perspective, with a solid front edge and a lighter inner rim */
  .nf-shelf {
    position: absolute; left: max(2vw, 12px); right: max(2vw, 12px); bottom: 8px; height: 172px;
    border-radius: 36px; background: var(--color-stone);
    box-shadow: 0 14px 0 color-mix(in srgb, var(--color-ink) 16%, var(--color-stone));
    transform: perspective(1200px) rotateX(52deg); transform-origin: 50% 100%;
  }
  .nf-shelf span { position: absolute; inset: 18px 26px; border-radius: 24px; background: color-mix(in srgb, var(--color-white) 72%, var(--color-stone)); }

  /* The cards stand on the shelf; the far ones fade into the page at the sides */
  .nf-track {
    position: absolute; left: 0; right: 0; top: 0; height: var(--nf-h); perspective: 1100px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  }
  .nf-slide {
    position: absolute; left: 50%; top: 0; width: var(--nf-w); height: var(--nf-h); margin-left: calc(var(--nf-w) / -2);
    transform-origin: 50% 100%; /* scaled side cards still stand on the shelf */
    transition: transform 640ms var(--ease-in-out), opacity 640ms var(--ease-in-out);
    backface-visibility: hidden;
  }
  .nf-slide:not(.is-active) { cursor: pointer; }
  .nf-card {
    position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
    border-radius: 28px; background: var(--color-night); color: var(--color-snow);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--color-ink) 30%, transparent), 0 28px 44px -26px rgba(19, 32, 26, 0.5);
  }
  .nf-media { position: absolute; inset: 0; z-index: -2; }
  .nf-media picture { position: absolute; inset: 0; }
  .nf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
  .nf-tags { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  /* Words on the photo always sit on a night shade (DESIGNDIRECTION 3.4) */
  .nf-cap {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: var(--space-2);
    padding: 88px 20px 22px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-night) 82%, transparent) 46%, color-mix(in srgb, var(--color-night) 92%, transparent));
  }
  .nf-meta {
    font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--color-snow-2);
  }
  .nf-title { font: 500 clamp(1.75rem, 1.45rem + 0.8vw, 2.375rem)/0.96 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; color: var(--color-snow); }
  .nf-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .nf-title .u-line::after { bottom: 0; }
  @media (hover: hover) and (pointer: fine) {
    .nf-slide.is-active .nf-card:hover .u-line::after { transform: scaleX(1); }
    .nf-slide.is-active .nf-card:hover .nf-media img { transform: scale(1.04); }
  }
  .nf-title a:focus-visible .u-line::after { transform: scaleX(1); }
  @supports selector(:has(*)) {
    .nf-title a:focus-visible { outline: none; }
    .nf-card:has(a:focus-visible) { outline: var(--line-focus) solid var(--focus); outline-offset: 4px; }
  }

  /* Round arrows in the gaps beside the middle card, not on it: each is centred between the middle card's edge
     and the inner edge of its neighbour. The neighbour's centre is --nf-pitch card widths away (the same
     number as pitch() in fresh.js) and its turned, shrunk face reaches about 0.364 widths in from there, so
     the gap's middle is (pitch + 0.136) / 2 widths from the centre. The gap is ~0.4 of a card wide on a
     desktop but only ~0.1 on a phone, so the arrows are smaller there.
     Beige button, green arrow, with the same solid edge as the shelf. The dark version (ink button, lime
     arrow, the primary button's colours): background: var(--action-bg); color: var(--action-fg); hover: var(--action-bg-hover). */
  .nf-stage { --nf-pitch: 1.3; --nf-arrow: 44px; }
  .nf-arrow {
    position: absolute; z-index: 20; top: calc(var(--nf-h) / 2 - var(--nf-arrow) / 2);
    display: grid; place-items: center; width: var(--nf-arrow); height: var(--nf-arrow); padding: 0; border: 0; border-radius: 50%;
    background: var(--color-stone); color: var(--color-fern); cursor: pointer;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-ink) 9%, transparent), 0 3px 0 color-mix(in srgb, var(--color-ink) 16%, var(--color-stone));
    transition: background-color var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover), transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .nf-arrow .icon { width: 20px; height: 20px; }
  .nf-prev { left: calc(50% - (var(--nf-pitch) + 0.136) / 2 * var(--nf-w) - var(--nf-arrow) / 2); }
  .nf-next { left: calc(50% + (var(--nf-pitch) + 0.136) / 2 * var(--nf-w) - var(--nf-arrow) / 2); }
  @media (hover: hover) and (pointer: fine) { .nf-arrow:hover { background: var(--color-white); color: var(--color-moss); } }
  .nf-arrow:active { transform: scale(var(--motion-press-scale)); }

  .nf-under { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); }
  .nf-play { width: 44px; height: 44px; }
  .nf-play .icon { width: 20px; height: 20px; }
  .nf-play .i-play { display: none; }
  .nf-play[data-state="paused"] .i-play { display: block; }
  .nf-play[data-state="paused"] .i-pause { display: none; }

  @media (max-width: 767.98px) {
    .nf-stage { --nf-w: min(62vw, 15rem); --nf-pitch: 0.98; --nf-arrow: 36px; height: calc(var(--nf-h) + 52px); }
    .nf-shelf { height: 132px; border-radius: 28px; }
    .nf-shelf span { inset: 14px 18px; border-radius: 18px; }
    .nf-track { -webkit-mask-image: none; mask-image: none; }
    .nf-cap { padding: 72px 16px 18px; }
  }

  /* Entrance: the head, then the shelf of cards rise in (500 ms); then each "New" chip lands */
  .news--fresh .nf-head, .news--fresh .nf-stage {
    transition: opacity var(--duration-reveal) var(--ease-out) var(--d, 0ms), transform var(--duration-reveal) var(--ease-out) var(--d, 0ms);
  }
  .news--fresh .is-armed .nf-head:not(.is-in), .news--fresh .is-armed .nf-stage:not(.is-in) { opacity: 0; transform: translateY(var(--motion-rise)); }
  @media (prefers-reduced-motion: no-preference) {
    .news--fresh .is-armed .nf-stage.is-in .nf-slide:not([aria-hidden="true"]) .news-new::after,
    .news--fresh .is-armed .nf-stage.is-in .nf-slide.is-near .news-new::after { animation: news-impact 720ms var(--ease-out) 520ms forwards; }
    .news--fresh .is-armed .nf-head.is-in .nf-ping::before { animation: news-impact 720ms var(--ease-out) 420ms forwards; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .nf-slide { transition: opacity var(--duration-reduced) var(--ease-out); }
    .nf-media img { transition: none; }
    .nf-slide.is-active .nf-card:hover .nf-media img { transform: none; }
    .nf-play { display: none; }
  }
}