/* styles.css
   统一主题样式：冰蓝 + 玻璃质感
   背景图片位置： images/shenli-aya.jpg （请将神里凌华图片放在该路径）
*/

:root{
    --bg-overlay-1: rgba(0,20,40,0.85);
    --bg-overlay-2: rgba(0,40,80,0.9);
    --accent-1: #4fc3f7;
    --accent-2: #29b6f6;
    --text-1: #e6f7ff;
    --muted: #b3e5fc;
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    color:var(--text-1);
    /* 优先尝试 jpg（如果你放置了真实照片），若没有则使用 svg 占位图 */
    /* 使用统一背景文件名 images/官方立绘/shenli-aya.jpg（已移动至对应相册文件夹） */
    background: linear-gradient(var(--bg-overlay-1), var(--bg-overlay-2)), url('images/官方立绘/shenli-aya.jpg'), url('images/shenli-aya.svg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px;margin:0 auto;padding:20px}

/* 通用导航 */
.navbar{
    background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(33,150,243,0.1));
    backdrop-filter: blur(12px);
    padding:1rem 0;position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(79,195,247,0.18)
}
.nav-container{display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.logo{font-size:2.1rem;font-weight:800;background:linear-gradient(45deg,var(--muted),var(--accent-1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;list-style:none;gap:1.25rem}
.nav-links a{color:var(--text-1);text-decoration:none;padding:.6rem 1rem;border-radius:20px;transition:all .25s ease;font-weight:600}
.nav-links a:hover{background:rgba(79,195,247,0.14);transform:translateY(-3px);box-shadow:0 6px 18px rgba(79,195,247,0.12)}

/* 活跃 / 当前页面样式 */
.nav-links a.active{
    background: linear-gradient(90deg, rgba(127,232,255,0.14), rgba(79,195,247,0.18));
    box-shadow: 0 8px 22px rgba(79,195,247,0.12);
    transform: translateY(-2px);
}

/* 微动画：下划线 */
.nav-links a::after{
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
    transition: width .28s ease;
    border-radius:2px;
    margin-top:6px;
}
.nav-links a:hover::after, .nav-links a.active::after{width:60%}

/* 英雄区 */
.hero{padding:110px 20px;text-align:center;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.45));pointer-events:none}
.hero .hero-inner{position:relative;z-index:2;max-width:920px;margin:0 auto;padding:0 16px}
.hero h1{font-size:3.6rem;margin-bottom:.6rem;background:linear-gradient(45deg,var(--muted),var(--accent-1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 6px 30px rgba(7,30,40,0.28)}
.hero p{font-size:1.05rem;color:var(--muted);margin-bottom:1.25rem}

/* CTA 更明显的微交互 */
.cta-button{position:relative;overflow:hidden}
.cta-button::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));opacity:0;transition:opacity .28s}
.cta-button:hover::after{opacity:1}
.cta-button{display:inline-block;padding:.9rem 1.8rem;border-radius:999px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#001;box-shadow:0 10px 30px rgba(41,182,246,0.18);text-decoration:none;font-weight:700}

/* 内容卡片 */
.content-section{background:linear-gradient(135deg, rgba(13,71,161,0.22), rgba(2,119,189,0.12));backdrop-filter:blur(16px);padding:48px;margin:40px 0;border-radius:16px;border:1px solid rgba(79,195,247,0.12);box-shadow:0 12px 34px rgba(0,0,0,0.32)}
.section-title{text-align:center;font-size:2.4rem;color:var(--muted);margin-bottom:1.5rem;position:relative}
.section-title::after{content:'';display:block;width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--accent-1),transparent);margin:14px auto 0}

/* 关于 */
.about-content{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:center}
.about-image img{width:100%;max-width:360px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.45);transition:transform .3s}
.about-image img:hover{transform:scale(1.04)}
.about-text p{color:var(--text-1);line-height:1.7;margin-bottom:1rem}

