/* ============================================
   Zephyr Personal Site — Stylesheet
   Japanese-inspired, with subtle patterns & animations
   ============================================ */

/* --- Custom Properties --- */
:root {
    --bg:        #f5f0e8;
    --surface:   #fefcf8;
    --text:      #2c2c2c;
    --text-mid:  #5a5a5a;
    --text-dim:  #8a8a8a;
    --accent:    #6d8c6e;
    --accent-h:  #4d6d4e;
    --accent-l:  #e8efe0;
    --border:    #e0dcd5;
    --border-l:  #ede9e1;
    --shadow:    0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.05);
    --radius:    12px;
    --radius-sm: 6px;
    --max-w:     720px;
    --nav-h:     60px;
    --font:      -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --font-jp:   "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
}

/* Subtle warm gradient overlay */
body::after {
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.5;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(141,160,130,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(180,170,140,.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(200,180,150,.12) 0%, transparent 70%);
}

/* ==========================================
   Background Patterns & Ambient Orbs
   ========================================== */

/* Dot-grid pattern */
body::before {
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.55;
    background-image:radial-gradient(circle,#a8b8a0 1.2px,transparent 1.2px);
    background-size:24px 24px;
}

/* Ambient floating orbs */
.bg-orb {
    position:fixed;
    border-radius:50%;
    filter:blur(100px);
    opacity:.22;
    z-index:0;
    pointer-events:none;
    will-change:transform;
}
.bg-orb--1 {
    width:600px;height:600px;
    background:radial-gradient(circle,#a8c4a0,transparent);
    top:-200px;right:-150px;
    animation:orbFloat1 18s ease-in-out infinite;
}
.bg-orb--2 {
    width:500px;height:500px;
    background:radial-gradient(circle,#c4c8b8,transparent);
    bottom:-180px;left:-120px;
    animation:orbFloat2 22s ease-in-out infinite;
}
.bg-orb--3 {
    width:400px;height:400px;
    background:radial-gradient(circle,#c8d0c0,transparent);
    top:50%;left:60%;
    animation:orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100%{transform:translate(0,0) scale(1)}
    25%{transform:translate(-60px,40px) scale(1.08)}
    50%{transform:translate(-30px,-30px) scale(.94)}
    75%{transform:translate(40px,-20px) scale(1.05)}
}
@keyframes orbFloat2 {
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(50px,-35px) scale(1.1)}
    66%{transform:translate(-30px,25px) scale(.92)}
}
@keyframes orbFloat3 {
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-40px,-25px) scale(1.07)}
}

/* ==========================================
   Links
   ========================================== */
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-h)}

/* ==========================================
   Navigation
   ========================================== */
.nav{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(245,240,232,.9);
    backdrop-filter:blur(16px) saturate(.8);
    -webkit-backdrop-filter:blur(16px) saturate(.8);
    border-bottom:1px solid var(--border);
    height:var(--nav-h);
}
.nav-inner{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 24px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.nav-brand{
    font-size:1.2rem;
    font-weight:500;
    letter-spacing:.03em;
    color:var(--text);
    transition:color .2s;
}
.nav-brand:hover{color:var(--accent)}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{
    display:block;
    padding:6px 14px;
    border-radius:var(--radius-sm);
    font-size:.88rem;
    color:var(--text-mid);
    transition:color .2s,background .2s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--accent);background:var(--accent-l)}

/* Hamburger */
.nav-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    color:var(--text);
}
.nav-toggle span{
    display:block;
    width:20px;
    height:2px;
    background:var(--text);
    margin:4px 0;
    border-radius:2px;
    transition:transform .25s,opacity .25s;
}

/* ==========================================
   Main Content
   ========================================== */
.main{
    flex:1;
    width:100%;
    max-width:var(--max-w);
    margin:0 auto;
    padding:48px 24px 80px;
    position:relative;
    z-index:1;
}

/* ==========================================
   Hero (Home page)
   ========================================== */
