/* Titán égi ereklye-réteg — js/ui/titanVfx.js.
   Közös paletta: égkék #97B8EE, cián #6EFEFE, elefántcsont #FDF3E3, bronz #BA713A, arany #F9BE5D.
   --ti-e a hős saját energiaszíne, --ti-e2 a másodlagos energia. */
.ti-layer, .ti-lance, .ti-veil { --ti-blue: #97B8EE; --ti-cyan: #6EFEFE; --ti-ivory: #FDF3E3; --ti-bronze: #BA713A; --ti-gold: #F9BE5D; }
.ti-layer { position: absolute; inset: 0; z-index: 640; pointer-events: none; overflow: visible; }
.ti-layer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ti-layer svg > path:first-child { fill: currentColor; fill-opacity: .16; }

/* ===== Leadás ===== */
.ti-cast__flare { position: absolute; inset: -5%; border-radius: 18px; mix-blend-mode: screen; background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ti-ivory) 55%, transparent), color-mix(in srgb, var(--ti-e) 34%, transparent) 30%, transparent 56%),
    linear-gradient(110deg, transparent 28%, color-mix(in srgb, var(--ti-gold) 55%, transparent) 46%, rgba(255,255,255,.7) 50%, color-mix(in srgb, var(--ti-e) 50%, transparent) 55%, transparent 72%);
    background-size: 100% 100%, 260% 100%; box-shadow: inset 0 0 26px color-mix(in srgb, var(--ti-gold) 60%, transparent), inset 0 0 50px color-mix(in srgb, var(--ti-e) 45%, transparent);
    animation: tiFlare 1.3s ease-out both; }
.ti-cast__ring { position: absolute; left: 50%; top: 40%; width: 86%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-gold);
    filter: drop-shadow(0 0 4px var(--ti-gold)) drop-shadow(0 0 12px var(--ti-e)); animation: tiRingSpin 1.7s cubic-bezier(.2,.8,.3,1) both; }
.ti-cast__relic { position: absolute; left: 50%; top: 38%; width: 44%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-ivory);
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px var(--ti-gold)) drop-shadow(0 0 20px var(--ti-e)) drop-shadow(0 3px 2px var(--ti-bronze));
    animation: tiRelicRise 1.6s cubic-bezier(.2,.9,.3,1.2) both; }
.ti-cast__relic svg { stroke-width: 2.8; }
.ti-cast__plates i, .ti-aegis i { position: absolute; left: 50%; top: 40%; width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; color: var(--ti-ivory);
    filter: drop-shadow(0 0 3px var(--ti-gold)) drop-shadow(0 0 8px var(--ti-e)); }
.ti-cast__plates i { animation: tiPlateDrift 1.6s calc(var(--ti-i) * 60ms) ease-out both; }
.ti-cast__motes, .ti-rain { position: absolute; inset: 0; }
.ti-mote { position: absolute; left: var(--ti-x); top: var(--ti-y); width: 8px; height: 8px; background: var(--ti-ivory); color: var(--ti-e);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); box-shadow: 0 0 6px currentColor;
    animation: tiMote 1.1s calc(var(--ti-i) * 65ms) ease-in-out both; }
.ti-mote:nth-child(3n) { background: var(--ti-gold); }
.ti-mote:nth-child(3n+1) { background: var(--ti-e); }

/* aegis: hat lebegő vértlemez körbeforog és a hősre záródik, égi kupolával */
.ti-aegis i { animation: tiAegisClose 1.5s calc(var(--ti-i) * 50ms) cubic-bezier(.3,.7,.2,1) both; }
.ti-dome { position: absolute; inset: 2% 4% 6%; border-radius: 48% 48% 22% 22%; border: 2px solid color-mix(in srgb, var(--ti-ivory) 80%, transparent);
    background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--ti-e) 26%, transparent), transparent 70%),
        repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--ti-gold) 18%, transparent) 0 6deg, transparent 6deg 30deg);
    box-shadow: 0 0 18px var(--ti-gold), inset 0 0 28px color-mix(in srgb, var(--ti-e) 60%, transparent); mix-blend-mode: screen;
    animation: tiDome 1.6s .45s ease-out both; }

/* halo: isteni glória ereszkedik a kártya fölé, sugárkoszorúval */
.ti-halo { position: absolute; left: 50%; top: 6%; width: 58%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-gold);
    filter: drop-shadow(0 0 6px var(--ti-gold)) drop-shadow(0 0 16px var(--ti-e)); animation: tiHaloDescend 1.6s cubic-bezier(.2,.8,.3,1) both; }
