:root{
    --bg: #000000;
    --panel: #0b0b0b;
    --accent: #ff8c00; /* bright orange */
    --muted: #b36b00;
    --text: #ffd9b8;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family: 'Segoe UI', Roboto, system-ui, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

header{
    text-align:center;
    padding:36px 18px;
    background:linear-gradient(180deg, rgba(255,140,0,0.06), transparent);
    border-bottom:1px solid rgba(255,140,0,0.06);
}
header h1{
    margin:0 0 6px 0;
    font-size:2.1rem;
    letter-spacing:0.6px;
    color:var(--accent);
    text-shadow:0 2px 0 rgba(0,0,0,0.6);
}
header .tagline{
    margin:0;
    color:var(--muted);
}

main{padding:28px 18px;display:flex;justify-content:center}
.hero{
    max-width:980px;
    width:100%;
    background:linear-gradient(180deg,var(--panel), #090909);
    border-radius:12px;
    padding:28px;
    display:flex;
    gap:24px;
    align-items:center;
    box-shadow:0 8px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,140,0,0.02);
}
.ninja-wrap{flex:0 0 260px;display:flex;align-items:center;justify-content:center}
.ninja{display:block}
.copy{flex:1;color:var(--text)}
.copy h2{color:var(--accent);margin-top:0}
.copy p{line-height:1.5;color:rgba(255,217,184,0.95)}

.cta{
    display:inline-block;
    margin-top:12px;
    background:var(--accent);
    color:#0b0b0b;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 6px 18px rgba(255,140,0,0.12);
}
.cta:hover{filter:brightness(0.98);transform:translateY(-1px)}

footer{padding:18px;text-align:center;color:var(--muted);font-size:0.9rem}

@media (max-width:720px){
    .hero{flex-direction:column;align-items:center}
    .ninja-wrap{flex:0 0 180px}
}

/* Animations */
.ninja-group{transform-origin:60px 60px;animation:gentle-bob 3.8s ease-in-out infinite}

@keyframes gentle-bob{
    0%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-4px) rotate(-0.3deg)}
    100%{transform:translateY(0) rotate(0deg)}
}


/* bandana tail removed */

/* Confetti pieces generated by JS */
.confetti{
    position:fixed;
    width:8px;height:10px;border-radius:2px;
    transform:translateY(0) rotate(0deg);
    animation:confetti-fall 1s ease-out forwards;
    z-index:9999;pointer-events:none;opacity:0.95
}
@keyframes confetti-fall{
    0%{transform:translateY(0) rotate(0deg);opacity:1}
    60%{transform:translateY(140px) rotate(180deg);opacity:1}
    100%{transform:translateY(260px) rotate(360deg);opacity:0}
}

/* Eye blink animation: quick close/open window for natural blinks */
#left-eye, #right-eye{
    transform-box: fill-box;
    transform-origin: center;
    /* keep a leisurely blink frequency but make the close/open very quick */
    animation: blink 4.6s linear infinite;
}
/* both eyes blink together */
#right-eye{animation-delay:0s}

@keyframes blink{
    /* eyes mostly open */
    0%, 48%, 52%, 100% { transform: scaleY(1); }
    /* quick close at center of the cycle (~92ms if duration=4.6s per 2%) */
    49% { transform: scaleY(0.42); }
    50% { transform: scaleY(0.07); }
    51% { transform: scaleY(0.42); }
}