/* arworks.hu kiegészítések — a js/extras.js elemei (weboldal és prezentáció közös).
   Az animációk csak [data-playing] alatt futnak; nélküle a végállapot látszik. */

@property --tp-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ---------- Hogyan működik: folyamatábra ---------- */
.tp-flow { position: relative; }
.tp-flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); position: relative; z-index: 1; }
.tp-flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--space-5) var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--surface-tile); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.tp-flow__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); background: var(--surface-card); }
.tp-flow__icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-card); color: var(--brand-primary); box-shadow: inset 0 0 0 1.5px var(--teal-200); transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.tp-flow__step:hover .tp-flow__icon { background: var(--tp-gradient); color: #fff; box-shadow: var(--shadow-glow); }
.tp-flow__num { font: var(--fw-medium) var(--fs-caption)/1 var(--font-mono); letter-spacing: .12em; color: var(--text-brand); }
.tp-flow__step .body { font-size: 14px; color: var(--text-body); }
.tp-flow__track { position: absolute; top: calc(var(--space-5) + 34px); left: 12.5%; right: 12.5%; height: 2px; background: var(--teal-100); z-index: 0; }
.tp-flow__fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--tp-gradient); }
.tp-flow__dot { position: absolute; top: 50%; left: 100%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #7FE3EA; box-shadow: 0 0 0 4px rgba(98,190,196,.25), 0 0 16px #62BEC4; opacity: 0; }

[data-playing].tp-flow .tp-flow__fill { animation: tp-fill 8s linear infinite both; }
[data-playing].tp-flow .tp-flow__dot { animation: tp-dot 8s linear infinite both; }
[data-playing].tp-flow .tp-flow__step { animation: tp-step 8s ease-out infinite both; animation-delay: calc(var(--i) * 2s); }
[data-playing].tp-flow .tp-flow__icon { animation: tp-step-icon 8s ease-out infinite both; animation-delay: calc(var(--i) * 2s); }
@keyframes tp-fill { 0% { width: 0; } 75%, 92% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: .25; } }
@keyframes tp-dot { 0% { left: 0; opacity: 1; } 75% { left: 100%; opacity: 1; } 88%, 100% { left: 100%; opacity: 0; } }
@keyframes tp-step { 0% { background: var(--surface-tile); box-shadow: none; } 4%, 20% { background: var(--surface-card); box-shadow: var(--shadow-raised); } 30%, 100% { background: var(--surface-tile); box-shadow: none; } }
@keyframes tp-step-icon { 0% { background: var(--surface-card); color: var(--brand-primary); } 4%, 20% { background: var(--tp-gradient); color: #fff; box-shadow: var(--shadow-glow); } 30%, 100% { background: var(--surface-card); color: var(--brand-primary); } }

/* ---------- Szemléltető párbeszéd + élő értékelés (14 s-os ciklus) ---------- */
.tp-how__sim { display: grid; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.tp-how__simhead { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tp-sim { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.tp-sim__chat { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.tp-sim__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tp-hero); color: var(--text-on-hero); }
.tp-sim__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background-repeat: no-repeat; background-color: var(--surface-hero-raised); box-shadow: 0 0 0 2px var(--teal-300); }
.tp-sim__meta { display: grid; gap: 3px; font: var(--fw-regular) var(--fs-caption)/1.2 var(--font-sans); }
.tp-sim__meta b { color: #fff; font-size: 14px; text-transform: uppercase; }
.tp-sim__meta span { display: inline-flex; align-items: center; gap: 6px; }
.tp-sim__live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-300); display: inline-block; animation: callpulse 1.2s ease-in-out infinite; }
.tp-sim__log { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; flex: 1; }
.tp-sim__msg { position: relative; display: flex; flex-direction: column; gap: 5px; max-width: 84%; align-self: flex-start; align-items: flex-start; }
.tp-sim__msg--c { align-self: flex-end; align-items: flex-end; }
.tp-sim__who { font: var(--fw-medium) 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.tp-sim__bubble { padding: 9px 13px; font: var(--fw-regular) 14px/1.45 var(--font-sans); background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-subtle); border-radius: 14px 14px 14px 4px; }
.tp-sim__msg--c .tp-sim__bubble { background: var(--tp-gradient); color: #fff; border-color: var(--brand-primary); border-radius: 14px 14px 4px 14px; }
.tp-sim__typing { position: absolute; left: 0; top: 18px; display: flex; gap: 4px; padding: 11px 13px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px 14px 14px 4px; opacity: 0; }
.tp-sim__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); animation: callpulse 1s ease-in-out infinite; }
.tp-sim__typing i:nth-child(2) { animation-delay: .2s; } .tp-sim__typing i:nth-child(3) { animation-delay: .4s; }

.tp-sim__side { display: flex; flex-direction: column; gap: var(--space-4); }
.tp-sim__panel { background: var(--surface-tile); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tp-sim__panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.tp-sim__gauge { position: relative; width: 132px; height: 132px; margin: 12px auto 0; }
.tp-sim__gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tp-sim__ring-bg { fill: none; stroke: var(--gray-200); stroke-width: 10; }
.tp-sim__ring { fill: none; stroke: var(--brand-primary); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 62.1; }
.tp-sim__num { position: absolute; inset: 0; display: grid; place-items: center; font: var(--fw-bold) 34px/1 var(--font-sans); color: var(--text-strong); --tp-n: 81; counter-reset: tpn var(--tp-n); }
.tp-sim__num::after { content: counter(tpn) '%'; }
.tp-sim__checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.tp-sim__checks li { display: flex; align-items: center; gap: 9px; font: var(--fw-regular) var(--fs-small)/1.3 var(--font-sans); color: var(--text-body); }
.tp-sim__tick { position: relative; width: 16px; height: 16px; flex: none; color: var(--gray-300); }
.tp-sim__tick .icon { position: absolute; inset: 0; }
.tp-sim__tick .icon + .icon { color: var(--brand-primary); }
.tp-sim__checks li.is-open .tp-sim__tick .icon + .icon { opacity: 0; }
.tp-sim__cta { align-self: flex-start; }

/* idővonal (a ciklus %-ában): üzenetek 2 / 12 / 30 / 46 / 63 %, gépelés 22–30 és 55–63 %,
   mérő 0 → 64 % (14–24 %) → 81 % (55–62 %), pipák 16 / 20 / 50 %, elhalványulás 92–98 % */
[data-playing].tp-sim .tp-sim__msg, [data-playing].tp-sim .tp-sim__typing,
[data-playing].tp-sim .tp-sim__ring, [data-playing].tp-sim .tp-sim__num,
[data-playing].tp-sim .tp-sim__checks li:not(.is-open) .tp-sim__tick .icon + .icon { animation-duration: 14s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-out; }
[data-playing].tp-sim .tp-m0 { animation-name: tp-m0; }
[data-playing].tp-sim .tp-m1 { animation-name: tp-m1; }
[data-playing].tp-sim .tp-m2 { animation-name: tp-m2; }
[data-playing].tp-sim .tp-m3 { animation-name: tp-m3; }
[data-playing].tp-sim .tp-m4 { animation-name: tp-m4; }
[data-playing].tp-sim .tp-t2 { animation-name: tp-t2; }
[data-playing].tp-sim .tp-t4 { animation-name: tp-t4; }
[data-playing].tp-sim .tp-sim__ring { animation-name: tp-ring; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
[data-playing].tp-sim .tp-sim__num { animation-name: tp-num; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
[data-playing].tp-sim .tp-c0 .tp-sim__tick .icon + .icon { animation-name: tp-c0; }
[data-playing].tp-sim .tp-c1 .tp-sim__tick .icon + .icon { animation-name: tp-c1; }
[data-playing].tp-sim .tp-c3 .tp-sim__tick .icon + .icon { animation-name: tp-c3; }

@keyframes tp-m0 { 0%, 1% { opacity: 0; transform: translateY(10px); } 4%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes tp-m1 { 0%, 11% { opacity: 0; transform: translateY(10px); } 14%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes tp-m2 { 0%, 21% { opacity: 0; transform: translateY(10px); } 23%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes tp-m3 { 0%, 43% { opacity: 0; transform: translateY(10px); } 46%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes tp-m4 { 0%, 54% { opacity: 0; transform: translateY(10px); } 56%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
/* a beteg válasza: előbb gépelés (a sor már látszik), aztán a buborék */
[data-playing].tp-sim .tp-m2 .tp-sim__bubble { animation: tp-b2 14s ease-out infinite both; }
[data-playing].tp-sim .tp-m4 .tp-sim__bubble { animation: tp-b4 14s ease-out infinite both; }
@keyframes tp-b2 { 0%, 29% { opacity: 0; } 31%, 100% { opacity: 1; } }
@keyframes tp-b4 { 0%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes tp-t2 { 0%, 21% { opacity: 0; } 23%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes tp-t4 { 0%, 54% { opacity: 0; } 56%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes tp-ring { 0%, 14% { stroke-dashoffset: 326.7; } 24%, 52% { stroke-dashoffset: 117.6; } 62%, 92% { stroke-dashoffset: 62.1; } 100% { stroke-dashoffset: 326.7; } }
@keyframes tp-num { 0%, 14% { --tp-n: 0; } 24%, 52% { --tp-n: 64; } 62%, 92% { --tp-n: 81; } 100% { --tp-n: 0; } }
@keyframes tp-c0 { 0%, 15% { opacity: 0; transform: scale(.4); } 18%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tp-c1 { 0%, 19% { opacity: 0; transform: scale(.4); } 22%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tp-c3 { 0%, 49% { opacity: 0; transform: scale(.4); } 52%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@media (max-width: 860px) {
  .tp-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-flow__track { display: none; }
  .tp-sim { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .tp-flow__steps { grid-template-columns: 1fr; } }