/* contact layout & form controls */
.contact-layout{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.contact-form{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(2,119,189,0.06)}

.form-label{display:block;color:var(--muted);font-weight:700;margin-bottom:8px;font-size:0.95rem}
.form-input, .form-textarea, .submit-btn, select{font-family:inherit}
.form-input, select{
    width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:var(--text-1);transition:all .22s ease;box-shadow:inset 0 2px 8px rgba(0,0,0,0.35)
}
.form-input::placeholder, .form-textarea::placeholder{color:rgba(227,247,255,0.55)}
.form-input:focus, select:focus{
    outline:none;border-color:var(--accent-1);box-shadow:0 8px 30px rgba(79,195,247,0.12), 0 0 0 4px rgba(79,195,247,0.06);
    transform:translateY(-1px)
}
.form-textarea{width:100%;min-height:140px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:var(--text-1);resize:vertical;box-shadow:inset 0 2px 8px rgba(0,0,0,0.35);transition:all .22s}
.form-textarea:focus{outline:none;border-color:var(--accent-1);box-shadow:0 10px 36px rgba(79,195,247,0.10)}

.error{border-color:#ff6b6b !important;box-shadow:0 6px 18px rgba(255,107,107,0.12) !important}
.error-message{color:#ffb3b3;font-size:0.9rem;margin-top:6px;min-height:18px}

.success-message{background:linear-gradient(90deg, rgba(72,187,120,0.12), rgba(72,187,120,0.06));color:#dfffe6;padding:12px;border-radius:10px;border:1px solid rgba(72,187,120,0.12);margin-bottom:12px}

.submit-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));color:#001;border:none;cursor:pointer;font-weight:800;box-shadow:0 10px 30px rgba(41,182,246,0.14);transition:transform .18s ease,box-shadow .2s}
.submit-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(41,182,246,0.18)}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}

/* checkbox & small helpers */
input[type="checkbox"]{width:auto;height:auto;transform:scale(1.02)}

/* responsive for contact layout */
@media (max-width:900px){
    .contact-layout{grid-template-columns:1fr}
    .contact-form{order:2}
}

/* gallery & blog grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.gallery-item{position:relative;border-radius:12px;overflow:hidden;height:280px;border:1px solid rgba(79,195,247,0.12);transition:transform .35s, box-shadow .35s}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .45s,opacity .45s}
.gallery-item:hover{transform:translateY(-10px);box-shadow:0 18px 40px rgba(79,195,247,0.14)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent, rgba(0,0,0,0.85));transform:translateY(100%);transition:transform .32s,opacity .32s}
.gallery-item:hover .gallery-overlay{transform:translateY(0);opacity:1}

/* gallery filters styling */
.gallery-filters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding:6px}
.filter-btn{appearance:none;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text-1);padding:8px 12px;border-radius:999px;font-weight:700;cursor:pointer;transition:all .22s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.filter-btn:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(41,182,246,0.08), inset 0 1px 0 rgba(255,255,255,0.03)}
.filter-btn:focus{outline:none;box-shadow:0 10px 28px rgba(79,195,247,0.12), 0 0 0 4px rgba(79,195,247,0.06)}
.filter-btn.active, .filter-btn[aria-pressed="true"]{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#022;border-color:rgba(255,255,255,0.18);box-shadow:0 12px 36px rgba(41,182,246,0.14)}

/* small responsive: make buttons fill width appropriately */
@media (max-width:600px){
    .gallery-filters{gap:8px}
    .filter-btn{flex:1 1 calc(50% - 8px);text-align:center;padding:10px 8px}
}


/* 图片加载模糊占位到清晰过渡 */
.img-blur{filter:blur(8px) grayscale(.12) scale(1.02);opacity:.85}
.img-loaded{filter:none;opacity:1;transition:filter .6s ease, opacity .45s ease, transform .45s ease}

/* blog cards */
.blog-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px}
.blog-card{border-radius:12px;overflow:hidden;border:1px solid rgba(79,195,247,0.08);background:linear-gradient(135deg, rgba(79,195,247,0.04), rgba(33,150,243,0.02));transition:transform .35s,box-shadow .35s}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 14px 34px rgba(0,0,0,0.32)}
.blog-image{height:200px;overflow:hidden}
.blog-image img{width:100%;height:100%;object-fit:cover}
.blog-content{padding:20px}
.blog-title{color:var(--muted);font-size:1.2rem;margin-bottom:.5rem}
.blog-excerpt{color:var(--text-1);line-height:1.7}

