body {
    overflow-x: hidden;
}

/* YouTube-style large circular play/pause button */
.yt-btn {
    --yt-red: #ff0033;
    --yt-red-hover: #e6002e;
    --yt-ring: rgba(255,0,51,0.45);
    background: radial-gradient(circle at 30% 30%, #ff3359, var(--yt-red));
    color:#fff;
    border:none;
    border-radius:9999px;
    width:140px;
    height:140px;
    padding:0;
    cursor:pointer;
    box-shadow:0 8px 28px -4px rgba(255,0,70,0.55), 0 4px 12px -2px rgba(0,0,0,0.35);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .3s;
    position:relative;
    font-size:0; /* hide any text */
}
.yt-btn:not([data-state="playing"]) {
        animation: yt-pulse 2.4s ease-in-out infinite;
}
/* Expanding ring ripple while stopped */
.yt-btn[data-state="stopped"]::before {
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(circle, rgba(255,0,60,0.55) 0%, rgba(255,0,60,0.25) 45%, rgba(255,0,60,0) 70%);
    animation: yt-ring-pulse 2.4s ease-out infinite;
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:0;
    transform:scale(.85);
}
.yt-btn[data-state="stopped"] .yt-icon { position:relative; z-index:1; }
.yt-btn[data-state="stopped"]:hover::before, .yt-btn[data-state="stopped"]:focus-visible::before { animation-play-state:paused; opacity:0; }
@keyframes yt-ring-pulse { 
    0% { opacity:.55; transform:scale(.85); }
    60% { opacity:0; transform:scale(1.4); }
    100% { opacity:0; transform:scale(1.4); }
}
@keyframes yt-pulse {
    0% { transform: scale(1); box-shadow:0 0 0 0 rgba(255,0,60,0.55), 0 8px 28px -4px rgba(255,0,70,0.55); }
    55% { transform: scale(1.06); box-shadow:0 0 0 18px rgba(255,0,60,0); }
    100% { transform: scale(1); box-shadow:0 0 0 0 rgba(255,0,60,0); }
}
.yt-btn:not([data-state="playing"]):hover { animation:none; }
.yt-btn:not([data-state="playing"]):focus-visible { animation:none; }
.yt-btn[data-state="playing"] { animation:none; }

/* Guarantee perfect circle regardless of parent flex shrink/grow */
.yt-btn { flex:0 0 140px; }
@media (max-width:640px){ .yt-btn { flex:0 0 110px; } }

/* Fixed right-center placement */
.yt-btn-fixed {
    position:fixed !important;
    top:50%;
    right:1.25rem; /* 20px */
    transform:translateY(-50%);
    z-index:60;
}
@media (max-width:640px){
    .yt-btn-fixed { right:.75rem; }
}
.yt-btn:focus { outline:none; }
.yt-btn:focus-visible { box-shadow:0 0 0 6px var(--yt-ring), 0 8px 28px -4px rgba(255,0,70,0.55); }
.yt-btn:hover { transform:scale(1.08); background: radial-gradient(circle at 30% 30%, #ff5a79, var(--yt-red-hover)); }
.yt-btn:active { transform:scale(.94); }
.yt-btn::after {
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay; pointer-events:none;
}
.yt-btn[data-state="playing"] { background: radial-gradient(circle at 30% 30%, #ff3359, #c40026); }
.yt-btn .yt-icon { width:58%; height:58%; display:flex; align-items:center; justify-content:center; }
.yt-play-svg, .yt-pause-svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.yt-btn[data-state="playing"] .yt-play-svg { display:none; }
.yt-btn[data-state="playing"] .yt-pause-svg { display:block; }
@media (max-width:640px){
  .yt-btn { width:110px; height:110px; }
}


.font-handwritten {
    font-family: 'Gaegu', cursive;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
}

.marquee-content span {
    display: inline-block;
    padding: 0 2rem;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.gallery-item {
    transition: transform 0.3s ease-in-out;
}

.gallery-item:hover {
    transform: scale(1.05);
}


/* gentle float for the doodle arrow (slower) */
@keyframes floatSlow {
    0% {
        transform: translateY(0) rotate(12deg);
    }

    50% {
        transform: translateY(-18px) rotate(8deg);
    }

    100% {
        transform: translateY(0) rotate(12deg);
    }
}

/* slow drifting spin/float for the thinking emoji (different, slower) */
@keyframes slowDrift {
    0% {
        transform: translateY(0) rotate(-12deg);
    }

    25% {
        transform: translateY(-12px) rotate(-6deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(12px) rotate(6deg);
    }

    100% {
        transform: translateY(0) rotate(-12deg);
    }
}


@keyframes zo-typing {
    0% {
        transform: translateY(0);
        opacity: .3;
    }

    50% {
        transform: translateY(-6px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: .3;
    }
}

.zo-dot {
    animation: zo-typing 1s infinite ease-in-out;
    display: inline-block;
}

.zo-dot-1 {
    animation-delay: 0s;
}

.zo-dot-2 {
    animation-delay: 0.12s;
}

.zo-dot-3 {
    animation-delay: 0.24s;
}

/* Keep dots proportionate on small screens */
@media (max-width: 640px) {
    .zo-dot {
        width: 0.9rem;
        height: 0.9rem;
    }
}


  @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
            }
            .marquee-track {
            display: inline-flex;
            gap: 1.5rem;
            white-space: nowrap;
            will-change: transform;
            animation: marquee 18s linear infinite;
            align-items: center;
            }
            .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .45rem .9rem;
            background: rgba(255,255,255,0.7);
            border-radius: 9999px;
            backdrop-filter: blur(6px);
            box-shadow: 0 6px 18px rgba(13, 14, 20, 0.06);
            font-weight: 700;
            color: #0f172a;
            border: 1px solid rgba(15,23,42,0.06);
            font-family: inherit;
            }
            @media (max-width: 640px) {
            .marquee-track { animation-duration: 26s; }
            .marquee-item { padding: .35rem .7rem; font-size: .95rem; }
            }


             .hero-bg::before {
         content: "";
         position: absolute;
         inset: 0;
         background: repeating-linear-gradient(
         45deg,
         rgba(0, 0, 0, 0.05) 0,
         rgba(0, 0, 0, 0.05) 2px,
         transparent 2px,
         transparent 40px
         ),
         repeating-linear-gradient(
         -45deg,
         rgba(0, 0, 0, 0.05) 0,
         rgba(0, 0, 0, 0.05) 2px,
         transparent 2px,
         transparent 40px
         );
         z-index: 0;
         pointer-events: none;
         }
         .hero-bg > * {
         position: relative;
         z-index: 1;
         }


#discoToggleBtn{
    position: absolute !important;
    right: 10%;
    z-index: 9999999;
}

/* Smaller disco button on mobile (override default responsive size) */
@media (max-width:640px){
    #discoToggleBtn{
        width:88px;
        height:88px;
        flex:0 0 88px; /* ensure circle sizing in flex contexts */
        right:1rem; /* bring a bit closer to edge for balance */
    }
    #discoToggleBtn .yt-icon{ width:60%; height:60%; }
}