/* ═══════════════════════════════════════════════════════════
   钢之炼金术师 · Fullmetal Alchemist
   炼金金 #C9A84C / 深绯红 #8B1A1A / 钢灰 #2D2D2D / 暗底 #1A1A1A
   羊皮纸 #F5E6D0 / 暖白 #FFF8F0
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Cinzel:wght@400;600;700;900&display=swap');

:root {
    --gold: #C9A84C; --gold-light: #E8D48B; --gold-dark: #A6862E;
    --crimson: #8B1A1A; --crimson-light: #B22222; --crimson-dark: #5C0E0E;
    --steel: #2D2D2D; --steel-light: #4A4A4A; --steel-dark: #1A1A1A;
    --parchment: #F5E6D0; --warm-white: #FFF8F0;
    --text: #E0D8CC; --text-dim: #9E9488;
    --font-serif: 'Noto Serif SC', 'Cinzel', Georgia, serif;
    --font-sans: 'Noto Sans SC', sans-serif;
    --font-title: 'Cinzel', 'Noto Serif SC', serif;
    --border-gold: 1px solid rgba(201,168,76,0.25);
    --shadow-gold: 0 0 30px rgba(201,168,76,0.08);
    --glow-gold: 0 0 20px rgba(201,168,76,0.2);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

body {
    font-family: var(--font-serif); background: var(--steel-dark);
    color: var(--text); line-height:1.8; min-height:100vh;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(139,26,26,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(201,168,76,0.04) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='rgba(201,168,76,0.03)'/%3E%3C/svg%3E");
}

a { color:var(--gold); text-decoration:none; transition:color .3s,text-shadow .3s; }
a:hover { color:var(--gold-light); text-shadow:0 0 8px rgba(201,168,76,0.3); }
img { max-width:100%; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--steel-dark); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--crimson),var(--gold-dark)); border-radius:3px; }

/* ── Navbar ───────────────────────────────────────── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(26,26,26,0.95); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(201,168,76,0.15);
    transition:all .3s;
}
.navbar.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.5); }
.navbar-container {
    max-width:1200px; margin:0 auto; display:flex;
    align-items:center; justify-content:space-between; height:64px; padding:0 1.5rem;
}
.navbar-brand {
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-title); font-size:1.2rem; font-weight:700;
    color:var(--gold); letter-spacing:2px;
}
.brand-symbol {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--gold); border-radius:50%; font-size:1.2rem;
    position:relative;
}
.brand-symbol::before { content:''; position:absolute; inset:-3px; border:1px solid rgba(201,168,76,0.3); border-radius:50%; }
.brand-symbol::after { content:''; position:absolute; inset:-6px; border:1px solid rgba(201,168,76,0.15); border-radius:50%; }

.navbar-links { display:flex; gap:1.75rem; list-style:none; align-items:center; }
.navbar-links a {
    font-family:var(--font-sans); font-size:.88rem; color:var(--text-dim);
    letter-spacing:1px; padding:4px 0; border-bottom:2px solid transparent;
    transition:all .3s; text-transform:uppercase;
}
.navbar-links a:hover, .navbar-links a.active { color:var(--gold); border-bottom-color:var(--gold); }
.menu-toggle { display:none; background:none; border:none; color:var(--gold); font-size:1.5rem; cursor:pointer; }
.mobile-menu { display:none; }

/* ── Hero ─────────────────────────────────────────── */
.hero {
    position:relative; min-height:85vh; display:flex;
    align-items:center; justify-content:center; text-align:center;
    padding:120px 1.5rem 80px; overflow:hidden;
}
.hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 30% 50%, rgba(139,26,26,0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(201,168,76,0.06) 0%, transparent 50%);
}
.hero-particles { position:absolute; inset:0; pointer-events:none; }
.hero-content { position:relative; z-index:1; max-width:750px; }

