/* arworks.hu kiegészítés — a weboldal mozgásai és hover-effektjei (js/fx.js).
   Mértéktartó: rövid beúszás, finom emelkedés, lassú „élő” fények. A szövegen
   nincs skálázás (élesség). Csökkentett mozgásnál minden animáció kikapcsol. */

/* beágyazva (arworks.hu): a navigációt a fő oldal lebegő tartalomválasztója adja */
html[data-embed] .header { display: none; }
html[data-embed] .hero { padding-top: max(clamp(48px, 6vw, 88px), 80px); } /* a lebegő választó alatt */

/* ---------- felbukkanás görgetéskor ---------- */
/* külön `translate` tulajdonság: nem ütközik a hover `transform`-jaival */
[data-fx=wait] { opacity: 0; translate: 0 22px; }
[data-fx=in] { animation: tp-reveal 680ms var(--ease-out) both; animation-delay: var(--fx-d, 0ms); }
@keyframes tp-reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* ---------- hero: belépő és „élő” fény ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 70vmax; height: 70vmax; left: -20vmax; top: -35vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(98,190,196,.18), transparent 70%); animation: tp-drift 22s ease-in-out infinite alternate; pointer-events: none; }
.hero__grid { position: relative; z-index: 1; }
.hero__copy > * { animation: tp-rise 760ms var(--ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 90ms; } .hero__copy > :nth-child(3) { animation-delay: 180ms; } .hero__copy > :nth-child(4) { animation-delay: 270ms; }
.hero__media { animation: tp-fade-in 900ms 150ms var(--ease-out) both, tp-glow 6s 1s ease-in-out infinite; }
.hero__badge-dot, .chip__dot { animation: callpulse 1.6s ease-in-out infinite; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tp-deck-btn { text-decoration: none; }
.tp-deck-btn .icon { margin-right: 2px; }
@keyframes tp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tp-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tp-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(98,190,196,.35), 0 0 32px rgba(42,138,142,.35); } 50% { box-shadow: 0 0 0 1px rgba(98,190,196,.55), 0 0 56px rgba(42,138,142,.6); } }
@keyframes tp-drift { from { transform: translate(0, 0); } to { transform: translate(55vmax, 30vmax); } }

/* ---------- hover-effektek ---------- */
.tile, .partner, .scenario, .channel__photo, .media-frame, .logo-tile { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.tile:not(.tile--block):hover { transform: translateY(-4px); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--teal-200); background: var(--surface-card); }
.feature .icon-tile { transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.feature:hover .icon-tile { background: var(--tp-gradient); color: #fff; transform: translateY(-3px) rotate(-4deg); }
.type-card:hover .media-frame, .ref:hover .media-frame { transform: translateY(-5px); box-shadow: var(--shadow-raised); }
.type-card:hover .zoom-img, .ref:hover .zoom-img { transform: scale(1.05); }
.channel__photo { overflow: hidden; }
.channel__photo img { transition: transform 500ms var(--ease-out); }
.channel:hover .channel__photo { transform: translateY(-5px); box-shadow: var(--shadow-raised); }
.channel:hover .channel__photo img { transform: scale(1.04); }
.partner:hover { border-color: var(--teal-300); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.partner .icon-tile { transition: background var(--dur-base), color var(--dur-base); }
.partner:hover .icon-tile { background: var(--brand-primary-tint); color: var(--brand-primary); }
.scenario:not([aria-pressed=true]):hover { border-color: var(--teal-200); transform: translateX(3px); }
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.logo-tile img { transition: filter var(--dur-base), opacity var(--dur-base); }
.logo-tile:hover img { filter: none; opacity: 1; }
.badges span { transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.badges span:hover { background: var(--tp-gradient); color: #fff; transform: translateY(-2px); }
.tile--gap3 > .icon { transition: transform var(--dur-base) var(--ease-out); }
.tile--gap3:hover > .icon { transform: scale(1.15); }
.btn--primary { box-shadow: 0 0 0 0 rgba(42,138,142,0); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn--primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(35,118,138,.35); }

@media (prefers-reduced-motion: reduce) {
  [data-fx] { animation: none !important; opacity: 1 !important; translate: none !important; }
  .hero::before, .hero__copy > *, .hero__media, .hero__badge-dot, .chip__dot { animation: none !important; }
  .tile, .partner, .scenario, .channel__photo, .media-frame, .logo-tile, .tp-flow__step, .tp-sim__panel { transition: none; transform: none !important; }
}