/* Mashhud marketing site — keyframes, interactive states, and scroll-system
   hooks. Layout/visual values live inline in index.html, ported verbatim from
   the reference design (Mashhud Website.dc.html). Tokens in tokens.css. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }

/* — keyframes (verbatim from the reference) — */
@keyframes mwTwinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mwPulse { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes mwDrop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mwFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mwDrift { to { transform: translateY(-36px); } }
@keyframes mwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mwBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mwPulse2 { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes mwSweep { 0% { left: -16%; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { left: 102%; opacity: 0; } }
@keyframes mwScan { 0%, 100% { top: 16%; } 50% { top: 80%; } }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
}

/* — screen-reader-only text (landmark headings) — */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* — details rows (FAQ + science bullets): native disclosure, no marker — */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* — rizq tooltip: hover + focus + tap-toggle — */
.rizq { position: relative; display: inline-block; cursor: help; outline: none; }
.rizq:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }
.rizq:hover > .mw-tip,
.rizq:focus > .mw-tip,
.rizq.tip-open > .mw-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* — hover/active states ported from the reference's style-hover attrs — */
.hv-a12:hover { background: rgba(145, 132, 217, .12); }
.hv-a16:hover { background: rgba(145, 132, 217, .16); }
.hv-w07:hover { background: rgba(233, 233, 237, .07); }
.hv-w06:hover { background: rgba(233, 233, 237, .06); }
.hv-d95:hover { background: rgba(43, 39, 65, .95); }
.hv-d70:hover { background: rgba(43, 39, 65, .7); }
.act-a300:active { border-color: var(--color-accent-300); }

.hv-card { transition: transform .25s ease, box-shadow .25s ease; }
.hv-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--color-accent-800), 0 16px 36px rgba(0, 0, 0, .35); }

.flink { text-decoration: none; color: var(--color-neutral-400); }
.flink:hover { color: var(--color-accent-300); }
.cite { color: var(--color-neutral-500); text-decoration: underline; text-decoration-color: var(--color-neutral-800); text-underline-offset: 3px; }
.cite:hover { color: var(--color-accent-300); }
.cite-in { color: var(--color-accent-300); text-decoration: underline; text-decoration-color: var(--color-accent-800); text-underline-offset: 3px; }
.cite-in:hover { color: var(--color-accent-200); }

/* — phone state machines —
   Stage panes swap via a data-stage attribute on the phone/demo container.
   display:contents lets the active pane's children participate directly in
   the container's flex layout, matching the reference's conditional markup
   (and re-triggering entrance animations on each swap). */
.stage { display: none; }
[data-stage="ring"] > .stage-ring,
[data-stage="scan"] > .stage-scan,
[data-stage="done"] > .stage-done,
[data-stage="idle"] > .stage-idle { display: contents; }