.ti-halo > i { position: absolute; inset: 22%; border-radius: 50%; border: 3px solid var(--ti-ivory); box-shadow: 0 0 14px var(--ti-gold), inset 0 0 10px var(--ti-e); }
.ti-rays { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.ti-rays i { position: absolute; left: -3px; bottom: 0; width: 6px; height: 130px; transform-origin: 50% 100%; rotate: var(--ti-a); border-radius: 6px;
    background: linear-gradient(0deg, transparent, color-mix(in srgb, var(--ti-gold) 70%, transparent) 40%, var(--ti-ivory) 70%, transparent);
    filter: blur(.6px); mix-blend-mode: screen; animation: tiRay 1.4s .25s ease-out both; }
.ti-rays i:nth-child(even) { height: 96px; background: linear-gradient(0deg, transparent, color-mix(in srgb, var(--ti-e) 70%, transparent) 50%, transparent); }

/* ===== Fénylándzsa (képernyő-szint) ===== */
.ti-lance { position: fixed; z-index: 9000; height: 0; transform-origin: 0 0; pointer-events: none; }
.ti-lance__ray { position: absolute; left: 0; top: -7px; height: 14px; width: 100%; border-radius: 14px; transform-origin: 0 50%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ti-gold) 70%, transparent) 14%, var(--ti-e) 46%, var(--ti-ivory) 70%, transparent);
    filter: blur(2px); box-shadow: 0 0 18px var(--ti-e), 0 0 36px var(--ti-gold); animation: tiLance 1s ease-out both; }
.ti-lance__core { position: absolute; left: 0; top: -2px; height: 4px; width: 100%; border-radius: 4px; transform-origin: 0 50%;
    background: linear-gradient(90deg, transparent, #fff 20%, var(--ti-ivory) 80%, transparent); animation: tiLance .9s ease-out both; }
.ti-lance__relic { position: absolute; top: -20px; left: 0; width: 40px; height: 40px; color: var(--ti-ivory);
    filter: drop-shadow(0 0 5px var(--ti-gold)) drop-shadow(0 0 12px var(--ti-e)); animation: tiLanceRelic .42s cubic-bezier(.5,0,.6,1) both; }
.ti-lance__relic svg { width: 100%; height: 100%; overflow: visible; }

/* ===== Becsapódás ===== */
.ti-sigil { position: absolute; left: 50%; top: 42%; width: 80%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-e);
    filter: drop-shadow(0 0 3px var(--ti-ivory)) drop-shadow(0 0 10px var(--ti-e)) drop-shadow(0 0 18px var(--ti-gold));
    animation: tiSigil 1.3s cubic-bezier(.2,.8,.2,1) both; }
.ti-sigil.is-big { width: 104%; }
.ti-sigil.is-small { width: 58%; animation-duration: .9s; }
.ti-sigil svg { display: block; width: 100%; height: 100%; }
.ti-flash { position: absolute; inset: -6%; border-radius: 18px; mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 42%, #fff, color-mix(in srgb, var(--ti-ivory) 70%, transparent) 16%, color-mix(in srgb, var(--ti-e) 45%, transparent) 36%, transparent 62%);
    animation: tiFlash .7s ease-out both; }
.ti-cracks { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.ti-cracks i { position: absolute; left: 0; top: -2px; width: 46%; min-width: 60px; height: 4px; transform-origin: 0 50%; rotate: var(--ti-a); border-radius: 4px;
    background: linear-gradient(90deg, var(--ti-ivory), var(--ti-gold) 40%, color-mix(in srgb, var(--ti-e) 70%, transparent) 70%, transparent);
    box-shadow: 0 0 8px var(--ti-gold); animation: tiCrack .9s calc(var(--ti-i) * 25ms) ease-out both; }
.ti-impact__relic { position: absolute; left: 50%; top: 42%; width: 34%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-ivory);
    filter: drop-shadow(0 0 4px var(--ti-gold)) drop-shadow(0 0 12px var(--ti-e)); animation: tiStamp 1.1s cubic-bezier(.2,.9,.3,1.3) both; }

/* judgement: óriás bossölő ereklye zuhan a célpontra */
.ti-judgement__blade { position: absolute; left: 50%; top: 40%; width: 62%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-ivory); z-index: 2;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px var(--ti-gold)) drop-shadow(0 0 26px var(--ti-e)); animation: tiJudgement 1.2s cubic-bezier(.6,0,.4,1) both; }
.ti-judgement__blade svg { stroke-width: 2.4; }
.ti-judgement__blade.is-colossal { width: 92%; animation-duration: 1.45s; }
.ti-hit--judgement .ti-sigil, .ti-hit--judgement .ti-flash, .ti-hit--judgement .ti-cracks i, .ti-hit--judgement .ti-impact__relic { animation-delay: .42s; }
.ti-hit--colossus .ti-sigil, .ti-hit--colossus .ti-flash, .ti-hit--colossus .ti-cracks i, .ti-hit--colossus .ti-impact__relic { animation-delay: .55s; }

