/* Splash do IRIS: a flor abre pétala por pétala, pétalas caem pelo fundo e o nome
   surge letra por letra com um brilho. Fica em display:none quando inativo, então
   a animação recomeça do zero toda vez que ".ativo" é adicionado. */
#iris-splash {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 600px at 50% 42%, rgba(255, 200, 228, 0.55), transparent 65%),
        linear-gradient(155deg, #7A0F52 0%, #B0125F 38%, #E8308A 72%, #FF8CC0 100%);
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
#iris-splash.ativo { display: flex; }
html:has(#iris-splash.ativo) { overflow: hidden; }
#iris-splash.saindo { animation: splashSai 0.45s ease forwards; }

.sp-petala {
    position: absolute;
    top: -40px;
    width: 18px;
    height: 26px;
    border-radius: 80% 10% 80% 10%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 190, 222, 0.55));
    animation: spCair linear infinite;
}

.sp-flor { position: relative; width: min(290px, 62vw); height: min(290px, 62vw); margin-bottom: 14px; }
.sp-flor svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 30px rgba(122, 15, 82, 0.5)); }
.sp-giro { transform-origin: 100px 100px; animation: spGiro 12s linear infinite; }
.sp-p { transform-box: view-box; transform-origin: 100px 100px; opacity: 0; animation: spAbre 0.7s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.sp-miolo { transform-box: view-box; transform-origin: 100px 100px; transform: scale(0); animation: spMiolo 0.5s cubic-bezier(.34, 1.56, .64, 1) 1s forwards; }

.sp-brilho { position: absolute; color: #fff; opacity: 0; animation: spBrilha 1.8s ease-in-out infinite; }
.sp-brilho.b1 { top: 4px; right: 12px; font-size: 24px; animation-delay: 1.1s; }
.sp-brilho.b2 { bottom: 16px; left: 2px; font-size: 16px; animation-delay: 1.5s; }
.sp-brilho.b3 { top: 56px; left: -16px; font-size: 12px; animation-delay: 1.9s; }

.sp-nome { display: flex; gap: 10px; font-family: 'Fraunces', Georgia, serif; font-size: 58px; font-weight: 500; letter-spacing: 6px; line-height: 1; }
.sp-nome span { font-family: 'Fraunces', Georgia, serif; opacity: 0; transform: translateY(20px); animation: spLetra 0.5s ease forwards; }
.sp-nome span:nth-child(1) { animation-delay: 1.2s; }
.sp-nome span:nth-child(2) { animation-delay: 1.3s; }
.sp-nome span:nth-child(3) { animation-delay: 1.4s; }
.sp-nome span:nth-child(4) { animation-delay: 1.5s; }

.sp-lema { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; opacity: 0; animation: spSobe 0.5s ease 1.7s forwards; }
.sp-texto { margin-top: 10px; min-height: 22px; font-size: 16px; font-weight: 700; opacity: 0; animation: spSobe 0.5s ease 1.85s forwards; }

.sp-barra { position: absolute; bottom: 44px; width: 160px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.sp-barra::after { content: ''; display: block; width: 45%; height: 100%; border-radius: 3px; background: #fff; animation: spBarra 1.1s ease-in-out infinite; }

@keyframes spCair {
    0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate3d(90px, 110vh, 0) rotate(420deg); opacity: 0.2; }
}
@keyframes spGiro { to { transform: rotate(360deg); } }
@keyframes spAbre {
    from { opacity: 0; transform: rotate(var(--r)) scale(0.2); }
    to { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
@keyframes spMiolo { to { transform: scale(1); } }
@keyframes spBrilha {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(20deg); }
}
@keyframes spLetra { to { opacity: 1; transform: translateY(0); } }
@keyframes spSobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.92; transform: translateY(0); } }
@keyframes spBarra { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
@keyframes splashSai { to { opacity: 0; transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
    .sp-petala, .sp-brilho, .sp-barra::after { animation: none; display: none; }
    .sp-giro { animation: none; }
    .sp-p, .sp-miolo, .sp-nome span, .sp-lema, .sp-texto { animation-duration: 0.01s; animation-delay: 0s; }
}