/* ChildDev custom styles */

/* ---- Floating sparkle stars (landing page decoration) ---- */
@keyframes floatUp {
    0%   { transform: translateY(0)    rotate(0deg)   scale(1);   opacity: 0.7; }
    50%  { transform: translateY(-18px) rotate(15deg)  scale(1.1); opacity: 1;   }
    100% { transform: translateY(0)    rotate(0deg)   scale(1);   opacity: 0.7; }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50%       { opacity: 1;   transform: scale(1.15); }
}
@keyframes orbit {
    0%   { transform: rotate(0deg)   translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
.sparkle-float { animation: floatUp 3.8s ease-in-out infinite; }
.sparkle-float:nth-child(2) { animation-delay: .6s;  animation-duration: 4.2s; }
.sparkle-float:nth-child(3) { animation-delay: 1.2s; animation-duration: 3.5s; }
.sparkle-float:nth-child(4) { animation-delay: 1.8s; animation-duration: 4.6s; }
.sparkle-float:nth-child(5) { animation-delay: 2.4s; animation-duration: 3.9s; }
.sparkle-twinkle { animation: twinkle 2.2s ease-in-out infinite; }
.sparkle-twinkle:nth-child(2) { animation-delay: .4s;  animation-duration: 2.8s; }
.sparkle-twinkle:nth-child(3) { animation-delay: .9s;  animation-duration: 1.9s; }
.sparkle-twinkle:nth-child(4) { animation-delay: 1.5s; animation-duration: 2.5s; }

/* Hero section floating stars container */
.hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-stars span {
    position: absolute;
    font-size: 1rem;
    animation: floatUp 4s ease-in-out infinite;
    user-select: none;
}
.hero-stars span:nth-child(1) { top: 12%; left:  8%; animation-delay: 0s;    font-size: 1.2rem; }
.hero-stars span:nth-child(2) { top: 18%; right: 10%; animation-delay: .7s;   font-size: 0.9rem; }
.hero-stars span:nth-child(3) { top: 55%; left:  3%; animation-delay: 1.3s;  font-size: 0.8rem; }
.hero-stars span:nth-child(4) { top: 70%; right:  5%; animation-delay: 2.1s;  font-size: 1.1rem; }
.hero-stars span:nth-child(5) { top: 35%; left: 90%; animation-delay: 0.4s;  font-size: 0.7rem; }
.hero-stars span:nth-child(6) { top: 80%; left: 15%; animation-delay: 1.8s;  font-size: 0.9rem; }

/* Pulse ring animation for stat icons */
@keyframes iconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(57,73,171,.3); }
    50%       { box-shadow: 0 0 0 10px rgba(57,73,171,0); }
}
.stat-icon-pulse { animation: iconPulse 2.5s ease-in-out infinite; border-radius: 50%; }

/* Shimmer sweep on hero section */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0;  }
}
.hero-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.04) 40%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 60%,
        transparent 100%);
    background-size: 800px 100%;
    animation: shimmer 4s linear infinite;
    border-radius: inherit;
}

/* Smooth page transitions */
.mud-main-content { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Fun card hover lift */
.mud-card { transition: transform .18s ease, box-shadow .18s ease; }
.mud-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(57,73,171,.15) !important; }

/* Gradient hero background */
.hero-section {
    background: linear-gradient(135deg, rgba(57,73,171,.08) 0%, rgba(255,143,0,.06) 100%);
    border-radius: 24px;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(57,73,171,.12) 0%, transparent 70%);
    border-radius: 50%;
}

