/* =====================================================
   FLOWER FX: vines, butterfly, progress, photo magic
   ===================================================== */
/* Scroll progress stem */



/* Growing side vines */
.vine { position: fixed; top: 0; width: 90px; height: 100vh;  pointer-events: none; overflow: visible; display: block; }
.vine-left { left: 6px; } .vine-right { right: 6px; }
/* narrower screens: a slim vine tucked into each page gutter (drawn at ~0.42 scale by the script) */
@media (max-width: 1239px) { .vine { width: 38px; } .vine-left { left: 0; } .vine-right { right: 0; } }
.vine-path { fill: none; stroke: #8db36a; stroke-width: 2.4; stroke-linecap: round; opacity: 0.75; }
.vine-item { transform-box: fill-box; transform-origin: center;   }

/* Click bloom stamp & photo flower pops */
.fx-flower { position: fixed; z-index: 97; pointer-events: none; overflow: visible; filter: drop-shadow(0 3px 5px rgba(120, 72, 96, 0.2)); }

/* Butterfly */
.butterfly { position: fixed; z-index: 96; width: 44px; height: 38px; pointer-events: none; left: 0; top: 0; opacity: 0; }
.butterfly svg { width: 100%; height: 100%; overflow: visible; }
.bf-wing-l, .bf-wing-r { transform-box: fill-box; animation: flap 0.28s ease-in-out infinite alternate; }
.bf-wing-l { transform-origin: right center; } .bf-wing-r { transform-origin: left center; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(0.25); } }