/* sigil: fényoszlop + forgó rúnakör */
.ti-pillar { position: absolute; left: 50%; top: -40%; bottom: -6%; width: 46%; translate: -50% 0; border-radius: 50% 50% 12px 12px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ti-ivory) 60%, transparent) 30%, color-mix(in srgb, var(--ti-e) 55%, transparent) 70%, color-mix(in srgb, var(--ti-gold) 40%, transparent));
    filter: blur(5px); mix-blend-mode: screen; animation: tiPillar 1.4s ease-out both; }
.ti-cast--colossus .ti-pillar { width: 70%; top: -70%; animation-duration: 1.9s; }

/* relicRain: ereklyék hullanak az égből */
.ti-rain i { position: absolute; left: var(--ti-x); top: 0; width: 24%; aspect-ratio: 1; margin-left: -12%; color: var(--ti-ivory);
    filter: drop-shadow(0 0 3px var(--ti-gold)) drop-shadow(0 0 10px var(--ti-e)); animation: tiRain .9s calc(var(--ti-i) * 110ms) cubic-bezier(.5,0,.8,.6) both; }

/* colossus: lökéshullám */
.ti-shockwave i { position: absolute; left: 50%; top: 42%; width: 40%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    border: 3px solid var(--ti-ivory); box-shadow: 0 0 14px var(--ti-gold), inset 0 0 14px var(--ti-e); animation: tiShock 1.1s .6s ease-out both; }
.ti-shockwave i:nth-child(2) { border-color: var(--ti-e); animation-delay: .78s; }

/* ===== Alaptámadás ===== */
.ti-basic-cast .ti-cast__flare { animation-duration: .7s; }
.ti-basic__arc { position: absolute; left: 50%; top: 40%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: conic-gradient(from 210deg, transparent 0 8%, color-mix(in srgb, var(--ti-gold) 70%, transparent) 14%, var(--ti-ivory) 20%, var(--ti-e) 26%, transparent 34%);
    mask: radial-gradient(circle, transparent 54%, #000 56% 64%, transparent 66%); filter: drop-shadow(0 0 6px var(--ti-e)); animation: tiArc .55s ease-out both; }
.ti-basic__mark { position: absolute; left: 50%; top: 40%; width: 30%; aspect-ratio: 1; translate: -50% -50%; color: var(--ti-ivory);
    filter: drop-shadow(0 0 3px var(--ti-gold)) drop-shadow(0 0 10px var(--ti-e)); animation: tiStamp .85s cubic-bezier(.2,.9,.3,1.3) both; }

/* ===== Ultimate égi fátyol ===== */
.ti-veil { position: fixed; inset: 0; z-index: 8990; pointer-events: none; overflow: hidden; mix-blend-mode: screen;
    background: radial-gradient(ellipse 80% 55% at 50% -10%, color-mix(in srgb, var(--ti-ivory) 30%, transparent), color-mix(in srgb, var(--ti-gold) 16%, transparent) 40%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 110%, color-mix(in srgb, var(--ti-e) 22%, transparent), transparent 70%);
    animation: tiVeil 1.9s ease-out both; }
.ti-veil i { position: absolute; top: -20%; width: 9%; height: 140%; transform: skewX(-12deg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ti-ivory) 50%, transparent), color-mix(in srgb, var(--ti-gold) 26%, transparent) 40%, transparent 85%);
    filter: blur(10px); animation: tiVeilRay 1.9s ease-out both; }