/* Transmutation Circle */
.tm-circle {
    position:relative; width:180px; height:180px; margin:0 auto 2rem;
    opacity:0.2; pointer-events:none;
}
.tm-circle::before { content:''; position:absolute; inset:0; border:2px solid var(--gold); border-radius:50%; }
.tm-circle::after { content:''; position:absolute; inset:15px; border:1px solid var(--gold); border-radius:50%; }
.tm-circle-inner { position:absolute; inset:35px; border:1px solid rgba(201,168,76,0.5); border-radius:50%; }
.tm-circle-cross { position:absolute; top:0; left:50%; width:1px; height:100%; background:rgba(201,168,76,0.2); transform:translateX(-50%); }
.tm-circle-cross-h { position:absolute; top:50%; left:0; width:100%; height:1px; background:rgba(201,168,76,0.2); transform:translateY(-50%); }
@keyframes tm-rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.tm-circle { animation:tm-rotate 60s linear infinite; }

.hero-title {
    font-family:var(--font-title); font-size:clamp(2rem, 5vw, 3.5rem);
    font-weight:900; color:var(--gold); margin-bottom:1rem;
    letter-spacing:4px; text-shadow:0 0 40px rgba(201,168,76,0.3);
}
.hero-subtitle {
    font-size:1.1rem; color:var(--text-dim); margin-bottom:2rem; letter-spacing:2px;
}
.hero-quote {
    font-size:1.2rem; color:var(--crimson-light); font-style:italic;
    padding:1.5rem 2rem; margin-bottom:2rem;
    border-left:3px solid var(--gold); border-right:3px solid var(--gold);
    background:rgba(139,26,26,0.06); position:relative;
}
.hero-quote::before { content:'\u300c'; position:absolute; top:-8px; left:8px; font-size:2.5rem; color:var(--gold); opacity:.4; font-style:normal; }
.hero-quote::after { content:'\u300d'; position:absolute; bottom:-20px; right:8px; font-size:2.5rem; color:var(--gold); opacity:.4; font-style:normal; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 28px; font-family:var(--font-sans); font-size:.9rem; font-weight:500;
    letter-spacing:1px; border-radius:2px; cursor:pointer;
    transition:all .3s; text-transform:uppercase; border:1px solid transparent;
    background:transparent;
}
.btn-primary {
    background:linear-gradient(135deg, var(--crimson), var(--crimson-light));
    border-color:var(--crimson-light); color:var(--warm-white);
    box-shadow:0 4px 20px rgba(139,26,26,0.3);
}
.btn-primary:hover {
    box-shadow:0 6px 30px rgba(139,26,26,0.5);
    color:var(--warm-white); text-shadow:none;
}
.btn-outline { border-color:var(--gold); color:var(--gold); }
.btn-outline:hover { background:rgba(201,168,76,0.08); box-shadow:var(--glow-gold); }
.btn-sm { padding:6px 14px; font-size:.8rem; }
.btn-danger { border-color:var(--crimson); color:var(--crimson-light); }
.btn-danger:hover { background:rgba(139,26,26,0.15); }

