:root{
  --ink:#1B1420;
  --muted:#6a6470;
  --fuchsia:#E5157E;
  --purple:#7A4DA6;
  --mauve:#A87FAE;
  --gold:#FFB300;
  --peach:#F2A57C;
  --pink-soft:#FBDDEE;
  --lav-soft:#ECE1F7;
  --yellow-soft:#FDF0C7;
  --peach-soft:#FBE6D8;
  --card:#ffffff;
  --hair:rgba(122,77,166,0.12);
  --bg:#ffffff;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* --- layers --- */
#scene{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; touch-action:manipulation; }
.glow{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%, rgba(255,255,255,0.5), rgba(255,255,255,0) 76%);
}

/* --- fuchsia bubble cursor --- */
body.custom-cursor, body.custom-cursor a, body.custom-cursor button, body.custom-cursor .photo{ cursor:none; }
.cursor{ position:fixed; left:0; top:0; z-index:9999; width:0; height:0; pointer-events:none; will-change:transform; transition:opacity .2s ease; }
.cursor span{
  position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,0.95), #F0177F 58%, #7A4DA6 100%);
  box-shadow:0 2px 12px rgba(229,21,126,0.5), inset 0 2px 6px rgba(255,255,255,0.6);
  transition:transform .18s ease;
}
.cursor.big span{ transform:scale(1.6); }
.cursor.down span{ transform:scale(0.7); }

