/*
 * Toonaweza playful animations (homepage + login/register).
 * Elements are created by public/js/toonaweza-home.js and toonaweza-auth.js.
 * Everything is disabled for visitors who ask for reduced motion.
 */
:root {
    --tt-pink: #ff4880;
    --tt-purple: #7b2ff7;
    --tt-yellow: #ffc83d;
    --tt-blue: #3db8ff;
    --tt-green: #22c55e;
    --tt-ink: #2b2350;
}

/* ================= HOMEPAGE HERO ================= */
.hero-header { position: relative; overflow: hidden; isolation: isolate; }
.hero-header > .container { position: relative; z-index: 2; }

/* Floating decorations layer */
.tt-floaties { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tt-floaty {
    position: absolute;
    line-height: 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
    animation: tt-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate;
    will-change: transform;
}
.tt-floaty > span { display: inline-block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes tt-float {
    0%   { transform: translate3d(0, 0, 0) rotate(-6deg); }
    100% { transform: translate3d(var(--dx, 12px), var(--dy, -26px), 0) rotate(8deg); }
}
.tt-balloon { animation-name: tt-rise; }
@keyframes tt-rise {
    0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
    50%  { transform: translate3d(10px, -40px, 0) rotate(4deg); }
    100% { transform: translate3d(-6px, -80px, 0) rotate(-3deg); }
}

/* Headline words drop in one by one */
.tt-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(-60px) rotate(-8deg) scale(.6);
    animation: tt-drop .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: calc(var(--i) * 140ms + 250ms);
}
@keyframes tt-drop { to { opacity: 1; transform: none; } }
.tt-word:hover { animation: tt-jelly .6s ease both; opacity: 1; }

/* Waving hand next to the greeting */
.tt-wave { display: inline-block; transform-origin: 70% 70%; animation: tt-wave 2.4s ease-in-out 1s infinite; margin-left: .25em; }
@keyframes tt-wave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(16deg); }
    20%, 40% { transform: rotate(-10deg); }
    50% { transform: rotate(12deg); }
}

/* Buttons: bounce in, jelly on hover */
.tt-pop-in { opacity: 0; animation: tt-pop .7s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: var(--delay, 1.2s); }
@keyframes tt-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.hero-header .btn:hover, .tt-jelly-hover:hover { animation: tt-jelly .6s ease both; }
@keyframes tt-jelly {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.15, .85); }
    45% { transform: scale(.9, 1.1); }
    60% { transform: scale(1.05, .95); }
    75% { transform: scale(.98, 1.02); }
}

/* Wavy bottom edge of the hero */
.tt-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; pointer-events: none; }
.tt-hero-wave svg { width: 100%; height: clamp(30px, 6vw, 80px); display: block; }

/* Click/tap bursts (stars and hearts) */
.tt-burst {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    font-size: var(--size, 22px);
    left: var(--x); top: var(--y);
    animation: tt-burst .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes tt-burst {
    0%   { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* Sparkle trail behind the pointer (desktop) */
.tt-sparkle {
    position: fixed; z-index: 1999; pointer-events: none;
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 30%, var(--c, var(--tt-yellow)) 60%, transparent 70%);
    animation: tt-sparkle .8s ease-out forwards;
}
@keyframes tt-sparkle { to { transform: translate(var(--tx, 0), 24px) scale(0); opacity: 0; } }

/* Cards: reveal on scroll + 3D tilt */
.tt-reveal { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s ease, transform .7s cubic-bezier(.34, 1.4, .64, 1); transition-delay: var(--delay, 0ms); }
.tt-reveal.tt-in { opacity: 1; transform: none; }
.tt-tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; }
.tt-tilt:hover { box-shadow: 0 24px 50px rgba(123, 47, 247, .18); }

/* ================= LOGIN / REGISTER ================= */
.tt-auth {
    position: relative;
    min-height: calc(100vh - 160px);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff1f6 0%, #f3ecff 50%, #e9f8ff 100%);
    background-size: 200% 200%;
    animation: tt-bg 14s ease infinite;
}
@keyframes tt-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.tt-bubble {
    position: absolute; bottom: -120px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), var(--c) 70%);
    opacity: .45;
    animation: tt-bubble var(--dur, 14s) linear var(--delay, 0s) infinite;
}
@keyframes tt-bubble {
    0%   { transform: translate3d(0, 0, 0) scale(.8); }
    50%  { transform: translate3d(var(--dx, 30px), -55vh, 0) scale(1); }
    100% { transform: translate3d(0, -115vh, 0) scale(1.1); opacity: 0; }
}

