/* Showroom lighting for the ten content cards. Builder keeps its editing surface still. */
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) {
  --card-lift: 0px;
  --card-image-scale: 1;
  --card-image-light: 1;
  --card-light-opacity: 0;
  --card-frame-opacity: 0;
  --card-frame-shadow: inset 0 1px 0 rgb(255 244 211 / 32%), inset 0 -1px 0 rgb(221 156 65 / 20%);
  isolation: isolate;
  transform: translateY(var(--card-lift));
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), border-color 160ms ease-out, box-shadow 220ms ease-out;
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > .slot-image,
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > picture[data-mq-picture] > .slot-image {
  transform: scale(var(--card-image-scale));
  filter: brightness(var(--card-image-light));
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1), filter 220ms ease-out;
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::before,
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 180ms ease-out, box-shadow 120ms ease-out;
}

/* Reflections sit below the existing text scrims; the rim never captures clicks. */
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 360px 230px at var(--card-light-x, 65%) var(--card-light-y, 25%), rgb(255 218 151 / 18%), transparent 72%),
    linear-gradient(115deg, rgb(255 244 211 / 7%), transparent 42%, rgb(255 157 58 / 3%) 75%, transparent);
  opacity: var(--card-light-opacity);
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::after {
  z-index: 4;
  box-shadow: var(--card-frame-shadow);
  opacity: var(--card-frame-opacity);
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) .card-link,
body:not(.builder-mode) .video-card .play-button {
  transition: color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}

/* Mouse-only hover avoids a latched hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):hover {
    --card-lift: -3px;
    --card-image-scale: 1.035;
    --card-image-light: 1.1;
    --card-light-opacity: 1;
    --card-frame-opacity: 1;
    border-color: rgb(240 195 112 / 72%);
    box-shadow: 0 10px 26px rgb(0 0 0 / 38%), 0 0 18px rgb(225 151 48 / 9%);
  }

  body:not(.builder-mode) :is(.story-card, .lower-card):hover .card-link {
    color: #ffdc9c;
  }

  body:not(.builder-mode) .video-card:hover .play-button {
    border-color: #ffdc9c;
    background-color: rgb(35 26 13 / 82%);
    color: #ffedc5;
    box-shadow: 0 0 16px rgb(242 183 82 / 20%);
  }
}

/* Existing links retain native Tab/Enter behavior and a full-card focus ring. */
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):has(:focus-visible) {
  --card-image-light: 1.1;
  --card-light-opacity: 1;
  --card-frame-opacity: 1;
  outline: 2px solid #fff0b3;
  outline-offset: 3px;
  border-color: #e4b967;
  box-shadow: 0 0 0 3px #080a0b;
}

body:not(.builder-mode) :is(.story-card, .lower-card) .card-link:focus-visible {
  outline: none;
  color: #ffdc9c;
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):is(:active, .is-card-pressed) {
  --card-lift: 1px;
  --card-image-scale: 1.012;
  --card-image-light: .98;
  --card-light-opacity: .35;
  --card-frame-opacity: 1;
  --card-frame-shadow: inset 0 3px 14px rgb(0 0 0 / 65%), inset 0 -1px 0 rgb(255 220 156 / 30%);
  border-color: #c99a54;
  box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
  transition-duration: 100ms;
}

body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):is(:active, .is-card-pressed) > .slot-image,
body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):is(:active, .is-card-pressed) > picture[data-mq-picture] > .slot-image {
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card),
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > .slot-image,
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > picture[data-mq-picture] > .slot-image {
    transform: none;
    transition: none;
  }

  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::before,
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::after,
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) :is(.card-link, .play-button) {
    transition: none;
  }
}

@media (forced-colors: active) {
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) {
    transform: none;
    border-color: CanvasText;
    box-shadow: none;
    transition: none;
  }

  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > .slot-image,
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card) > picture[data-mq-picture] > .slot-image {
    transform: none;
    filter: none;
    transition: none;
  }

  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::before,
  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card)::after {
    display: none;
  }

  body:not(.builder-mode) :is(.story-card, .video-card, .lower-card):is(:hover, :active, .is-card-pressed, :has(:focus-visible)) {
    border-color: Highlight;
    outline-color: Highlight;
    box-shadow: none;
  }

  body:not(.builder-mode) :is(.story-card, .lower-card) .card-link:focus-visible {
    color: LinkText;
  }
}

/* Owner navigation: one native link covers each card, without preview strips.
   Images, titles and Builder objects keep their established DOM contracts. */
body:not(.builder-mode) :is(.story-card,.video-card,.lower-card) .card-navigation {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  border-radius: inherit;
}
.card-navigation::after { content: none; }
body.builder-mode .card-navigation { pointer-events: none; }
/* Future secondary controls must remain separately operable above navigation. */
body:not(.builder-mode) :is(.story-card,.video-card,.lower-card) :is(button,input,select,textarea,[data-card-action]) { position: relative; z-index: 5; }