.hero{
    text-align:center;
    padding:60px 0 48px;
}
.hero-avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    margin:0 auto 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#6d8c6e,#8dac8e,#7d9e7e);
    background-size:200% 200%;
    color:#fff;
    font-size:2.4rem;
    font-weight:300;
    letter-spacing:.04em;
    box-shadow:0 8px 32px rgba(109,140,110,.28);
    user-select:none;
    animation:avatarGradient 6s ease-in-out infinite, avatarFloat 5s ease-in-out infinite;
    position:relative;
}
.hero-avatar::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid rgba(109,140,110,.25);
    animation:avatarRing 5s ease-in-out infinite;
}
.hero-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
@keyframes avatarGradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
@keyframes avatarFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}
@keyframes avatarRing{
    0%,100%{transform:scale(1);opacity:.5}
    50%{transform:scale(1.08);opacity:.2}
}

.hero-name{
    font-size:2rem;
    font-weight:300;
    letter-spacing:.1em;
    margin-bottom:6px;
    animation:fadeInUp .7s ease both;
    animation-delay:.1s;
}
.hero-tagline{
    font-family:var(--font-jp);
    font-size:.95rem;
    color:var(--text-mid);
    margin-bottom:18px;
    letter-spacing:.05em;
    animation:fadeInUp .7s ease both;
    animation-delay:.2s;
}
.hero-bio{
    max-width:540px;
    margin:0 auto 36px;
    color:var(--text-dim);
    font-size:.95rem;
    line-height:1.9;
    animation:fadeInUp .7s ease both;
    animation-delay:.3s;
}

/* ==========================================
   Quick Links Grid
   ========================================== */
.quick-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:8px;
}
.ql-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:30px 16px;
    background:var(--surface);
    border:1px solid var(--border-l);
    border-radius:var(--radius);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    color:var(--text-mid);
}
.ql-card::before{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,var(--accent),#8dac8e);
    transform:scaleX(0);
    transition:transform .35s ease;
    border-radius:0 0 var(--radius) var(--radius);
}
.ql-card:hover::before{transform:scaleX(1)}
.ql-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    border-color:var(--border);
    color:var(--text-mid);
}
.ql-icon{font-size:1.8rem;transition:transform .3s}
.ql-card:hover .ql-icon{transform:scale(1.15) rotate(-3deg)}
.ql-title{font-size:.88rem;color:var(--text-mid);font-weight:450}
/* stagger entrance */
.ql-card:nth-child(1){animation:fadeInUp .5s ease both;animation-delay:.4s}
.ql-card:nth-child(2){animation:fadeInUp .5s ease both;animation-delay:.46s}
.ql-card:nth-child(3){animation:fadeInUp .5s ease both;animation-delay:.52s}
.ql-card:nth-child(4){animation:fadeInUp .5s ease both;animation-delay:.58s}
.ql-card:nth-child(5){animation:fadeInUp .5s ease both;animation-delay:.64s}
.ql-card:nth-child(6){animation:fadeInUp .5s ease both;animation-delay:.7s}

/* ==========================================
   Page Header (with animated underline)
   ========================================== */
.page-header{
    margin-bottom:40px;
    padding-bottom:24px;
    border-bottom:1px solid var(--border);
    position:relative;
}
.page-header::after{
    content:'';
    position:absolute;
    bottom:-1px;left:0;
    width:48px;height:2px;
    background:var(--accent);
    border-radius:1px;
    animation:headerLineIn .6s ease both;
}
@keyframes headerLineIn{
    from{width:0;opacity:0}
    to{width:48px;opacity:1}
}
.page-title{
    font-size:1.6rem;
    font-weight:300;
    letter-spacing:.05em;
    animation:fadeInUp .5s ease both;
}
.page-subtitle{
    font-size:.88rem;
    color:var(--text-dim);
    margin-top:6px;
    animation:fadeInUp .5s ease both;
    animation-delay:.06s;
}

/* ==========================================
   Post Cards (now <a> tags for clickability)
   ========================================== */