/* ── Sections ──────────────────────────────────────── */
.section { padding:80px 1.5rem; max-width:1200px; margin:0 auto; }
.section-dark { background:rgba(0,0,0,0.2); max-width:100%; padding:80px 0; }
.section-header { text-align:center; margin-bottom:50px; }
.section-title {
    font-family:var(--font-title); font-size:2.2rem; font-weight:700;
    color:var(--gold); letter-spacing:3px; margin-bottom:.75rem;
}
.section-line {
    width:80px; height:3px; margin:0 auto 1rem;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-desc { color:var(--text-dim); font-size:1rem; max-width:500px; margin:0 auto; }

/* ── Cards ─────────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.5rem; }
.card {
    background:rgba(45,45,45,0.4); border:var(--border-gold); border-radius:4px;
    overflow:hidden; transition:all .3s; position:relative;
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0; transition:opacity .3s; }
.card:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.4); border-color:rgba(201,168,76,0.4); }
.card:hover::before { opacity:1; }
.card-image { width:100%; height:180px; object-fit:cover; background:var(--steel); }
.card-body { padding:1.25rem; }
.card-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.tag {
    display:inline-block; padding:2px 10px; font-family:var(--font-sans);
    font-size:.7rem; color:var(--gold-light); border:1px solid rgba(201,168,76,0.25);
    border-radius:2px; text-transform:uppercase; letter-spacing:1px;
    transition:all .2s;
}
.tag:hover { background:rgba(201,168,76,0.1); }
.tag-active { background:rgba(201,168,76,0.15); border-color:var(--gold); }
.card-title { font-family:var(--font-serif); font-size:1.15rem; font-weight:700; color:var(--warm-white); margin-bottom:.5rem; line-height:1.4; }
.card-summary { color:var(--text-dim); font-size:.88rem; line-height:1.6; margin-bottom:.75rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--text-dim); padding-top:.75rem; border-top:1px solid rgba(201,168,76,0.08); }
.card-views { display:flex; align-items:center; gap:4px; }

/* ── Blog Detail ───────────────────────────────────── */
.blog-container { max-width:800px; margin:0 auto; padding:100px 1.5rem 60px; }
.blog-header { text-align:center; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:var(--border-gold); }
.blog-title { font-family:var(--font-title); font-size:2rem; color:var(--gold); letter-spacing:2px; }
.blog-meta { color:var(--text-dim); font-size:.85rem; margin-top:.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.blog-content { font-size:1.05rem; line-height:2; }
.blog-content h2, .blog-content h3 { font-family:var(--font-title); color:var(--gold); margin:2rem 0 1rem; letter-spacing:1px; }
.blog-content h2 { font-size:1.5rem; border-left:3px solid var(--gold); padding-left:1rem; }
.blog-content h3 { font-size:1.2rem; }
.blog-content p { margin-bottom:1.2rem; }
.blog-content blockquote { border-left:3px solid var(--crimson-light); padding:.75rem 1.25rem; margin:1.5rem 0; background:rgba(139,26,26,0.08); font-style:italic; color:var(--text-dim); border-radius:0 4px 4px 0; }
.blog-content code { background:var(--steel); padding:2px 6px; border-radius:3px; font-size:.88em; color:var(--gold-light); }
.blog-content pre { background:var(--steel); padding:1.25rem; border-radius:4px; overflow-x:auto; margin:1.5rem 0; border:var(--border-gold); }
.blog-content pre code { background:none; border:none; padding:0; color:var(--text); }
.blog-content img { border-radius:4px; border:var(--border-gold); margin:1.5rem auto; display:block; }
.blog-content ul, .blog-content ol { margin:1rem 0 1.5rem 2rem; }
.blog-content li { margin-bottom:.4rem; }
.blog-content a { border-bottom:1px dashed var(--gold); }
.blog-nav { display:flex; justify-content:space-between; margin-top:3rem; padding-top:1.5rem; border-top:var(--border-gold); }
.blog-nav-label { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }

/* ── About ─────────────────────────────────────────── */
.about-container { max-width:750px; margin:0 auto; padding:100px 1.5rem 60px; }
.about-header { text-align:center; margin-bottom:2.5rem; }
.about-avatar {
    width:140px; height:140px; border-radius:50%; border:3px solid var(--gold);
    box-shadow:var(--glow-gold); margin-bottom:1.25rem; object-fit:cover;
    background:var(--steel);
}
.about-name { font-family:var(--font-title); font-size:2rem; color:var(--gold); letter-spacing:3px; }
.about-bio { font-size:1.05rem; color:var(--text); text-align:center; margin-bottom:2.5rem; line-height:2; white-space:pre-wrap; }
.about-block { margin-bottom:2.5rem; }
.about-block h3 { font-family:var(--font-title); color:var(--gold); font-size:1.2rem; margin-bottom:1rem; border-left:3px solid var(--crimson-light); padding-left:1rem; letter-spacing:1px; }
.about-tags { display:flex; flex-wrap:wrap; gap:.6rem; }
.about-tag {
    padding:5px 16px; background:rgba(139,26,26,0.12); border:1px solid rgba(201,168,76,0.15);
    border-radius:20px; font-size:.85rem; color:var(--gold-light); transition:all .3s;
}
.about-tag:hover { background:rgba(139,26,26,0.25); border-color:var(--gold); }
.about-contact p { color:var(--text-dim); line-height:2.2; }
.timeline { position:relative; padding-left:1.5rem; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--crimson-light),var(--gold-dark)); }
.timeline-item { position:relative; margin-bottom:1.5rem; padding-left:1.25rem; }
.timeline-item::before { content:''; position:absolute; left:-1.5rem; top:.4rem; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(201,168,76,0.4); }
.timeline-year { font-family:var(--font-title); color:var(--gold); font-size:.9rem; letter-spacing:2px; }
.timeline-text { color:var(--text-dim); font-size:.9rem; margin-top:.2rem; }

