/* Halloween Games — Grimoire animation v4 */
@keyframes hwFadeIn { from { opacity:0; transform:translateY(30px) scale(0.9); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes hwGlowPulse { 0%,100% { box-shadow:0 0 40px rgba(120,60,200,0.3), inset 0 0 60px rgba(120,60,200,0.1); } 50% { box-shadow:0 0 80px rgba(150,80,255,0.5), inset 0 0 80px rgba(150,80,255,0.15); } }
@keyframes hwPenWrite { 0% { transform:rotate(-15deg) translateX(0); } 20% { transform:rotate(-30deg) translateX(15px); } 40% { transform:rotate(-10deg) translateX(-12px); } 60% { transform:rotate(-28deg) translateX(10px); } 80% { transform:rotate(-12deg) translateX(-8px); } 100% { transform:rotate(-15deg) translateX(0); } }
@keyframes hwSparkle { 0% { opacity:0; transform:scale(0) rotate(0deg); } 35% { opacity:1; transform:scale(1.3) rotate(120deg); } 100% { opacity:0; transform:scale(0) rotate(360deg); } }
@keyframes hwTextGlow { 0% { text-shadow:0 0 15px rgba(255,180,50,0.4); } 50% { text-shadow:0 0 40px rgba(255,180,50,0.9), 0 0 80px rgba(255,120,0,0.4); } 100% { text-shadow:0 0 15px rgba(255,180,50,0.4); } }
@keyframes hwLineGrow { from { width:0; opacity:0; } to { width:120px; opacity:1; } }
@keyframes hwType { to { max-width:500px; } }

.hw-magic-wrap {
    position:relative;
    text-align:center;
    padding:15px 25px 15px;
    background:radial-gradient(ellipse at 50% 40%, #2d1555 0%, #1a0a2e 60%, #0d0515 100%);
    border-radius:20px;
    overflow:hidden;
    min-height:420px;
    border:1px solid rgba(150,100,255,0.2);
    animation:hwGlowPulse 4s ease-in-out infinite;
}
.hw-magic-wrap::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:300px;
    height:300px;
    margin:-150px 0 0 -150px;
    background:radial-gradient(circle, rgba(150,80,255,0.12) 0%, transparent 70%);
    pointer-events:none;
}

.hw-sparkle {
    position:absolute;
    font-size:3em;
    pointer-events:none;
    animation:hwSparkle 2.5s ease-in-out infinite;
}
.hw-sparkle.s1 { top:12%; left:8%; animation-delay:0s; }
.hw-sparkle.s2 { top:20%; right:10%; animation-delay:0.6s; }
.hw-sparkle.s3 { top:55%; left:5%; animation-delay:1.2s; }
.hw-sparkle.s4 { top:65%; right:8%; animation-delay:1.8s; }

/* Scene: pen + book together */
.hw-scene {
    position:relative;
    display:block;
    margin:20px auto;
}

.hw-pen {
    position:absolute;
    top:5%;
    left:55%;
    font-size:3.75em;
    z-index:2;
    display:block;
    animation:hwFadeIn 0.8s ease-out 0.6s both, hwPenWrite 1.5s ease-in-out 1.6s 2;
    filter:drop-shadow(0 0 20px rgba(255,200,100,0.7));
    line-height:1;
}

.hw-grimoire {
    font-size:10em;
    display:block;
    margin:0;
    animation:hwFadeIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter:drop-shadow(0 0 30px rgba(180,130,255,0.7)) drop-shadow(0 10px 30px rgba(0,0,0,0.5));
    line-height:1.1;
}

.hw-text {
    font-size:2.4em;
    font-weight:800;
    color:#ffb347;
    letter-spacing:6px;
    text-transform:uppercase;
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    max-width:0;
    animation:hwFadeIn 0.01s 1.5s both, hwType 1.5s steps(8) 2s forwards, hwTextGlow 3s ease-in-out 3.5s infinite;
    margin:15px 0 5px;
    font-family:Georgia, serif;
}

.hw-line {
    width:120px;
    height:2px;
    background:linear-gradient(90deg, transparent, #b388ff, #ffb347, #b388ff, transparent);
    margin:15px auto;
    animation:hwFadeIn 0.8s ease-out 1.3s both, hwLineGrow 1s ease-out 1.3s both;
    border:none;
    border-radius:2px;
}

.hw-subtext {
    font-size:1.05em;
    color:#c4a8e8;
    animation:hwFadeIn 1s ease-out 1.6s both;
    margin-top:10px;
    line-height:1.6;
}