/*
 * STORY editorial motion system.
 * Values reproduce measured EE72 motion without inventing card zoom, lift,
 * border-radius, or decorative hover effects that are absent from evidence.
 */

.story-home-card h2,
.story-home-full h2,
.story-home-carousel h2 {
  transition: opacity var(--motion-duration-normal) var(--motion-ease-out);
}

.story-ee72-shell .story-nav-list a,
.story-ee72-shell .story-footer-list a {
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-in-out);
}

@media (hover: hover) {
  .story-ee72-shell .story-nav-list a:hover,
  .story-ee72-shell .story-footer-list a:hover {
    box-shadow: inset 0 var(--motion-nav-rule-width) 0 currentColor;
  }
}

.story-ee72-shell .story-nav-list a:focus-visible,
.story-ee72-shell .story-footer-list a:focus-visible {
  box-shadow: inset 0 var(--motion-nav-rule-width) 0 currentColor;
}

/* Measured 40→192px shell and 0→166px input expansion. */
.story-ee72-shell .story-search {
  width: var(--motion-search-closed-width);
  transition: width var(--motion-duration-search-shell) var(--motion-ease-standard);
}
.story-ee72-shell .story-search input[type="search"] {
  width: 0;
  min-width: 0;
  opacity: var(--motion-opacity-hidden);
  transition:
    width var(--motion-duration-fast) var(--motion-ease-basic),
    opacity var(--motion-duration-fast) var(--motion-ease-basic);
}
.story-ee72-shell .story-search.is-open { width: var(--motion-search-open-width); }
.story-ee72-shell .story-search.is-open input[type="search"] {
  width: var(--motion-search-input-width);
  opacity: var(--motion-opacity-visible);
}

/* Delivered mobile-dialog state from the frozen navigation specification. */
.story-ee72-shell .story-mobile-menu {
  opacity: var(--motion-opacity-hidden);
  transform: translate3d(-100%, 0, 0);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-in-out),
    transform var(--motion-duration-fast) var(--motion-ease-in-out);
}
.story-ee72-shell .story-mobile-menu.is-open {
  opacity: var(--motion-opacity-visible);
  transform: translate3d(0, 0, 0);
}

/*
 * Archive-family spatial reframing. Enhancement is attached only after the
 * runtime verifies that media covers the card; parent layouts that do not
 * match the measured structure are deliberately left untouched.
 */
.story-interaction-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.story-interaction-card [data-story-interaction-media],
.story-interaction-card [data-story-interaction-title] {
  opacity: var(--motion-opacity-hidden);
  transition:
    opacity var(--motion-duration-normal) var(--motion-ease-out),
    color var(--motion-duration-normal) var(--motion-ease-out);
}
.story-interaction-card.is-story-interaction-loaded [data-story-interaction-media],
.story-interaction-card.is-story-interaction-loaded [data-story-interaction-title] {
  opacity: var(--motion-opacity-visible);
}
.story-interaction-card [data-story-interaction-title] {
  position: relative;
  z-index: 3;
  color: var(--ref-paper);
}
.story-archive-mask {
  position: absolute;
  z-index: 2;
  display: block;
  background: var(--ref-paper);
  pointer-events: none;
  transition: transform var(--motion-duration-normal) var(--motion-ease-out);
}
.story-archive-mask--top {
  inset: 0 0 auto;
  height: var(--motion-archive-inset-top);
  transform: scaleY(0);
  transform-origin: top;
}
.story-archive-mask--bottom {
  inset: auto 0 0;
  height: var(--motion-archive-inset-bottom);
  transform: scaleY(0);
  transform-origin: bottom;
}
.story-archive-mask--left,
.story-archive-mask--right {
  top: var(--motion-archive-inset-top);
  bottom: var(--motion-archive-inset-bottom);
  width: var(--motion-archive-inset-left);
  transform: scaleX(0);
}
.story-archive-mask--left { left: 0; transform-origin: left; }
.story-archive-mask--right { right: 0; transform-origin: right; }
@media (hover: hover) {
  .story-interaction-card:hover .story-archive-mask--top,
  .story-interaction-card:hover .story-archive-mask--bottom { transform: scaleY(1); }
  .story-interaction-card:hover .story-archive-mask--left,
  .story-interaction-card:hover .story-archive-mask--right { transform: scaleX(1); }
  .story-interaction-card:hover [data-story-interaction-title] { color: var(--ref-ink); }
}
.story-interaction-card:focus-within .story-archive-mask--top,
.story-interaction-card:focus-within .story-archive-mask--bottom { transform: scaleY(1); }
.story-interaction-card:focus-within .story-archive-mask--left,
.story-interaction-card:focus-within .story-archive-mask--right { transform: scaleX(1); }
.story-interaction-card:focus-within [data-story-interaction-title] { color: var(--ref-ink); }

/* Category mode changes are intentionally discrete: no invented crossfade. */
[data-story-view-panel][hidden] { display: none !important; }

/* Search-result submit inversion: color only, 300ms standard curve. */
.story-ee72-shell.search .search-submit,
.story-ee72-shell.search button[type="submit"] {
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .story-home-card h2,
  .story-home-full h2,
  .story-home-carousel h2,
  .story-ee72-shell .story-nav-list a,
  .story-ee72-shell .story-footer-list a {
    transition: none;
  }
  .story-ee72-shell .story-search,
  .story-ee72-shell .story-search input[type="search"],
  .story-interaction-card [data-story-interaction-media],
  .story-interaction-card [data-story-interaction-title],
  .story-archive-mask {
    transition: none;
  }
  .story-ee72-shell .story-mobile-menu {
    transform: none;
    transition: opacity var(--motion-duration-reduced) var(--motion-ease-in-out);
  }
}