/* ── Media / Social Cards ──────────────────────────── */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; }
.media-card {
    background:rgba(45,45,45,0.4); border:var(--border-gold);
    border-radius:4px; padding:1.75rem; text-align:center;
    transition:all .3s; position:relative; overflow:hidden;
}
.media-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.media-card:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,0.4); }
.media-icon { font-size:2.5rem; margin-bottom:.75rem; }
.media-name { font-family:var(--font-title); font-size:1.1rem; color:var(--gold); letter-spacing:2px; margin-bottom:.4rem; }
.media-desc { color:var(--text-dim); font-size:.85rem; line-height:1.6; margin-bottom:1rem; }
.media-qr { width:120px; height:120px; margin:.5rem auto; border:var(--border-gold); object-fit:contain; background:#fff; border-radius:4px; }

/* ── Footer ────────────────────────────────────────── */
.footer {
    background:rgba(0,0,0,0.3); border-top:1px solid rgba(201,168,76,0.1);
    padding:2rem 1.5rem; text-align:center;
}
.footer-line { width:80px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto 1.25rem; }
.footer-text { color:var(--text-dim); font-size:.8rem; letter-spacing:1px; }
.footer-icp { margin-top:.3rem; }
.footer-icp a { color:var(--text-dim); font-size:.75rem; }
.footer-icp a:hover { color:var(--gold); }

/* ── Pagination ────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:3rem; }
.pagination a, .pagination span {
    padding:8px 14px; border:1px solid rgba(201,168,76,0.15);
    border-radius:2px; font-family:var(--font-sans); font-size:.82rem;
    color:var(--text-dim); transition:all .3s;
}
.pagination a:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.05); }
.pagination .current { background:rgba(201,168,76,0.1); border-color:var(--gold); color:var(--gold); }

/* ── Admin Base ────────────────────────────────────── */
.admin-body { background:var(--steel-dark); font-family:var(--font-sans); }
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar {
    width:220px; background:rgba(30,30,30,0.95); border-right:var(--border-gold);
    padding:1.25rem .75rem; position:fixed; top:0; left:0; bottom:0;
    overflow-y:auto; z-index:100;
}
.admin-sidebar-title { font-family:var(--font-title); font-size:1rem; color:var(--gold); text-align:center; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid rgba(201,168,76,0.1); letter-spacing:1px; }
.admin-nav { list-style:none; }
.admin-nav a {
    display:block; padding:8px 12px; font-size:.82rem; color:var(--text-dim);
    border-left:2px solid transparent; border-radius:0 4px 4px 0;
    margin-bottom:2px; transition:all .2s; letter-spacing:.5px;
}
.admin-nav a:hover, .admin-nav a.active { color:var(--gold); border-left-color:var(--gold); background:rgba(201,168,76,0.05); }
.admin-main { margin-left:220px; padding:1.5rem; flex:1; min-width:0; }
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; padding-bottom:.75rem; border-bottom:var(--border-gold); flex-wrap:wrap; gap:.5rem; }
.admin-title { font-family:var(--font-title); font-size:1.3rem; color:var(--gold); letter-spacing:1px; }
.admin-user { color:var(--text-dim); font-size:.85rem; }

