/* =====================================================
   SPRING THEME LAYER
   ===================================================== */
body { color: var(--text-mid); background: var(--cream); }
main { position: relative; z-index: 1; }
::selection { background: var(--pink-soft); color: var(--white); }
h1, h2, h3, h4, .section-title{ font-variation-settings: 'SOFT' 100; letter-spacing: -0.01em; }

/* Petal canvases */
.petals-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.petals-back { z-index: 0; }
.petals-front { z-index: 95; }

/* Nav */
.nav { background: rgba(255, 250, 242, 0.82); border-color: rgba(194, 69, 126, 0.14);  }
.nav a.active { background: var(--pink-soft);  box-shadow: inset 0 0 0 1px rgba(194, 69, 126, 0.25); }



/* Hero */
.hero::before { background: none; }
.hero-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: blobDrift 18s ease-in-out infinite alternate; }
.blob.b1 { width: 460px; height: 460px;  top: -8%; right: 8%; }
.blob.b2 { width: 380px; height: 380px;  bottom: 0%; right: 30%; animation-duration: 22s;  }
.blob.b3 { width: 340px; height: 340px;  top: 18%; left: -6%; animation-duration: 26s;  }
.blob.b4 { width: 260px; height: 260px;  bottom: 6%; left: 22%; animation-duration: 20s;  opacity: 0.45; }
@keyframes blobDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } 100% { transform: translate(-30px, 25px) scale(0.95); } }