.post-list{display:flex;flex-direction:column;gap:20px}
.post-card{
    display:block;
    background:var(--surface);
    border:1px solid var(--border-l);
    border-radius:var(--radius);
    padding:26px 28px;
    transition:transform .3s,box-shadow .3s,border-color .3s;
    position:relative;
    color:inherit;
    text-decoration:none;
}
.post-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    border-color:var(--border);
    color:inherit;
}
/* Left accent line on hover */
.post-card::before{
    content:'';
    position:absolute;
    left:-1px;top:20%;bottom:20%;
    width:3px;
    background:var(--accent);
    border-radius:0 2px 2px 0;
    opacity:0;
    transition:opacity .35s;
}
.post-card:hover::before{opacity:1}
.post-date{
    font-size:.78rem;
    color:var(--text-dim);
    margin-bottom:8px;
    letter-spacing:.05em;
    display:block;
}
.post-title{
    font-size:1.12rem;
    font-weight:500;
    margin-bottom:10px;
    color:var(--text);
}
.post-excerpt{
    font-size:.9rem;
    color:var(--text-mid);
    line-height:1.85;
}
.post-tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.post-tag{
    font-size:.73rem;
    padding:3px 12px;
    border-radius:100px;
    background:var(--bg);
    color:var(--text-dim);
    border:1px solid var(--border-l);
    transition:background .2s,color .2s;
}
.post-card:hover .post-tag{background:var(--accent-l);color:var(--accent-h)}

/* Stagger cards */
.post-card:nth-child(1){animation:fadeInUp .45s ease both;animation-delay:.05s}
.post-card:nth-child(2){animation:fadeInUp .45s ease both;animation-delay:.12s}
.post-card:nth-child(3){animation:fadeInUp .45s ease both;animation-delay:.19s}
.post-card:nth-child(4){animation:fadeInUp .45s ease both;animation-delay:.26s}
.post-card:nth-child(5){animation:fadeInUp .45s ease both;animation-delay:.33s}

/* ==========================================
   Detail Article Page
   ========================================== */
.detail-article{
    animation:fadeInUp .5s ease both;
}
.detail-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.86rem;
    color:var(--text-dim);
    margin-bottom:28px;
    transition:color .2s;
}
.detail-back:hover{color:var(--accent)}
.detail-header{
    margin-bottom:32px;
    padding-bottom:24px;
    border-bottom:1px solid var(--border);
}
.detail-category{
    display:inline-block;
    font-size:.78rem;
    color:var(--accent);
    background:var(--accent-l);
    padding:4px 14px;
    border-radius:100px;
    margin-bottom:14px;
}
.detail-date{
    display:block;
    font-size:.82rem;
    color:var(--text-dim);
    margin-bottom:10px;
    letter-spacing:.05em;
}
.detail-title{
    font-size:1.6rem;
    font-weight:400;
    letter-spacing:.04em;
    line-height:1.4;
    margin-bottom:18px;
}
.detail-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.detail-body{
    font-size:.95rem;
    color:var(--text-mid);
    line-height:2;
}
.detail-body p{
    margin-bottom:18px;
}
.detail-body strong{
    color:var(--text);
    font-weight:500;
}
.detail-footer{
    margin-top:48px;
    padding-top:28px;
    border-top:1px solid var(--border);
}

/* ==========================================
   Download Cards
   ========================================== */