.tt-auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 940px;
    display: grid; grid-template-columns: 1fr 1.1fr;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(43, 35, 80, .18);
    overflow: hidden;
    animation: tt-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tt-auth-card::before { /* Kenyan flag stripe */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
    background: linear-gradient(90deg, #000 0 25%, #fff 25% 27%, #BB0000 27% 73%, #fff 73% 75%, #006600 75%);
}

.tt-auth-side {
    position: relative;
    padding: 48px 36px;
    color: #fff;
    background: linear-gradient(160deg, var(--tt-pink), var(--tt-purple));
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    overflow: hidden;
}
.tt-auth-side h2 { color: #fff; font-family: Fredoka, sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 18px 0 8px; }
.tt-auth-side p { opacity: .92; margin: 0; max-width: 300px; }
.tt-auth-side .tt-perks { list-style: none; padding: 0; margin: 22px 0 0; text-align: left; }
.tt-auth-side .tt-perks li { margin: 8px 0; opacity: 0; animation: tt-slide-in .5s ease forwards; animation-delay: calc(var(--i) * 120ms + 500ms); }
@keyframes tt-slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* Mascot that reacts to the form */
.tt-mascot {
    font-size: 88px; line-height: 1;
    width: 140px; height: 140px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); border-radius: 50%;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25);
    animation: tt-bob 3s ease-in-out infinite;
    user-select: none;
}
.tt-mascot.tt-react { animation: tt-jelly .6s ease, tt-bob 3s ease-in-out .6s infinite; }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tt-auth-side .tt-deco { position: absolute; font-size: 28px; opacity: .5; animation: tt-float 6s ease-in-out infinite alternate; }

.tt-auth-form { padding: 44px 40px; }
.tt-auth-form h1 { font-family: Fredoka, sans-serif; font-size: 1.9rem; color: var(--tt-ink); margin-bottom: 4px; }
.tt-auth-form .tt-sub { color: #6b6880; margin-bottom: 22px; }
.tt-auth-form .form-control {
    border-radius: 14px; padding: .8rem 1rem; border: 2px solid #ece8f6; background: #fbfaff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tt-auth-form .form-control:focus { border-color: var(--tt-purple); box-shadow: 0 0 0 4px rgba(123, 47, 247, .12); background: #fff; }
.tt-auth-form .form-control.tt-valid { border-color: var(--tt-green); }
.tt-field { position: relative; }
.tt-field .tt-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(0); color: var(--tt-green); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.tt-field .form-control.tt-valid ~ .tt-ok { transform: translateY(-50%) scale(1); }
.tt-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #8a86a0; width: 40px; height: 40px; border-radius: 10px;
}
.tt-eye:hover, .tt-eye:focus-visible { color: var(--tt-purple); background: #f1ecff; outline: none; }
.tt-caps { display: none; font-size: .82rem; color: #b45309; margin-top: 6px; }
.tt-caps.tt-show { display: block; animation: tt-pop .3s ease; }

/* Password strength meter */
.tt-strength { height: 8px; border-radius: 99px; background: #eee9f8; margin-top: 10px; overflow: hidden; }
.tt-strength > span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .4s cubic-bezier(.34, 1.4, .64, 1), background .3s ease; }
.tt-strength-label { font-size: .82rem; margin-top: 6px; color: #6b6880; min-height: 1.2em; }
.tt-checks { list-style: none; padding: 0; margin: 8px 0 0; font-size: .82rem; color: #8a86a0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tt-checks li::before { content: "○"; margin-right: 6px; }
.tt-checks li.tt-met { color: var(--tt-green); }
.tt-checks li.tt-met::before { content: "●"; }

.tt-submit {
    border-radius: 999px; padding: .85rem; font-weight: 600; font-size: 1.05rem; border: 0;
    background: linear-gradient(90deg, var(--tt-pink), var(--tt-purple)); background-size: 200% 100%;
    color: #fff; transition: background-position .4s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(255, 72, 128, .3);
}
.tt-submit:hover { background-position: 100% 0; color: #fff; transform: translateY(-2px); }
.tt-submit:disabled { opacity: .8; transform: none; }
.tt-submit .tt-spin { display: none; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: tt-spin .7s linear infinite; margin-right: 8px; vertical-align: -3px; }
.tt-submit.tt-loading .tt-spin { display: inline-block; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt-shake { animation: tt-shake .45s ease; }
@keyframes tt-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

@media (max-width: 767.98px) {
    .tt-auth { padding: 24px 12px; min-height: auto; }
    .tt-auth-card { grid-template-columns: 1fr; border-radius: 24px; }
    .tt-auth-side { padding: 32px 24px 26px; }
    .tt-auth-side .tt-perks,
    .tt-auth-side .tt-deco { display: none; }
    .tt-mascot { font-size: 60px; width: 96px; height: 96px; }
    .tt-auth-form { padding: 28px 22px 32px; }
}

/* ================= Reduced motion: keep it calm ================= */
@media (prefers-reduced-motion: reduce) {
    .tt-floaties, .tt-bubble, .tt-sparkle, .tt-burst, .tt-auth-side .tt-deco { display: none !important; }
    .tt-word, .tt-pop-in, .tt-reveal, .tt-auth-side .tt-perks li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .tt-auth, .tt-mascot, .tt-wave, .tt-auth-card { animation: none !important; }
}