/* ===================================================================
   Wordly — the six live scenes, one per app tool (2026-10-24)
   Drawn by public/js/scenes.js (window.WORDLY_SCENES). Used by the
   homepage bento (home-v2) AND the service pages (app-page) — one copy,
   so a scene fixed in one place is fixed in both. Pure CSS, decorative,
   aria-hidden. Class-scoped only: the scenes exist only where a script
   drew them, so removing either page's v2 switch also removes them.
   =================================================================== */

/* ── The scenes ── */
.hv-scene {
    position: relative; height: 150px; margin: 1.2rem 1.2rem 0.6rem;
    border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--hair);
    overflow: hidden; transform: translateZ(18px);
}

/* Humanizer — stiff text dissolves into natural text, a meter climbs */
.hv-human .hv-text { position: absolute; inset: 22px 18px auto; height: 48px; font-size: 1rem; font-weight: 700; }
.hv-human .hv-robot, .hv-human .hv-natural { position: absolute; inset: 0; animation: 6s ease-in-out infinite; }
.hv-human .hv-robot { color: rgba(233, 231, 245, 0.55); font-family: ui-monospace, Menlo, monospace; font-size: 0.86rem; animation-name: hv-out; }
.hv-human .hv-natural { color: #fff; opacity: 0; animation-name: hv-in; }
@keyframes hv-out { 0%, 35% { opacity: 1; filter: blur(0); } 50%, 90% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; } }
@keyframes hv-in  { 0%, 40% { opacity: 0; transform: translateY(8px); } 55%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hv-human .hv-meter { position: absolute; left: 18px; right: 18px; bottom: 34px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hv-human .hv-meter span { display: block; height: 100%; width: 22%; border-radius: 4px; background: var(--grad-accent); animation: hv-meter 6s ease-in-out infinite; }
@keyframes hv-meter { 0%, 35% { width: 22%; } 55%, 90% { width: 94%; } 100% { width: 22%; } }
.hv-human .hv-meter-l { position: absolute; right: 18px; bottom: 12px; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--accent-cyan); }

/* AI checker — a beam scans a document; a ring fills */
.hv-scan .hv-doc { position: absolute; left: 22px; top: 18px; bottom: 18px; width: 46%; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.92); overflow: hidden; }
.hv-scan .hv-doc i { display: block; height: 6px; margin-bottom: 8px; border-radius: 3px; background: #d9d4ea; }
.hv-scan .hv-doc i:nth-child(2) { width: 80%; } .hv-scan .hv-doc i:nth-child(4) { width: 65%; }
.hv-scan .hv-beam { position: absolute; left: 0; right: 0; height: 24px; top: -24px; background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.55), transparent); animation: hv-beam 2.8s ease-in-out infinite; }
@keyframes hv-beam { 0% { top: -24px; } 100% { top: 110%; } }
.hv-scan .hv-ring { position: absolute; right: 26px; top: 50%; width: 86px; height: 86px; transform: translateY(-50%); }
.hv-scan .hv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hv-scan .hv-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3.2; }
.hv-scan .hv-ring .hv-ring-v { stroke: #22d3ee; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: hv-ring 2.8s ease-in-out infinite; }
@keyframes hv-ring { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 88; } }
.hv-scan .hv-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: #fff; }

