:root{
  --green-bar:#a7cf9c;
  --green-bar-dark:#8fbb83;
  --mint:#adc28845;
  --white:#ffffff;
  --ink:#2c3a2c;
  --ink-soft:#5b6b5a;
  --placeholder:#9aa79a;
  --pink-bg:#f5cdd9; --pink-ink:#8a3f57;
  --teal-bg:#a9d4cc; --teal-ink:#2c6259;
  --yellow-bg:#f4e6a8; --yellow-ink:#7c6a1c;
  --blue-bg:#b5d1ee; --blue-ink:#2e547a;
  --purple-bg:#dcc4e9; --purple-ink:#623678;
  --stem:#4a6b45;
  --pot:#8a6a45;
  --contact-pink-bg:#fbe7ec;
  --linkedin-bg:#dcead2; --linkedin-ink:#3f6b39;
}
*{box-sizing:border-box;}
html, body{
  height:100%;
}
body{
  margin:0;
  font-family:'Nunito Sans', sans-serif;
  color:var(--ink);
  background:var(--white);
}
h1,h2{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  margin:0;
  text-transform:lowercase;
}
.tagline{
    margin:0;
  font-family:'Nunito Sans', sans-serif;
  color:var(--ink-soft);
  font-size: 16px;
  padding-bottom: 20px;
  font-weight: 500;
}
.frame{
  width:100%;
  min-height:100vh;
  background:var(--white);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.topbar{ height:14px; background:linear-gradient(90deg,var(--green-bar),var(--green-bar-dark)); flex-shrink:0; }
.stage{
  flex:1;
  display:grid;
  grid-template-columns:2fr 3fr;
  min-height:0;
  opacity:1;
  transition:opacity .3s ease;
}
.art-panel{
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6%;
  position:relative;
}
.art-slot{ width:100%; max-width:400px; aspect-ratio:1/1; position:relative; }
.art-slot svg{ width:100%; height:100%; overflow:visible; }
.swap-note{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  font-size:11.5px;
  color:var(--placeholder);
  font-style:italic;
  text-align:center;
  max-width:80%;
}

.copy-panel{
  background:var(--mint);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:6% 8%;
  position:relative;
}
.panel-content{ transition:opacity .22s ease; }
.panel-content.fading{ opacity:0; }

.back-link{
  display:none;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  width:fit-content;
  margin-bottom:2px;
  padding-bottom: 20px;
  font-family:'Quicksand',sans-serif;
}
.back-link:hover{ color:var(--ink); }
.view-project .back-link{ display:flex; }

h2.headline{ font-size:clamp(22px,3vw,32px); line-height:1.25; color:var(--ink); }
p.desc{ font-size:20px; line-height:1.65; color:var(--ink-soft); }
.placeholder-note{ display:block; font-size:11.5px; color:var(--placeholder); font-style:italic; margin-top:3px; }

.cta-row{ margin-top:6px; }
.pill{
  padding:9px 20px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  font-family:'Quicksand',sans-serif;
  border:none;
  cursor:pointer;
}
.pill.cta{ background:var(--pink-bg); color:var(--pink-ink); }
.tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.pill.figma{ background:var(--pink-bg); color:var(--pink-ink); }
.pill.github{ background:var(--teal-bg); color:var(--teal-ink); }
.pill.demo{ background:var(--yellow-bg); color:var(--yellow-ink); }
.pill.article{ background:var(--blue-bg); color:var(--blue-ink); }
.pill.web{ background:var(--purple-bg); color:var(--purple-ink); }


/* --- sprouts / SVG interaction --- */
.sprout{ cursor:pointer; }
.sprout .hit{ fill:#000; fill-opacity:0; stroke:#000; stroke-opacity:0; pointer-events:all; }
.sprout .stem, .sprout .leaf, .sprout .grown{ pointer-events:none; }
.sprout .grown{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.35);
  opacity:0;
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.sprout.bloomed .grown{ opacity:1; transform:scale(1); }
.sprout .stem, .sprout .leaf{ transition:stroke .15s ease; }
.sprout:hover .stem, .sprout:hover .leaf{ stroke:#2f5a29; }
.sprout.active .stem{ stroke-width:2.6; }

.tooltip{
  position:absolute;
  transform:translate(-50%,-135%);
  background:var(--ink);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  padding:5px 10px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  font-family:'Quicksand',sans-serif;
  text-transform:lowercase;
  z-index:5;
}
.tooltip.show{ opacity:1; }
.tooltip:after{
  content:"";
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--ink);
}

.project-photo {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  margin: 12px 0;
  display: block;
}

/* --- butterflies / work experience --- */
.butterfly{
  position:absolute;
  width:60px; height:45px;
  left:10%; top:70%;
  cursor:pointer;
  pointer-events:auto;
  z-index:15;
}
.butterfly img{
  transform-origin: center;
  animation: flutter .5s ease-in-out infinite alternate;
}
@keyframes flutter{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(.55); }
}
.butterfly svg{ width:100%; height:100%; overflow:visible; }
.butterfly .wing{ stroke-width:1.6; transform-box:fill-box; transform-origin:center; animation:flap .6s ease-in-out infinite alternate; }
.butterfly .body{ stroke:#3a3a3a; stroke-width:1.6; }
.butterfly .antenna{ stroke:#3a3a3a; stroke-width:1.2; fill:none; }
@keyframes flap{ from{ transform:scaleX(1); } to{ transform:scaleX(.45); } }

.bfly-tip{
  position:absolute;
  bottom:100%; left:50%;
  transform:translate(-50%,-6px);
  background:var(--ink);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  padding:5px 10px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  font-family:'Quicksand',sans-serif;
  text-transform:lowercase;
  z-index:7;
}
.butterfly:hover .bfly-tip{ opacity:1; }
.butterfly.active svg{ filter:drop-shadow(0 0 5px rgba(44,58,44,.4)); }

#bfly-rythmeet{ animation:flyA 34s ease-in-out infinite; }
#bfly-wsum{ animation:flyB 42s ease-in-out infinite; animation-delay:-9s; }
#bfly-starbucks{ animation:flyC 48s ease-in-out infinite; animation-delay:-20s; }
#bfly-hero-coffee-bar{ animation:flyD 38s ease-in-out infinite; animation-delay:-4s; }

@keyframes flyA{
  0%,100%{ left:4%;  top:78%; transform:rotate(-8deg); }
  25%    { left:58%; top:12%; transform:rotate(10deg); }
  50%    { left:88%; top:46%; transform:rotate(-6deg); }
  75%    { left:36%; top:20%; transform:rotate(12deg); }
}
@keyframes flyB{
  0%,100%{ left:82%; top:15%; transform:rotate(8deg); }
  30%    { left:46%; top:66%; transform:rotate(-10deg); }
  60%    { left:8%;  top:30%; transform:rotate(6deg); }
  82%    { left:30%; top:8%;  transform:rotate(-8deg); }
}
@keyframes flyC{
  0%,100%{ left:14%; top:20%; transform:rotate(-6deg); }
  20%    { left:44%; top:75%; transform:rotate(10deg); }
  50%    { left:78%; top:60%; transform:rotate(-9deg); }
  75%    { left:66%; top:10%; transform:rotate(7deg); }
}
@keyframes flyD{
  0%,100%{ left:90%; top:72%; transform:rotate(9deg); }
  28%    { left:60%; top:24%; transform:rotate(-8deg); }
  55%    { left:20%; top:58%; transform:rotate(10deg); }
  80%    { left:6%;  top:14%; transform:rotate(-6deg); }
}

/* --- contact / get in touch screen --- */
.contact-stage{
  grid-template-columns: 3fr 2fr;
}
.contact-info-panel{
  background:var(--contact-pink-bg);
}
.contact-info-panel .back-link{ display:flex; }
.contact-photo-panel{
  background:var(--white);
}
.contact-photo{
  width:100%;
  max-width:420px;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:12px;
  display:block;
  background:var(--mint); /* visible placeholder tint until the real photo is added */
}
.pill.linkedin{ background:var(--linkedin-bg); color:var(--linkedin-ink); }
.pill.email{ background:var(--yellow-bg); color:var(--yellow-ink); }

@media (max-width:720px){
  .stage{ grid-template-columns:1fr; }
  .frame{ aspect-ratio:auto; }
  .art-panel{ padding:8% 8% 2%; }
}