/* ─────────────────────────────────────────────────────────
   优点TV — Hero & landing animations
   - Respects prefers-reduced-motion
   - Pure CSS, no external libs
   ───────────────────────────────────────────────────────── */

/* ── Animated aurora-style background overlay ── */
.page-bg {
    position: relative;
}

.page-bg::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40rem 30rem at 12% 18%, rgba(99,102,241,0.12), transparent 60%),
        radial-gradient(36rem 28rem at 88% 22%, rgba(168,85,247,0.10), transparent 60%),
        radial-gradient(50rem 30rem at 50% 100%, rgba(59,130,246,0.10), transparent 60%);
    filter: blur(40px);
    animation: aurora-drift 22s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.05); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}

/* keep header & main content above the aurora */
header, main, .container, footer {
    position: relative;
    z-index: 1;
}

/* ── Floating particles (CSS-only, no JS needed) ── */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-particles span {
    position: absolute;
    bottom: -20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(168,85,247,0.4));
    opacity: 0;
    animation: float-up 14s linear infinite;
    filter: blur(0.5px);
}

.hero-particles span:nth-child(1)  { left:  6%; width:  6px; height:  6px; animation-delay:  0s; animation-duration: 16s; }
.hero-particles span:nth-child(2)  { left: 14%; width: 10px; height: 10px; animation-delay:  2s; animation-duration: 18s; }
.hero-particles span:nth-child(3)  { left: 22%; width:  4px; height:  4px; animation-delay:  4s; animation-duration: 12s; }
.hero-particles span:nth-child(4)  { left: 32%; width:  8px; height:  8px; animation-delay:  6s; animation-duration: 20s; }
.hero-particles span:nth-child(5)  { left: 44%; width:  5px; height:  5px; animation-delay:  1s; animation-duration: 14s; }
.hero-particles span:nth-child(6)  { left: 58%; width:  9px; height:  9px; animation-delay:  3s; animation-duration: 17s; }
.hero-particles span:nth-child(7)  { left: 68%; width:  6px; height:  6px; animation-delay:  5s; animation-duration: 15s; }
.hero-particles span:nth-child(8)  { left: 78%; width:  7px; height:  7px; animation-delay:  7s; animation-duration: 19s; }
.hero-particles span:nth-child(9)  { left: 86%; width:  4px; height:  4px; animation-delay:  2s; animation-duration: 13s; }
.hero-particles span:nth-child(10) { left: 94%; width:  8px; height:  8px; animation-delay:  9s; animation-duration: 21s; }

@keyframes float-up {
    0%   { transform: translateY(0) translateX(0) scale(0.4); opacity: 0; }
    10%  { opacity: 0.7; }
    50%  { transform: translateY(-50vh) translateX(20px) scale(1); opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-100vh) translateX(-10px) scale(0.6); opacity: 0; }
}

/* ── Logo entrance: icon swirl + title letter cascade ── */
.hero-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-logo-icon {
    width: 2.75rem;
    height: 2.75rem;
    color: #4f46e5;
    transform: scale(0.5) rotate(-180deg);
    opacity: 0;
    animation: icon-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
    filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.25));
}