.dl-list{display:flex;flex-direction:column;gap:16px}
.dl-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--surface);
    border:1px solid var(--border-l);
    border-radius:var(--radius);
    padding:22px 26px;
    transition:transform .3s,box-shadow .3s;
    gap:16px;
}
.dl-card:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.05)}
.dl-info{flex:1;min-width:0}
.dl-name{font-weight:500;font-size:.95rem}
.dl-desc{font-size:.84rem;color:var(--text-dim);margin-top:3px}
.dl-meta{font-size:.76rem;color:var(--text-dim);display:flex;gap:12px;margin-top:4px}
.dl-btn{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 20px;
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius-sm);
    font-size:.84rem;
    transition:background .25s,transform .25s;
}
.dl-btn:hover{background:var(--accent-h);color:#fff;transform:scale(1.04)}

.dl-card:nth-child(1){animation:fadeInUp .4s ease both;animation-delay:.05s}
.dl-card:nth-child(2){animation:fadeInUp .4s ease both;animation-delay:.11s}
.dl-card:nth-child(3){animation:fadeInUp .4s ease both;animation-delay:.17s}
.dl-card:nth-child(4){animation:fadeInUp .4s ease both;animation-delay:.23s}
.dl-card:nth-child(5){animation:fadeInUp .4s ease both;animation-delay:.29s}

/* ==========================================
   Contact Form
   ========================================== */
.contact-form{
    background:var(--surface);
    border:1px solid var(--border-l);
    border-radius:var(--radius);
    padding:34px;
    animation:fadeInUp .5s ease both;
}
.form-group{margin-bottom:20px}
.form-group:last-of-type{margin-bottom:24px}
.form-label{
    display:block;
    font-size:.84rem;
    font-weight:500;
    margin-bottom:6px;
    color:var(--text-mid);
}
.form-input,
.form-textarea{
    width:100%;
    padding:11px 15px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-family:var(--font);
    font-size:.9rem;
    color:var(--text);
    background:var(--bg);
    transition:border-color .25s,box-shadow .25s;
    outline:none;
}
.form-input:focus,
.form-textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(109,140,110,.12);
}
.form-textarea{resize:vertical;min-height:130px}
.form-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 30px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    font-family:var(--font);
    font-size:.9rem;
    cursor:pointer;
    transition:background .25s,transform .25s,box-shadow .25s;
}
.form-btn:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 4px 14px rgba(109,140,110,.3)}
.form-btn:active{transform:translateY(0)}
.form-success{
    display:none;
    padding:16px;
    background:var(--accent-l);
    border-radius:var(--radius-sm);
    color:var(--accent-h);
    font-size:.9rem;
    margin-bottom:20px;
    animation:fadeInUp .4s ease both;
}

/* ==========================================
   Privacy Page
   ========================================== */
.privacy-content h2{
    font-size:1.12rem;
    font-weight:500;
    margin:30px 0 12px;
    color:var(--text);
}
.privacy-content h2:first-child{margin-top:0}
.privacy-content p,
.privacy-content li{
    font-size:.9rem;
    color:var(--text-mid);
    line-height:1.95;
}
.privacy-content ul{padding-left:22px;margin:8px 0}
.privacy-content li{margin-bottom:5px}

/* ==========================================
   Footer
   ========================================== */
.footer{
    border-top:1px solid var(--border);
    padding:28px 24px;
    text-align:center;
    position:relative;
    z-index:1;
    background:rgba(245,240,232,.65);
}
.footer-inner{
    max-width:var(--max-w);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.footer-links{display:flex;gap:22px;font-size:.84rem}
.footer-links a{color:var(--text-dim);transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:.76rem;color:var(--text-dim);letter-spacing:.03em}

/* ==========================================
   Keyframes
   ========================================== */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

/* Scroll-in reveal via Intersection Observer (JS) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ==========================================
   Responsive
   ========================================== */
@media(max-width:640px){
    .bg-orb--1{width:350px;height:350px;top:-100px;right:-80px}
    .bg-orb--2{width:300px;height:300px;bottom:-100px;left:-60px}
    .bg-orb--3{display:none}

    .nav-links{
        position:fixed;
        top:var(--nav-h);
        left:0;right:0;bottom:0;
        background:rgba(245,240,232,.97);
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3s;
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }
    .nav-links.open{opacity:1;pointer-events:auto}
    .nav-links a{font-size:1.1rem;padding:14px 28px}
    .nav-toggle{display:block}

    .hero{padding:40px 0 28px}
    .hero-avatar{width:84px;height:84px;font-size:2rem}
    .hero-name{font-size:1.55rem}

    .quick-links{grid-template-columns:repeat(2,1fr)}
    .ql-card{padding:24px 12px}

    .main{padding:32px 16px 56px}
    .page-title{font-size:1.35rem}
    .detail-title{font-size:1.3rem}

    .dl-card{flex-direction:column;align-items:flex-start}
    .dl-btn{width:100%;justify-content:center}

    .contact-form{padding:22px}
    .post-card{padding:22px 20px}
}

@media(max-width:380px){
    .quick-links{grid-template-columns:1fr}
}