.ti-veil i:nth-child(1) { left: 8%; }
.ti-veil i:nth-child(2) { left: 27%; width: 6%; animation-delay: .1s; background: linear-gradient(180deg, color-mix(in srgb, var(--ti-e) 46%, transparent), transparent 80%); }
.ti-veil i:nth-child(3) { left: 47%; width: 11%; animation-delay: .18s; }
.ti-veil i:nth-child(4) { left: 67%; width: 6%; animation-delay: .26s; background: linear-gradient(180deg, color-mix(in srgb, var(--ti-blue) 46%, transparent), transparent 80%); }
.ti-veil i:nth-child(5) { left: 86%; animation-delay: .32s; }

/* ===== Keyframes ===== */
@keyframes tiFlare { 0% { opacity: 0; background-position: 0 0, 160% 0; } 22% { opacity: 1; } 100% { opacity: 0; background-position: 0 0, -120% 0; } }
@keyframes tiRingSpin { 0% { opacity: 0; transform: scale(.3) rotate(-90deg); } 30% { opacity: 1; } 75% { opacity: .85; } 100% { opacity: 0; transform: scale(1.08) rotate(70deg); } }
@keyframes tiRelicRise { 0% { opacity: 0; transform: translateY(30%) scale(.4); } 28% { opacity: 1; transform: translateY(-6%) scale(1.12); } 70% { opacity: 1; transform: translateY(-14%) scale(1); } 100% { opacity: 0; transform: translateY(-34%) scale(.92); } }
@keyframes tiPlateDrift { 0% { opacity: 0; transform: rotate(var(--ti-a)) translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--ti-a)) translateY(-210%) rotate(40deg) scale(.9); } }
@keyframes tiAegisClose { 0% { opacity: 0; transform: rotate(var(--ti-a)) translateY(-300%) scale(1.1); } 25% { opacity: 1; } 65% { opacity: 1; transform: rotate(calc(var(--ti-a) + 120deg)) translateY(-150%) scale(.9); } 100% { opacity: 0; transform: rotate(calc(var(--ti-a) + 180deg)) translateY(-40%) scale(.5); } }
@keyframes tiDome { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: .95; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1); } }
@keyframes tiHaloDescend { 0% { opacity: 0; transform: translateY(-60%) scale(1.4); } 35% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(6%) scale(.95); } }
@keyframes tiRay { 0% { opacity: 0; transform: scaleY(.2); } 35% { opacity: .95; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.15); } }
@keyframes tiMote { 0%, 100% { opacity: 0; transform: translateY(8px) scale(.3) rotate(0); } 45% { opacity: 1; transform: translateY(-10px) scale(1.15) rotate(45deg); } }
@keyframes tiLance { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes tiLanceRelic { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: calc(100% - 40px); opacity: 1; } }
@keyframes tiSigil { 0% { opacity: 0; transform: scale(1.6) rotate(-60deg); } 30% { opacity: 1; transform: scale(1) rotate(0); } 75% { opacity: .9; transform: scale(1) rotate(30deg); } 100% { opacity: 0; transform: scale(.9) rotate(50deg); } }
@keyframes tiFlash { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes tiCrack { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }
@keyframes tiStamp { 0% { opacity: 0; transform: scale(1.8); } 30% { opacity: 1; transform: scale(.94); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes tiJudgement { 0% { opacity: 0; transform: translateY(-190%) scale(1.3) rotate(180deg); } 32% { opacity: 1; transform: translateY(0) scale(1) rotate(180deg); } 40% { transform: translateY(4%) scale(1.04, .96) rotate(180deg); } 78% { opacity: 1; transform: translateY(0) scale(1) rotate(180deg); } 100% { opacity: 0; transform: translateY(-6%) scale(.96) rotate(180deg); } }
@keyframes tiPillar { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: .95; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.6); } }
@keyframes tiRain { 0% { opacity: 0; transform: translateY(-160%) rotate(180deg) scale(.7); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(150%) rotate(180deg) scale(1); } 100% { opacity: 0; transform: translateY(170%) rotate(180deg) scale(1.3); } }
@keyframes tiShock { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes tiArc { 0% { opacity: 0; transform: rotate(-80deg) scale(.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(60deg) scale(1.05); } }
@keyframes tiVeil { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tiVeilRay { 0% { opacity: 0; transform: translateY(-20%) skewX(-12deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(6%) skewX(-12deg); } }

@media (prefers-reduced-motion: reduce) {
    .ti-layer *, .ti-lance *, .ti-veil, .ti-veil * { animation-duration: .01ms !important; animation-delay: 0s !important; }
    .ti-veil, .ti-lance { display: none; }
}