/* One motion system. Text/layout never translate; ambient layers never take input. */
.quick-link, #navigation a, .mobile-nav nav a, .faq-list summary, input, select {
  transition: border-color var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease),
    color var(--motion-hover) var(--motion-ease);
}
.quick-link:active, #navigation a:active, .mobile-nav summary:active {
  transition-duration: var(--motion-press);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.quick-link:focus-visible, #navigation a:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 5px rgb(255 42 61 / 12%);
}
@media (hover:hover) and (pointer:fine) {
  .quick-link:hover { box-shadow: 0 8px 24px -18px var(--accent); }
  .mobile-nav nav a:hover { color: var(--text); background-color: var(--surface); }
  .faq-list summary:hover { color: var(--text); }
  .faq-list summary:hover .faq-toggle { color: var(--accent); }
}
.faq-list summary { background: transparent; border-radius: var(--radius-small); }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-list details[open] { border-bottom-color: var(--accent-border); }
.faq-list details[open] summary .faq-toggle { color: var(--accent); }

/* The base live-site gradient and shadow remain underneath these decorative layers.
   Negative z-index is contained by isolation: neither layer can wash over text. */
.ambient-surface { position: relative; isolation: isolate; overflow: hidden; }
.ambient-surface::before, .ambient-surface::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
}
.ambient-surface::before {
  background: radial-gradient(ellipse at 75% 35%, rgb(255 42 61 / 32%), transparent 62%);
  opacity: .35; transform: scale(1.2);
}
.ambient-surface::after {
  background: linear-gradient(115deg, transparent 38%, rgb(255 114 128 / 18%) 48%, transparent 58%);
  background-size: 260% 100%; background-position: 100% 0; opacity: 0;
}
@keyframes dp-ambient-gradient {
  0%,100% { transform: translate(5%, -3%) scale(1.2); opacity: .25; }
  50% { transform: translate(-12%, 9%) scale(1.3); opacity: .85; }
}
@keyframes dp-ambient-glow {
  0%,100% { box-shadow: var(--hero-shadow); }
  50% { box-shadow: 0 28px 85px -35px rgb(174 17 38 / 75%); }
}
@keyframes dp-ambient-sheen {
  0%,68% { background-position: 100% 0; opacity: 0; }
  73% { opacity: .65; }
  88% { background-position: 0% 0; opacity: .65; }
  94%,100% { background-position: 0% 0; opacity: 0; }
}
@keyframes dp-fade-in { from { opacity: .94; } to { opacity: 1; } }
@media (prefers-reduced-motion:no-preference) {
  .ambient-surface { animation: dp-ambient-glow var(--motion-ambient) ease-in-out infinite; }
  .ambient-surface::before { animation: dp-ambient-gradient var(--motion-ambient) ease-in-out infinite; }
  .ambient-surface::after { animation: dp-ambient-sheen var(--motion-ambient) ease-in-out infinite; }
  .subscription-card { animation-delay: -3s; }
  .subscription-card::before, .subscription-card::after { animation-delay: -3s; }
  dialog[open] { animation: dp-fade-in var(--motion-reveal) var(--motion-ease); }
  /* Native disclosure keeps keyboard semantics and works without JavaScript.
     Animate one height only; do not also fade/move the answer text. */
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .faq-list details::details-content {
      interpolate-size: allow-keywords;
      block-size: 0; overflow: clip;
      transition: block-size var(--motion-reveal) var(--motion-ease),
        content-visibility var(--motion-reveal) allow-discrete;
    }
    .faq-list details[open]::details-content { block-size: auto; }
  }
  @supports selector(details::details-content) {
    .mobile-nav::details-content, .review-bar details::details-content {
      opacity: 0;
      transition: opacity var(--motion-hover) var(--motion-ease),
        content-visibility var(--motion-hover) allow-discrete;
    }
    .mobile-nav[open]::details-content, .review-bar details[open]::details-content { opacity: 1; }
    @starting-style {
      .mobile-nav[open]::details-content, .review-bar details[open]::details-content { opacity: 0; }
    }
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after, details::details-content { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}
/* Interactive layer, TASK-179 R4. The accepted ambient keyframes above are unchanged. */
.motion-action { display:inline-flex; position:relative; align-self:flex-start; }
.motion-action > :is(.button,button) {
  transition: translate var(--motion-hover) var(--motion-ease),
    background-color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease);
}
.tariff > .motion-action { width:100%; margin-top:auto; }
.tariff-card > .motion-action { width:100%; margin-top:var(--space-6); }
.tariff-card > .motion-action > button { margin-top:0; }
@media (prefers-reduced-motion:no-preference) {
  @media (hover:hover) and (pointer:fine) {
    /* Stationary wrapper retains the original hover area at the lower edge. */
    .motion-action:hover > :is(.button,button):not(:disabled) {
      translate:0 var(--motion-lift); box-shadow:0 10px 26px -10px rgb(255 42 61 / 65%);
    }
  }
  .motion-action > :is(.button,button):active:not(:disabled) {
    translate:0 0; box-shadow:0 3px 12px -5px rgb(255 42 61 / 50%);
    transition-duration:var(--motion-press);
  }
}
/* SVG pathLength makes the light segment exactly 28% of each real perimeter. */
.year-accent { position:relative; isolation:isolate; }
.perimeter { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); overflow:visible; pointer-events:none; z-index:1; }
.perimeter rect { width:calc(100% - 2px); height:calc(100% - 2px); rx:var(--radius-card); fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:28 72; filter:drop-shadow(0 0 3px rgb(255 42 61 / 60%)); }
.year-accent > .best { z-index:2; }
@keyframes dp-perimeter { to { stroke-dashoffset:-100; } }
.diagram-line { position:relative; width:calc(50% + 6px); background:none; }
.diagram-line svg { display:block; width:100%; height:100%; overflow:visible; }
.diagram-line path { fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.connector-base { stroke:#9c384b; stroke-width:1; }
.connector-pulse { stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:18 82; opacity:.85; filter:drop-shadow(0 0 3px rgb(255 42 61 / 60%)); }
/* One dash period per cycle: identical endpoints, no faded-out waiting interval. */
@keyframes dp-connector { to { stroke-dashoffset:-100; } }
.support-action { display:flex; align-self:stretch; }
.support-action > .quick-link { width:100%; text-align:left; }
@media (prefers-reduced-motion:no-preference) {
  .perimeter rect { animation:dp-perimeter var(--motion-perimeter) linear infinite; }
  .connector-pulse { animation:dp-connector var(--motion-connector) linear infinite; }
}
/* JS only controls lifecycle, never base content visibility. */
.motion-paused, .motion-paused::before, .motion-paused::after,
.motion-paused .connector-pulse, .motion-paused .perimeter rect,
.motion-tab-hidden .ambient-surface, .motion-tab-hidden .ambient-surface::before,
.motion-tab-hidden .ambient-surface::after, .motion-tab-hidden .perimeter rect,
.motion-tab-hidden .connector-pulse { animation-play-state:paused !important; }