/* AI removal — a gauge needle falls from red into the safe zone */
.hv-gauge svg { position: absolute; left: 50%; top: 18px; width: 200px; transform: translateX(-50%); }
.hv-gauge .hv-arc { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; stroke-linecap: round; }
.hv-gauge .hv-arc-hot { fill: none; stroke-width: 10; stroke-linecap: round; stroke: #e879f9; stroke-dasharray: 157; stroke-dashoffset: 40; animation: hv-arc 5s ease-in-out infinite; }
@keyframes hv-arc { 0%, 25% { stroke-dashoffset: 40; stroke: #f472b6; } 55%, 90% { stroke-dashoffset: 135; stroke: #34d399; } 100% { stroke-dashoffset: 40; } }
.hv-gauge .hv-needle { position: absolute; left: 50%; top: 125px; width: 4px; height: 70px; margin-left: -2px; border-radius: 2px; background: #fff; transform-origin: 50% 100%; transform: translateY(-70px) rotate(50deg); animation: hv-needle 5s ease-in-out infinite; }
@keyframes hv-needle { 0%, 25% { transform: translateY(-70px) rotate(50deg); } 55%, 90% { transform: translateY(-70px) rotate(-62deg); } 100% { transform: translateY(-70px) rotate(50deg); } }
.hv-gauge .hv-gauge-l { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 1.15rem; height: 1.6rem; }
.hv-gauge .hv-gauge-l b { position: absolute; left: 0; right: 0; animation: 5s ease-in-out infinite; }
.hv-gauge .hv-hi { color: #f9a8d4; animation-name: hv-out; }
.hv-gauge .hv-lo { color: #6ee7b7; opacity: 0; animation-name: hv-in; }

/* Data analysis — bars grow, a regression line draws */
.hv-plot { display: flex; align-items: flex-end; gap: 8px; padding: 18px 18px 26px; }
.hv-plot span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #a78bfa, #7c3aed); transform-origin: bottom; animation: hv-grow 4s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes hv-grow { 0% { transform: scaleY(.15); } 45%, 100% { transform: scaleY(1); } }
.hv-plot svg { position: absolute; inset: 18px 18px 26px; width: calc(100% - 36px); height: calc(100% - 44px); overflow: visible; }
.hv-plot path { fill: none; stroke: #22d3ee; stroke-width: 2.5; stroke-dasharray: 120; stroke-dashoffset: 120; vector-effect: non-scaling-stroke; animation: hv-draw 4s ease-in-out infinite; }
@keyframes hv-draw { 0%, 30% { stroke-dashoffset: 120; } 70%, 100% { stroke-dashoffset: 0; } }
.hv-plot em { position: absolute; right: 14px; top: 10px; font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--accent-cyan); }

/* CV — a page assembles itself */
.hv-cv .hv-cv-page { position: absolute; left: 50%; top: 14px; width: 110px; height: 118px; margin-left: -60px; padding: 14px; border-radius: 8px; background: #fff; }
.hv-cv .hv-cv-photo { float: left; width: 30px; height: 30px; margin: 0 8px 6px 0; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #e879f9); }
.hv-cv i { display: block; height: 6px; margin-bottom: 7px; border-radius: 3px; background: #ddd8ee; transform-origin: left; animation: hv-line 4s ease-in-out infinite; }
.hv-cv .w1 { width: 50%; background: #7c3aed; animation-delay: .1s; } .hv-cv .w2 { width: 36%; animation-delay: .25s; }
.hv-cv .w3 { width: 100%; clear: both; margin-top: 10px; animation-delay: .4s; } .hv-cv .w4 { width: 85%; animation-delay: .55s; } .hv-cv .w5 { width: 70%; animation-delay: .7s; }
@keyframes hv-line { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.hv-cv .hv-ats { position: absolute; right: 16px; bottom: 14px; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(52, 211, 153, 0.18); color: #6ee7b7; font-size: 0.75rem; font-weight: 800; animation: hv-pop 4s ease-in-out infinite; }
@keyframes hv-pop { 0%, 55% { opacity: 0; transform: scale(.6); } 70%, 100% { opacity: 1; transform: none; } }

/* Premium accounts — app tiles shuffle into place */
.hv-apps { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hv-apps span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-weight: 900; color: #fff;
    background: linear-gradient(140deg, #7c3aed, #a21caf); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    animation: hv-bob 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
.hv-apps span:nth-child(2) { background: linear-gradient(140deg, #0e7490, #0f766e); }
.hv-apps span:nth-child(3) { background: linear-gradient(140deg, #be185d, #c2410c); }
.hv-apps span:nth-child(4) { background: linear-gradient(140deg, #4338ca, #0369a1); }
@keyframes hv-bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
.hv-apps em { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.75rem; font-weight: 800; color: #6ee7b7; }


/* Reduced motion: still, and parked in the finished state. */
@media (prefers-reduced-motion: reduce) {
    .hv-scene, .hv-scene * { animation: none !important; transition: none !important; }
    .hv-human .hv-robot { opacity: 0; } .hv-human .hv-natural { opacity: 1; } .hv-human .hv-meter span { width: 94%; }
    .hv-scan .hv-ring .hv-ring-v { stroke-dashoffset: 88; }
    .hv-gauge .hv-arc-hot { stroke-dashoffset: 135; stroke: #34d399; }
    .hv-gauge .hv-needle { transform: translateY(-70px) rotate(-62deg); }
    .hv-gauge .hv-hi { opacity: 0; } .hv-gauge .hv-lo { opacity: 1; }
    .hv-plot path { stroke-dashoffset: 0; }
    .hv-cv .hv-ats { opacity: 1; }
}