/* ---------- Teletransporte ---------- */
.teleport { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #12324f, #081726 70%); opacity: 0; }
.teleport.is-active { animation: tp-in .18s ease-out forwards; }
.tp-portal { position: absolute; width: 74vmax; height: 74vmax; border-radius: 50%; background: conic-gradient(from 0deg, #6cf7f0, #8662d9, #ffce62, #4fcdb6, #6cf7f0); filter: blur(6px); opacity: 0; transform: scale(.05) rotate(0); mix-blend-mode: screen; }
.is-active .tp-portal { animation: tp-portal 3s cubic-bezier(.5, .05, .85, .4) forwards; }
.tp-beam { position: absolute; width: 26vmin; height: 120vmax; background: linear-gradient(to top, transparent, #eafcffcc 45%, transparent); filter: blur(8px); opacity: 0; transform: scaleY(0); }
.is-active .tp-beam { animation: tp-beam 3s ease-in forwards; }
.tp-island { position: relative; width: min(360px, 62vw); height: min(220px, 40vw); opacity: 0; }
.tp-island svg { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; animation: none !important; filter: none !important; }
.is-active .tp-island { animation: tp-warp 3s cubic-bezier(.5, 0, .7, .5) forwards; }
.tp-rings { position: absolute; width: 30vmin; height: 30vmin; }
.tp-rings span { position: absolute; inset: 0; border: 3px solid #9ff4ef; border-radius: 50%; opacity: 0; }
.is-active .tp-rings span { animation: tp-ring 2.2s ease-out forwards; }
.is-active .tp-rings span:nth-child(2) { animation-delay: .5s; }
.is-active .tp-rings span:nth-child(3) { animation-delay: 1s; }
.tp-status { position: absolute; bottom: 12%; color: #d7f6ff; font-size: .92rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; opacity: 0; }
.is-active .tp-status { animation: tp-status 3s ease-out forwards; }
.tp-flash { position: absolute; inset: 0; background: #eafcff; opacity: 0; }
.is-active .tp-flash { animation: tp-flash 3s ease-in forwards; }

@keyframes tp-in { to { opacity: 1; } }
@keyframes tp-portal { 0% { opacity: 0; transform: scale(.05) rotate(0); } 15% { opacity: 1; } 100% { opacity: 1; transform: scale(1.2) rotate(420deg); } }
@keyframes tp-beam { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: .95; } 85% { opacity: .65; } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes tp-warp { 0% { opacity: 0; transform: translateY(22px) scale(.6) rotate(0); } 25% { opacity: 1; } 55% { opacity: 1; transform: translateY(-18px) scale(.74) rotate(140deg); } 100% { opacity: 0; transform: translateY(-170px) scale(.05) rotate(520deg); } }
@keyframes tp-ring { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes tp-status { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: .9; } }
@keyframes tp-flash { 0%, 55% { opacity: 0; } 88% { opacity: .95; } 100% { opacity: 1; } }