.hero-flowers { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bloom { position: absolute; overflow: visible; opacity: 0; animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, spinSlow 40s linear infinite; }
.bloom.f1 { width: 74px; height: 74px; top: 7%; left: 2.5%; animation-delay: 0.4s, 0s; }
.bloom.f2 { width: 46px; height: 46px; top: 9%; left: 44%; animation-delay: 0.7s, -10s; animation-duration: 1.4s, 30s; }
.bloom.f3 { width: 58px; height: 58px; bottom: 16%; right: 5%; animation-delay: 1s, -5s; }
.bloom.f4 { width: 40px; height: 40px; bottom: 26%; left: 3%; animation-delay: 1.2s, -20s; animation-duration: 1.4s, 50s; }
.bloom.f5 { width: 34px; height: 34px; top: 17%; right: 12%; animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.9s, leafSway 5s ease-in-out infinite; }
.bloom.f6 { width: 38px; height: 38px; top: 12%; right: 6%; animation-delay: 1.4s, -14s; animation-duration: 1.4s, 34s; }
.bloom.f7 { width: 52px; height: 52px; bottom: 9%; left: 40%; animation-delay: 1.6s, -8s; }
.bloom.f8 { width: 30px; height: 30px; bottom: 19%; right: 9.5%; animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.2s, leafSway 6s ease-in-out infinite -2s; }
.bloom.f9 { width: 32px; height: 32px; top: 14%; left: 24%; animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.5s, leafSway 5.5s ease-in-out infinite -1s; }
@media (max-width: 1099px) { .bloom.f9 { display: none; } }   /* tablet and phone: the hero text runs under it */
@keyframes bloomIn { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes spinSlow { to { rotate: 360deg; } }
@keyframes leafSway { 0%, 100% { rotate: -12deg; } 50% { rotate: 14deg; } }

.hero-label { color: var(--green); font-weight: 600; }
.hero h1 { color: var(--white); font-weight: 400; }
.hero h1 em { background: linear-gradient(120deg, var(--cyan) 0%, #d96b93 45%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; padding-right: 0.08em; }
.hero-intro { color: var(--text-mid); font-weight: 400; }
.hero-tag { background: #fff; border-color: var(--border); color: var(--white); font-weight: 500; box-shadow: 0 2px 8px rgba(120, 72, 96, 0.06); }
.hero-tag:nth-child(1) { background: var(--lilac-soft); border-color: rgba(138, 99, 184, 0.25); }
.hero-tag:nth-child(2) { background: var(--pink-soft); border-color: rgba(194, 69, 126, 0.2); }
.hero-tag:nth-child(3) { background: var(--green-soft); border-color: rgba(110, 154, 76, 0.3); }
.hero-tag:nth-child(4) { background: var(--yellow-soft); border-color: rgba(217, 154, 18, 0.3); }
.hero-tag:hover { color: var(--white); border-color: var(--cyan); background: #fff; transform: translateY(-3px) rotate(-2deg); }


/* Scrapbook photo frames (hero, about, contact) */
.profile-photo, .contact-photo, .about-photo { background: #fff; border: none; padding: 7px; border-radius: 14px; overflow: visible; box-shadow: 0 20px 44px rgba(120, 72, 96, 0.2), 0 2px 6px rgba(120, 72, 96, 0.08); }
.profile-photo img, .contact-photo img, .about-photo img { border-radius: 9px; display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-photo:hover img, .contact-photo:hover img, .about-photo:hover img { transform: none; }
.profile-photo:hover, .contact-photo:hover, .about-photo:hover { box-shadow: 0 30px 60px rgba(120, 72, 96, 0.28), 0 0 0 4px rgba(244, 167, 191, 0.35); }
.profile-photo::after, .contact-photo::after, .about-photo::after { content: ''; position: absolute; top: -11px; left: 50%; width: 74px; height: 22px; translate: -50% 0; rotate: -4deg; background: rgba(242, 194, 48, 0.6); border-radius: 2px; box-shadow: 0 1px 3px rgba(120, 72, 96, 0.12); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 12px); }
.profile-photo:nth-child(2)::after { background-color: rgba(244, 167, 191, 0.7); rotate: 3deg; }
.profile-photo:nth-child(3)::after { background-color: rgba(185, 162, 222, 0.7); rotate: 5deg; }
.contact-photo::after { background-color: rgba(244, 167, 191, 0.7); width: 60px; }
.about-photo::after { background-color: rgba(110, 154, 76, 0.5); rotate: 4deg; width: 90px; }
.profile-photo:nth-child(1) img { object-position: center 30%; }
.profile-photo:nth-child(2) img { object-position: center 35%; }
.profile-photo:nth-child(3) img { object-position: center 42%; }



/* Section titles get a little bloom */
.section-head { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.title-bloom { width: 34px; height: 34px; color: var(--pink); overflow: visible; scale: 0.2; opacity: 0;   }
section:nth-of-type(3n) .title-bloom { color: var(--lilac); }
section:nth-of-type(3n+1) .title-bloom { color: var(--yellow); --center: #d99a12; }
.section-head.visible .title-bloom { scale: 1; opacity: 1; }
.section-title { font-weight: 400; }
.section-title em { color: var(--cyan); }
.section-hint { color: var(--text-dim); font-family: var(--font-hand);  }

/* About */
.about-section { padding: 6rem 5% 4rem; }
.about-inner { display: flex; align-items: center; gap: 4.5rem; max-width: 1040px; margin: 0 auto; }
.about-photo-wrap { position: relative; flex-shrink: 0; }
.about-photo { position: relative; width: 300px; height: 380px; rotate: -3deg; animation: aboutSway 7s ease-in-out infinite; scale: 1; transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; cursor: zoom-in; z-index: 1; }
.about-photo img { object-position: center 30%; }
.about-photo:hover { scale: 1.18; z-index: 5; }
@keyframes aboutSway { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-10px); } }
.about-bloom { position: absolute; overflow: visible; z-index: 2;  }
.about-bloom.ab1 { width: 64px; height: 64px; top: -22px; right: -26px; }
.about-bloom.ab2 { width: 40px; height: 40px; bottom: 54px; left: -26px;  }
.about-bloom.ab3 { width: 48px; height: 48px; bottom: -18px; right: 30px;  }

.about-hello { font-family: var(--font-hand);  color: var(--cyan);  rotate: -2deg; transform-origin: left; }



.about-text {   color: var(--text-mid); margin-bottom: 1rem; max-width: 560px; }
.about-text em { color: var(--white); font-style: italic; }

.fact { padding: 0.45rem 0.95rem; border-radius: 50px; font-size: 0.82rem; font-weight: 500; color: var(--white); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fact:hover { transform: translateY(-3px) rotate(-2deg); }
   

/* Circles become pastel blossoms */









/* selected circle: a soft, translucent gradient of its own color with a light sheen, a colored rim and deep-toned text */


@keyframes pulseGlow { 0%, 100% { box-shadow: 0 10px 26px rgba(120, 72, 96, 0.1), 0 0 0 0 rgba(244, 167, 191, 0.5); } 50% { box-shadow: 0 10px 26px rgba(120, 72, 96, 0.1), 0 0 0 10px rgba(244, 167, 191, 0); } }







/* Panels & cards */
















/* Gallery */
.gallery-preview { border: 7px solid #fff; box-shadow: 0 20px 50px rgba(120, 72, 96, 0.15); }
.preview-overlay { background: linear-gradient(transparent 55%, rgba(46, 34, 54, 0.55)); }
.preview-overlay span { color: #fff; }
.gallery-modal-close, .lightbox-close { background: var(--pink-soft); }
.gallery-modal-tab.active { color: #fff; }
.collage-item-title { background: linear-gradient(transparent, rgba(46, 34, 54, 0.8)); color: #fff; }
.lightbox-title { color: #fff8ec; }
.lightbox-cat { color: var(--pink); }
.lightbox-counter { color: rgba(255, 248, 236, 0.6); }
.lightbox-close, .lightbox-arrow { background: rgba(255, 248, 236, 0.15); border-color: rgba(255, 248, 236, 0.3); color: #fff8ec; }
.lightbox-close:hover, .lightbox-arrow:hover { background: rgba(244, 167, 191, 0.45); }

/* Contact & footer */
.contact-title em { color: var(--cyan); }
.social-link { background: #fff; border-color: var(--border); box-shadow: 0 4px 12px rgba(120, 72, 96, 0.08);  }
.social-link:nth-child(1) { background: var(--lilac-soft); } .social-link:nth-child(2) { background: var(--pink-soft); } .social-link:nth-child(3) { background: var(--green-soft); }
.social-link:hover { background: var(--cyan); color: #fff; transform: translateY(-4px) rotate(-6deg); }
footer { border-top: none; padding: 2rem 1.5rem 2.5rem; }
.footer-flowers {  justify-content: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.footer-flowers svg { width: 22px; height: 22px; overflow: visible;  }
.footer-flowers svg:nth-child(2) { animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .bloom, .title-bloom { opacity: 1 !important; scale: 1 !important; }
    .petals-canvas { display: none; }
}
@media (max-width: 900px) {
    .about-inner { flex-direction: column; gap: 3.5rem; text-align: center; }
    .about-text { margin-left: auto; margin-right: auto; }
    
    .about-hello { transform-origin: center; }
    
}
@media (max-width: 768px) {
    .about-section { padding: 4rem 1.5rem 3rem; }
    .about-photo { width: 220px; height: 280px; }
    .profile-photo { padding: 4px; border-radius: 10px; }
    .profile-photo img { border-radius: 7px; }
    .profile-photo::after { width: 44px; height: 14px; top: -7px; }
    .bloom.f1 { width: 48px; height: 48px; top: 9%; left: 4%; }
    .bloom.f2, .bloom.f6 { display: none; }
    .bloom.f5 { top: 8%; right: 8%; }
    .bloom.f3 { width: 40px; height: 40px; bottom: 4%; }
    .bloom.f7 { bottom: 3%; left: 8%; width: 38px; height: 38px; }
    .blob { filter: blur(45px); }
    
}

/* Pastel tinted cards (experience & writing) */












/* un-linked publications: lighter wash, dashed outline, no side bar */