/* ============================================================
   Hero — anime sakura pastel profile card (kawaii / soft)
   Rounded friendly type, soft pink palette, pillowy shadow,
   gentle glow + float. No glassmorphism / 3D-tilt / gradient
   text. Matches the site's existing rounded fonts & white cards.
   ============================================================ */

:root {
    --hero-rose:   #ff7eab;   /* soft sakura rose */
    --hero-deep:   #ff6b9d;   /* accent */
    --hero-soft:   #ffd9e4;   /* soft border pink */
    --hero-blush:  #fff3f7;   /* faint pink tint */
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 0 3rem;
    padding: 0.5rem 0 0;
}

/* ---------- Card: soft white, pillowy, rounded ---------- */
.hero-card {
    position: relative;
    width: 100%;
    padding: 2.8rem 3rem;
    border-radius: 26px;
    display: flex;
    align-items: center;
    gap: 2.75rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--hero-soft);
    box-shadow:
        0 14px 40px rgba(255, 150, 185, 0.18),
        inset 0 0 0 6px rgba(255, 243, 247, 0.6);
    overflow: hidden;
    /* gentle entrance */
    opacity: 0;
    transform: translateY(28px);
    animation: heroIn .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* cute floating sparkles in the corners */
.hero-deco span {
    position: absolute;
    font-size: 1.3rem;
    opacity: .55;
    pointer-events: none;
    animation: heroTwinkle 4s ease-in-out infinite;
}
.hero-deco .d1 { top: 14px;  left: 18px;  animation-delay: 0s;   }
.hero-deco .d2 { top: 20px;  right: 24px; animation-delay: 1.1s; font-size: 1rem; }
.hero-deco .d3 { bottom: 16px; left: 30px; animation-delay: 2.1s; font-size: 1rem; }
.hero-deco .d4 { bottom: 22px; right: 22px; animation-delay: .6s; }
@keyframes heroTwinkle {
    0%, 100% { transform: translateY(0) scale(.9);  opacity: .35; }
    50%      { transform: translateY(-8px) scale(1.1); opacity: .8; }
}

/* ---------- Avatar ---------- */
.hero-avatar-wrap { flex-shrink: 0; }
.hero-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 180px; height: 180px;
    margin: 0;
    border: none !important;
    animation: heroBob 5.5s ease-in-out infinite;
}
.hero-avatar img {
    position: relative;
    z-index: 2;
    width: 150px; height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 6px 20px rgba(255, 126, 171, 0.30);
}
.hero-avatar-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #ffd1e0, #ffb7c5, #e9d7ff, #ffc9dd, #ffd1e0);
    animation: heroSpin 14s linear infinite;
    z-index: 1;
    -webkit-mask: radial-gradient(circle, transparent 74px, #000 76px);
            mask: radial-gradient(circle, transparent 74px, #000 76px);
}
.hero-avatar-glow {
    position: absolute; inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,150,190,0.40), rgba(255,150,190,0) 70%);
    filter: blur(8px);
    z-index: 0;
    animation: heroPulse 4s ease-in-out infinite;
}
@keyframes heroSpin  { to { transform: rotate(360deg); } }
@keyframes heroPulse { 0%,100%{opacity:.4;transform:scale(.96)} 50%{opacity:.75;transform:scale(1.06)} }
@keyframes heroBob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---------- Text ---------- */
.hero-info { flex: 1; min-width: 0; }

.hero-name {
    margin: 0 0 .35rem;
    font-family: 'M PLUS Rounded 1c', 'Quicksand', sans-serif;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--hero-deep);
    text-shadow: 0 2px 10px rgba(255, 150, 190, 0.35);
    animation: heroGlow 5s ease-in-out infinite;
}
@keyframes heroGlow {
    0%,100% { text-shadow: 0 2px 10px rgba(255,150,190,0.30); }
    50%     { text-shadow: 0 2px 18px rgba(255,150,190,0.55); }
}

.hero-handle, .hero-tagline, .hero-bio, .hero-cta {
    opacity: 0;
    transform: translateY(12px);
    animation: heroRise .7s ease forwards;
}
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

.hero-handle {
    margin: 0 0 .55rem;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--hero-rose);
    animation-delay: .5s;
}
.hero-tagline {
    margin: 0 0 1rem;
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
    font-weight: 600;
    letter-spacing: .04em;
    color: #b58aa0;
    animation-delay: .65s;
}
.hero-bio {
    margin: 0 0 1.6rem;
    max-width: 600px;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--sakura-text, #5a4a5a);
    animation-delay: .8s;
}

/* ---------- CTA buttons (soft pastel pills) ---------- */
.hero-cta {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    animation-delay: .95s;
}
.hero-btn {
    display: inline-block;
    padding: .7rem 1.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 2px solid var(--hero-soft);
    color: var(--hero-rose);
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 150, 185, 0.3);
    background: var(--hero-blush);
}
.hero-btn-primary {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(135deg, #ffa6c4, #ff8cb3);
    box-shadow: 0 6px 18px rgba(255, 140, 179, 0.4);
}
.hero-btn-primary:hover {
    background: linear-gradient(135deg, #ff97ba, #ff7ba6);
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 736px) {
    .hero { margin-bottom: 2rem; }
    .hero-card {
        flex-direction: column;
        text-align: center;
        gap: 1.4rem;
        padding: 2.2rem 1.4rem;
    }
    .hero-info { text-align: center; }
    .hero-bio { margin: 0 auto 1.4rem; }
    .hero-cta { justify-content: center; }
    .hero-avatar { width: 132px; height: 132px; }
    .hero-avatar img { width: 110px; height: 110px; }
    .hero-avatar-ring { -webkit-mask: radial-gradient(circle, transparent 53px, #000 55px); mask: radial-gradient(circle, transparent 53px, #000 55px); }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-card, .hero-deco span, .hero-avatar, .hero-avatar-ring,
    .hero-avatar-glow, .hero-name, .hero-handle, .hero-tagline,
    .hero-bio, .hero-cta {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}