/* article list (used by blog.html) */
.article-list{display:flex;flex-direction:column;gap:18px}
.article-card{display:flex;gap:18px;align-items:flex-start;padding:14px;border-radius:12px;overflow:hidden;border:1px solid rgba(79,195,247,0.08);background:linear-gradient(135deg, rgba(79,195,247,0.03), rgba(33,150,243,0.02));transition:transform .28s,box-shadow .28s}
.article-card:hover{transform:translateY(-6px);box-shadow:0 10px 28px rgba(0,0,0,0.28)}
.article-image{flex:0 0 200px;height:140px;overflow:hidden;border-radius:10px}
.article-image img{width:100%;height:100%;object-fit:cover;display:block}
.article-content{flex:1}

/* make article cards stack on small screens and increase image height for readability */
@media (max-width:600px){
    .article-card{flex-direction:column}
    .article-image{width:100%;height:200px;flex:0 0 auto}
}

/* modal (gallery) */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);z-index:2000;opacity:0;pointer-events:none;transition:opacity .28s ease}
.modal.open{display:block;opacity:1;pointer-events:auto}
.modal-content{max-width:1100px;margin:6vh auto;padding:12px;position:relative}
.modal-image{width:100%;max-height:78vh;object-fit:contain;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,0.6);transition:transform .36s ease}
.close{position:absolute;right:18px;top:18px;color:#fff;font-size:30px;cursor:pointer;background:rgba(0,0,0,0.35);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center}

/* modal navigation buttons */
.nav-buttons{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}
.nav-btn{pointer-events:auto;background:rgba(255,255,255,0.06);border:none;color:#fff;padding:14px;border-radius:999px;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,0.4);cursor:pointer;transition:transform .18s,background .18s}
.nav-btn:hover{transform:scale(1.06);background:rgba(255,255,255,0.10)}

/* gallery item skeleton / placeholder */
.gallery-item{position:relative;border-radius:12px;overflow:hidden;height:320px;border:1px solid rgba(79,195,247,0.12);transition:transform .35s, box-shadow .35s;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
.gallery-item .img-skel{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .45s,opacity .45s}
.gallery-item:hover{transform:translateY(-8px);box-shadow:0 20px 46px rgba(7,30,40,0.36)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0.0));transform:translateY(100%);transition:transform .32s,opacity .32s;color:var(--text-1)}
.gallery-item:hover .gallery-overlay{transform:translateY(0);opacity:1}
.gallery-title{font-size:1.05rem;margin-bottom:6px;color:var(--muted)}
.gallery-overlay p{font-size:0.92rem;color:rgba(230,247,255,0.9);margin:0}

/* slightly tighter grid on small screens */
@media (max-width:900px){
    .gallery-item{height:260px}
}
@media (max-width:600px){
    .gallery-item{height:220px}
}

/* footer */
footer{background:rgba(0,0,0,0.6);padding:36px 0;text-align:center;border-top:1px solid rgba(79,195,247,0.06)}
footer p{color:var(--accent-1);margin-bottom:12px;letter-spacing:0.2px}
footer a{color:var(--accent-1);text-decoration:none;padding:8px 12px;border-radius:6px;border:1px solid rgba(79,195,247,0.12);transition:all .25s}
footer a:hover{background:var(--accent-1);color:#000}

/* subtle focus-visible for accessibility */
a:focus{outline:none;box-shadow:0 0 0 4px rgba(79,195,247,0.08)}

/* end of enhanced styles */

/* 小屏时 CTA 宽度适应 */
@media (max-width:420px){.cta-button{width:100%;display:inline-block;text-align:center}}

/* small helpers */
.read-more{color:var(--accent-1);text-decoration:none;font-weight:700}

/* responsive tweaks */
@media (max-width:900px){
    .about-content{grid-template-columns:1fr}
    .hero h1{font-size:2.6rem}
}

@media (max-width:600px){
    .nav-container{flex-direction:column;gap:12px}
    .nav-links{flex-direction:column;gap:8px}
    .gallery-grid{grid-template-columns:1fr}
    .blog-posts{grid-template-columns:1fr}
}

/* small animation on load */
.content-section, .hero{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.loaded .content-section, .loaded .hero{opacity:1;transform:none}

/* end of styles */