/* --- shell --- */
.wrap{
  position:relative; z-index:2; pointer-events:none;
  width:min(94vw, 1000px); max-height:96dvh;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.wrap, .bento, .left, .col{ pointer-events:none; }
.tile, .links a, .foot a{ pointer-events:auto; }

.bento{
  display:flex; align-items:stretch; gap:clamp(12px, 1.7vw, 20px);
  width:100%; min-height:clamp(400px, 60vh, 560px);
}
.left{ flex:0 0 43%; display:flex; flex-direction:column; gap:12px; min-width:0; }
.col{ flex:1 1 0; display:flex; flex-direction:column; justify-content:center; gap:clamp(11px, 1.4vw, 16px); min-width:0; }

.tile{ border-radius:24px; }

/* portrait — clean, big, click to celebrate */
.photo{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--hair);
  box-shadow:0 20px 48px rgba(122,77,166,0.20);
}
.photo picture, .photo img{ display:block; width:100%; height:100%; }
.photo img{ object-fit:cover; object-position:50% 18%; }
.photo.bounce{ animation:avbounce .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes avbounce{ 0%{transform:scale(1)} 35%{transform:scale(1.02) rotate(-0.6deg)} 70%{transform:scale(0.995)} 100%{transform:scale(1)} }
@keyframes popIn{ 0%{opacity:0; transform:translateY(12px) scale(.6)} 60%{opacity:1} 100%{opacity:1; transform:translateY(0) scale(1)} }

/* vibe caption — plain text under the portrait, always one line */
.vibe{ text-align:center; font-weight:500; font-size:clamp(0.78rem, 1.35vw, 0.92rem); color:var(--purple); padding:2px 4px; white-space:nowrap; }
.rot{ display:inline-block; font-weight:700; color:var(--fuchsia); transition:opacity .3s ease, transform .3s ease; }
.rot.out{ opacity:0; transform:translateY(-6px); }

/* burst overlay — celebrate bubbles render above the cards */
.burst-canvas{ position:fixed; inset:0; z-index:50; pointer-events:none; }

/* intro card — frosted glass so bubbles drift softly behind it */
.intro{
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 12px 34px rgba(122,77,166,0.12);
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(0.5rem, 1.1vw, 0.8rem); padding:clamp(1.4rem, 2.7vw, 2.2rem);
}
.kicker{
  font-weight:700; text-transform:uppercase; letter-spacing:0.09em;
  font-size:clamp(0.68rem, 1.25vw, 0.82rem); color:var(--fuchsia);
}
.name{
  font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:800;
  font-size:clamp(2.7rem, 5.6vw, 4.2rem); line-height:0.92; letter-spacing:-0.025em;
}
.name .dot{ color:var(--fuchsia); }
.tagline{ font-weight:500; font-size:clamp(0.98rem, 1.7vw, 1.2rem); line-height:1.36; color:var(--ink); max-width:40ch; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:0.44rem; margin-top:0.3rem; }
.chips li{
  font-weight:600; font-size:clamp(0.68rem, 1.35vw, 0.78rem); letter-spacing:0.01em;
  padding:0.42em 0.85em; border-radius:999px; white-space:nowrap;
  color:var(--purple); background:var(--lav-soft);
}
.chips li:nth-child(4n+1){ color:#B0246B; background:var(--pink-soft); }
.chips li:nth-child(4n+2){ color:var(--purple); background:var(--lav-soft); }
.chips li:nth-child(4n+3){ color:#8a6400; background:var(--yellow-soft); }
.chips li:nth-child(4n+4){ color:#B5623A; background:var(--peach-soft); }

/* CTA */
.cta{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  background:var(--fuchsia); color:#fff; text-decoration:none;
  padding:clamp(1rem, 2vw, 1.5rem) clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow:0 14px 32px rgba(229,21,126,0.32);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-txt{ display:flex; flex-direction:column; line-height:1.05; }
.cta-txt strong{ font-weight:700; font-size:clamp(1.15rem, 2.3vw, 1.55rem); }
.cta-txt small{ font-weight:500; font-size:clamp(0.72rem, 1.3vw, 0.88rem); opacity:0.9; margin-top:0.18em; }
.cta::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform:skewX(-18deg); transition:left .55s ease; pointer-events:none;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(229,21,126,0.42); }
.cta:hover::after{ left:130%; }
.cta .arw{ font-size:1.5em; transition:transform .18s ease; }
.cta:hover .arw{ transform:translateX(5px); }

/* secondary links — plain outline buttons, no outer card */
.links{ display:flex; gap:0.7rem; }
.links a{
  flex:1; text-align:center; text-decoration:none; font-weight:600; color:var(--purple);
  border:1.6px solid var(--mauve); border-radius:16px; padding:0.85em 1em; background:var(--card);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.links a:hover{ background:var(--lav-soft); border-color:var(--purple); transform:translateY(-2px); }

.foot{ text-align:center; font-size:0.72rem; color:#9a94a0; margin-top:2px; }
.foot a{ color:#7a7480; text-decoration:none; border-bottom:1px solid #d8d2de; }
.foot a:hover{ color:var(--fuchsia); }

:focus-visible{ outline:2.5px solid var(--fuchsia); outline-offset:3px; border-radius:8px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:clamp(14px, 4vh, 28px); transform:translate(-50%, 14px);
  z-index:5; pointer-events:none; background:var(--ink); color:#fff; font-weight:600; font-size:0.82rem;
  padding:0.55em 1.05em; border-radius:999px; white-space:nowrap; box-shadow:0 8px 24px rgba(27,20,32,0.28);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* fallback CSS bubbles */
.css-bubbles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.css-bubble{
  position:fixed; bottom:-160px; border:0; padding:0; border-radius:50%; pointer-events:auto; cursor:pointer;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,0.85), var(--c,#FF5CBE) 60%, var(--c,#FF5CBE) 100%);
  box-shadow:inset 0 6px 18px rgba(255,255,255,0.45), 0 6px 16px rgba(122,77,166,0.10);
  opacity:0.45; animation:floatUp var(--dur,14s) linear var(--delay,0s) infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0) scale(0.9); opacity:0; }
  12%{ opacity:0.45; } 88%{ opacity:0.45; }
  100%{ transform:translateY(-120vh) translateX(var(--drift,0)) scale(1.05); opacity:0; }
}
.css-bubble.pop{ animation:none; transition:transform .3s ease, opacity .3s ease; transform:scale(1.28); opacity:0; }

/* responsive: stack on phones */
@media (max-width:760px){
  body{ overflow-y:auto; align-items:flex-start; }
  .wrap{ width:min(94vw, 460px); max-height:none; padding:clamp(1rem, 5vh, 1.8rem) 0; }
  .bento{ flex-direction:column; min-height:0; gap:14px; }
  .left, .col{ flex:none; width:100%; }
  /* portrait becomes a small centered circle icon on mobile */
  .left{ align-items:center; gap:8px; }
  .photo{ width:clamp(120px, 34vw, 160px); aspect-ratio:1; min-height:0; flex:none; border-radius:50%; margin:0 auto; }
  .photo img{ border-radius:50%; object-position:50% 16%; }
  .intro{ text-align:center; align-items:center; }
  .chips{ justify-content:center; }
  .name{ font-size:clamp(2.6rem, 12vw, 3.6rem); }
  .vibe{ white-space:normal; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .css-bubble{ animation-duration:40s; }
  .photo.bounce{ animation:none; }
  .name span, .name .dot{ animation:none !important; }
  .cta::after{ display:none; }
  .cta, .links a, .arw{ transition:none; }
  .cursor span{ transition:none; }
}