@keyframes icon-pop {
    0%   { transform: scale(0.4) rotate(-180deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(15deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}

.hero-logo-icon:hover {
    animation: icon-wobble 0.6s ease;
}

@keyframes icon-wobble {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-8deg) scale(1.08); }
    50%      { transform: rotate(8deg) scale(1.08); }
    75%      { transform: rotate(-4deg) scale(1.04); }
}

.hero-title {
    display: inline-flex;
    line-height: 1;
    /* Fallback color so text is visible even before the shimmer gradient kicks in */
    color: #4f46e5;
}

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(-90deg);
    animation: letter-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform-origin: bottom center;
    will-change: transform, opacity;
    /* Each letter carries its own gradient so background-clip:text clips
       per-character (parent-level clipping doesn't reach inline children). */
    background: linear-gradient(
        100deg,
        #4f46e5 0%,
        #6366f1 30%,
        #c084fc 50%,
        #6366f1 70%,
        #4f46e5 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title.shimmer .letter {
    animation:
        letter-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        shimmer-sweep 6s linear 1.6s infinite;
}

.hero-title .letter:nth-child(1) { animation-delay: 0.30s; }
.hero-title .letter:nth-child(2) { animation-delay: 0.42s; }
.hero-title .letter:nth-child(3) { animation-delay: 0.54s; }
.hero-title .letter:nth-child(4) { animation-delay: 0.66s; }
.hero-title .letter:nth-child(5) { animation-delay: 0.78s; }
.hero-title .letter:nth-child(6) { animation-delay: 0.90s; }

@keyframes letter-rise {
    0%   { opacity: 0; transform: translateY(40px) rotateX(-90deg) scale(0.9); }
    60%  { opacity: 1; transform: translateY(-4px) rotateX(8deg)   scale(1.03); }
    100% { opacity: 1; transform: translateY(0)    rotateX(0)      scale(1); }
}

/* Continuous shimmer sweep — applied per-letter (see .hero-title.shimmer .letter above) */

@keyframes shimmer-sweep {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

/* ── Tagline typewriter ── */
.hero-tagline {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid transparent;
    width: 0;
    max-width: 100%;
    opacity: 0;
    animation:
        tagline-fade 0.4s ease 1.4s forwards,
        tagline-type 1.6s steps(16, end) 1.5s forwards,
        tagline-caret 0.7s step-end 1.5s 6;
}

@keyframes tagline-fade {
    to { opacity: 1; }
}

@keyframes tagline-type {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes tagline-caret {
    50% { border-color: #6366f1; }
}

/* ── Search box entrance & focus glow ── */
#searchArea {
    animation: search-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

@keyframes search-rise {
    0%   { opacity: 0; transform: translateY(30px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

#searchArea > div > div:first-child {
    position: relative;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

#searchArea > div > div:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.18);
}

/* Animated rotating gradient border on focus */
#searchArea > div > div:first-child::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 0.6rem;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        #6366f1 25%,
        #c084fc 50%,
        #6366f1 75%,
        transparent 100%
    );
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    animation: spin-border 4s linear infinite;
    animation-play-state: paused;
}

#searchArea > div > div:first-child:focus-within::before {
    opacity: 0.85;
    animation-play-state: running;
}

@keyframes spin-border {
    to { transform: rotate(360deg); }
}

#searchInput {
    transition: letter-spacing 0.2s ease;
}

#searchInput:focus {
    letter-spacing: 0.01em;
}

/* Subtle pulse on the search button */
#searchArea button[onclick*="search()"] {
    position: relative;
    overflow: hidden;
}

#searchArea button[onclick*="search()"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

#searchArea button[onclick*="search()"]:hover::after {
    transform: translateX(100%);
}

/* ── Stagger fade-in for cards as they enter view ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Hover lift for douban cards (works alongside existing hover) */
#douban-results > div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#douban-results > div:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.18);
}

/* Tap ripple for the home/return button */
@keyframes ripple-pop {
    0%   { transform: scale(0.95); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#searchArea button[aria-label="返回首页"]:active {
    animation: ripple-pop 0.3s ease;
}

/* ── Reduced motion: turn it all off ── */
@media (prefers-reduced-motion: reduce) {
    .page-bg::before,
    .hero-particles span,
    .hero-logo-icon,
    .hero-title .letter,
    .hero-title.shimmer .letter,
    .hero-tagline,
    #searchArea,
    #searchArea > div > div:first-child::before,
    #searchArea button[onclick*="search()"]::after,
    .reveal {
        animation: none !important;
        transition: none !important;
    }
    .hero-logo-icon { transform: none; opacity: 1; }
    .hero-title .letter {
        opacity: 1;
        transform: none;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: #4f46e5;
    }
    .hero-tagline { width: auto; opacity: 1; border: 0; }
    .reveal { opacity: 1; transform: none; }
}