/* Stat cards with colored left border accent */
.stat-card-goals  { border-left: 4px solid #3949AB; }
.stat-card-todos  { border-left: 4px solid #E53935; }
.stat-card-journal{ border-left: 4px solid #43A047; }

/* Feature cards on landing page */
.feature-card {
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease;
    background: linear-gradient(145deg, rgba(57,73,171,.04) 0%, rgba(57,73,171,.08) 100%);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(57,73,171,.18) !important; }

/* Goal cards */
.goal-card-active { border-top: 3px solid #3949AB; }
.goal-card-stale  { border-top: 3px solid #F9A825; }

/* Progress recency heat indicator (left border) */
.goal-heat-new  { border-left: 4px solid #2196F3 !important; } /* blue  — no notes yet */
.goal-heat-hot  { border-left: 4px solid #4CAF50 !important; } /* green — updated recently */
.goal-heat-warm { border-left: 4px solid #FF9800 !important; } /* amber — moderate */
.goal-heat-cold { border-left: 4px solid #F44336 !important; } /* red   — stale 14+ days */

/* Growth graphic container */
.growth-graphic { display: flex; justify-content: center; align-items: center; }
.growth-graphic svg { max-width: 100%; height: auto; filter: drop-shadow(0 6px 16px rgba(57,73,171,.15)); }

/* Bouncy star animation */
@keyframes starPop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}
.star-pop { animation: starPop .4s ease forwards; }

/* Add goal dashed card hover */
.add-goal-card { transition: background .15s ease; }
.add-goal-card:hover { background: rgba(57,73,171,.05) !important; }

/* Celebration emoji bounce */
@keyframes celebBounce {
    0%, 100% { transform: translateY(0);   }
    40%       { transform: translateY(-12px); }
    60%       { transform: translateY(-6px);  }
}
.celeb-emoji { display: inline-block; animation: celebBounce .8s ease infinite; }

/* Confetti burst on goal completion */
@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    80%  { opacity: .7; }
    100% { transform: translateY(90px) rotate(540deg) scale(.4); opacity: 0; }
}
.confetti-burst { position: relative; overflow: hidden; height: 50px; margin-bottom: 8px; }
.confetti-burst span {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 3px;
    animation: confettiFall 1.4s ease-in forwards;
    top: 0;
}
.confetti-burst span:nth-child(1)  { left:  8%; background:#F44336; animation-delay:.00s; }
.confetti-burst span:nth-child(2)  { left: 18%; background:#FF9800; animation-delay:.08s; border-radius:50%; }
.confetti-burst span:nth-child(3)  { left: 28%; background:#FFEB3B; animation-delay:.15s; }
.confetti-burst span:nth-child(4)  { left: 38%; background:#4CAF50; animation-delay:.05s; border-radius:50%; }
.confetti-burst span:nth-child(5)  { left: 48%; background:#2196F3; animation-delay:.20s; }
.confetti-burst span:nth-child(6)  { left: 58%; background:#9C27B0; animation-delay:.10s; border-radius:50%; }
.confetti-burst span:nth-child(7)  { left: 68%; background:#FF5722; animation-delay:.18s; }
.confetti-burst span:nth-child(8)  { left: 78%; background:#00BCD4; animation-delay:.03s; border-radius:50%; }
.confetti-burst span:nth-child(9)  { left: 88%; background:#E91E63; animation-delay:.12s; }
.confetti-burst span:nth-child(10) { left: 13%; background:#8BC34A; animation-delay:.22s; border-radius:50%; }
.confetti-burst span:nth-child(11) { left: 43%; background:#FF4081; animation-delay:.07s; }
.confetti-burst span:nth-child(12) { left: 73%; background:#FFC107; animation-delay:.16s; border-radius:50%; }

/* Level progress bar fill animation (Blazor triggers value change after first render) */
.level-anim-bar .mud-progress-linear-bar { transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* ---- Print styles ---- */
@media print {
    /* Hide nav, toolbar, buttons, modals, FAB, snackbars */
    .mud-appbar,
    .mud-nav-menu,
    .mud-drawer,
    .mud-drawer-overlay,
    nav,
    .mud-button,
    .mud-icon-button,
    .mud-fab,
    .mud-snackbar-container,
    .mud-overlay,
    .mud-dialog-container,
    #components-reconnect-modal,
    [aria-label="Add progress note"],
    [aria-label="Add todo"],
    [title="Add todo"] { display: none !important; }

    /* Remove card hover shadows and animations in print */
    .mud-card, .mud-paper { box-shadow: none !important; border: 1px solid #ddd !important; }
    .mud-card { transform: none !important; page-break-inside: avoid; }

    /* Improve text contrast for print */
    body, .mud-typography { color: #000 !important; }
    .mud-typography-body2, .mud-typography-caption { color: #333 !important; }

    /* Make links visible */
    a[href]:after { content: none; }

    /* Page breaks */
    .mud-timeline-item { page-break-inside: avoid; }
    h5, h6 { page-break-after: avoid; }

    /* Remove background gradients */
    .mud-paper { background: #fff !important; }

    /* Ensure full width */
    .mud-main-content { animation: none !important; padding: 0 !important; }
    .mud-grid { width: 100% !important; }
}

/* ---- Blazor Server custom reconnect modal ---- */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#components-reconnect-modal.components-reconnect-show {
    display: flex;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-spin-icon,
#components-reconnect-modal.components-reconnect-failed .reconnect-dots,
#components-reconnect-modal.components-reconnect-failed .reconnect-icon-ring,
#components-reconnect-modal.components-reconnect-failed > .reconnect-card > .reconnect-title:first-of-type,
#components-reconnect-modal.components-reconnect-failed > .reconnect-card > .reconnect-subtitle:first-of-type {
    display: none;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-content { display: flex; }

.reconnect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
}
.reconnect-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    min-width: 280px;
    max-width: 360px;
}
.reconnect-icon-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(57,73,171,.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.reconnect-spin-icon {
    font-size: 2rem;
    color: #3949AB;
    animation: reconnectSpin 1.2s linear infinite;
}
@keyframes reconnectSpin { to { transform: rotate(360deg); } }

.reconnect-title {
    font-family: Roboto, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #212121;
    margin: 0 0 .4rem;
}
.reconnect-subtitle {
    font-family: Roboto, sans-serif;
    font-size: .875rem;
    color: #757575;
    margin: 0 0 1.2rem;
}
.reconnect-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.reconnect-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3949AB;
    animation: reconnectDot 1.4s ease-in-out infinite;
}
.reconnect-dots span:nth-child(2) { animation-delay: .2s; }
.reconnect-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes reconnectDot { 0%,80%,100% { transform: scale(0.5); opacity:.4; } 40% { transform: scale(1); opacity:1; } }

.reconnect-failed-content {
    display: none;
    flex-direction: column;
    align-items: center;
}
.reconnect-failed-icon {
    font-size: 3rem;
    color: #E53935;
    margin-bottom: .75rem;
}
.reconnect-btn {
    display: block;
    width: 100%;
    margin: .4rem 0 0;
    padding: .6rem 1.2rem;
    border-radius: 10px;
    font-family: Roboto, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: #3949AB;
    color: #fff;
    transition: background .15s;
}
.reconnect-btn:hover { background: #303f9f; }
.reconnect-btn-secondary {
    background: transparent;
    color: #3949AB;
    border: 1.5px solid #3949AB;
    margin-top: .35rem;
}
.reconnect-btn-secondary:hover { background: rgba(57,73,171,.08); }