/* V17.4: explicit large-headline opt-ins; existing owners alone start/reset.
   Inline phrases retain their whitespace breaks through build-time word spans.
   One transform/opacity contract, no listeners, queues, clones or layout motion. */
:root {
  --accent-drop-duration: 840ms;
  --accent-drop-start-translate: -90px;
  --accent-drop-start-scale: 1.24;
  --accent-drop-easing: cubic-bezier(.16, 1, .3, 1);
  --accent-drop-start-opacity: 0;
  --accent-drop-end-opacity: 1;
  --accent-drop-reduced-duration: 120ms;
  --accent-drop-name: accentDropReveal;
}

[data-accent-drop] {
  --accent-drop-play: none;
  --accent-drop-visible: 0;
  --accent-drop-delay: 0ms;
}
[data-accent-part] { display: inline-block; }

/* Include host selectors whose original animations must yield on the opted-in
   word only. End values live in normal CSS; backwards-fill releases transforms. */
.js [data-accent-drop]:not([data-accent-drop="inline"]),
.js [data-accent-part],
.js .hero.is-entering h1 span[data-accent-drop],
.js [data-pause-reveal].is-visible em[data-accent-drop],
.js .treatment-copy.is-entering .treatment-headline__line[data-accent-drop],
.js .finder .finder__headline [data-accent-drop] {
  opacity: var(--accent-drop-visible);
  transform: none;
  transform-origin: left center;
  transition: none;
  animation: var(--accent-drop-play) var(--accent-drop-duration) var(--accent-drop-easing) var(--accent-drop-delay) backwards;
}

/* Owner cues, never word-specific delays. */
.hero [data-accent-drop] { --accent-drop-delay: var(--hero-second-delay); }
[data-pause-reveal] [data-accent-drop] { --accent-drop-delay: .48s; }
.treatment-headline__line:first-child[data-accent-drop],
.treatment-headline__line:first-child [data-accent-drop] { --accent-drop-delay: var(--treatment-first-delay); }
.treatment-headline__line:nth-child(2)[data-accent-drop],
.treatment-headline__line:nth-child(2) [data-accent-drop] { --accent-drop-delay: var(--treatment-second-delay); }
[data-natalie-copy] [data-accent-drop] { --accent-drop-delay: .2s; }
.finder__headline [data-accent-drop] { --accent-drop-delay: calc(var(--finder-resultEnter) * (.1 + var(--line) * .12)); }

/* ACTIVE_OWNER_RULES: an existing state is the sole authority. Removing the
   matching state immediately cancels the animation; repeated ACTIVE is stable. */
.js .hero.is-entering h1 span[data-accent-drop],
.js [data-pause-reveal].is-visible em[data-accent-drop],
.js .treatment-stage[data-depth-state="overview"] .treatment-copy.is-active.is-entering [data-accent-drop],
.js [data-philosophy][data-stage-active="true"] [data-philosophy-statement].is-active [data-accent-drop],
.js [data-natalie-copy].is-active.is-entering [data-accent-drop],
.js .depth-view[data-depth-view="detail"] [data-content-motion="enter"] [data-accent-drop],
.js .conversion [data-reveal].is-visible [data-accent-drop],
.js .finder[data-finder-phase="RESULT_ENTER"] .finder__scene[data-kind="result"] .finder__headline [data-accent-drop],
.js .finder[data-finder-phase="RESULT_ACTIVE"] .finder__scene[data-kind="result"] .finder__headline [data-accent-drop] {
  --accent-drop-play: var(--accent-drop-name);
  --accent-drop-visible: 1;
}

/* The Info heading owns its accent. Q&A return keeps completed words visible
   without restarting them; preparation behind the shell has no active cue. */
.depth-view[data-depth-view="detail"] .depth-intro [data-accent-drop] {
  --accent-drop-duration: 840ms;
  --accent-drop-delay: 380ms;
}
.js .depth-view[data-depth-view="detail"] [data-content-motion="shown"] [data-accent-drop] {
  --accent-drop-play: none;
  --accent-drop-visible: 1;
}

@keyframes accentDropReveal {
  from {
    opacity: var(--accent-drop-start-opacity);
    transform: translateY(var(--accent-drop-start-translate)) scale(var(--accent-drop-start-scale));
  }
  to { opacity: var(--accent-drop-end-opacity); transform: none; }
}

@keyframes accentDropFade {
  from { opacity: var(--accent-drop-start-opacity); }
  to { opacity: var(--accent-drop-end-opacity); }
}

@media (max-width: 799px) {
  :root {
    --accent-drop-duration: 800ms;
    --accent-drop-start-translate: clamp(-94px, -10vh, -70px);
    --accent-drop-start-translate: clamp(-94px, -10svh, -70px);
    --accent-drop-start-scale: 1.20;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --accent-drop-name: accentDropFade; }
  .js [data-accent-drop]:not([data-accent-drop="inline"]),
  .js [data-accent-part] {
    transform: none !important;
    transition: none !important;
    animation-name: var(--accent-drop-play) !important;
    animation-duration: var(--accent-drop-reduced-duration) !important;
    animation-delay: 0ms !important;
    animation-timing-function: linear !important;
    animation-fill-mode: backwards !important;
  }
  /* The existing reduced-motion path shows these stories as static content;
     it deliberately has no discrete active-state owner. Keep all words visible. */
  .js [data-philosophy] [data-accent-drop],
  .js [data-natalie-copy] [data-accent-drop] {
    --accent-drop-play: var(--accent-drop-name);
    --accent-drop-visible: 1;
  }
}