@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /Components/Shared/IoitLogoLoader.razor.rz.scp.css */
/* R2 · Ensamblado continuo — los anillos entran girando, el logo se completa
   y sale girando en el mismo sentido. Ciclo continuo, sin rebobinar. */

.ioit-r2[b-4118b76g17] {
    display: block;
    overflow: visible;
}

.ioit-r2 path[b-4118b76g17],
.ioit-r2 rect[b-4118b76g17] {
    fill: var(--ioit-color, #F6A017);
}

.ioit-r2 .ioit-ring-outer[b-4118b76g17],
.ioit-r2 .ioit-ring-inner[b-4118b76g17],
.ioit-r2 .ioit-stem[b-4118b76g17],
.ioit-r2 .ioit-dot[b-4118b76g17] {
    transform-box: view-box;
    animation-duration: var(--ioit-dur, 3.4s);
    animation-iteration-count: infinite;
    animation-play-state: var(--ioit-play, running);
}

.ioit-r2 .ioit-ring-outer[b-4118b76g17] {
    transform-origin: 209px 209px;
    animation-name: ioit-r2-outer-b-4118b76g17;
    animation-timing-function: cubic-bezier(.5, 0, .4, 1);
}

.ioit-r2 .ioit-ring-inner[b-4118b76g17] {
    transform-origin: 209px 209px;
    animation-name: ioit-r2-inner-b-4118b76g17;
    animation-timing-function: cubic-bezier(.5, 0, .4, 1);
}

.ioit-r2 .ioit-stem[b-4118b76g17] {
    transform-origin: 209px 210px;
    animation-name: ioit-r2-stem-b-4118b76g17;
    animation-timing-function: ease-in-out;
}

.ioit-r2 .ioit-dot[b-4118b76g17] {
    transform-origin: 209px 10px;
    animation-name: ioit-r2-dot-b-4118b76g17;
    animation-timing-function: ease-in-out;
}

/* Los @keyframes no se aíslan por componente: el prefijo ioit-r2-* evita colisiones. */
@keyframes ioit-r2-outer-b-4118b76g17 {
    0%          { transform: rotate(150deg);  opacity: 0; }
    44%, 56%    { transform: rotate(0);       opacity: 1; }
    100%        { transform: rotate(-150deg); opacity: 0; }
}

@keyframes ioit-r2-inner-b-4118b76g17 {
    0%, 10%     { transform: rotate(-150deg); opacity: 0; }
    46%, 56%    { transform: rotate(0);       opacity: 1; }
    100%        { transform: rotate(150deg);  opacity: 0; }
}

@keyframes ioit-r2-stem-b-4118b76g17 {
    0%, 14%     { transform: scaleY(0); opacity: 0; }
    48%, 56%    { transform: scaleY(1); opacity: 1; }
    92%, 100%   { transform: scaleY(0); opacity: 0; }
}

@keyframes ioit-r2-dot-b-4118b76g17 {
    0%, 16%     { transform: scale(0); opacity: 0; }
    48%, 56%    { transform: scale(1); opacity: 1; }
    86%, 100%   { transform: scale(0); opacity: 0; }
}

/* Accesibilidad: sin movimiento, logo estático completo. */
@media (prefers-reduced-motion: reduce) {
    .ioit-r2 .ioit-ring-outer[b-4118b76g17],
    .ioit-r2 .ioit-ring-inner[b-4118b76g17],
    .ioit-r2 .ioit-stem[b-4118b76g17],
    .ioit-r2 .ioit-dot[b-4118b76g17] {
        animation: none;
        transform: none;
        opacity: 1;
    }
}