/* Photo shine sweep */
.profile-photo::before, .about-photo::before, .contact-photo::before { content: ''; position: absolute; inset: 7px; border-radius: 9px; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 246, 214, 0.35) 52%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; transition: opacity 0.3s; }
.profile-photo:hover::before, .about-photo:hover::before, .contact-photo:hover::before { animation: shine 1.1s ease forwards; }
@keyframes shine { 0% { background-position: 130% 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { background-position: -60% 0; opacity: 0; } }
/* Photo floral frames (grown by clicking a personal photo; built in index.html).
   .pf-back sits behind the photo image (leaves tuck under its edge), .pf-front sits above it. */
.pf-layer { position: absolute; pointer-events: none; overflow: visible; }
.pf-back { z-index: -1; }
.pf-front { z-index: 3; }
.pf-guide { fill: none; stroke: none; }
.pf-vine { fill: none; stroke: #7fa65c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }
.pf-pop { transform-box: fill-box; transform-origin: 10% 90%; transform: scale(0); transition: transform 0.6s cubic-bezier(0.34, 1.6, 0.64, 1); transition-delay: var(--dl, 0s); }
.pf-fl .pf-pop { transform-origin: center; transform: scale(0) rotate(-120deg); }
.pf-st { fill: none; stroke: #7fa65c; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 0.35s ease; transition-delay: var(--dl, 0s); }
.pf-it.on .pf-pop { transform: scale(1) rotate(0deg); }
.pf-it.on .pf-st { stroke-dashoffset: 0; }
.pf-fl .pf-pop use { filter: drop-shadow(0 1px 2px rgba(120, 72, 96, 0.25)); }
.pf-complete .pf-fl.on .pf-pop { animation: pfSway 5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -97ms); }
@keyframes pfSway { 0%, 100% { transform: scale(1) rotate(-7deg); } 50% { transform: scale(1) rotate(7deg); } }
.pf-cheer .pf-fl.on .pf-pop { animation: pfCheer 0.7s cubic-bezier(0.34, 1.6, 0.64, 1) both; animation-delay: calc(var(--d, 0) * 4ms); }
@keyframes pfCheer { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35) rotate(25deg); } }
.pf-spark { fill: #fff7c2; stroke: #f2c230; stroke-width: 0.8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pf-cheer .pf-spark { animation: pfSpark 0.9s ease-out both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes pfSpark { 0% { opacity: 0; scale: 0.2; } 30% { opacity: 1; scale: 1.3; } 100% { opacity: 0; scale: 0.4; translate: 0 -10px; } }
.pf-instant .pf-vine, .pf-instant .pf-pop, .pf-instant .pf-st { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pf-complete .pf-fl.on .pf-pop, .pf-cheer .pf-fl.on .pf-pop, .pf-cheer .pf-spark { animation: none !important; } }
.profile-photo img, .about-photo img, .contact-photo img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* Polaroid "develop" when photos scroll into view */

/* Cards bloom in with a stagger when a panel opens */
@keyframes cardBloom { from { opacity: 0; transform: translateY(22px) scale(0.92) rotate(-1.5deg); } to { opacity: 1; transform: none; } }










/* Circles sprout a little flower on hover */





/* Section-title flowers spin fast on hover */

/* Gallery tiles: playful tilt & color pop */
.preview-item:hover img { transform: scale(1.12) rotate(1.5deg); }
.collage-item {  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s; }
.collage-item:hover { transform: scale(1.06) rotate(-1.5deg); box-shadow: 0 16px 36px rgba(120, 72, 96, 0.25), 0 0 0 4px #fff; }
.collage-item:nth-child(even):hover { transform: scale(1.06) rotate(1.5deg); }

/* Hero text: name letters wave on hover */
.hero h1 .ltr { display: inline-block;  }
.hero h1 .ltr:hover { transform: translateY(-10px) rotate(-6deg); }

@media (prefers-reduced-motion: reduce) {
    .vine, .butterfly { display: none !important; }
}

/* ---- Fun text animation (About + hero name) ---- */
.about-hello { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 2.4rem; margin-bottom: 1rem; }
.hello-ink { display: inline-block; clip-path: inset(0 100% 0 0); }
.reveal.visible .hello-ink { animation: inkWrite 1.6s cubic-bezier(0.6, 0.1, 0.3, 1) 0.3s forwards; }
@keyframes inkWrite { to { clip-path: inset(0 -5% 0 0); } }
.hello-flower { width: 30px; height: 30px; color: var(--pink); overflow: visible; scale: 0; }
@keyframes popBloom { from { scale: 0; rotate: -180deg; } to { scale: 1; rotate: 0deg; } }
.about-text { font-size: 1.15rem; line-height: 1.95; }
.about-text .w { display: inline-block; opacity: 0; transform: translateY(16px) rotate(5deg); }
.reveal.visible .about-text .w { animation: wordIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 28ms + 1.2s); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
.about-text .kw { font-weight: 600; color: var(--white); background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; padding: 0 2px; border-radius: 3px; cursor: default; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.reveal.visible .about-text .kw { animation: wordIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, marker 0.7s ease forwards; animation-delay: calc(var(--i) * 28ms + 1.2s), calc(var(--i) * 28ms + 1.6s); }
@keyframes marker { to { background-size: 100% 100%; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.1); } 75% { transform: rotate(5deg) scale(1.1); } }
.kw-physics { --hl: #fbe7a1; } .kw-writing { --hl: #fbd0de; } .kw-teaching { --hl: #e2d6f6; } .kw-art { --hl: #d4e8c2; } .kw-curiosity { --hl: #fde0b8; } .kw-creation { --hl: #f8c6d8; }
.hero h1 .ltr { opacity: 0; animation: letterDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 55ms + 0.45s); }
@keyframes letterDrop { from { opacity: 0; transform: translateY(-40px) rotate(-14deg) scale(0.6); } to { opacity: 1; transform: none; } }
.hero h1 em { background: none !important; -webkit-text-fill-color: initial; }
.hero h1 em .ltr { -webkit-text-fill-color: currentColor; }
@media (max-width: 900px) { .about-hello { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hello-ink { clip-path: none; } .about-text .w, .hero h1 .ltr { opacity: 1; transform: none; } .about-text .kw { background-size: 100% 100%; } .hello-flower { scale: 1; } }