/* Admin Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:.75rem; margin-bottom:1.5rem; }
.stat-card { background:rgba(45,45,45,0.3); border:var(--border-gold); border-radius:4px; padding:1rem; text-align:center; }
.stat-number { font-family:var(--font-title); font-size:1.8rem; color:var(--gold); }
.stat-label { font-size:.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-top:.25rem; }

/* Admin Table */
.admin-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th, .admin-table td { padding:10px 12px; text-align:left; border-bottom:1px solid rgba(201,168,76,0.06); }
.admin-table th { font-family:var(--font-title); font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.admin-table td { color:var(--text-dim); }
.admin-table tr:hover td { background:rgba(201,168,76,0.02); }
.status-pub { color:var(--gold-light); } .status-draft { color:var(--text-dim); }

/* Admin Forms */
.admin-form { max-width:750px; }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-family:var(--font-title); font-size:.82rem; color:var(--gold); margin-bottom:.35rem; letter-spacing:.5px; }
.form-input, .form-select, .form-textarea {
    width:100%; padding:10px 12px; background:rgba(45,45,45,0.4);
    border:1px solid rgba(201,168,76,0.15); border-radius:2px;
    color:var(--text); font-family:var(--font-sans); font-size:.9rem;
    transition:border-color .3s, box-shadow .3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 12px rgba(201,168,76,0.08); }
.form-textarea { min-height:120px; resize:vertical; }
.form-textarea.tall { min-height:350px; font-family:'Courier New',monospace; line-height:1.6; }
.form-checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; }
.form-actions { display:flex; gap:.75rem; padding-top:1rem; border-top:var(--border-gold); }

/* Admin visitors list */
.visitor-list { max-height:400px; overflow-y:auto; }
.visitor-item { padding:8px 0; border-bottom:1px solid rgba(201,168,76,0.05); font-size:.8rem; color:var(--text-dim); }
.visitor-path { color:var(--gold-light); }
.visitor-time { color:var(--text-dim); }

/* Admin login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--steel-dark); background-image:radial-gradient(circle at 50% 50%, rgba(139,26,26,0.08) 0%, transparent 70%); }
.login-box { width:380px; padding:2.5rem; background:rgba(45,45,45,0.5); border:var(--border-gold); border-radius:4px; text-align:center; position:relative; }
.login-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.login-box .tm-circle { margin-bottom:1rem; }
.login-title { font-family:var(--font-title); font-size:1.5rem; color:var(--gold); letter-spacing:3px; margin-bottom:.25rem; }
.login-subtitle { color:var(--text-dim); font-size:.85rem; margin-bottom:1.5rem; }
.login-box .form-group { text-align:left; }
.login-box .btn { width:100%; justify-content:center; }

/* Flash */
.flash { padding:8px 14px; border-radius:2px; margin-bottom:.5rem; font-size:.85rem; border-left:3px solid; }
.flash-success { background:rgba(201,168,76,0.08); border-color:var(--gold); color:var(--gold-light); }
.flash-error { background:rgba(139,26,26,0.08); border-color:var(--crimson-light); color:var(--crimson-light); }
.flash-info { background:rgba(45,45,45,0.3); border-color:var(--steel-light); color:var(--text-dim); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:999; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--steel); border:var(--border-gold); border-radius:6px; padding:2rem; max-width:450px; width:90%; }

/* Breadcrumb */
.breadcrumb { display:flex; gap:.4rem; font-size:.8rem; color:var(--text-dim); margin-bottom:1rem; align-items:center; }
.breadcrumb a { color:var(--gold); }
.breadcrumb span { color:var(--text-dim); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:768px) {
    .navbar-links { display:none; }
    .menu-toggle { display:block; }
    .mobile-menu { display:block; position:fixed; top:64px; left:0; right:0; background:rgba(26,26,26,0.98); border-bottom:var(--border-gold); padding:1rem; z-index:999; }
    .mobile-menu a { display:block; padding:12px 0; color:var(--text-dim); font-size:.9rem; border-bottom:1px solid rgba(201,168,76,0.05); }
    .mobile-menu a:hover { color:var(--gold); }
    .card-grid { grid-template-columns:1fr; }
    .media-grid { grid-template-columns:1fr; }
    .admin-sidebar { display:none; }
    .admin-main { margin-left:0; }
    .admin-header { flex-direction:column; align-items:flex-start; }
    .blog-title { font-size:1.5rem; }
    .section-title { font-size:1.6rem; }
}

/* Animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation:fadeUp .6s ease both; }