/* ============ TOKENS ============ */
:root{
  --cream:#fff8ee;
  --cream-2:#fcf1dc;
  --paper:#ffffff;
  --ink:#1f2435;
  --ink-2:#2d3548;
  --text:#3a4259;
  --mute:#6b7280;
  --soft:#eef0f5;
  --border:#ece3d0;
  --border-2:#f4ebd8;

  /* Vibrant accents */
  --sky:#5BC0EB;
  --sky-deep:#3BA8D6;
  --ocean:#4F8FF7;
  --indigo:#6366F1;
  --coral:#FF7B7B;
  --rose:#F472B6;
  --sun:#FBBF24;
  --peach:#FB923C;
  --mint:#4ADE80;
  --mint-deep:#10B981;
  --lavender:#A78BFA;
  --violet:#818CF8;

  --serif:'Fraunces', ui-serif, Georgia, serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --hand:'Caveat', cursive;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* Base font-size sized so the site reads at a natural 100% feel.
     Default browser rem = 16px; bumping to ~17.6px = roughly 110%. */
  font-size:17.6px;
}

/* ============ LOADING SCREEN ============ */
.loader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:linear-gradient(135deg, #fff8ee 0%, #fce7f3 50%, #e0e7ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.7s ease-out, visibility 0.7s ease-out;
  overflow:hidden;
}
.loader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.lb-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.45;
  mix-blend-mode:multiply;
}
.lb-blob-1{width:400px;height:400px;background:#5BC0EB;top:-100px;right:-100px;animation:loaderBlob1 18s ease-in-out infinite}
.lb-blob-2{width:380px;height:380px;background:#FF7B7B;bottom:-80px;left:-100px;animation:loaderBlob2 22s ease-in-out infinite}
.lb-blob-3{width:300px;height:300px;background:#A78BFA;top:40%;right:30%;animation:loaderBlob3 20s ease-in-out infinite;opacity:0.3}
@keyframes loaderBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,80px) scale(1.15)}}
@keyframes loaderBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-50px) scale(1.2)}}
@keyframes loaderBlob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(0.9)}}
.loader-content{
  text-align:center;
  max-width:520px;
  padding:2rem;
  position:relative;
  z-index:2;
}
.loader-anim{
  width:120px;
  height:120px;
  margin:0 auto 2rem;
  position:relative;
}
.lc{
  position:absolute;
  border-radius:50%;
  border:4px solid transparent;
}
.lc1{
  inset:0;
  border-top-color:#FF7B7B;
  border-right-color:#FF7B7B;
  animation:lcSpin 1.4s linear infinite;
}
.lc2{
  inset:15px;
  border-top-color:#3BA8D6;
  border-left-color:#3BA8D6;
  animation:lcSpin 1.8s linear infinite reverse;
}
.lc3{
  inset:30px;
  border-top-color:#FBBF24;
  border-bottom-color:#FBBF24;
  animation:lcSpin 1s linear infinite;
}
@keyframes lcSpin{to{transform:rotate(360deg)}}
.loader-initials{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:2.2rem;
  font-weight:300;
  color:#1f2435;
  background:linear-gradient(135deg, #FF7B7B, #A78BFA);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.04em;
}
.loader-greeting{
  font-family:'Fraunces', serif;
  font-size:2.4rem;
  font-weight:300;
  color:#1f2435;
  margin-bottom:1.5rem;
  letter-spacing:-0.02em;
}
.loader-greeting em{
  font-style:italic;
  background:linear-gradient(115deg, #FF7B7B, #A78BFA, #4F8FF7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.loader-progress{
  width:300px;
  max-width:80%;
  height:5px;
  background:rgba(31,36,53,0.08);
  border-radius:5px;
  overflow:hidden;
  margin:0 auto 0.75rem;
}
.loader-progress-fill{
  height:100%;
  background:linear-gradient(90deg, #FF7B7B, #FBBF24, #10B981, #5BC0EB, #4F8FF7);
  width:0%;
  border-radius:5px;
  transition:width 0.45s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow:0 0 10px rgba(255,123,123,0.4);
}
.loader-percent{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.2em;
  color:#6b7280;
  font-weight:600;
}


body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--text);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

/* Background decorative grid pattern */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(31,36,53,0.05) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
  opacity:0.7;
}

/* Decorative floating blobs */
.blob{
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.45;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:multiply;
}
.blob-1{width:500px;height:500px;background:var(--sky);top:-100px;right:-150px;animation:bfloat1 22s ease-in-out infinite}
.blob-2{width:400px;height:400px;background:var(--coral);top:40%;left:-200px;animation:bfloat2 28s ease-in-out infinite}
.blob-3{width:450px;height:450px;background:var(--lavender);bottom:10%;right:-100px;animation:bfloat3 25s ease-in-out infinite}
.blob-4{width:350px;height:350px;background:var(--mint);top:80%;left:30%;animation:bfloat4 30s ease-in-out infinite;opacity:0.3}
@keyframes bfloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,80px) scale(1.15)}}
@keyframes bfloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(100px,-60px) scale(1.2)}}
@keyframes bfloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-100px) scale(1.1)}}
@keyframes bfloat4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,50px) scale(0.9)}}

.shell{
  position:relative;
  z-index:2;
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

/* ============ NAV ============ */
nav{
  position:fixed;
  top:1rem;left:0;right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.nav-pill{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0.5rem 0.6rem 0.5rem 1.5rem;
  box-shadow:0 8px 30px rgba(31,36,53,0.06);
  font-size:0.85rem;
}
.brand{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.brand-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--coral), var(--sun));
  box-shadow:0 0 0 3px rgba(255,123,123,0.15);
}
.nav-links{
  display:flex;
  gap:0.3rem;
  list-style:none;
}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:0.55rem 1.1rem;
  border-radius:999px;
  transition:all 0.3s;
  font-size:0.85rem;
}
.nav-links a:hover{background:var(--cream-2);color:var(--ink)}
.nav-cta{
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white!important;
  font-weight:600!important;
}
.nav-cta:hover{background:var(--ocean)!important;color:white!important}

@media(max-width:780px){
  .nav-links li:not(:last-child){display:none}
}

/* ============ SECTIONS ============ */
section{
  padding:7rem 0;
  position:relative;
}
.section-head{
  margin-bottom:4rem;
  position:relative;
}
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:0.4rem 1rem;
  border-radius:999px;
  margin-bottom:1.5rem;
  cursor:pointer;
  border:none;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.25s;
  position:relative;
}
.section-tag:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05) saturate(1.15);
  box-shadow:0 8px 20px rgba(31,36,53,0.12);
}
.section-tag:active{transform:translateY(0) scale(1)}
.section-tag.sky{background:rgba(91,192,235,0.15);color:var(--sky-deep)}
.section-tag.coral{background:rgba(255,123,123,0.15);color:#dc5b5b}
.section-tag.lavender{background:rgba(167,139,250,0.18);color:#7c3aed}
.section-tag.sun{background:rgba(251,191,36,0.18);color:#b45309}
.section-tag.mint{background:rgba(74,222,128,0.18);color:#047857}
.section-tag.rose{background:rgba(244,114,182,0.18);color:#be185d}
.section-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.6}}

/* Gentle float for tech icons - adds life without being too drastic */
@keyframes techIconFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%    {transform:translateY(-3px) rotate(-1.5deg)}
  50%    {transform:translateY(0) rotate(0deg)}
  75%    {transform:translateY(-2px) rotate(1.5deg)}
}

/* ============ INTERACTIVE PILLS / BUTTONS - universal reveal system ============ */
/* Hero chips, hero floating stickers, stat tiles, journey-tags, project-meta pills,
   personality letter cards, ENTP cards - all share this clickable + popup pattern. */
.click-pill{
  cursor:pointer;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.25s;
  position:relative;
}
.click-pill:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05);
}
.click-pill:active{transform:translateY(0) scale(0.98)}

/* The universal popup that appears anchored to a clicked pill */
.pill-popup{
  position:absolute;
  z-index:9000;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.5);
  transition:opacity 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-width:340px;
  text-align:center;
}
.pill-popup.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.pill-popup-card{
  background:linear-gradient(135deg, #fff8ee 0%, #fef3c7 50%, #fce7f3 100%);
  border:1.5px solid rgba(212,165,116,0.4);
  border-radius:22px;
  padding:1.5rem 1.75rem;
  box-shadow:
    0 30px 70px rgba(31,36,53,0.25),
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 0 50px rgba(251,191,36,0.25);
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.4;
  color:var(--ink);
  position:relative;
}
.pill-popup-emoji{
  font-size:2.4rem;
  display:block;
  margin-bottom:0.5rem;
  animation:pillPopBounce 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pillPopBounce{
  0%{transform:scale(0) rotate(-20deg)}
  60%{transform:scale(1.3) rotate(10deg)}
  100%{transform:scale(1) rotate(0deg)}
}
/* Revealed word that appears NEXT TO project meta pills when clicked */
.meta-revealed{
  display:inline-flex;
  align-items:center;
  margin-left:0.5rem;
  padding:0.25rem 0.65rem;
  background:linear-gradient(135deg, var(--coral) 0%, var(--sun) 100%);
  color:white;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  box-shadow:0 4px 12px rgba(255,123,123,0.35);
  animation:metaRevealPop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes metaRevealPop{
  0%{opacity:0; transform:translateX(-8px) scale(0.6)}
  100%{opacity:1; transform:translateX(0) scale(1)}
}
.pill-popup-close{
  position:absolute;
  top:0.4rem;
  right:0.6rem;
  width:26px;
  height:26px;
  border:none;
  background:rgba(31,36,53,0.06);
  border-radius:50%;
  cursor:pointer;
  font-size:0.75rem;
  color:var(--mute);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.pill-popup-close:hover{background:rgba(255,123,123,0.18);color:var(--coral)}
/* XL popup needs higher-contrast close button since the card has its own bg */
.pill-popup.pill-popup-xl .pill-popup-close{
  top:0.85rem;
  right:0.85rem;
  width:38px;
  height:38px;
  background:white;
  font-size:1.05rem;
  color:var(--ink);
  font-weight:700;
  border:1.5px solid rgba(167,139,250,0.4);
  box-shadow:0 6px 14px rgba(31,36,53,0.18), 0 0 0 4px rgba(255,255,255,0.5);
  z-index:50;
}
.pill-popup.pill-popup-xl .pill-popup-close:hover{
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white;
  border-color:transparent;
  transform:scale(1.08);
}
.pill-popup-quote{
  font-style:italic;
  margin-top:0.6rem;
  font-size:0.95rem;
  color:var(--text);
}
.pill-popup-author{
  margin-top:0.4rem;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--coral);
  font-weight:700;
}
.pill-popup-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.8rem;
  padding:0.5rem 1rem;
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  transition:transform 0.2s;
}
.pill-popup-link:hover{transform:scale(1.05)}

/* Mini tag-pills shown inside popup cards (e.g. tech stack chips) */
.pill-popup-tag{
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.55rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:700;
}

/* Wide popup variant - for the 16 Personalities grid */
.pill-popup.pill-popup-wide{
  max-width:min(620px, calc(100vw - 2rem));
  width:620px;
}
/* XL popup variant - for the theatrical 16 Personalities "What is that?" */
.pill-popup.pill-popup-xl{
  max-width:min(560px, calc(100vw - 1.5rem));
  width:560px;
}
.pill-popup.pill-popup-xl .pill-popup-card{
  padding:0;
  overflow:hidden;
  background:transparent;
  box-shadow:0 32px 80px rgba(31,36,53,0.32), 0 0 0 1px rgba(255,255,255,0.5) inset;
}
@media(max-width:700px){
  .pill-popup.pill-popup-wide{width:auto; max-width:calc(100vw - 1.5rem)}
  .pill-popup.pill-popup-xl{width:auto; max-width:calc(100vw - 1rem)}
}

/* === 16 Personalities "What is that?" theatrical popup === */
.p16-stage{
  position:relative;
  padding:2.4rem 1.8rem 1.8rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(167,139,250,0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(244,114,182,0.18), transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(91,192,235,0.18), transparent 65%),
    linear-gradient(180deg, #fffaf0 0%, #fef3c7 100%);
  overflow:hidden;
  border-radius:18px;
  text-align:center;
}
/* Decorative drifting orbs */
.p16-bg-orb{
  position:absolute;
  width:120px; height:120px;
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
}
.p16-orb-1{top:-40px; left:-40px;  background:rgba(167,139,250,0.4); animation:p16OrbDrift 12s ease-in-out infinite}
.p16-orb-2{bottom:-40px; right:-30px; background:rgba(244,114,182,0.35); animation:p16OrbDrift 14s ease-in-out infinite -3s}
.p16-orb-3{top:30%; right:5%; background:rgba(91,192,235,0.30); animation:p16OrbDrift 16s ease-in-out infinite -6s}
@keyframes p16OrbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(20px, -15px) scale(1.2)}
}
/* Floating question marks in the backdrop */
.p16-q{
  position:absolute;
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:rgba(167,139,250,0.30);
  pointer-events:none;
  user-select:none;
  animation:p16QFloat 6s ease-in-out infinite;
}
.p16-q-1{top:18%; left:8%;  font-size:3rem; animation-delay:0s}
.p16-q-2{top:55%; left:6%;  font-size:2.2rem; color:rgba(244,114,182,0.30); animation-delay:-1.5s}
.p16-q-3{top:22%; right:8%; font-size:2.6rem; color:rgba(91,192,235,0.30); animation-delay:-3s}
.p16-q-4{top:62%; right:6%; font-size:2rem;  color:rgba(251,191,36,0.40); animation-delay:-4.5s}
@keyframes p16QFloat{
  0%,100%{transform:translateY(0) rotate(-10deg); opacity:0.5}
  50%    {transform:translateY(-15px) rotate(10deg); opacity:1}
}

/* Giant question mark in the middle with a pulsing ring around it */
.p16-bigq{
  position:relative;
  width:110px;
  height:110px;
  margin:0 auto 1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0) rotate(-90deg);
  animation:p16BigQIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s forwards;
}
@keyframes p16BigQIn{
  to{opacity:1; transform:scale(1) rotate(0)}
}
.p16-bigq-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,0.35) 0%, transparent 70%);
  animation:p16BigQRing 2.2s ease-in-out infinite;
}
@keyframes p16BigQRing{
  0%,100%{transform:scale(1);   opacity:0.7}
  50%    {transform:scale(1.18); opacity:1}
}
.p16-bigq-mark{
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:5.5rem;
  line-height:1;
  background:linear-gradient(135deg, #a78bfa, #f472b6, #fbbf24);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:p16BigQGradient 4s ease-in-out infinite, p16BigQBob 3s ease-in-out infinite;
  text-shadow:0 4px 12px rgba(167,139,250,0.25);
  filter:drop-shadow(0 4px 8px rgba(167,139,250,0.3));
}
@keyframes p16BigQGradient{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
@keyframes p16BigQBob{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  50%    {transform:translateY(-4px) rotate(5deg)}
}

.p16-heading{
  font-family:var(--serif);
  font-size:1.85rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
  margin-bottom:1rem;
  position:relative;
  z-index:1;
  opacity:0;
  animation:p16FadeUp 0.5s ease-out 0.55s forwards;
}
@keyframes p16FadeUp{
  from{opacity:0; transform:translateY(10px)}
  to  {opacity:1; transform:translateY(0)}
}

.p16-explain{
  font-size:0.98rem;
  line-height:1.65;
  color:var(--text);
  max-width:440px;
  margin:0 auto 1.1rem;
  position:relative;
  z-index:1;
  opacity:0;
  animation:p16FadeUp 0.5s ease-out 0.75s forwards;
}
.p16-explain strong{color:var(--ink); font-weight:600}
.p16-explain em{font-style:italic; color:var(--coral)}

/* Inline group tags inside the explanation */
.p16-tag{
  display:inline-block;
  padding:0.1rem 0.5rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  font-weight:700;
  text-transform:uppercase;
  margin:0 0.05rem;
}
.p16-tag-analyst {background:rgba(167,139,250,0.20); color:#7c3aed}
.p16-tag-diplomat{background:rgba(16,185,129,0.18);  color:#059669}
.p16-tag-sentinel{background:rgba(91,192,235,0.18);  color:#0284c7}
.p16-tag-explorer{background:rgba(251,191,36,0.22);  color:#b45309}

/* "Mine is ENTP-A" line - personal note */
.p16-mine-line{
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink);
  line-height:1.55;
  max-width:420px;
  margin:0 auto 1.5rem;
  padding:0.7rem 1rem;
  background:linear-gradient(135deg, rgba(255,123,123,0.10), rgba(251,191,36,0.10));
  border-radius:12px;
  position:relative;
  z-index:1;
  opacity:0;
  animation:p16FadeUp 0.5s ease-out 0.95s forwards;
}
.p16-mine-line em{font-style:italic; color:var(--coral); font-weight:500}
.p16-mine-code{
  font-family:var(--mono);
  font-style:normal;
  font-size:1rem;
  letter-spacing:0.08em;
  font-weight:700;
  color:var(--coral);
  padding:0.1rem 0.45rem;
  background:white;
  border-radius:6px;
  border:1.5px solid rgba(255,123,123,0.4);
  box-shadow:0 2px 6px rgba(255,123,123,0.18);
}
.p16-mine-q{
  font-family:var(--serif);
  font-size:1.2rem;
  font-style:italic;
  font-weight:500;
  color:#a78bfa;
}

/* CTA block */
.p16-cta-wrap{
  position:relative;
  z-index:1;
  padding-top:1.2rem;
  border-top:1px dashed rgba(31,36,53,0.15);
  opacity:0;
  animation:p16FadeUp 0.5s ease-out 1.15s forwards;
}
.p16-cta-prompt{
  font-family:var(--serif);
  font-size:0.95rem;
  font-style:italic;
  color:var(--mute);
  margin-bottom:0.8rem;
}
.p16-cta{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.7rem 1.4rem;
  background:linear-gradient(135deg, var(--coral) 0%, var(--sun) 50%, #a78bfa 100%);
  background-size:200% 100%;
  color:white;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(255,123,123,0.30), 0 4px 8px rgba(167,139,250,0.25);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, background-position 0.5s;
}
.p16-cta:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 30px rgba(255,123,123,0.40), 0 6px 14px rgba(167,139,250,0.35);
  background-position:100% 50%;
}
.p16-cta-arrow{
  display:inline-block;
  font-size:1rem;
  transition:transform 0.3s;
}
.p16-cta:hover .p16-cta-arrow{
  transform:translateX(4px);
}

/* Celebration burst - stars / confetti / brains / keys / etc that explode from a click */
.burst-particle{
  position:absolute;
  z-index:8999;
  pointer-events:none;
  font-size:1.3rem;
  user-select:none;
  will-change:transform, opacity;
}
@keyframes burstFly{
  0%   {opacity:1; transform:translate(-50%,-50%) scale(0.3) rotate(0deg)}
  20%  {opacity:1; transform:translate(calc(-50% + var(--bx, 0px) * 0.5), calc(-50% + var(--by, 0px) * 0.5)) scale(1.2) rotate(180deg)}
  100% {opacity:0; transform:translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px) + 120px)) scale(0.8) rotate(720deg)}
}
@keyframes burstStaticFall{
  0%   {opacity:1; transform:translate(-50%, calc(-50% + var(--bsy, -40px))) rotate(0deg)}
  100% {opacity:0; transform:translate(calc(-50% + var(--bsx, 0px)), calc(-50% + var(--bsy, -40px) + 250px)) rotate(540deg)}
}

.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 5.5vw, 4.5rem);
  line-height:1.02;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.section-title .italic{font-style:italic;font-weight:300}
.section-title .colored{color:var(--coral)}
.section-title .underlined{
  position:relative;
  display:inline-block;
}
.section-title .underlined::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:0.05em;
  height:0.32em;
  background:var(--sun);
  z-index:-1;
  border-radius:4px;
  transform:skewX(-3deg);
}
.section-sub{
  font-size:1.1rem;
  color:var(--mute);
  max-width:600px;
  margin-top:1.25rem;
  line-height:1.7;
}

/* Squiggle decoration */
.squiggle{
  display:inline-block;
  width:90px;
  height:14px;
  vertical-align:middle;
}

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  padding-top:8rem;
  padding-bottom:4rem;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:5rem;
  align-items:center;
  width:100%;
}
@media(max-width:900px){
  .hero{padding-top:7rem}
  .hero-grid{grid-template-columns:1fr;gap:3rem;text-align:left}
}

.hero-greet{
  display:inline-flex;
  align-items:center;
  gap:0.8rem;
  font-family:var(--hand);
  font-size:1.8rem;
  color:var(--coral);
  margin-bottom:1rem;
  font-weight:600;
}
.hero-greet .wave{
  display:inline-block;
  animation:wave 2.5s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}

h1.hero-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,8.5vw,6.5rem);
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--ink);
  margin-bottom:1.5rem;
}
.hero-title .last{
  font-style:italic;
  font-weight:300;
  background:linear-gradient(115deg, var(--ocean), var(--lavender), var(--coral));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;
}
.hero-title .last::after{
  content:'.';
  color:var(--sun);
  -webkit-text-fill-color:var(--sun);
  display:inline;
}

.hero-role{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  margin-bottom:2rem;
  font-size:1.1rem;
  color:var(--text);
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.82rem;
  padding:0.42rem 0.85rem;
  border-radius:999px;
  font-weight:600;
  white-space:nowrap;
}
.chip-sky{background:rgba(91,192,235,0.15);color:var(--sky-deep)}
.chip-coral{background:rgba(255,123,123,0.18);color:#dc5b5b}
.chip-mint{background:rgba(74,222,128,0.18);color:var(--mint-deep)}

/* === Sofia postcard (📍 Sofia · Bulgaria chip effect) ===
   A vintage postcard flies in beside the chip with a Bulgarian-flag stamp,
   handwritten greeting, and a round postmark. No coordinates, no map outline. */
.sofia-postcard{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding:0.7rem 0.9rem 0.7rem 0.7rem;
  background:
    repeating-linear-gradient(135deg, rgba(180,83,9,0.04) 0px, rgba(180,83,9,0.04) 6px, transparent 6px, transparent 12px),
    linear-gradient(180deg, #fffaf0 0%, #fef3c7 100%);
  border:1.5px solid #d4a574;
  border-radius:6px;
  box-shadow:
    0 14px 30px rgba(120,53,15,0.18),
    0 0 0 1px rgba(255,255,255,0.4) inset;
  opacity:0;
  transform:translateY(-50%) rotate(-3deg) scale(0.5);
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s;
  position:relative;
}
.sofia-postcard.spc-reverse{
  transform:translate(-100%, -50%) rotate(-3deg) scale(0.5);
}
.sofia-postcard.is-open{
  opacity:1;
  transform:translateY(-50%) rotate(-3deg) scale(1);
}
.sofia-postcard.spc-reverse.is-open{
  transform:translate(-100%, -50%) rotate(-3deg) scale(1);
}
/* Stamp (with mini Bulgarian flag) */
.spc-stamp{
  width:38px;
  height:48px;
  background:white;
  border:1.5px dashed #d4a574;
  border-radius:3px;
  padding:4px;
  position:relative;
  flex-shrink:0;
  /* Perforated stamp edge using radial-gradient dots on each side */
  -webkit-mask:
    radial-gradient(circle 3px at 0 6px,  transparent 98%, black 100%) 0 0 / 100% 12px,
    radial-gradient(circle 3px at 100% 6px, transparent 98%, black 100%) 0 0 / 100% 12px;
}
.spc-flag{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.spc-flag-bar{
  flex:1;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  animation:spcFlagBar 0.5s cubic-bezier(0.4,0.0,0.2,1) forwards;
}
.spc-fb-white{background:#ffffff; animation-delay:0.5s}
.spc-fb-green{background:#00966e; animation-delay:0.65s}
.spc-fb-red  {background:#d62612; animation-delay:0.8s}
@keyframes spcFlagBar{ to{ transform:scaleX(1); } }
/* Center text content */
.spc-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}
.spc-greeting{
  font-family:var(--hand);
  font-size:0.85rem;
  color:var(--mute);
  letter-spacing:0.02em;
  opacity:0;
  animation:spcContentIn 0.4s ease-out 0.4s forwards;
}
.spc-city{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.02em;
  margin-top:0.05rem;
  opacity:0;
  animation:spcContentIn 0.4s ease-out 0.6s forwards;
}
.spc-cyr{
  font-family:var(--serif);
  font-size:0.78rem;
  font-style:italic;
  color:#dc2626;
  margin-top:0.1rem;
  opacity:0;
  animation:spcContentIn 0.4s ease-out 0.8s forwards;
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
}
.spc-rose{
  display:inline-block;
  font-size:0.85rem;
  animation:spcRoseBob 2.5s ease-in-out infinite 1.2s;
}
@keyframes spcContentIn{ to{ opacity:1; } }
@keyframes spcRoseBob{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(20deg)}
}
/* Round postmark */
.spc-postmark{
  width:42px;
  height:42px;
  position:relative;
  flex-shrink:0;
  margin-right:-4px;
  opacity:0;
  transform:rotate(-15deg);
  animation:spcPostmarkIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 1.0s forwards;
}
@keyframes spcPostmarkIn{
  from{opacity:0; transform:rotate(-50deg) scale(0.4)}
  to  {opacity:0.88; transform:rotate(-15deg) scale(1)}
}
.spc-pm-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid #dc2626;
  opacity:0.85;
}
.spc-pm-ring::before{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid #dc2626;
  opacity:0.7;
}
.spc-pm-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-weight:800;
  color:#dc2626;
  letter-spacing:0.05em;
}
.spc-pm-bg{
  font-size:0.7rem;
  line-height:1;
}
.spc-pm-star{
  font-size:0.62rem;
  line-height:1;
  margin-top:1px;
}
/* Hide on small mobile (no room for it) */
@media(max-width:768px){
  .sofia-postcard{display:none}
}

.hero-desc{
  font-size:1.1rem;
  color:var(--text);
  line-height:1.75;
  max-width:520px;
  margin-bottom:2.5rem;
}

.hero-cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}
.btn{
  font-family:var(--sans);
  font-size:0.92rem;
  font-weight:600;
  padding:1rem 1.8rem;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:all 0.35s cubic-bezier(0.2,0.8,0.2,1);
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  position:relative;
}
.btn-primary{
  background:linear-gradient(135deg, var(--coral) 0%, var(--sun) 100%);
  color:white;
  box-shadow:0 6px 0 #d97a7a, 0 12px 24px rgba(255,123,123,0.32);
}
.btn-primary:hover{
  transform:translateY(2px);
  box-shadow:0 4px 0 #d97a7a, 0 8px 18px rgba(255,123,123,0.36);
}
.btn-primary:active{
  transform:translateY(6px);
  box-shadow:0 0 0 #d97a7a;
}
.btn-soft{
  background:white;
  color:var(--ink);
  border:1.5px solid var(--border);
  box-shadow:0 4px 12px rgba(31,36,53,0.04);
}
.btn-soft:hover{
  border-color:var(--ocean);
  color:var(--ocean);
  transform:translateY(-2px);
}
.btn .arr{transition:transform 0.3s}
.btn:hover .arr{transform:translateX(4px)}

/* Hero stats */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:480px;
}
.hstat{
  background:white;
  border:1.5px solid var(--border);
  border-radius:18px;
  padding:1.1rem 1rem;
  text-align:left;
  position:relative;
  transition:all 0.3s;
}
.hstat:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(31,36,53,0.08)}
.hstat-num{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
  line-height:1;
  color:var(--ink);
}
.hstat-num .plus{color:var(--coral)}
.hstat-lbl{
  font-size:0.72rem;
  color:var(--mute);
  margin-top:0.4rem;
  font-weight:500;
}
.hstat:nth-child(1) .hstat-num .plus{color:var(--ocean)}
.hstat:nth-child(2) .hstat-num .plus{color:var(--coral)}
.hstat:nth-child(3) .hstat-num .plus{color:var(--mint-deep)}

/* Hero photo */
.hero-photo{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
/* Page-open entrance: the photo zooms in from a noticeably larger framing.
   Stronger zoom + a synchronized whole-hero subtle scale gives an opening feel. */
@keyframes heroPhotoIntro{
  0%   { transform:rotate(-2deg) scale(1.35); opacity:0; }
  30%  { transform:rotate(-2deg) scale(1.30); opacity:1; }
  100% { transform:rotate(-2deg) scale(1);    opacity:1; }
}
@keyframes heroSectionIntro{
  0%   { transform:scale(1.08); opacity:0.4; }
  100% { transform:scale(1);    opacity:1;   }
}
.hero{
  animation:heroSectionIntro 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  transform-origin:60% 50%;
}
@keyframes heroFadeIn{
  0%   { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
.photo-wrap{
  position:relative;
  width:min(460px, 100%);
  aspect-ratio:5/6;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(31,36,53,0.18);
  border:6px solid white;
  transform:rotate(-2deg);
  transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
  z-index:2;
  animation:heroPhotoIntro 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.photo-wrap:hover{transform:rotate(0) scale(1.02)}
.photo-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Floating decoration around photo */
.photo-deco{
  position:absolute;
  border-radius:50%;
  z-index:1;
}
.deco-1{
  width:140px;height:140px;
  background:var(--sun);
  top:-30px;right:-20px;
  border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
  animation:morph 8s ease-in-out infinite, slowspin 30s linear infinite;
}
.deco-2{
  width:90px;height:90px;
  background:var(--coral);
  bottom:-20px;left:-30px;
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  animation:morph 10s ease-in-out infinite reverse, slowspin 40s linear infinite reverse;
}
.deco-3{
  width:60px;height:60px;
  background:var(--mint);
  top:20%;left:-40px;
  border-radius:50%;
  animation:bobble 4s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%}
  50%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
}
@keyframes slowspin{to{transform:rotate(360deg)}}
@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* Floating sticker labels around photo */
.sticker{
  position:absolute;
  background:white;
  border-radius:14px;
  padding:0.65rem 1rem;
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:700;
  color:var(--ink);
  box-shadow:0 12px 30px rgba(31,36,53,0.15);
  display:flex;
  align-items:center;
  gap:0.5rem;
  z-index:3;
  border:2px solid var(--cream-2);
  white-space:nowrap;
}
.sticker .emoji{font-size:1.1rem}
.sticker-1{top:8%;left:-15%;animation:float-a 6s ease-in-out infinite;transform:rotate(-8deg)}
.sticker-2{top:55%;right:-18%;animation:float-b 7s ease-in-out infinite;transform:rotate(5deg)}
.sticker-3{bottom:6%;left:-8%;animation:float-c 8s ease-in-out infinite;transform:rotate(3deg)}
@keyframes float-a{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes float-b{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-15px) rotate(7deg)}}
@keyframes float-c{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(5deg)}}

@media(max-width:900px){
  .sticker-1,.sticker-2,.sticker-3{display:none}
  .photo-wrap{width:280px;margin:0 auto}
}

/* Marquee tech belt */
.marquee{
  margin-top:5rem;
  padding:1.5rem 0;
  background:linear-gradient(90deg, #fef3c7 0%, #fce7f3 50%, #e0e7ff 100%);
  color:var(--ink);
  overflow:hidden;
  position:relative;
  white-space:nowrap;
  border-radius:20px;
  transform:rotate(-1deg);
  border:3px solid var(--sun);
}
.marquee-track{
  display:inline-flex;
  gap:3rem;
  animation:marquee 30s linear infinite;
  padding-right:3rem;
}
.marquee-item{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.6rem;
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:3rem;
}
.marquee-item::after{
  content:'✦';
  color:var(--sun);
  font-style:normal;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ ABOUT ============ */
.about-card{
  background:white;
  border-radius:32px;
  padding:clamp(2rem,5vw,4rem);
  border:1.5px solid var(--border);
  box-shadow:0 20px 50px rgba(31,36,53,0.04);
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  position:relative;
  overflow:hidden;
}
.about-content{
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:4rem;
  align-items:start;
}
@media(max-width:900px){.about-content{grid-template-columns:1fr;gap:2rem}}
.about-card::before{
  content:'';
  position:absolute;
  top:-50%;right:-10%;
  width:300px;height:300px;
  background:var(--coral);
  border-radius:50%;
  filter:blur(80px);
  opacity:0.15;
  pointer-events:none;
}

.about-aside{
  position:relative;
}
.about-pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  line-height:1.3;
  color:var(--ink);
  padding-left:1.5rem;
  border-left:3px solid var(--coral);
  margin-bottom:2rem;
}
.about-pull .h{
  font-family:var(--hand);
  font-style:normal;
  font-weight:600;
  color:var(--coral);
  font-size:1.25em;
}
.about-fact{
  background:var(--cream-2);
  border:none;
  border-radius:18px;
  padding:1.1rem 1.3rem;
  margin-bottom:0.8rem;
  display:flex;
  align-items:center;
  gap:0.9rem;
  width:100%;
  cursor:pointer;
  font:inherit;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.about-fact:hover{
  transform:translateX(4px);
  box-shadow:0 8px 22px rgba(31,36,53,0.10);
}
.about-fact:active{transform:translateX(2px) scale(0.99)}
.about-fact.is-shining::before{
  /* The shine sweep - a diagonal highlight that slides across the card */
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  animation:factShineSweep 1.1s ease-out forwards;
  pointer-events:none;
  z-index:3;
}
@keyframes factShineSweep{
  to{ left:160%; }
}
.about-fact.is-shining .about-fact-text strong{
  /* Underline reveals on shine */
  background-image:linear-gradient(90deg, var(--coral) 0%, var(--sun) 100%);
  background-size:100% 3px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:2px;
  animation:factUnderlineDraw 0.7s ease-out forwards;
}
@keyframes factUnderlineDraw{
  from{ background-size:0 3px; }
  to  { background-size:100% 3px; }
}
.about-fact-ic{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.fact-1 .about-fact-ic{background:var(--sky);color:white}
.fact-2 .about-fact-ic{background:var(--coral);color:white}
.fact-3 .about-fact-ic{background:var(--mint-deep);color:white}
.fact-4 .about-fact-ic{background:var(--lavender);color:white}
.about-fact-text{font-size:0.92rem;color:var(--ink);font-weight:500}
.about-fact-text strong{color:var(--ink);font-weight:700}

.about-body p{
  font-size:1.05rem;
  color:var(--text);
  line-height:1.85;
  margin-bottom:1.25rem;
}
.about-body p strong{color:var(--ink);font-weight:600}
.about-body p em{color:var(--coral);font-style:italic;font-weight:500}

/* Lead paragraph - big pull-quote feel that sets the tone */
.about-body .lead{
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:300;
  line-height:1.45;
  color:var(--ink);
  margin-bottom:2.5rem;
  padding-left:1.2rem;
  border-left:3px solid var(--coral);
  position:relative;
}
.about-body .lead .h{
  font-style:italic;
  color:var(--ocean);
  font-weight:400;
}

/* Chapter markers - small uppercase mono labels that introduce each phase */
.about-chapter{
  display:flex;
  align-items:center;
  gap:0.8rem;
  margin:2.2rem 0 0.9rem;
  padding-top:1.4rem;
  border-top:1px dashed rgba(31,36,53,0.1);
}
.about-chapter:first-of-type{
  margin-top:1.6rem;
  padding-top:0;
  border-top:none;
}
.about-chapter-num{
  font-family:var(--serif);
  font-size:1.4rem;
  font-style:italic;
  font-weight:500;
  color:var(--coral);
  line-height:1;
}
.about-chapter-label{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
}

/* Closing paragraph - elevated style that wraps up the narrative */
.about-body .about-close{
  font-family:var(--serif);
  font-size:1.18rem;
  font-style:italic;
  line-height:1.6;
  color:var(--ink);
  margin-top:2.4rem;
  padding:1.2rem 1.4rem;
  background:linear-gradient(135deg, rgba(251,191,36,0.10), rgba(255,123,123,0.08));
  border-radius:14px;
  border-left:3px solid var(--sun);
}

.about-sign{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1.5px dashed var(--border);
}
.about-sign-name{
  font-family:var(--hand);
  font-size:2.2rem;
  font-weight:600;
  color:var(--ocean);
}
.about-sign-meta{font-size:0.8rem;color:var(--mute)}

/* ============ TECH ============ */
.tech-block{position:relative}
.tech-filters{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.tech-filter{
  font-family:var(--sans);
  font-size:0.82rem;
  font-weight:600;
  padding:0.55rem 1.1rem;
  background:white;
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  transition:all 0.3s;
}
.tech-filter:hover{border-color:var(--ink);color:var(--ink)}
.tech-filter.active{
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white;
  border-color:transparent;
}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:1.25rem;
  perspective:1200px;
  perspective-origin:center;
}

.tech-card{
  position:relative;
  background:transparent;
  border:none;
  border-radius:22px;
  padding:0;
  cursor:pointer;
  min-height:240px;
  perspective:1200px;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
  overflow:visible;
  will-change:transform;
}
.tech-card.dim{opacity:0.22;filter:saturate(0.35);pointer-events:none}
.tc-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:240px;
  transform-style:preserve-3d;
  transition:transform 0.7s cubic-bezier(0.4,0.0,0.2,1);
}
.tech-card.is-flipped .tc-flip-inner{
  transform:rotateY(180deg);
}
/* Gentle continuous icon float - animates the icon ONLY, never the flip-inner
   (animating the inner would break the flip-card transform). */
.tech-card .tc-icon-wrap{
  animation:tcIconFloat 4s ease-in-out infinite;
}
@keyframes tcIconFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%    {transform:translateY(-4px) rotate(-2deg)}
  50%    {transform:translateY(0) rotate(0deg)}
  75%    {transform:translateY(-3px) rotate(2deg)}
}
/* When the user hovers a card, the icon also lifts. The two animations compose. */
.tech-card:hover:not(.is-flipped) .tc-icon-wrap{
  animation-play-state:paused;
}
.tc-face{
  position:absolute;
  inset:0;
  border-radius:22px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.6rem 1.2rem 1.3rem;
  overflow:hidden;
  gap:0.85rem;
}
.tc-front{
  background:white;
  border:1.5px solid var(--border);
  transition:box-shadow 0.4s, border-color 0.4s;
}
.tech-card:hover:not(.is-flipped) .tc-front{
  box-shadow:0 22px 45px rgba(31,36,53,0.15), 0 6px 12px rgba(31,36,53,0.05);
  border-color:var(--tc, var(--border));
}
.tech-card .tc-glow{
  position:absolute;
  inset:-10% -10% 50% -10%;
  background:radial-gradient(ellipse at top, var(--tcl, transparent), transparent 70%);
  opacity:0.5;
  pointer-events:none;
  transition:opacity 0.4s, transform 0.4s;
  z-index:0;
}
.tech-card:hover:not(.is-flipped) .tc-glow{
  opacity:1;
  transform:scale(1.15);
}

/* Tech card BACK face - colored gradient with the fun fact */
.tc-back{
  transform:rotateY(180deg);
  color:var(--ink);
  justify-content:center;
  background:linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border:1.5px solid var(--tc, var(--coral));
  box-shadow:0 22px 45px rgba(31,36,53,0.16);
  padding:1.6rem 1.4rem;
}
.tc-back::after{
  /* Decorative floating dots overlay - now uses the card's brand color */
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle 25px at 20% 25%, color-mix(in srgb, var(--tc, #FF7B7B) 22%, transparent), transparent),
    radial-gradient(circle 20px at 80% 70%, color-mix(in srgb, var(--tc, #FF7B7B) 18%, transparent), transparent),
    radial-gradient(circle 16px at 50% 90%, color-mix(in srgb, var(--tc, #FF7B7B) 14%, transparent), transparent);
  pointer-events:none;
  opacity:0.65;
}
.tc-back-name{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--tc, var(--ink));
  margin-bottom:0.8rem;
  position:relative;
  z-index:1;
}
.tc-back-fact{
  font-family:var(--serif);
  font-size:1.25rem;
  font-style:italic;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  position:relative;
  z-index:1;
}

.tc-icon-wrap{
  width:72px;height:72px;
  border-radius:18px;
  background:var(--tcl, var(--cream-2));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  z-index:2;
  transition:transform 0.45s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s;
  box-shadow:0 8px 18px rgba(31,36,53,0.08);
}
.tech-card:hover:not(.is-flipped) .tc-icon-wrap{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 14px 28px rgba(31,36,53,0.15);
}
.tc-icon{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.tc-fallback{
  font-family:var(--mono);
  font-weight:800;
  font-size:1.4rem;
  color:var(--tc, var(--ink));
  letter-spacing:-0.04em;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:white;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.tc-info{
  position:relative;
  z-index:1;
  width:100%;
}
.tc-name{
  font-family:var(--sans);
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  margin-bottom:0.2rem;
  line-height:1.2;
}
.tc-cat{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}

.tc-dots{
  display:flex;
  gap:5px;
  margin-top:0.1rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.tc-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(31,36,53,0.13);
  transition:transform 0.3s, box-shadow 0.3s;
}
.tc-dot.on{
  background:var(--tc, var(--coral));
}
.tech-card:hover .tc-dot.on{
  transform:scale(1.15);
  box-shadow:0 0 8px var(--tc, var(--coral));
}

/* Small "tap to flip" hint on front - subtle, only shows on hover/focus */
.tc-flip-cue{
  font-family:var(--mono);
  font-size:0.55rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
  opacity:0;
  transition:opacity 0.3s;
  position:absolute;
  bottom:0.8rem;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
  white-space:nowrap;
}
.tech-card:hover:not(.is-flipped) .tc-flip-cue{
  opacity:0.7;
}

/* ============ TECH SECTION BACKGROUND ============ */
#tech{position:relative;overflow:hidden}
.tech-section-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.tech-symbol{
  position:absolute;
  font-family:var(--mono);
  font-weight:800;
  color:var(--ink);
  opacity:0.045;
  user-select:none;
  white-space:nowrap;
  animation:symbolDrift 28s ease-in-out infinite;
}
@keyframes symbolDrift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(30px,-20px) rotate(8deg)}
  50%{transform:translate(50px,15px) rotate(-5deg)}
  75%{transform:translate(20px,30px) rotate(6deg)}
}
.ts-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.25;
  mix-blend-mode:multiply;
}
.ts-blob-1{background:var(--sky);top:8%;left:3%;width:340px;height:340px;animation:bfloat1 26s ease-in-out infinite}
.ts-blob-2{background:var(--lavender);top:55%;right:5%;width:300px;height:300px;animation:bfloat2 32s ease-in-out infinite;opacity:0.22}
.ts-blob-3{background:var(--mint);bottom:15%;left:35%;width:280px;height:280px;animation:bfloat3 30s ease-in-out infinite;opacity:0.18}
.ts-blob-4{background:var(--coral);top:30%;left:60%;width:220px;height:220px;animation:bfloat4 28s ease-in-out infinite;opacity:0.22}

.tech-block{position:relative;z-index:1}

/* ============ PROJECTS ============ */
#projects{
  position:relative;
  overflow:hidden;
}
#projects::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(167,139,250,0.08), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(91,192,235,0.08), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(251,191,36,0.06), transparent 40%);
  pointer-events:none;
  animation:projBgDrift 22s ease-in-out infinite;
}
@keyframes projBgDrift{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.1) rotate(2deg)}
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
  position:relative;
  z-index:1;
}
@media(max-width:780px){.projects-grid{grid-template-columns:1fr}}

.project-card{
  position:relative;
  background:white;
  border:1.5px solid var(--border);
  border-radius:28px;
  padding:1rem;
  overflow:hidden;
  transition:all 0.5s cubic-bezier(0.2,0.8,0.2,1);
  display:flex;
  flex-direction:column;
}
.project-card::after{
  /* Outer glow ring on hover, using card's accent colors */
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:28px;
  background:linear-gradient(135deg, var(--pc1, var(--sky)), var(--pc2, var(--lavender)));
  opacity:0;
  z-index:-1;
  transition:opacity 0.4s;
  filter:blur(18px);
}
.project-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(31,36,53,0.18);
  border-color:transparent;
}
.project-card:hover::after{opacity:0.45}

.project-img{
  position:relative;
  aspect-ratio:16/10;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg, var(--pc1, var(--sky)), var(--pc2, var(--lavender)));
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.project-card:hover .project-img{transform:scale(1.02)}
.project-img-content{
  text-align:center;
  color:white;
  padding:2rem;
}
.project-img-emoji{
  font-size:3.5rem;
  margin-bottom:0.6rem;
  display:block;
}
.project-img-hint{
  font-family:var(--hand);
  font-size:1.4rem;
  font-weight:600;
  opacity:0.92;
}
.project-img-hint-sub{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  margin-top:0.3rem;
  opacity:0.75;
  font-weight:500;
  font-family:var(--mono);
}

/* Pattern overlay on project images */
.project-img::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.2) 1px, transparent 1.5px);
  background-size:24px 24px, 18px 18px;
  pointer-events:none;
  opacity:0.6;
}
.project-img.has-photo{padding:0}
.project-img.has-photo img{width:100%;height:100%;object-fit:cover}
.project-img.has-photo::after{display:none}
.project-img.has-photo .project-img-content{display:none}

/* === LuminousStudio Tiffany Lamp Art === */
.luminous-art{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lum-lamp{
  position:relative;
  width:140px;
  height:170px;
  animation:lumLampSway 5s ease-in-out infinite;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,0.18));
}
@keyframes lumLampSway{
  0%,100%{transform:rotate(-1.5deg)}
  50%{transform:rotate(1.5deg)}
}
.lum-shade{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:120px;
  height:80px;
  border-radius:60px 60px 18px 18px;
  background:#5a1d1d;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.3), inset 0 -8px 16px rgba(0,0,0,0.25);
}
.lum-tile{
  position:absolute;
  border-radius:4px;
  box-shadow:0 0 3px rgba(0,0,0,0.4);
  animation:lumTileGlow 3.5s ease-in-out infinite;
}
.lt-1{background:linear-gradient(135deg,#ef4444,#dc2626);width:35px;height:24px;top:10px;left:8px;animation-delay:0s}
.lt-2{background:linear-gradient(135deg,#10b981,#059669);width:32px;height:22px;top:12px;left:46px;animation-delay:0.3s}
.lt-3{background:linear-gradient(135deg,#3b82f6,#2563eb);width:30px;height:24px;top:10px;left:82px;animation-delay:0.6s}
.lt-4{background:linear-gradient(135deg,#fbbf24,#f59e0b);width:28px;height:20px;top:38px;left:8px;animation-delay:0.9s}
.lt-5{background:linear-gradient(135deg,#a855f7,#7c3aed);width:38px;height:22px;top:36px;left:40px;animation-delay:1.2s}
.lt-6{background:linear-gradient(135deg,#ec4899,#db2777);width:30px;height:20px;top:38px;left:82px;animation-delay:1.5s}
.lt-7{background:linear-gradient(135deg,#06b6d4,#0891b2);width:36px;height:14px;top:62px;left:18px;animation-delay:1.8s}
.lt-8{background:linear-gradient(135deg,#f59e0b,#d97706);width:44px;height:14px;top:62px;left:60px;animation-delay:2.1s}
@keyframes lumTileGlow{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.4) saturate(1.5);box-shadow:0 0 8px currentColor}
}
.lum-stem{
  position:absolute;
  top:78px;left:50%;
  transform:translateX(-50%);
  width:6px;
  height:60px;
  background:linear-gradient(180deg,#92400e,#451a03);
  border-radius:0 0 3px 3px;
}
.lum-base{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:60px;
  height:14px;
  background:linear-gradient(180deg,#92400e,#451a03);
  border-radius:50% 50% 6px 6px / 60% 60% 6px 6px;
  box-shadow:0 4px 8px rgba(0,0,0,0.25);
}
.lum-glow{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:200px;
  height:200px;
  margin-left:-100px;
  background:radial-gradient(ellipse 60% 40% at 50% 30%, rgba(251,191,36,0.55), rgba(251,191,36,0) 70%);
  pointer-events:none;
  animation:lumGlow 3s ease-in-out infinite;
  z-index:-1;
}
@keyframes lumGlow{
  0%,100%{opacity:0.7;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.15)}
}
.lum-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.lum-spark{
  position:absolute;
  color:#fef3c7;
  font-size:1rem;
  filter:drop-shadow(0 0 4px #fbbf24);
  animation:lumSparkle 3s ease-in-out infinite;
}
.ls-1{top:18%;left:18%;animation-delay:0s}
.ls-2{top:30%;right:15%;animation-delay:0.7s;font-size:0.85rem}
.ls-3{bottom:30%;left:14%;animation-delay:1.4s;font-size:1.2rem}
.ls-4{bottom:18%;right:22%;animation-delay:2.1s}
@keyframes lumSparkle{
  0%,100%{opacity:0;transform:scale(0.5) rotate(0deg)}
  50%{opacity:1;transform:scale(1.2) rotate(180deg)}
}

/* === ML Research Graph Art === */
.ml-art{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ml-graph{
  width:78%;
  height:auto;
}
.ml-curve{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:mlDraw 3.5s ease-out infinite;
  filter:drop-shadow(0 0 6px rgba(167,139,250,0.6));
}
.ml-curve-fill{
  opacity:0;
  animation:mlFillIn 3.5s ease-out infinite;
}
@keyframes mlDraw{
  0%{stroke-dashoffset:600;opacity:0}
  15%{opacity:1}
  60%,100%{stroke-dashoffset:0;opacity:1}
}
@keyframes mlFillIn{
  0%,40%{opacity:0}
  70%,100%{opacity:1}
}
.ml-pt{
  opacity:0;
  animation:mlPtAppear 3.5s ease-out infinite;
}
.mp1{animation-delay:0.4s}
.mp2{animation-delay:0.9s}
.mp3{animation-delay:1.4s}
.mp4{animation-delay:1.9s}
.mp5{animation-delay:2.4s}
@keyframes mlPtAppear{
  0%,30%{opacity:0;transform:scale(0)}
  35%{opacity:1;transform:scale(2);transform-origin:center}
  45%,100%{opacity:1;transform:scale(1)}
}
.ml-equation{
  position:absolute;
  top:1rem;
  right:1rem;
  font-family:var(--mono);
  font-size:0.85rem;
  font-weight:700;
  color:rgba(255,255,255,0.95);
  letter-spacing:0.05em;
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
  animation:mlPulse 2s ease-in-out infinite;
}
.ml-label{
  position:absolute;
  bottom:0.8rem;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
@keyframes mlPulse{
  0%,100%{opacity:0.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}

.project-body{padding:0 0.75rem 1rem;flex:1;display:flex;flex-direction:column}
.project-meta{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.15em;
  margin-bottom:0.7rem;
  color:var(--mute);
  font-weight:600;
}
.project-meta-tag{
  padding:0.25rem 0.7rem;
  border-radius:999px;
  color:white;
  background:var(--pc1, var(--sky));
  letter-spacing:0.1em;
}
.project-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.5rem;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:0.6rem;
}
.project-title em{font-style:italic;font-weight:300}
.project-desc{
  font-size:0.95rem;
  color:var(--text);
  line-height:1.65;
  margin-bottom:1.2rem;
  flex:1;
}
.project-stack{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
}
.proj-tag{
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:600;
  padding:0.3rem 0.65rem;
  background:var(--cream-2);
  border-radius:999px;
  color:var(--ink);
  letter-spacing:0.02em;
}

/* ============ JOURNEY TIMELINE ============ */
.timeline{position:relative;padding-left:0}
.timeline::before{
  /* Visible track that's always there - the "road" the rocket flies through */
  content:'';
  position:absolute;
  left:130px;top:0;bottom:0;
  width:14px;
  margin-left:-7px;
  background:rgba(31,36,53,0.07);
  border-radius:14px;
  z-index:0;
}
@media(max-width:700px){
  .timeline::before{left:60px}
}
.timeline-fill{
  position:absolute;
  left:130px;top:0;
  width:14px;
  height:0;
  margin-left:-7px;
  background:linear-gradient(180deg, var(--coral) 0%, var(--sun) 18%, var(--mint-deep) 36%, var(--lavender) 54%, var(--sky-deep) 72%, var(--ocean) 100%);
  border-radius:14px;
  box-shadow:0 0 28px rgba(255,123,123,0.7), 0 0 12px rgba(255,255,255,0.6) inset;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  will-change:height;
}
.timeline-fill::after{
  /* Shimmer flowing down */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
  background-size:100% 70px;
  animation:shineFlow 1.6s linear infinite;
  pointer-events:none;
}
@keyframes shineFlow{
  from{background-position:0 -70px}
  to{background-position:0 100%}
}
@media(max-width:700px){.timeline-fill{left:60px}}
.timeline-head{
  position:absolute;
  left:130px;top:0;
  width:56px;height:56px;
  margin-left:-28px;
  margin-top:-28px;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity 0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform;
}
@media(max-width:700px){.timeline-head{left:60px}}
.timeline-head.active{opacity:1}
.timeline-head::before{
  /* flame trail above the rocket (since rocket points down) */
  content:'';
  position:absolute;
  bottom:78%;left:50%;
  width:20px;height:38px;
  margin-left:-10px;
  background:radial-gradient(ellipse at 50% 100%, var(--sun) 0%, var(--coral) 35%, rgba(255,123,123,0.4) 70%, transparent 90%);
  border-radius:50% 50% 40% 40% / 80% 80% 30% 30%;
  filter:blur(2px);
  opacity:0.95;
  animation:flameFlicker 0.15s ease-in-out infinite alternate;
}
.timeline-head::after{
  /* glow halo */
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,123,123,0.4), transparent 70%);
  animation:headPulse 1.5s ease-in-out infinite;
}
@keyframes flameFlicker{
  from{transform:scaleY(0.8) scaleX(0.9);opacity:0.75}
  to{transform:scaleY(1.15) scaleX(1.05);opacity:1}
}
.timeline-rocket{
  position:relative;
  width:36px;height:36px;
  z-index:2;
  transform:rotate(135deg);
  animation:rocketWiggle 0.5s ease-in-out infinite alternate;
  filter:drop-shadow(0 4px 8px rgba(31,36,53,0.3));
}
@keyframes rocketWiggle{
  from{transform:rotate(132deg) translateY(-1px)}
  to{transform:rotate(138deg) translateY(1px)}
}
@keyframes headPulse{
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.8);opacity:0}
}
@media(max-width:700px){
  .timeline::before, .timeline-fill, .timeline-head{left:60px}
}

/* Particle canvas overlay - extended beyond the timeline column on both sides
   so the final star-rain burst isn't cut off horizontally. Negative side
   offsets give the bursts room to spread fully outward. */
.particle-canvas{
  position:absolute;
  top:0;
  left:-50vw;
  width:calc(100% + 100vw);
  height:calc(100% + 280px);
  pointer-events:none;
  z-index:5;
}

.tl-item{
  position:relative;
  padding-left:180px;
  padding-bottom:3rem;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
.tl-item.visible{opacity:1;transform:translateY(0)}
@media(max-width:700px){.tl-item{padding-left:90px}}

.tl-year{
  position:absolute;
  left:0;top:0;
  width:100px;
  font-family:var(--serif);
  font-style:italic;
  font-size:2rem;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.02em;
  transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1), color 0.3s;
}
.tl-item.visible .tl-year{transform:scale(1.05)}
@media(max-width:700px){.tl-year{font-size:1.2rem;width:45px}}

.tl-dot{
  position:absolute;
  left:122px;top:0.6rem;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--tld, var(--coral));
  border:4px solid var(--cream);
  box-shadow:0 0 0 2px var(--tld, var(--coral));
  z-index:3;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.tl-item.reached .tl-dot{
  transform:scale(1.3);
  box-shadow:0 0 0 2px var(--tld, var(--coral)), 0 0 24px var(--tld, var(--coral));
}
@media(max-width:700px){.tl-dot{left:52px}}

.tl-item:nth-child(1) .tl-dot{--tld:var(--coral)}
.tl-item:nth-child(2) .tl-dot{--tld:var(--sun)}
.tl-item:nth-child(3) .tl-dot{--tld:var(--mint-deep)}
.tl-item:nth-child(4) .tl-dot{--tld:var(--lavender)}
.tl-item:nth-child(5) .tl-dot{--tld:var(--sky-deep)}
.tl-item:nth-child(6) .tl-dot{--tld:var(--rose)}
.tl-item:nth-child(7) .tl-dot{--tld:var(--peach)}
.tl-item:nth-child(8) .tl-dot{--tld:var(--ocean)}

.tl-card{
  background:white;
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:1.5rem 1.7rem;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s;
  position:relative;
}
.tl-card:hover{transform:translateX(6px);box-shadow:0 12px 30px rgba(31,36,53,0.08)}
.tl-item.reached .tl-card{
  transform:translateX(0);
  box-shadow:0 12px 30px rgba(31,36,53,0.08);
}

.tl-tag{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--mute);
  margin-bottom:0.5rem;
}
.tl-title{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.2;
  margin-bottom:0.5rem;
}
/* Each timeline item's italic phrase gets a colorful gradient that animates */
.tl-title .italic{
  font-style:italic;
  font-weight:400;
  background:linear-gradient(120deg, var(--tl-c1, var(--coral)) 0%, var(--tl-c2, var(--sun)) 50%, var(--tl-c3, var(--lavender)) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:tlGradientShift 8s ease-in-out infinite;
  display:inline-block;
}
.tl-title .italic:hover{
  animation-duration:3s;
}
@keyframes tlGradientShift{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
/* Per-item color schemes - cycled so each entry has its own personality */
.tl-item:nth-child(8n+1) .tl-title .italic{--tl-c1:#FF7B7B; --tl-c2:#FBBF24; --tl-c3:#A78BFA}
.tl-item:nth-child(8n+2) .tl-title .italic{--tl-c1:#5BC0EB; --tl-c2:#A78BFA; --tl-c3:#F472B6}
.tl-item:nth-child(8n+3) .tl-title .italic{--tl-c1:#10B981; --tl-c2:#5BC0EB; --tl-c3:#FBBF24}
.tl-item:nth-child(8n+4) .tl-title .italic{--tl-c1:#F472B6; --tl-c2:#FB923C; --tl-c3:#FBBF24}
.tl-item:nth-child(8n+5) .tl-title .italic{--tl-c1:#A78BFA; --tl-c2:#F472B6; --tl-c3:#5BC0EB}
.tl-item:nth-child(8n+6) .tl-title .italic{--tl-c1:#FB923C; --tl-c2:#FF7B7B; --tl-c3:#A78BFA}
.tl-item:nth-child(8n+7) .tl-title .italic{--tl-c1:#10B981; --tl-c2:#FBBF24; --tl-c3:#FF7B7B}
.tl-item:nth-child(8n)   .tl-title .italic{--tl-c1:#5BC0EB; --tl-c2:#10B981; --tl-c3:#A78BFA}

.tl-desc{
  font-size:0.95rem;
  color:var(--text);
  line-height:1.7;
}
.tl-stack{
  display:flex;
  gap:0.4rem;
  flex-wrap:wrap;
  margin-top:0.8rem;
}
.tl-pill{
  font-family:var(--mono);
  font-size:0.65rem;
  font-weight:600;
  padding:0.25rem 0.6rem;
  background:var(--cream-2);
  border-radius:999px;
  color:var(--ink);
}

/* ============ CERTIFICATE 3D CAROUSEL - portrait, two-sided flip cards ============ */
/* Cards are PORTRAIT (380×540) so the full SoftUni cert is visible.
   Flip mechanic preserved - each slide has front + back faces and a flip button. */
.cert-stage{
  position:relative;
  height:560px;
  perspective:1500px;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  margin:1.25rem 0;
}
@media(max-width:768px){.cert-stage{height:460px}}
@media(max-width:480px){.cert-stage{height:380px}}

.cert-ring{
  position:relative;
  width:380px;height:540px;            /* PORTRAIT - full SoftUni cert visible */
  transform-style:preserve-3d;
}
@media(max-width:768px){.cert-ring{width:300px;height:430px}}
@media(max-width:480px){.cert-ring{width:240px;height:344px}}

.cert-slide{
  position:absolute;
  width:100%;height:100%;
  transition:all 0.85s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
  perspective:1500px;                  /* Required so the flip rotation looks right */
  /* No background / border-radius / overflow here - those live on .cert-face
     so the 3D flip rotation isn't clipped by the parent */
}

/* The rotating inner - flips between front and back */
.cert-slide-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.85s cubic-bezier(0.4,0,0.2,1);
}
.cert-slide.flipped .cert-slide-inner{
  transform:rotateY(180deg);
}

/* Each face - front (the cert itself) and back (the curriculum) */
.cert-face{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border-radius:14px;
  overflow:hidden;
  background:white;
  box-shadow:0 18px 40px rgba(31,36,53,0.15);
}
.cert-face-back{
  transform:rotateY(180deg);
  background:#fafaf8;                   /* tint behind back side */
}
.cert-face img{
  width:100%;height:100%;
  object-fit:contain;                   /* contain so the entire cert is visible */
  display:block;
  background:white;
}
.cert-slide.center .cert-face{
  box-shadow:
    0 30px 70px rgba(31,36,53,0.25),
    0 0 0 4px white,
    0 0 0 6px var(--ocean);
}

/* Flip button - circular icon in top-right of the CENTER card */
.cert-flip-btn{
  position:absolute;
  top:0.7rem;
  right:0.7rem;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(212,165,116,0.5);
  color:var(--ink);
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.65);
  pointer-events:none;
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  box-shadow:0 8px 22px rgba(31,36,53,0.18);
  padding:0;
}
.cert-slide.center .cert-flip-btn{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  transition-delay:0.5s;
}
.cert-flip-btn:hover{
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(255,123,123,0.32);
}
.cert-flip-btn svg{
  transition:transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
  display:block;
}
.cert-flip-btn:hover svg,
.cert-slide.flipped .cert-flip-btn svg{
  transform:rotate(180deg);
}
@media(max-width:480px){
  .cert-flip-btn{width:34px;height:34px;top:0.5rem;right:0.5rem}
  .cert-flip-btn svg{width:15px;height:15px}
}

.cert-info{
  margin-top:1.75rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1.25rem;
  align-items:center;
  padding:1rem 1.5rem;
  background:white;
  border:1.5px solid var(--border);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(31,36,53,0.04);
}
@media(max-width:768px){.cert-info{grid-template-columns:1fr;gap:0.7rem;text-align:center;padding:1rem}}

.cert-info-date{
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ocean);
  font-weight:700;
  margin-bottom:0.25rem;
}
.cert-info-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:-0.015em;
  line-height:1.15;
  margin-bottom:0.2rem;
}
.cert-info-sub{
  font-family:var(--sans);
  font-size:0.78rem;
  color:var(--mute);
}
.cert-info-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 1.1rem;
  border-left:1.5px solid var(--border);
  border-right:1.5px solid var(--border);
}
@media(max-width:768px){.cert-info-mid{border:none;padding:0.7rem 0;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border)}}
.cert-info-score{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.85rem;
  font-weight:500;
  color:var(--ocean);
  line-height:1;
}
.cert-info-score-lbl{
  font-family:var(--mono);
  font-size:0.56rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:0.25rem;
}
.cert-info-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.25rem;
}
@media(max-width:768px){.cert-info-right{align-items:center}}
.cert-counter{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
}
.cert-counter .num{font-weight:500;color:var(--coral)}

.cert-controls{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  margin-top:1.25rem;
}
.cert-btn{
  width:58px;
  height:58px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:white;
  color:var(--ink);
  font-size:1.5rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s;
  font-family:var(--sans);
  font-weight:500;
  box-shadow:0 4px 12px rgba(31,36,53,0.08);
}
.cert-btn:hover{
  background:var(--ocean);
  color:white;
  border-color:var(--ocean);
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(31,36,53,0.18);
}
.cert-progress{
  flex:1;
  max-width:320px;
  height:5px;
  background:var(--soft);
  border-radius:5px;
  overflow:hidden;
}
.cert-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--coral), var(--sun), var(--mint-deep), var(--ocean));
  border-radius:5px;
  transition:width 0.5s ease;
}
.cert-zoom-hint{
  text-align:center;
  margin-top:1.6rem;
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
  line-height:1.6;
}

/* ============ LIGHTBOX ============ */
/* ============ LIGHTBOX - MAGICAL REVEAL ============ */
/* Backdrop blooms in, then a "curtain" pulls back to reveal the image, while
   a tiny ferret/cat mascot scampers across the top edge. Ornamental ribbon
   corners and a soft inner glow finish the picture-frame effect. */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:2rem;
  opacity:0;
  /* Layered backdrop: dark glass + warm radial spotlight + faint dot grid */
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(251,191,36,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(167,139,250,0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(91,192,235,0.10), transparent 70%),
    rgba(15, 18, 30, 0.94);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  transition:opacity 0.4s ease, backdrop-filter 0.4s ease;
}
.lightbox.open{
  display:flex;
  opacity:1;
  animation:lbBackdropBloom 0.5s ease;
}
@keyframes lbBackdropBloom{
  from{opacity:0; backdrop-filter:blur(0px) saturate(1); -webkit-backdrop-filter:blur(0px) saturate(1)}
  to{opacity:1}
}

/* Floating dust particles in the backdrop */
.lightbox::before,
.lightbox::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(251,191,36,0.4) 1px, transparent 1.5px);
  background-size:80px 80px, 130px 130px;
  background-position:0 0, 40px 60px;
  opacity:0;
  transition:opacity 0.6s;
}
.lightbox.open::before{opacity:0.22; animation:lbDriftSlow 60s linear infinite}
.lightbox.open::after{opacity:0.15; animation:lbDriftSlow 90s linear infinite reverse}
@keyframes lbDriftSlow{
  from{background-position:0 0, 40px 60px}
  to{background-position:200px 80px, 240px 40px}
}

.lightbox-content{
  position:relative;
  max-width:min(92vw, 1100px);
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Start tiny + slightly tilted, then bloom open with a soft bounce */
  transform:scale(0.55) rotate(-3deg);
  opacity:0;
  transition:transform 0.7s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s ease 0.05s;
  filter:drop-shadow(0 35px 60px rgba(0,0,0,0.6));
}
.lightbox.open .lightbox-content{
  transform:scale(1) rotate(0deg);
  opacity:1;
}

/* Picture-frame wrapper around the image - gold inner trim + soft golden glow */
.lb-frame{
  position:relative;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg, #fff8ee 0%, #fef3c7 40%, #fce7f3 100%);
  box-shadow:
    0 0 0 1px rgba(212,165,116,0.4),
    0 30px 80px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  overflow:visible;
}
/* Glowing aura behind the frame */
.lb-frame::before{
  content:'';
  position:absolute;
  inset:-22px;
  border-radius:24px;
  background:radial-gradient(ellipse at center, rgba(251,191,36,0.35) 0%, rgba(255,123,123,0.18) 40%, transparent 70%);
  filter:blur(28px);
  z-index:-1;
  opacity:0;
  animation:lbAuraIn 0.9s ease 0.15s forwards;
}
@keyframes lbAuraIn{
  from{opacity:0; transform:scale(0.7)}
  to{opacity:1; transform:scale(1)}
}

/* Curtain reveal - two halves sweep apart to expose the image */
.lb-curtain{
  position:absolute;
  inset:14px;
  pointer-events:none;
  z-index:5;
  overflow:hidden;
  border-radius:6px;
}
.lb-curtain-half{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:
    linear-gradient(135deg, #2a3f6f 0%, #1a2547 100%);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.4);
}
.lb-curtain-half::before{
  /* tiny fabric-fold pattern */
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0px,
    rgba(255,255,255,0.04) 4px,
    transparent 8px,
    rgba(0,0,0,0.06) 12px,
    transparent 16px);
}
.lb-curtain-left{
  left:0;
  border-right:2px solid rgba(251,191,36,0.6);
  transform:translateX(0);
  transition:transform 0.95s cubic-bezier(0.7,0,0.3,1) 0.35s;
}
.lb-curtain-right{
  right:0;
  border-left:2px solid rgba(251,191,36,0.6);
  transform:translateX(0);
  transition:transform 0.95s cubic-bezier(0.7,0,0.3,1) 0.35s;
}
.lightbox.open .lb-curtain-left{transform:translateX(-105%)}
.lightbox.open .lb-curtain-right{transform:translateX(105%)}

/* Ornamental ribbon corners - small gold flourishes at all four corners */
.lb-corner{
  position:absolute;
  width:38px;
  height:38px;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity 0.5s ease 0.95s;
}
.lightbox.open .lb-corner{opacity:1}
.lb-corner svg{display:block;width:100%;height:100%;color:rgba(212,165,116,0.85)}
.lb-corner-tl{top:-4px;left:-4px}
.lb-corner-tr{top:-4px;right:-4px;transform:scaleX(-1)}
.lb-corner-bl{bottom:-4px;left:-4px;transform:scaleY(-1)}
.lb-corner-br{bottom:-4px;right:-4px;transform:scale(-1,-1)}

/* The crawling chameleon - a tiny color-shifting mascot that scampers along
   the top edge of the frame, pausing to peek down and dart its tongue at
   the picture before continuing off the right side. */
.lb-mascot{
  position:absolute;
  top:-28px;
  left:0;
  width:78px;
  height:62px;
  pointer-events:none;
  z-index:7;
  /* Start off-screen left, then crawl across the top edge */
  transform:translateX(-90px);
  opacity:0;
  transition:opacity 0.3s ease 1.0s;
}
.lightbox.open .lb-mascot{
  opacity:1;
  animation:chamCrawl 7.5s cubic-bezier(0.45,0.05,0.55,0.95) 1.0s 1 forwards;
}
@keyframes chamCrawl{
  /* Enters from left, deliberate walk, pauses mid-way to peek + tongue, continues off right */
  0%   {transform:translateX(-90px) rotate(-4deg); opacity:1}
  14%  {transform:translateX(20%) rotate(-2deg)}
  28%  {transform:translateX(40%) rotate(-1deg)}
  /* Pause to peek down at the picture (slight head-tilt) */
  35%  {transform:translateX(46%) rotate(8deg)}
  55%  {transform:translateX(46%) rotate(8deg)}     /* hold the peek */
  62%  {transform:translateX(46%) rotate(-2deg)}     /* lift head back */
  78%  {transform:translateX(72%) rotate(0deg)}
  92%  {transform:translateX(calc(100% + 20px)) rotate(2deg); opacity:1}
  100% {transform:translateX(calc(100% + 90px)) rotate(2deg); opacity:0}
}

/* The body itself rocks slightly with each "step" - a chameleon's deliberate gait */
.lb-mascot-body{
  width:100%;
  height:100%;
  animation:chamRock 0.85s ease-in-out infinite;
  transform-origin:50% 90%;
}
@keyframes chamRock{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%    {transform:translateY(-1.5px) rotate(-1.2deg)}
  50%    {transform:translateY(0) rotate(0deg)}
  75%    {transform:translateY(-1.5px) rotate(1.2deg)}
}

/* Color-shift on the body gradient - chameleon-like! */
.cham-stop-1{animation:chamColor1 5s ease-in-out infinite; transition:stop-color 0.6s}
.cham-stop-2{animation:chamColor2 5s ease-in-out infinite; transition:stop-color 0.6s}
.cham-stop-3{animation:chamColor3 5s ease-in-out infinite; transition:stop-color 0.6s}
@keyframes chamColor1{
  0%,100%{stop-color:#10b981}
  25%    {stop-color:#06b6d4}
  50%    {stop-color:#a78bfa}
  75%    {stop-color:#f59e0b}
}
@keyframes chamColor2{
  0%,100%{stop-color:#34d399}
  25%    {stop-color:#67e8f9}
  50%    {stop-color:#c4b5fd}
  75%    {stop-color:#fbbf24}
}
@keyframes chamColor3{
  0%,100%{stop-color:#a7f3d0}
  25%    {stop-color:#bae6fd}
  50%    {stop-color:#e9d5ff}
  75%    {stop-color:#fde68a}
}

/* Big eye swivels independently as chameleons do */
.cham-pupil{
  transform-box:fill-box;
  transform-origin:center;
  animation:chamEyeSwivel 3.2s ease-in-out infinite;
}
@keyframes chamEyeSwivel{
  0%,100%{transform:translate(0, 0)}
  25%    {transform:translate(0.8px, -0.5px)}
  50%    {transform:translate(-0.6px, 0.8px)}
  75%    {transform:translate(0.5px, 0.6px)}
}

/* Tongue dart - triggered during the mid-crawl pause (synced via mascot timing) */
.cham-tongue-line{
  stroke-dasharray:24;
  stroke-dashoffset:24;
  transform-origin:74px 40px;
  animation:chamTongueLine 7.5s ease-in-out 1s 1 forwards;
}
.cham-tongue-tip{
  transform:translate(0, 0);
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:chamTongueTip 7.5s ease-in-out 1s 1 forwards;
}
.lightbox.open .cham-tongue-line{
  animation:chamTongueLine 7.5s ease-in-out 1s 1 forwards;
}
.lightbox.open .cham-tongue-tip{
  animation:chamTongueTip 7.5s ease-in-out 1s 1 forwards;
}
@keyframes chamTongueLine{
  0%,32%   {stroke-dashoffset:24; transform:rotate(0deg)}
  /* Whip out downward (toward photo) during peek */
  38%      {stroke-dashoffset:0; transform:rotate(50deg)}
  52%      {stroke-dashoffset:0; transform:rotate(48deg)}
  /* Retract */
  60%      {stroke-dashoffset:24; transform:rotate(20deg)}
  100%     {stroke-dashoffset:24; transform:rotate(0deg)}
}
@keyframes chamTongueTip{
  0%,33%   {opacity:0; transform:translate(0, 0)}
  /* Lands at the photo edge below the head */
  38%      {opacity:1; transform:translate(11px, 18px)}
  52%      {opacity:1; transform:translate(11px, 18px) scale(1.15)}
  60%      {opacity:0; transform:translate(0, 0)}
  100%     {opacity:0; transform:translate(0, 0)}
}

/* Front and back legs lift alternately in step with the rocking gait */
.cham-leg-front{
  transform-box:fill-box;
  transform-origin:50% 30%;
  animation:chamLegFront 0.85s ease-in-out infinite;
}
.cham-leg-back{
  transform-box:fill-box;
  transform-origin:50% 30%;
  animation:chamLegBack 0.85s ease-in-out infinite;
}
@keyframes chamLegFront{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-1.5px) rotate(-3deg)}
}
@keyframes chamLegBack{
  0%,100%{transform:translateY(-1.5px) rotate(3deg)}
  50%    {transform:translateY(0)}
}

.lightbox img,
.lb-frame img,
#lbImg{
  max-width:100%;
  max-height:calc(88vh - 28px);
  width:auto;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
  position:relative;
  z-index:1;
}

.lightbox-close{
  position:absolute;
  top:-3.2rem;
  right:0;
  background:rgba(255,255,255,0.12);
  border:1.5px solid rgba(255,255,255,0.3);
  color:white;
  font-family:var(--mono);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.15em;
  padding:0.55rem 1rem;
  border-radius:999px;
  cursor:pointer;
  transition:all 0.25s;
  z-index:10;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.lightbox-close:hover{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.5);
  transform:scale(1.05);
}

@media(max-width:680px){
  .lb-mascot{width:58px;height:46px;top:-22px}
  .lb-frame{padding:10px}
  .lb-corner{width:28px;height:28px}
}

/* ============ AWARDS - THE EXHIBITION WALL ============ */
/* A curated gallery wall: each award is a richly-presented exhibition piece.
   Alternating large editorial layout with optional photo gallery, decorative
   gold filigree, large numeral, location stamp, and pull quote. Unique and
   distinctly NOT a ring carousel and NOT a scattered/tilted grid. */

/* === Awards header layout: title on the left, breathtaking orb on the right === */
.awards-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  margin-bottom:3rem;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.awards-head-text .section-tag{margin-bottom:1.5rem}
@media(max-width:900px){
  .awards-head{grid-template-columns:1fr; gap:2rem}
}

/* The orb: a luminous floating constellation with a center trophy,
   three rotating concentric rings, six orbiting badges, and ambient sparkles.
   Pure CSS - no JS animation loop, no external assets. */
.awards-orb{
  position:relative;
  width:100%;
  height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1000px;
}
@media(max-width:900px){.awards-orb{height:340px; min-height:340px}}
@media(max-width:480px){.awards-orb{height:280px}}

/* The soft radial glow behind everything */
.ao-glow{
  position:absolute;
  inset:8% 8% 8% 8%;
  background:
    radial-gradient(circle at 50% 45%, rgba(251,191,36,0.40) 0%, rgba(251,191,36,0.20) 30%, transparent 65%),
    radial-gradient(circle at 50% 45%, rgba(244,114,182,0.25) 0%, transparent 55%);
  filter:blur(28px);
  animation:aoGlowPulse 5s ease-in-out infinite;
}
@keyframes aoGlowPulse{
  0%,100%{transform:scale(1); opacity:0.85}
  50%    {transform:scale(1.12); opacity:1}
}

/* Concentric rings - three sizes, opposite rotations */
.ao-ring{
  position:absolute;
  border-radius:50%;
  border:1.5px dashed;
}
.ao-ring-1{
  width:140px; height:140px;
  border-color:rgba(212,165,116,0.35);
  animation:aoRingSpin 22s linear infinite;
}
.ao-ring-2{
  width:230px; height:230px;
  border-color:rgba(167,139,250,0.32);
  border-style:dotted;
  animation:aoRingSpin 35s linear infinite reverse;
}
.ao-ring-3{
  width:320px; height:320px;
  border-color:rgba(91,192,235,0.25);
  animation:aoRingSpin 48s linear infinite;
}
@media(max-width:480px){
  .ao-ring-1{width:110px;height:110px}
  .ao-ring-2{width:180px;height:180px}
  .ao-ring-3{width:250px;height:250px}
}
@keyframes aoRingSpin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* Center trophy on a golden pedestal */
.ao-center{
  position:absolute;
  width:90px; height:90px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 30%, #fff8e0 0%, #fde68a 50%, #f59e0b 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.85),
    0 0 30px rgba(251,191,36,0.6),
    0 12px 30px rgba(180,83,9,0.4),
    inset 0 -8px 16px rgba(180,83,9,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  animation:aoCenterBob 4s ease-in-out infinite;
}
@keyframes aoCenterBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-6px) rotate(2deg)}
}
.ao-trophy{
  font-size:3rem;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  animation:aoTrophyPulse 3s ease-in-out infinite;
}
@keyframes aoTrophyPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.08)}
}

/* Orbiting badges - each follows its own orbit at its own speed */
.ao-orbit{
  position:absolute;
  width:0; height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ao-orbit-a{animation:aoOrbitA 12s linear infinite}
.ao-orbit-b{animation:aoOrbitB 15s linear infinite reverse}
.ao-orbit-c{animation:aoOrbitC 18s linear infinite}
.ao-orbit-d{animation:aoOrbitD 21s linear infinite reverse}
.ao-orbit-e{animation:aoOrbitE 24s linear infinite}
.ao-orbit-f{animation:aoOrbitF 28s linear infinite reverse}

/* Six different orbit paths - varying radius creates depth */
@keyframes aoOrbitA{ from{transform:rotate(0deg) translateX(80px)  rotate(0deg)}  to{transform:rotate(360deg) translateX(80px)  rotate(-360deg)} }
@keyframes aoOrbitB{ from{transform:rotate(60deg) translateX(115px) rotate(-60deg)} to{transform:rotate(420deg) translateX(115px) rotate(-420deg)} }
@keyframes aoOrbitC{ from{transform:rotate(120deg) translateX(145px) rotate(-120deg)} to{transform:rotate(480deg) translateX(145px) rotate(-480deg)} }
@keyframes aoOrbitD{ from{transform:rotate(180deg) translateX(110px) rotate(-180deg)} to{transform:rotate(540deg) translateX(110px) rotate(-540deg)} }
@keyframes aoOrbitE{ from{transform:rotate(240deg) translateX(160px) rotate(-240deg)} to{transform:rotate(600deg) translateX(160px) rotate(-600deg)} }
@keyframes aoOrbitF{ from{transform:rotate(300deg) translateX(135px) rotate(-300deg)} to{transform:rotate(660deg) translateX(135px) rotate(-660deg)} }

.ao-badge{
  font-size:1.8rem;
  display:inline-block;
  filter:drop-shadow(0 4px 10px rgba(31,36,53,0.25));
  animation:aoBadgeBob 2.5s ease-in-out infinite;
}
.ao-b1{animation-delay:0s}
.ao-b2{animation-delay:-0.4s; font-size:1.6rem}
.ao-b3{animation-delay:-0.8s; font-size:1.7rem}
.ao-b4{animation-delay:-1.2s; font-size:1.5rem}
.ao-b5{animation-delay:-1.6s; font-size:1.7rem}
.ao-b6{animation-delay:-2.0s; font-size:1.6rem}
@keyframes aoBadgeBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-4px) scale(1.08)}
}

/* Ambient sparkles scattered in the field */
.ao-spark{
  position:absolute;
  font-family:var(--serif);
  font-size:0.9rem;
  color:rgba(251,191,36,0.65);
  pointer-events:none;
  animation:aoSparkTwinkle 3s ease-in-out infinite;
}
.sp-1{top:8%;  left:12%; animation-delay:0s}
.sp-2{top:18%; right:18%; animation-delay:-0.3s; color:rgba(244,114,182,0.65)}
.sp-3{top:32%; left:6%;  animation-delay:-0.8s}
.sp-4{bottom:18%; left:14%; animation-delay:-1.2s; color:rgba(167,139,250,0.65)}
.sp-5{bottom:10%; right:10%; animation-delay:-1.5s}
.sp-6{bottom:26%; right:6%; animation-delay:-1.8s; color:rgba(91,192,235,0.65)}
.sp-7{top:48%;  left:2%;  animation-delay:-2.1s; color:rgba(244,114,182,0.65)}
.sp-8{top:6%;   right:6%; animation-delay:-2.5s}
@keyframes aoSparkTwinkle{
  0%,100%{opacity:0.3; transform:scale(1) rotate(0deg)}
  50%    {opacity:1;   transform:scale(1.4) rotate(180deg)}
}

.awards-grid{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:1rem 0 3rem;
  display:flex;
  flex-direction:column;
  gap:5rem;
}

/* The decorative "exhibition rail" - a thin vertical gold line running through */
.awards-grid::before{
  content:'';
  position:absolute;
  left:50%;
  top:1.5rem;
  bottom:1.5rem;
  width:1px;
  background:linear-gradient(180deg,
    transparent,
    rgba(212,165,116,0.35) 8%,
    rgba(212,165,116,0.55) 50%,
    rgba(212,165,116,0.35) 92%,
    transparent);
  pointer-events:none;
  z-index:0;
}
@media(max-width:900px){
  .awards-grid::before{left:1.5rem}
}

/* Subtle radial spotlight behind the whole gallery */
.awards-grid::after{
  content:'';
  position:absolute;
  inset:-4rem -2rem;
  background:
    radial-gradient(ellipse 50% 30% at 50% 25%, rgba(251,191,36,0.10), transparent 70%),
    radial-gradient(ellipse 40% 25% at 30% 65%, rgba(255,123,123,0.06), transparent 70%),
    radial-gradient(ellipse 40% 25% at 75% 90%, rgba(91,192,235,0.05), transparent 70%);
  pointer-events:none;
  z-index:-1;
  animation:awardSpotlight 24s ease-in-out infinite;
}
@keyframes awardSpotlight{
  0%,100%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.08) translate(2%,-1%)}
}

/* Each exhibition piece */
.award-tile{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:4rem;
  cursor:pointer;
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1s cubic-bezier(0.2,0.8,0.2,1) var(--appear-del,0s),
             transform 1s cubic-bezier(0.2,0.8,0.2,1) var(--appear-del,0s);
}
.award-tile.appear{
  opacity:1;
  transform:translateY(0);
}

/* Connector dot on the central rail */
.award-tile .award-rail-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle, var(--sun) 0%, var(--coral) 70%, transparent 100%);
  transform:translate(-50%,-50%);
  z-index:3;
  box-shadow:
    0 0 0 4px rgba(255,248,238,1),
    0 0 0 5px rgba(212,165,116,0.5),
    0 0 28px rgba(251,191,36,0.6);
  animation:railDotPulse 3.5s ease-in-out infinite;
}
.award-tile .award-rail-dot::after{
  content:'';
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px dashed rgba(212,165,116,0.45);
  animation:railDotSpin 18s linear infinite;
}
@keyframes railDotPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,248,238,1), 0 0 0 5px rgba(212,165,116,0.5), 0 0 22px rgba(251,191,36,0.55)}
  50%{box-shadow:0 0 0 4px rgba(255,248,238,1), 0 0 0 5px rgba(212,165,116,0.7), 0 0 38px rgba(251,191,36,0.95)}
}
@keyframes railDotSpin{ to{transform:rotate(360deg)} }
@media(max-width:900px){
  .award-tile .award-rail-dot{left:1.5rem;top:2.5rem}
}

/* Alternate sides: even = photo right, text left */
.award-tile:nth-child(even){
  grid-template-columns:1fr 1fr;
}
.award-tile:nth-child(even) .award-frame{order:2}
.award-tile:nth-child(even) .award-text{order:1;padding-left:0;padding-right:1.5rem;text-align:right}
.award-tile:nth-child(even) .award-meta-row{justify-content:flex-end}
.award-tile:nth-child(even) .award-quote-mark{left:auto;right:-0.25rem}
.award-tile:nth-child(even) .award-quote{padding-left:0;padding-right:2rem}
.award-tile:nth-child(even) .award-numeral{right:auto;left:0}
.award-tile:nth-child(even) .award-view{justify-content:flex-end}

/* The "frame" - photo presentation with gold filigree */
.award-frame{
  position:relative;
  z-index:2;
  transform:rotate(0deg);
  transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.award-tile:hover .award-frame{
  transform:translateY(-4px);
}

/* Main photo container */
.award-photo-main{
  position:relative;
  aspect-ratio:1.35/1;
  border-radius:18px;
  overflow:hidden;
  background:var(--cream-2);
  box-shadow:
    0 30px 60px rgba(31,36,53,0.18),
    0 8px 16px rgba(31,36,53,0.06),
    0 0 0 1px rgba(212,165,116,0.25),
    0 0 0 8px rgba(255,255,255,0.85),
    0 0 0 9px rgba(212,165,116,0.30);
  transition:box-shadow 0.7s ease;
}
/* The first award (ITA 2025) uses a PORTRAIT frame so the tall Bulgarian
   certificate is shown in full without cropping */
.award-tile:first-child .award-photo-main{
  aspect-ratio:1/1.4;
}
.award-tile:first-child .award-photo-main img{
  object-fit:contain;
  background:white;
}
.award-tile:hover .award-photo-main{
  box-shadow:
    0 45px 90px rgba(251,191,36,0.22),
    0 12px 22px rgba(31,36,53,0.10),
    0 0 0 1px rgba(212,165,116,0.45),
    0 0 0 8px rgba(255,255,255,0.95),
    0 0 0 9px rgba(212,165,116,0.55);
}
.award-photo-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
}
.award-tile:hover .award-photo-main img{transform:scale(1.06)}

/* Corner gold filigree decorations on the frame */
.award-photo-main::before,
.award-photo-main::after{
  content:'';
  position:absolute;
  width:28px;
  height:28px;
  border:2px solid rgba(212,165,116,0.7);
  pointer-events:none;
  z-index:2;
}
.award-photo-main::before{
  top:8px;
  left:8px;
  border-right:none;
  border-bottom:none;
  border-top-left-radius:6px;
}
.award-photo-main::after{
  bottom:8px;
  right:8px;
  border-left:none;
  border-top:none;
  border-bottom-right-radius:6px;
}

/* Tag badge floating on photo */
.award-tile-tag{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:0.45rem 0.85rem;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:999px;
  color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  z-index:3;
  border:1px solid rgba(212,165,116,0.4);
}

/* Polaroid gallery - additional small photos hanging below the main */
.award-gallery{
  display:flex;
  gap:0.75rem;
  margin-top:1.25rem;
  padding:0 0.5rem;
}
.award-tile:nth-child(even) .award-gallery{
  justify-content:flex-end;
}
.award-gallery-item{
  flex:1;
  max-width:140px;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:white;
  border:4px solid white;
  box-shadow:0 12px 26px rgba(31,36,53,0.15), 0 0 0 1px rgba(212,165,116,0.25);
  transform:rotate(0deg);            /* straight - no tilt */
  transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.5s;
}
.award-gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.6s ease;
}
.award-gallery-item:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 36px rgba(31,36,53,0.22), 0 0 0 1px var(--sun);
  z-index:5;
}
.award-gallery-item:hover img{transform:scale(1.1)}

/* The text side */
.award-text{
  position:relative;
  z-index:1;
  padding-left:1.5rem;
}

/* Decorative large numeral in the background */
.award-numeral{
  position:absolute;
  top:-1.5rem;
  right:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:9rem;
  font-weight:300;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(212,165,116,0.32);
  user-select:none;
  pointer-events:none;
  z-index:-1;
  letter-spacing:-0.04em;
}

/* Meta row: date · location · tag */
.award-meta-row{
  display:flex;
  align-items:center;
  gap:0.85rem;
  flex-wrap:wrap;
  margin-bottom:1.1rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
}
.award-meta-date{color:var(--coral)}
.award-meta-sep{color:rgba(212,165,116,0.6); font-size:0.85rem;}
.award-meta-loc{color:var(--mute); font-weight:600;}

/* Title - large editorial serif */
.award-tile-title{
  font-family:var(--serif);
  font-size:clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight:500;
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1.08;
  margin-bottom:0.75rem;
}

.award-tile-sub{
  font-size:1rem;
  color:var(--text);
  line-height:1.55;
  margin-bottom:1.4rem;
  font-weight:500;
}

/* Pull quote - italic with decorative quote mark */
.award-quote-wrap{
  position:relative;
  margin:1.5rem 0;
  padding:0.5rem 0 0.5rem 0;
}
.award-quote-mark{
  position:absolute;
  top:-1.4rem;
  left:-0.25rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:4.5rem;
  line-height:1;
  background:linear-gradient(135deg, var(--coral), var(--sun));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:500;
  user-select:none;
  pointer-events:none;
}
.award-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  font-weight:400;
  line-height:1.45;
  color:var(--ink-2);
  padding-left:2rem;
  border-left:2px solid rgba(212,165,116,0.5);
  position:relative;
}
.award-tile:nth-child(even) .award-quote{
  border-left:none;
  border-right:2px solid rgba(212,165,116,0.5);
}

.award-role{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:1rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}
.award-role::before{
  content:'';
  width:18px;
  height:1.5px;
  background:linear-gradient(90deg, var(--coral), var(--sun));
}

/* View hint */
.award-view{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:1.5rem;
  font-family:var(--mono);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding:0.6rem 1.1rem 0.6rem 1.2rem;
  background:rgba(255,255,255,0.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1.5px solid var(--border);
  border-radius:999px;
  transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.award-view .arr{
  transition:transform 0.4s;
}
.award-tile:hover .award-view{
  border-color:var(--coral);
  background:white;
  box-shadow:0 8px 18px rgba(255,123,123,0.18);
  color:var(--coral);
}
.award-tile:hover .award-view .arr{transform:translateX(4px)}

/* Decorative star ornament near titles for featured pieces */
.award-ornament{
  display:inline-block;
  font-size:0.85rem;
  background:linear-gradient(135deg, var(--coral), var(--sun));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-right:0.3rem;
  animation:ornamentSpin 8s linear infinite;
  transform-origin:center;
  display:inline-block;
}
@keyframes ornamentSpin{ to{transform:rotate(360deg)} }

/* Tablet - narrower gap */
@media(max-width:1000px){
  .awards-grid{gap:4rem; max-width:900px}
  .award-tile{gap:2.5rem}
  .award-numeral{font-size:7rem}
}

/* Mobile - stack vertically, photo first, numerals reposition */
@media(max-width:780px){
  .awards-grid{
    gap:3.5rem;
    padding:1rem 0 2rem 3.5rem;
  }
  .awards-grid::before{left:1.5rem;}
  .award-tile,
  .award-tile:nth-child(even){
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:1.5rem;
  }
  .award-tile:nth-child(even) .award-frame{order:1}
  .award-tile:nth-child(even) .award-text{
    order:2;
    padding-right:0;
    padding-left:0;
    text-align:left;
  }
  .award-tile:nth-child(even) .award-meta-row{justify-content:flex-start}
  .award-tile:nth-child(even) .award-quote{padding-right:0; padding-left:2rem; border-right:none; border-left:2px solid rgba(212,165,116,0.5)}
  .award-tile:nth-child(even) .award-quote-mark{left:-0.25rem; right:auto}
  .award-tile:nth-child(even) .award-view{justify-content:flex-start}
  .award-tile:nth-child(even) .award-gallery{justify-content:flex-start}
  .award-tile .award-rail-dot{left:-2rem; top:2.5rem; transform:translate(0,0)}
  .award-text{padding-left:0}
  .award-numeral{font-size:5.5rem; top:-1rem; right:-0.5rem; left:auto !important;}
  .award-tile-title{font-size:1.6rem}
  .award-gallery-item{max-width:110px}
}


/* ============ CONTACT ============ */
.contact-card{
  background:
    radial-gradient(ellipse 70% 50% at 25% 20%, rgba(251,191,36,0.18), transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(255,123,123,0.15), transparent 65%),
    linear-gradient(135deg, #fff8ee 0%, #fef3c7 35%, #fce7f3 70%, #e0e7ff 100%);
  color:var(--ink);
  border-radius:36px;
  padding:clamp(2.5rem,5vw,5rem);
  position:relative;
  overflow:hidden;
  border:1.5px solid var(--border);
  box-shadow:
    0 40px 90px rgba(31,36,53,0.10),
    0 12px 24px rgba(31,36,53,0.04),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.contact-card::before, .contact-card::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.contact-card::before{
  width:300px;height:300px;
  background:var(--coral);
  top:-100px;right:-50px;
  opacity:0.30;
}
.contact-card::after{
  width:300px;height:300px;
  background:var(--ocean);
  bottom:-100px;left:-50px;
  opacity:0.22;
}
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:1;
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2.5rem}}

.contact-tag{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--hand);
  font-size:1.5rem;
  color:var(--coral);
  margin-bottom:1rem;
  font-weight:600;
}
.contact-title{
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,4rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin-bottom:1.5rem;
}
.contact-title .italic{
  font-style:italic;
  font-weight:300;
  background:linear-gradient(115deg, var(--coral), var(--rose), var(--sun));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.contact-desc{
  font-size:1.05rem;
  color:var(--text);
  line-height:1.7;
  max-width:480px;
  margin-bottom:2rem;
}

.contact-links{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.contact-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.1rem 1.5rem;
  background:rgba(255,255,255,0.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1.5px solid var(--border);
  border-radius:18px;
  color:var(--ink);
  text-decoration:none;
  transition:all 0.3s;
  box-shadow:0 4px 12px rgba(31,36,53,0.04);
}
.contact-link:hover{
  background:white;
  border-color:var(--coral);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,123,123,0.14);
}
.cl-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(31,36,53,0.05);
  font-size:1.1rem;
  flex-shrink:0;
}
.contact-link:nth-child(1) .cl-icon{background:rgba(255,123,123,0.18);color:#c4503b}
.contact-link:nth-child(2) .cl-icon{background:rgba(91,192,235,0.22);color:#1d6f9c}
.contact-link:nth-child(3) .cl-icon{background:rgba(167,139,250,0.22);color:#6d28d9}
.contact-link:nth-child(4) .cl-icon{background:rgba(74,222,128,0.22);color:#047857}
.cl-body{flex:1;margin-left:1rem}
.cl-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.15em;color:var(--mute);font-weight:600;margin-bottom:0.15rem}
.cl-value{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--ink)}
.cl-arr{font-size:1.1rem;color:var(--mute);transition:transform 0.3s}
.contact-link:hover .cl-arr{transform:translateX(4px);color:var(--coral)}

/* ============ FOOTER - seamless constellation that flows from the jar ============ */
.site-footer{
  position:relative;
  margin-top:0;
  padding:0 0 0.4rem;
  background:transparent;
  border-top:none;
  overflow:hidden;
  /* Break out of any parent width constraint - span the full viewport so
     the constellation field reaches edge-to-edge regardless of section padding. */
  width:100vw;
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* Brand info row sits directly under the jar */
.footer-topstrip-shell{
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.footer-topstrip{
  display:flex;
  align-items:center;
  gap:0.85rem;
  padding:0.6rem 0;
  border-bottom:1px dashed rgba(31,36,53,0.13);
  flex-wrap:wrap;
}
.footer-topstrip-sep{
  color:var(--mute);
  font-weight:300;
  font-family:var(--mono);
}
.footer-topstrip-spacer{ flex:1 }
@media(max-width:520px){
  .footer-topstrip{justify-content:space-between}
  .footer-topstrip-sep{display:none}
}

/* Interactive constellation canvas - full viewport width, soft top fade */
.footer-constellation{
  position:relative;
  width:100%;
  height:420px;
  margin-top:0;
  overflow:hidden;
  cursor:crosshair;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 18%, black 88%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, black 18%, black 88%, transparent 100%);
}
@media(max-width:768px){
  .footer-constellation{height:320px}
}
@media(max-width:480px){
  .footer-constellation{height:260px}
}
.footer-constellation-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Centered prompt - plain floating text, no oval pill */
.footer-prompt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  z-index:2;
}
.footer-prompt-line{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  text-shadow:0 2px 10px rgba(255,255,255,0.9), 0 0 28px rgba(255,255,255,0.7);
  animation:footerPromptBob 4s ease-in-out infinite;
}
@keyframes footerPromptBob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-4px)}
}
.footer-prompt-emoji{
  font-size:1rem;
  animation:footerPromptEmoji 2.5s ease-in-out infinite;
  text-shadow:none;
}
@keyframes footerPromptEmoji{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%    {transform:rotate(180deg) scale(1.2)}
}
@media(max-width:480px){
  .footer-prompt-line{font-size:0.62rem; letter-spacing:0.22em}
}

/* "To be continued..." sits in its own row below the star field */
.footer-tbc-row{
  display:flex;
  justify-content:center;
  padding:0.7rem 1rem 0.2rem;
}
.footer-tbc{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.01em;
  pointer-events:none;
  white-space:nowrap;
  opacity:0.9;
}
.footer-tbc-text{
  margin-right:0.05rem;
}
.footer-tbc-dot{
  display:inline-block;
  opacity:0;
  animation:footerTbcDot 1.6s ease-in-out infinite;
  font-weight:600;
}
.footer-tbc-dot-1{animation-delay:0s}
.footer-tbc-dot-2{animation-delay:0.25s}
.footer-tbc-dot-3{animation-delay:0.5s}
@keyframes footerTbcDot{
  0%,80%,100%{opacity:0; transform:translateY(0)}
  35%,55%   {opacity:1; transform:translateY(-2px)}
}
@media(max-width:520px){
  .footer-tbc{font-size:0.95rem}
}

/* Brand pulsing dot used in the top strip */
.footer-brand-mini{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:var(--mono);
  font-size:0.78rem;
  font-weight:700;
  color:var(--ink);
}
.footer-brand-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--coral), var(--sun));
  box-shadow:0 0 0 3px rgba(255,123,123,0.15), 0 0 10px rgba(255,123,123,0.4);
  animation:footerBrandPulse 2.5s ease-in-out infinite;
}
@keyframes footerBrandPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,123,123,0.15), 0 0 10px rgba(255,123,123,0.4)}
  50%    {box-shadow:0 0 0 5px rgba(255,123,123,0.20), 0 0 16px rgba(255,123,123,0.55)}
}
.footer-meta{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.18em;
  color:var(--mute);
}
.footer-totop{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.5rem 0.9rem;
  background:white;
  border:1.5px solid var(--border);
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  transition:all 0.25s;
}
.footer-totop:hover{
  background:linear-gradient(135deg, var(--coral), var(--sun));
  color:white;
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(255,123,123,0.35);
}
.footer-totop-arrow{
  display:inline-block;
  font-size:0.9rem;
  transition:transform 0.25s;
}
.footer-totop:hover .footer-totop-arrow{
  transform:translateY(-2px);
}

/* ============ ABOUT 3D SCENE ============ */
.about-scene{
  position:relative;
  height:280px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg, #fef5e7 0%, #fce7f3 35%, #e0e7ff 70%, #d1fae5 100%);
  border:1.5px solid var(--border);
  cursor:grab;
  user-select:none;
}
.about-scene:active{cursor:grabbing}
.about-scene canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}
.about-scene-tag{
  position:absolute;
  top:1rem;left:1rem;
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:700;
  padding:0.45rem 0.9rem;
  background:white;
  border:none;
  border-radius:999px;
  color:var(--ink);
  box-shadow:0 4px 12px rgba(31,36,53,0.08);
  z-index:3;
  cursor:pointer;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
}
.about-scene-tag:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 20px rgba(31,36,53,0.15);
}
.about-scene-tag:active{transform:translateY(0) scale(0.98)}
.about-scene-hint{
  position:absolute;
  bottom:1rem;right:1rem;
  font-family:var(--hand);
  font-size:1.2rem;
  color:var(--ink);
  z-index:2;
  pointer-events:none;
  opacity:0.55;
  font-weight:600;
}

/* ============ CURSOR ORBIT ============ */
.cursor-orbit{
  position:fixed;
  top:0;left:0;
  width:0;height:0;
  pointer-events:none;
  z-index:9997;
  opacity:0;
  transition:opacity 0.4s;
}
body.cursor-ready .cursor-orbit{opacity:0.9}
.orbit-dot{
  position:absolute;
  border-radius:50%;
  top:0;left:0;
}
.orbit-dot-1{
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  background:var(--sun);
  box-shadow:0 0 8px var(--sun);
  animation:orbit1 2.5s linear infinite;
}
.orbit-dot-2{
  width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;
  background:var(--coral);
  box-shadow:0 0 8px var(--coral);
  animation:orbit2 3.5s linear infinite reverse;
}
.orbit-dot-3{
  width:4px;height:4px;
  margin:-2px 0 0 -2px;
  background:var(--mint);
  box-shadow:0 0 7px var(--mint);
  animation:orbit3 4.5s linear infinite;
}
@keyframes orbit1{
  from{transform:rotate(0deg) translateX(28px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(28px) rotate(-360deg)}
}
@keyframes orbit2{
  from{transform:rotate(120deg) translateX(38px) rotate(-120deg)}
  to{transform:rotate(480deg) translateX(38px) rotate(-480deg)}
}
@keyframes orbit3{
  from{transform:rotate(240deg) translateX(46px) rotate(-240deg)}
  to{transform:rotate(600deg) translateX(46px) rotate(-600deg)}
}
.cursor-orbit.hover .orbit-dot-1{animation-duration:1.2s}
.cursor-orbit.hover .orbit-dot-2{animation-duration:1.6s}
.cursor-orbit.hover .orbit-dot-3{animation-duration:2s}
@media(hover:none),(max-width:780px){
  .cursor-orbit{display:none}
}


.cursor-ring{
  position:fixed;
  top:0;left:0;
  width:36px;height:36px;
  margin-left:-18px;margin-top:-18px;
  border:1.5px solid var(--coral);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transition:width 0.25s, height 0.25s, margin 0.25s, border-color 0.25s, opacity 0.3s;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor-dot{
  position:fixed;
  top:0;left:0;
  width:6px;height:6px;
  margin-left:-3px;margin-top:-3px;
  background:var(--coral);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transition:transform 0.1s, background 0.25s, opacity 0.3s;
  opacity:0;
}
body.cursor-ready .cursor-ring,
body.cursor-ready .cursor-dot{opacity:1}
.cursor-ring.hover{
  width:60px;height:60px;
  margin-left:-30px;margin-top:-30px;
  border-color:var(--ocean);
  border-width:2px;
}
.cursor-ring.click{transform:scale(0.85)}
.cursor-dot.hover{background:var(--ocean);transform:scale(0)}
@media(hover:none),(max-width:780px){
  .cursor-ring,.cursor-dot{display:none}
}

/* Cursor sparkle trail */
.sparkle{
  position:fixed;
  width:8px;height:8px;
  margin-left:-4px;margin-top:-4px;
  pointer-events:none;
  z-index:9997;
  opacity:0;
  animation:sparkleFade 0.9s ease-out forwards;
}
.sparkle::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--sk-color, var(--sun));
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes sparkleFade{
  0%{opacity:1;transform:scale(0.3) rotate(0)}
  50%{opacity:1;transform:scale(1) rotate(90deg)}
  100%{opacity:0;transform:scale(0.4) rotate(180deg)}
}

/* ============ ENTP PERSONALITY ============ */
.entp-card{
  background:linear-gradient(135deg, #fff 0%, #fff5e8 100%);
  border:1.5px solid var(--border);
  border-radius:28px;
  padding:2.5rem;
  margin-top:3rem;
  position:relative;
  overflow:hidden;
  transition:transform 0.4s;
}
.entp-card:hover{transform:translateY(-4px)}
.entp-card::before{
  content:'';
  position:absolute;
  top:-50px;right:-50px;
  width:200px;height:200px;
  background:radial-gradient(circle, var(--lavender), transparent 70%);
  opacity:0.3;
  border-radius:50%;
  filter:blur(40px);
}
.entp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
  position:relative;
  z-index:1;
}
.entp-badge{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:linear-gradient(135deg, var(--ocean) 0%, var(--violet) 100%);
  color:white;
  padding:0.5rem 1rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
}
.entp-badge .sp{color:var(--sun)}
.entp-title{
  font-family:var(--serif);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.1;
}
.entp-title .italic{font-style:italic;font-weight:300;color:var(--lavender)}
.entp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  position:relative;
  z-index:1;
}
@media(max-width:700px){.entp-grid{grid-template-columns:repeat(2,1fr)}}
/* ENTP letter cards: flip on click. Front shows just letter + word.
   Back shows the explanation on a moving colorful gradient (not white). */
.entp-letter{
  perspective:1200px;
  height:230px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.entp-letter:nth-child(1){--el:var(--coral); --el2:#FFB088}
.entp-letter:nth-child(2){--el:var(--ocean); --el2:#A78BFA}
.entp-letter:nth-child(3){--el:var(--mint-deep); --el2:#4ade80}
.entp-letter:nth-child(4){--el:var(--lavender); --el2:#F472B6}
.entp-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform 0.7s cubic-bezier(0.4,0.0,0.2,1);
  transform-style:preserve-3d;
}
.entp-letter.is-flipped .entp-flip-inner{
  transform:rotateY(180deg);
}
.entp-letter:hover:not(.is-flipped) .entp-flip-inner{
  transform:translateY(-5px) rotate(-1.5deg);
}
.entp-front, .entp-back{
  position:absolute;
  inset:0;
  border-radius:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2rem 1rem;
  overflow:hidden;
}
.entp-front{
  background:white;
  border:1.5px solid var(--border);
  box-shadow:0 4px 12px rgba(31,36,53,0.04);
  transition:box-shadow 0.4s;
}
.entp-letter:hover .entp-front{
  box-shadow:0 16px 32px rgba(31,36,53,0.10);
}
.entp-back{
  transform:rotateY(180deg);
  color:white;
  background:
    linear-gradient(135deg, var(--el) 0%, var(--el2) 50%, var(--el) 100%);
  background-size:200% 200%;
  animation:entpBackShift 6s ease infinite;
}
.entp-back::before{
  /* Floating moving accent dots on the back face */
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle 30px at 20% 30%, rgba(255,255,255,0.25), transparent),
    radial-gradient(circle 25px at 80% 60%, rgba(255,255,255,0.20), transparent),
    radial-gradient(circle 20px at 45% 85%, rgba(255,255,255,0.18), transparent);
  animation:entpBackOrbs 8s linear infinite;
  pointer-events:none;
}
@keyframes entpBackShift{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
@keyframes entpBackOrbs{
  0%   {transform:translate(0,0) rotate(0deg)}
  100% {transform:translate(0,0) rotate(360deg)}
}
.entp-big{
  font-family:var(--serif);
  font-size:4.6rem;
  font-weight:500;
  line-height:1;
  color:var(--el);
  letter-spacing:-0.03em;
  margin-bottom:0.55rem;
}
.entp-word{
  font-family:var(--sans);
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0.01em;
}
.entp-back-word{
  font-family:var(--serif);
  font-size:1.85rem;
  font-weight:500;
  margin-bottom:0.65rem;
  position:relative;
  z-index:1;
}
.entp-back-desc{
  font-size:1.02rem;
  line-height:1.5;
  position:relative;
  z-index:1;
  opacity:0.95;
}
.entp-flip-hint{
  position:absolute;
  bottom:0.5rem;
  right:0.7rem;
  font-family:var(--mono);
  font-size:0.55rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  opacity:0.6;
}
.entp-back .entp-flip-hint{
  color:white;
  opacity:0.7;
}

/* ============ HOBBIES - 3D FLOATING WORLD ============ */
.hobby-world{
  margin:2rem 0 3rem;
  position:relative;
}
.hw-canvas-wrap{
  position:relative;
  width:100%;
  height:340px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(135deg, #fef3c7 0%, #fce7f3 35%, #dbeafe 70%, #d1fae5 100%);
  box-shadow:0 16px 40px rgba(31,36,53,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}
@media(max-width:768px){
  .hw-canvas-wrap{height:260px;border-radius:24px}
}
#hobbyWorldCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hw-hint{
  position:absolute;
  top:1rem;
  left:1.2rem;
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(8px);
  padding:0.45rem 0.85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.7);
  z-index:3;
  cursor:pointer;
  animation:hwHintBob 4s ease-in-out infinite;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
}
.hw-hint:hover{
  background:rgba(255,255,255,0.85);
  box-shadow:0 8px 20px rgba(31,36,53,0.15);
}
.hw-hint:active{transform:scale(0.96)}
@keyframes hwHintBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.hw-hint-dot{
  width:8px;height:8px;
  background:var(--coral);
  border-radius:50%;
  box-shadow:0 0 8px var(--coral);
  animation:hwDotPulse 1.6s ease-in-out infinite;
}
@keyframes hwDotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.3)}
}
.hw-labels{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.hw-label{
  position:absolute;
  font-family:var(--hand);
  font-size:1.4rem;
  color:rgba(31,36,53,0.55);
  font-weight:600;
  transform:rotate(var(--lr, -3deg));
  animation:hwLabelFloat var(--ldur, 5s) ease-in-out infinite;
  animation-delay:var(--ldel, 0s);
}
.hl-paint{top:18%;left:8%;--lr:-5deg;--ldur:5s;--ldel:0s}
.hl-book{top:22%;right:12%;--lr:4deg;--ldur:6s;--ldel:0.6s}
.hl-game{bottom:18%;left:22%;--lr:-3deg;--ldur:5.5s;--ldel:1.2s}
.hl-build{top:50%;right:6%;--lr:6deg;--ldur:6.5s;--ldel:1.8s}
.hl-code{bottom:14%;right:30%;--lr:-4deg;--ldur:5.2s;--ldel:2.4s}
@keyframes hwLabelFloat{
  0%,100%{transform:rotate(var(--lr)) translateY(0)}
  50%{transform:rotate(calc(var(--lr) + 2deg)) translateY(-8px)}
}

/* ============ HOBBIES - SCRAPBOOK (very interactive) ============ */
.scrapbook{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:2.8rem 1.75rem;
  padding:2rem 1rem 4rem;
  position:relative;
  perspective:1500px;
}
.scrap-card{
  position:relative;
  transform-style:preserve-3d;
  cursor:pointer;
  width:100%;
  min-height:380px;
  transform:rotate(var(--tilt, 0deg));
  /* The flip transition needs to be slow enough to be visible. We declare it
     here so it applies in BOTH directions (front->back and back->front). */
  transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
  will-change:transform;
  animation:scrapFloat var(--float-dur, 6s) ease-in-out infinite;
  animation-delay:var(--float-del, 0s);
}
@keyframes scrapFloat{
  0%,100%{transform:rotate(var(--tilt, 0deg)) translateY(0)}
  50%    {transform:rotate(calc(var(--tilt, 0deg) + 1deg)) translateY(-6px)}
}
/* When flipped: kill the float animation immediately and let the transition
   take over. The high-specificity ensures the animation's keyframe transforms
   no longer override us. */
.scrap-card.flipped{
  transform:rotate(0deg) rotateY(180deg);
  animation:none;
}
/* A short-lived helper class added immediately before the first flip toggle.
   This class halts the float animation BEFORE the .flipped class is added so
   the browser captures a clean transform starting point for the transition,
   which fixes the "first click has no flip animation" bug. */
.scrap-card.flip-priming{
  animation:none;
}
.scrap-card:hover{
  z-index:10;
  animation-play-state:paused;
}
.scrap-card:hover:not(.flipped) .scrap-face-front{
  transform:translateY(-14px) scale(1.05) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow:0 32px 60px rgba(31,36,53,0.25);
}
.scrap-card:hover:not(.flipped) .scrap-tape{
  transform:translateX(-50%) rotate(-6deg) scale(1.08);
}

/* Card faces (front + back for the flip) */
.scrap-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:white;
  border-radius:8px;
  padding:0.85rem 0.85rem 1.25rem;
  box-shadow:0 14px 30px rgba(31,36,53,0.1), 0 4px 8px rgba(31,36,53,0.05);
  transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.5s;
  display:flex;
  flex-direction:column;
  transform-style:preserve-3d;
  will-change:transform;
}
.scrap-face-front{
  z-index:2;
}
.scrap-face-front::before{
  /* subtle paper grain */
  content:'';
  position:absolute;
  inset:0;
  border-radius:8px;
  background:
    radial-gradient(circle at 25% 20%, rgba(0,0,0,0.025), transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.025), transparent 50%);
  pointer-events:none;
}
.scrap-face-back{
  transform:rotateY(180deg);
  background:linear-gradient(135deg, var(--back-bg, #fef3c7), var(--back-bg-2, #fce7f3));
  padding:1.5rem 1.2rem;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* All scrap card backs are now light - keep default ink-colored text */
.scrap-back-quote-mark{
  font-family:var(--serif);
  font-size:4.5rem;
  line-height:0.6;
  color:var(--back-accent, var(--coral));
  opacity:0.45;
  margin-bottom:0.5rem;
}
.scrap-back-quote{
  font-family:var(--hand);
  font-size:1.7rem;
  line-height:1.3;
  color:var(--ink);
  font-weight:600;
  margin-bottom:1.1rem;
}
.scrap-back-author{
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}
.scrap-flip-hint{
  position:absolute;
  bottom:0.5rem;
  right:0.7rem;
  font-family:var(--mono);
  font-size:0.55rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--mute);
  opacity:0.6;
  pointer-events:none;
}

.scrap-tape{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:90px;
  height:24px;
  background:var(--tape-color, rgba(251,191,36,0.7));
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
  z-index:3;
}
.scrap-tape::before, .scrap-tape::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:8px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.08));
}
.scrap-tape::before{left:0}
.scrap-tape::after{right:0}

.scrap-photo{
  aspect-ratio:1.15/1;
  background:#f5f0e6;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.06) inset;
}
.scrap-photo-dark{
  color:white;
}

.scrap-caption{
  padding:0 0.3rem;
  position:relative;
  z-index:1;
}
.scrap-meta{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:0.35rem;
  font-weight:600;
}
.scrap-name{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:0.4rem;
}
.scrap-desc{
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--text);
  line-height:1.3;
}

/* === Bibu the chameleon === */
.bibu-emoji{
  font-size:4.5rem;
  position:relative;
  z-index:2;
  animation:bibuSway 3.5s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
@keyframes bibuSway{
  0%,100%{transform:rotate(-8deg) translateX(-3px)}
  50%{transform:rotate(8deg) translateX(3px)}
}
.bibu-aura{
  position:absolute;
  inset:25%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,0.4), transparent 70%);
  animation:bibuPulse 3s ease-in-out infinite;
  z-index:1;
}
@keyframes bibuPulse{
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.3);opacity:0.8}
}
.bibu-name{
  position:absolute;
  bottom:0.6rem;
  right:0.8rem;
  font-family:var(--hand);
  font-size:1.4rem;
  color:#047857;
  font-weight:600;
  transform:rotate(-3deg);
  z-index:2;
}

/* === LLMs terminal === */
.terminal{
  color:#a7f3d0;
  font-family:var(--mono);
  font-size:0.8rem;
  padding:0.8rem;
  width:90%;
  text-align:left;
  line-height:1.5;
}
.t-row{margin-bottom:0.25rem}
.t-prompt{color:#fbbf24;margin-right:0.4rem}
.t-typed{color:#fff}
.t-cursor{
  color:#a7f3d0;
  animation:blink 1s steps(2) infinite;
}
.t-out{color:#86efac;font-size:0.72rem;opacity:0.85}
@keyframes blink{
  50%{opacity:0}
}

/* === Bubble tea & coffee === */
.boba-cup{
  position:relative;
  width:50px;
  height:80px;
  background:linear-gradient(180deg, #fef3c7 0%, #d4a574 90%, #92400e 100%);
  border-radius:6px 6px 12px 12px;
  border:2px solid #92400e;
  margin-right:1rem;
  overflow:hidden;
}
.boba-lid{
  position:absolute;
  top:-5px;left:-3px;right:-3px;
  height:8px;
  background:#fef3c7;
  border-radius:6px;
  border:2px solid #92400e;
}
.boba-straw{
  position:absolute;
  top:-12px;
  left:18px;
  width:6px;
  height:30px;
  background:#dc2626;
  border-radius:2px;
  transform:rotate(8deg);
  z-index:3;
}
.boba-bubbles{
  position:absolute;
  inset:0;
}
.boba-bubbles span{
  position:absolute;
  width:8px;height:8px;
  background:#1f2435;
  border-radius:50%;
  bottom:6px;
  opacity:0.8;
  animation:bobaRise 4s ease-in-out infinite;
}
.boba-bubbles span:nth-child(1){left:8px;animation-delay:0s}
.boba-bubbles span:nth-child(2){left:20px;animation-delay:0.6s}
.boba-bubbles span:nth-child(3){left:32px;animation-delay:1.2s}
.boba-bubbles span:nth-child(4){left:14px;animation-delay:1.8s}
.boba-bubbles span:nth-child(5){left:26px;animation-delay:2.4s}
@keyframes bobaRise{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-30px)}
}
.coffee-mug{
  font-size:2.5rem;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  animation:coffeeTilt 4s ease-in-out infinite;
}
@keyframes coffeeTilt{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
.drink-steam{
  position:absolute;
  top:0.4rem;
  right:1.5rem;
  pointer-events:none;
}
.drink-steam span{
  display:block;
  width:5px;height:5px;
  background:rgba(255,255,255,0.7);
  border-radius:50%;
  margin-bottom:6px;
  animation:steamRise 2.5s ease-in-out infinite;
}
.drink-steam span:nth-child(2){animation-delay:0.4s;margin-left:5px}
.drink-steam span:nth-child(3){animation-delay:0.8s}
@keyframes steamRise{
  0%{transform:translateY(0);opacity:0.7}
  100%{transform:translateY(-25px);opacity:0}
}

/* === Acrylic painting === */
.palette{
  position:relative;
  width:130px;
  height:90px;
  background:linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-radius:50% 65% 60% 70% / 60% 55% 60% 60%;
  box-shadow:0 6px 14px rgba(146,64,14,0.3), inset 0 2px 4px rgba(255,255,255,0.3);
}
.palette::before{
  content:'';
  position:absolute;
  right:18px;top:32px;
  width:18px;height:18px;
  background:#fef3c7;
  border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);
}
.paint-blob{
  position:absolute;
  width:18px;height:16px;
  border-radius:50% 60% 55% 45% / 60% 50% 50% 40%;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.pb-1{background:#dc2626;top:14px;left:18px}
.pb-2{background:#2563eb;top:14px;left:48px;width:22px;height:18px}
.pb-3{background:#16a34a;top:42px;left:14px;width:20px;height:17px}
.pb-4{background:#9333ea;top:50px;left:46px}
.pb-5{background:#f472b6;top:24px;left:78px;width:16px;height:14px}
.brush-icon{
  position:absolute;
  bottom:8px;
  right:8px;
  font-size:2.5rem;
  transform:rotate(-25deg);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation:brushSway 3s ease-in-out infinite;
}
@keyframes brushSway{
  0%,100%{transform:rotate(-25deg)}
  50%{transform:rotate(-15deg)}
}

/* === Favorite shows === */
.shows-spotlight{
  position:absolute;
  top:-30%;left:50%;
  width:140%;
  height:100%;
  margin-left:-70%;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.35), transparent 60%);
  pointer-events:none;
}
.shows-rot{
  text-align:center;
  z-index:2;
  position:relative;
}
.shows-emoji{
  font-size:3rem;
  display:block;
  margin-bottom:0.4rem;
  transition:opacity 0.4s, transform 0.4s;
  filter:drop-shadow(0 4px 10px rgba(76,29,149,0.35));
}
.shows-name{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  font-weight:600;
  color:white;
  text-shadow:0 2px 8px rgba(76,29,149,0.45);
  transition:opacity 0.4s, transform 0.4s;
  margin-bottom:0.2rem;
}
.shows-tag{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  text-shadow:0 1px 4px rgba(76,29,149,0.4);
  transition:opacity 0.4s, transform 0.4s;
}
.shows-dots{
  position:absolute;
  bottom:0.8rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:0.4rem;
  z-index:2;
}
.shows-dots span{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  transition:all 0.3s;
}
.shows-dots span.active{
  background:white;
  width:20px;
  border-radius:6px;
  box-shadow:0 0 8px rgba(255,255,255,0.6);
}

/* === Books === */
.book-shelf{
  display:flex;
  gap:6px;
  align-items:flex-end;
  height:80%;
}
.bk-spine{
  width:22px;
  height:100%;
  border-radius:2px 2px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.2), inset -2px 0 0 rgba(0,0,0,0.1);
  position:relative;
  transition:transform 0.4s;
}
.bk-spine span{
  font-family:var(--mono);
  color:rgba(255,255,255,0.85);
  font-size:0.55rem;
  font-weight:700;
  letter-spacing:0.1em;
  transform:rotate(-90deg);
  white-space:nowrap;
}
.bk-1{background:linear-gradient(180deg,#dc2626,#991b1b);height:90%}
.bk-2{background:linear-gradient(180deg,#2563eb,#1d4ed8);height:100%}
.bk-3{background:linear-gradient(180deg,#16a34a,#166534);height:85%}
.bk-4{background:linear-gradient(180deg,#9333ea,#6b21a8);height:95%}
.scrap-card:hover .bk-1{transform:rotate(-5deg) translateY(-3px)}
.scrap-card:hover .bk-2{transform:translateY(-6px)}
.scrap-card:hover .bk-3{transform:rotate(3deg) translateY(-2px)}
.scrap-card:hover .bk-4{transform:rotate(-2deg) translateY(-4px)}

/* === Gaming === */
.gamepad-icon{
  font-size:4rem;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.2));
  animation:gpadWobble 2.5s ease-in-out infinite;
  z-index:2;
  position:relative;
}
@keyframes gpadWobble{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(8deg)}
}
.gpad-button{
  position:absolute;
  width:24px;height:24px;
  border-radius:50%;
  color:white;
  font-family:var(--mono);
  font-weight:700;
  font-size:0.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 6px rgba(0,0,0,0.25);
  animation:gpadBtn 1.5s ease-in-out infinite;
}
.gb-a{background:#ef4444;top:18%;right:18%}
.gb-b{background:#facc15;top:38%;right:8%;animation-delay:0.3s}
.gb-x{background:#3b82f6;bottom:22%;right:25%;animation-delay:0.6s}
@keyframes gpadBtn{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}

/* === LEGO === */
.lego-pile{
  position:relative;
  width:140px;
  height:90px;
}
.lp-brick{
  position:absolute;
  border-radius:3px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.lp-brick::before, .lp-brick::after{
  content:'';
  position:absolute;
  top:-5px;
  width:9px;height:9px;
  border-radius:50%;
  background:inherit;
  box-shadow:0 2px 3px rgba(0,0,0,0.15);
}
.lp-brick::before{left:7px}
.lp-brick::after{left:22px}
.lp-1{background:#dc2626;width:38px;height:18px;bottom:0;left:30px;animation:legoBob 4s ease-in-out infinite}
.lp-2{background:#2563eb;width:38px;height:18px;bottom:18px;left:14px;animation:legoBob 4s ease-in-out infinite -1s}
.lp-3{background:#facc15;width:38px;height:18px;bottom:36px;left:38px;animation:legoBob 4s ease-in-out infinite -2s}
.lp-4{background:#16a34a;width:38px;height:18px;bottom:54px;left:18px;animation:legoBob 4s ease-in-out infinite -3s}
@keyframes legoBob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-2deg)}
}

/* === PCB === */
.scrap-photo-img{
  padding:0!important;
}
.scrap-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.scrap-photo-img .pcb-led{
  z-index:2;
}
.pcb-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(0deg, transparent 48%, rgba(74,222,128,0.18) 49%, rgba(74,222,128,0.18) 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(74,222,128,0.18) 49%, rgba(74,222,128,0.18) 51%, transparent 52%);
  background-size:18px 18px;
  pointer-events:none;
}
.pcb-chip{
  position:absolute;
  top:38%;
  left:35%;
  width:42px;
  height:42px;
  background:#0a0a0a;
  border-radius:3px;
  border:2px solid #1f2937;
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}
.pcb-chip::before{
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid #4ade80;
  border-radius:1px;
  opacity:0.6;
}
.pcb-led{
  position:absolute;
  bottom:1rem;
  right:1.5rem;
  width:10px;
  height:10px;
  background:#4ade80;
  border-radius:50%;
  box-shadow:0 0 18px #4ade80, 0 0 4px #fff inset;
  animation:pcbBlink 1.5s ease-in-out infinite;
}
@keyframes pcbBlink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.9)}
}
.pcb-trace{
  position:absolute;
  top:50%;
  left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, #4ade80 30%, #4ade80 70%, transparent);
  opacity:0.5;
  animation:tracePulse 2s ease-in-out infinite;
}
@keyframes tracePulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.7}
}

/* === Workout === */
.fit-emoji{
  font-size:4.5rem;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  animation:fitBounce 1.4s ease-in-out infinite;
  z-index:2;
  position:relative;
}
@keyframes fitBounce{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-10px) rotate(3deg)}
}
.fit-reps{
  position:absolute;
  display:flex;
  flex-direction:column;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  gap:6px;
}
.rep{
  font-family:var(--mono);
  font-size:0.9rem;
  font-weight:700;
  color:rgba(255,255,255,0.95);
  background:rgba(31,36,53,0.18);
  padding:2px 8px;
  border-radius:999px;
  animation:repFade 3s ease-in-out infinite;
}
.r1{animation-delay:0s}
.r2{animation-delay:1s}
.r3{animation-delay:2s}
@keyframes repFade{
  0%,100%{opacity:0.4;transform:translateX(10px)}
  20%,40%{opacity:1;transform:translateX(0)}
  60%{opacity:0.6;transform:translateX(-5px)}
}

/* === Events === */
.confetti-rain{
  position:absolute;
  inset:0;
}
.conf{
  position:absolute;
  font-size:1.5rem;
  animation:confettiFall 4s ease-in infinite;
}
.c1{left:15%;top:-10%;animation-delay:0s}
.c2{left:35%;top:-10%;animation-delay:0.5s}
.c3{left:55%;top:-10%;animation-delay:1s}
.c4{left:75%;top:-10%;animation-delay:1.5s}
.c5{left:50%;top:-10%;animation-delay:2s;font-size:1.8rem}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(160px) rotate(720deg);opacity:0}
}

/* === Digital art / graphic design === */
/* A miniature design workspace: subtle grid, an animated bezier curve drawn
   by a pen cursor, a row of colour swatches at the bottom. */
.digital-canvas{
  position:relative;
  overflow:hidden;
}
.digital-canvas::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 28%, rgba(167,139,250,0.35), transparent 55%),
    radial-gradient(circle at 78% 75%, rgba(96,165,250,0.30), transparent 55%);
  pointer-events:none;
  z-index:1;
}
.digital-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0.55;
  z-index:1;
}
.digital-svg{
  position:absolute;
  top:8%;left:8%;
  width:84%;height:64%;
  z-index:2;
  overflow:visible;
}
.digital-path{
  stroke-dasharray:380;
  stroke-dashoffset:380;
  animation:digitalDraw 5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(244,114,182,0.55));
}
@keyframes digitalDraw{
  0%   {stroke-dashoffset:380}
  55%  {stroke-dashoffset:0}
  88%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:-380}
}
.digital-anchor{
  fill:#fbbf24;
  stroke:white;
  stroke-width:1;
  opacity:0;
  animation:anchorPop 5s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.digital-anchor.a1{animation-delay:0.4s}
.digital-anchor.a2{animation-delay:1.4s}
.digital-anchor.a3{animation-delay:2.4s}
@keyframes anchorPop{
  0%,15%   {opacity:0; transform:scale(0)}
  18%      {opacity:1; transform:scale(1.4)}
  22%,82%  {opacity:1; transform:scale(1)}
  100%     {opacity:0; transform:scale(0)}
}
.digital-cursor{
  position:absolute;
  z-index:3;
  width:24px;height:24px;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,0.45));
  animation:digitalCursor 5s ease-in-out infinite;
  pointer-events:none;
  top:55%;left:8%;
}
@keyframes digitalCursor{
  0%   {top:55%;left:8%;opacity:0}
  6%   {top:55%;left:8%;opacity:1}
  20%  {top:18%;left:25%;opacity:1}
  35%  {top:62%;left:42%;opacity:1}
  50%  {top:24%;left:60%;opacity:1}
  62%  {top:48%;left:82%;opacity:1}
  72%  {top:18%;left:92%;opacity:1}
  82%  {top:18%;left:92%;opacity:0}
  100% {top:55%;left:8%;opacity:0}
}
.digital-swatches{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:4;
  padding:5px 9px;
  background:rgba(15,18,30,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
}
.dswatch{
  width:13px;
  height:13px;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.35);
  animation:swatchPulse 2.6s ease-in-out infinite;
  display:block;
}
.dswatch:nth-child(2){animation-delay:0.35s}
.dswatch:nth-child(3){animation-delay:0.7s}
.dswatch:nth-child(4){animation-delay:1.05s}
.dswatch:nth-child(5){animation-delay:1.4s}
@keyframes swatchPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.3)}
}
/* Soft scanline shimmer for the "screen" feel */
.digital-canvas::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%);
  background-size:100% 6px;
  pointer-events:none;
  z-index:5;
  opacity:0.5;
  mix-blend-mode:overlay;
}

/* ============ PCB SCRAP CARD ANIMATION ============
   Replaces the embedded PCB photo with an animated schematic:
   traces drawn in green/gold, blinking LEDs, components, signal pulses. */
.pcb-canvas{
  position:relative;
  overflow:hidden;
}
.pcb-canvas::before{
  /* Faint copper-trace pattern as background texture */
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(16,185,129,0.06) 1px, transparent 1px),
    linear-gradient(rgba(16,185,129,0.06) 1px, transparent 1px);
  background-size:14px 14px;
  pointer-events:none;
}
.pcb-svg{
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
}
.pcb-trace{
  fill:none;
  stroke:url(#pcbTraceGrad);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  filter:drop-shadow(0 0 2px rgba(52,211,153,0.6));
  animation:pcbTraceDraw 3s ease-out forwards;
}
.pcb-trace.pt-1{animation-delay:0.2s}
.pcb-trace.pt-2{animation-delay:0.6s}
.pcb-trace.pt-3{animation-delay:1.0s}
@keyframes pcbTraceDraw{
  to{ stroke-dashoffset:0; }
}
.pcb-pad{
  fill:#fbbf24;
  stroke:#7c2d12;
  stroke-width:0.5;
  filter:drop-shadow(0 0 1px rgba(251,191,36,0.7));
  opacity:0;
  animation:pcbFadeIn 0.4s ease-out forwards;
  animation-delay:1.5s;
}
@keyframes pcbFadeIn{
  to{opacity:1}
}
.pcb-chip{
  fill:#0f172a;
  stroke:#1f2937;
  stroke-width:0.6;
  opacity:0;
  animation:pcbFadeIn 0.5s ease-out forwards;
  animation-delay:1.7s;
  filter:drop-shadow(0 0 3px rgba(0,0,0,0.4));
}
.pcb-leg{
  stroke:#9ca3af;
  stroke-width:0.8;
  stroke-linecap:round;
  opacity:0;
  animation:pcbFadeIn 0.4s ease-out forwards;
  animation-delay:1.9s;
}
.pcb-resistor{
  fill:#1e293b;
  stroke:#fbbf24;
  stroke-width:0.4;
  opacity:0;
  animation:pcbFadeIn 0.4s ease-out forwards;
  animation-delay:2s;
}
.pcb-cap{
  fill:#7c2d12;
  stroke:#fbbf24;
  stroke-width:0.5;
  opacity:0;
  animation:pcbFadeIn 0.4s ease-out forwards;
  animation-delay:2.2s;
}
.pcb-led-anim{
  filter:drop-shadow(0 0 4px currentColor);
  opacity:0;
}
.pcb-led-anim.led-a{
  fill:#ef4444;
  color:#ef4444;
  animation:pcbLedBlink 1.3s ease-in-out 2.5s infinite, pcbFadeIn 0.4s ease-out 2.3s forwards;
}
.pcb-led-anim.led-b{
  fill:#3b82f6;
  color:#3b82f6;
  animation:pcbLedBlink 1.7s ease-in-out 2.6s infinite, pcbFadeIn 0.4s ease-out 2.4s forwards;
}
.pcb-led-anim.led-c{
  fill:#10b981;
  color:#10b981;
  animation:pcbLedBlink 1.5s ease-in-out 2.7s infinite, pcbFadeIn 0.4s ease-out 2.5s forwards;
}
@keyframes pcbLedBlink{
  0%,100%{ opacity:0.35; transform:scale(1); }
  50%    { opacity:1;    transform:scale(1.15); }
}
.pcb-pulse{
  filter:drop-shadow(0 0 3px currentColor);
}

/* ============ BRICK JAR - interactive footer ============ */
.brick-jar{
  position:relative;
  margin-top:4rem;
  border-radius:52px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 25% 15%, rgba(255,255,255,0.55), transparent 60%),
    linear-gradient(135deg, #fff8ee 0%, #fef3c7 28%, #fce7f3 60%, #e0e7ff 100%);
  border:1.5px solid var(--border);
  box-shadow:
    0 40px 90px rgba(31,36,53,0.12),
    0 12px 24px rgba(31,36,53,0.05),
    inset 0 1px 0 rgba(255,255,255,0.85);
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  min-height:480px;
  padding:3rem;
}

/* Inner gold-hairline ornamental frame */
.brick-jar::after{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(212,165,116,0.20);
  border-radius:38px;
  pointer-events:none;
  z-index:1;
}

/* Sparkle dot grid texture overlay */
.brick-jar::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(251,191,36,0.45) 1px, transparent 1.5px);
  background-size:60px 60px, 95px 95px;
  background-position:0 0, 30px 45px;
  opacity:0.32;
  pointer-events:none;
  z-index:1;
}

@media(max-width:820px){
  .brick-jar{
    grid-template-columns:1fr;
    padding:2rem 1.5rem;
    min-height:auto;
    border-radius:36px;
  }
  .brick-jar::after{inset:12px;border-radius:26px}
}

.bj-art-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.bj-bg-dot{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.42;
  mix-blend-mode:multiply;
}
.bj-bg-dot-1{width:240px;height:240px;background:#FF7B7B;top:-60px;left:-60px;animation:bjDrift1 18s ease-in-out infinite}
.bj-bg-dot-2{width:280px;height:280px;background:#5BC0EB;bottom:-90px;right:-70px;animation:bjDrift2 22s ease-in-out infinite}
.bj-bg-dot-3{width:200px;height:200px;background:#A78BFA;top:25%;right:8%;opacity:0.26;animation:bjDrift3 20s ease-in-out infinite}
.bj-bg-dot-4{width:180px;height:180px;background:#FBBF24;bottom:18%;left:22%;opacity:0.32;animation:bjDrift1 24s ease-in-out infinite}
.bj-bg-dot-5{width:160px;height:160px;background:#4ADE80;top:55%;left:48%;opacity:0.22;animation:bjDrift2 26s ease-in-out infinite}
@keyframes bjDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.1)}}
@keyframes bjDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.15)}}
@keyframes bjDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(0.95)}}

.bj-text{
  position:relative;
  z-index:3;
  padding-right:1.5rem;
}
@media(max-width:820px){.bj-text{padding-right:0;text-align:center}}

.bj-tag{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  padding:0.5rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,0.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1.5px solid var(--border);
  color:var(--ink);
  font-weight:700;
  margin-bottom:1.4rem;
  box-shadow:0 4px 14px rgba(31,36,53,0.06);
}
.bj-tag .sp{color:var(--coral);font-size:0.9rem}
/* When the tag is rendered as a real button, give it hover affordance */
.bj-tag-btn{
  cursor:pointer;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, background 0.25s;
  font-family:var(--mono);
}
.bj-tag-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(255,123,123,0.15), rgba(251,191,36,0.15));
  border-color:rgba(255,123,123,0.4);
  box-shadow:0 8px 22px rgba(255,123,123,0.18);
}
.bj-tag-btn:active{
  transform:translateY(0) scale(0.96);
}

.bj-quote{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
  letter-spacing:-0.022em;
  color:var(--ink);
  line-height:1.14;
  margin-bottom:1.1rem;
}
.bj-quote em{
  font-style:italic;
  background:linear-gradient(115deg, var(--coral), var(--sun), var(--ocean));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.bj-sub{
  font-size:0.98rem;
  color:var(--text);
  line-height:1.65;
  margin-bottom:1.75rem;
  max-width:440px;
}
@media(max-width:820px){.bj-sub{margin-left:auto;margin-right:auto}}

.bj-controls{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}
@media(max-width:820px){.bj-controls{justify-content:center}}

.bj-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--sans);
  font-size:0.85rem;
  font-weight:600;
  padding:0.78rem 1.3rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ink);
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow:0 4px 14px rgba(31,36,53,0.06);
}
.bj-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(31,36,53,0.14);
  border-color:var(--ink);
  background:white;
}
.bj-btn:active{transform:translateY(0); box-shadow:0 2px 4px rgba(31,36,53,0.08)}
.bj-btn-primary{
  background:linear-gradient(135deg, var(--coral) 0%, var(--sun) 100%);
  color:white;
  border-color:transparent;
}
.bj-btn-primary:hover{
  background:linear-gradient(135deg, #ff6b6b 0%, #f59e0b 100%);
  color:white;
}
.bj-btn-icon{
  font-size:1rem;
  line-height:1;
}
.bj-btn-primary .bj-btn-icon{color:white}

.bj-counter{
  display:inline-flex;
  align-items:baseline;
  gap:0.75rem;
  padding:0.7rem 1.2rem;
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 4px 14px rgba(31,36,53,0.05);
}
.bj-counter-label{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}
.bj-counter-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.6rem;
  font-weight:500;
  color:var(--coral);
  line-height:1;
  min-width:1.8ch;
  display:inline-block;
}
/* Counter rendered as a real button - hover and pop affordance */
.bj-counter-btn{
  border:1px solid rgba(255,255,255,0.85);
  cursor:pointer;
  position:relative;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, background 0.25s;
}
.bj-counter-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(254,243,199,0.92));
  border-color:rgba(255,123,123,0.4);
  box-shadow:0 8px 22px rgba(255,123,123,0.18);
}
.bj-counter-btn:active{
  transform:translateY(0) scale(0.96);
}
.bj-counter-cue{
  font-family:var(--mono);
  font-size:0.55rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--coral);
  font-weight:700;
  opacity:0;
  margin-left:0.4rem;
  transition:opacity 0.3s;
  align-self:center;
}
.bj-counter-btn:hover .bj-counter-cue{ opacity:0.9; }
/* When pop is triggered, briefly flash the number */
.bj-counter-btn.bj-counter-pop .bj-counter-num{
  animation:bjCounterPop 0.5s ease-out;
}
@keyframes bjCounterPop{
  0%  {transform:scale(1)}
  35% {transform:scale(1.35); color:var(--sun)}
  100%{transform:scale(1)}
}

.bj-canvas-wrap{
  position:relative;
  z-index:2;
  width:100%;
  height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
/* Calm solid-toned wash beneath the jar - replaces the confusing snowglobe halo */
.bj-canvas-wrap::before{
  content:'';
  position:absolute;
  width:90%;
  height:75%;
  bottom:5%;
  left:5%;
  background:
    radial-gradient(ellipse 50% 70% at 50% 65%, rgba(255,247,224,0.5) 0%, transparent 65%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
}
/* Tiny shiny floating dots layered on top - gives "solid + shiny things" feel */
.bj-canvas-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(251,191,36,0.55) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(167,139,250,0.4) 1px, transparent 1.5px);
  background-size:140px 140px, 95px 95px, 180px 180px;
  background-position:30px 50px, 80px 20px, 0 90px;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
  animation:bjShineDrift 40s linear infinite;
}
@keyframes bjShineDrift{
  from{background-position:30px 50px, 80px 20px, 0 90px}
  to{background-position:170px 90px, 175px 115px, 180px 270px}
}
@media(max-width:820px){.bj-canvas-wrap{height:340px;margin-top:1.5rem}}
#brickJarCanvas{
  width:100%;
  height:100%;
  display:block;
  position:relative;
  z-index:1;
}
.bj-hint{
  position:absolute;
  bottom:-1.2rem;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:700;
  color:white;
  background:linear-gradient(135deg, var(--coral) 0%, var(--sun) 100%);
  padding:0.6rem 1.4rem;
  border-radius:999px;
  box-shadow:
    0 8px 20px rgba(255,123,123,0.35),
    0 0 0 4px rgba(255,255,255,0.85);
  pointer-events:none;
  z-index:5;
  white-space:nowrap;
  animation:bjHintPulse 2.2s ease-in-out infinite;
}
@keyframes bjHintPulse{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%    {transform:translateX(-50%) translateY(-3px) scale(1.03)}
}
@media(max-width:480px){
  .bj-hint{font-size:0.65rem; padding:0.5rem 1.1rem}
}


.fade-up{opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(0.2,0.8,0.2,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up.d1{transition-delay:0.1s}
.fade-up.d2{transition-delay:0.2s}
.fade-up.d3{transition-delay:0.3s}
.fade-up.d4{transition-delay:0.4s}

/* Counter number style */
.counter[data-end]:not(.counted){opacity:0}
.counter.counted{animation:popIn 0.4s ease-out}
@keyframes popIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}

/* === Toolkit measuring tape (Toolkit section-tag effect) ===
   Rolls out horizontally to the right of the pill, stays at pill level. */
.toolkit-tape{
  display:flex;
  align-items:stretch;
  opacity:0;
  transform-origin:left center;
  transform:translateY(-50%) scaleX(0);
  transition:transform 0.65s cubic-bezier(0.4,0.0,0.2,1), opacity 0.4s;
  filter:drop-shadow(0 8px 20px rgba(251,191,36,0.25));
  max-width:min(420px, calc(100vw - 220px));
  width:420px;
}
.toolkit-tape.tt-reverse{
  transform-origin:right center;
  transform:translate(-100%, -50%) scaleX(0);
}
.toolkit-tape.is-open{
  opacity:1;
  transform:translateY(-50%) scaleX(1);
}
.toolkit-tape.tt-reverse.is-open{
  transform:translate(-100%, -50%) scaleX(1);
}
.tt-body{
  flex:1;
  background:linear-gradient(180deg, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
  padding:0.45rem 0 0.4rem;
  position:relative;
  border-top:1.5px solid rgba(180,83,9,0.4);
  border-bottom:1.5px solid rgba(180,83,9,0.5);
  border-radius:3px 0 0 3px;
}
.tt-end-cap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  background:linear-gradient(180deg, #f97316, #dc2626);
  color:white;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:700;
  border-radius:0 6px 6px 0;
  box-shadow:inset -2px 0 0 rgba(0,0,0,0.15);
}
.tt-track{
  position:relative;
  height:24px;
}
.tt-ticks{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:0 0.5rem;
  height:100%;
}
.tt-tick{
  display:inline-block;
  width:1px;
  height:6px;
  background:rgba(120,53,15,0.65);
}
.tt-tick-long{ height:12px; }
.tt-tool{
  position:absolute;
  top:-4px;
  font-size:0.95rem;
  filter:drop-shadow(0 2px 4px rgba(120,53,15,0.4));
  opacity:0;
  animation:ttToolPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.tt-t-1{left:10%;  animation-delay:0.7s}
.tt-t-2{left:28%;  animation-delay:0.9s}
.tt-t-3{left:46%;  animation-delay:1.1s}
.tt-t-4{left:64%;  animation-delay:1.3s}
.tt-t-5{left:82%;  animation-delay:1.5s}
@keyframes ttToolPop{
  from{opacity:0; transform:translateY(-6px) scale(0)}
  to  {opacity:1; transform:translateY(0) scale(1)}
}
.tt-numbers{
  display:flex;
  justify-content:space-between;
  padding:0.1rem 0.5rem 0;
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:700;
  color:rgba(120,53,15,0.75);
  letter-spacing:0.05em;
}
.tt-numbers span{opacity:0; animation:ttNumIn 0.3s ease-out forwards}
.tt-numbers span:nth-child(1){animation-delay:0.5s}
.tt-numbers span:nth-child(2){animation-delay:0.65s}
.tt-numbers span:nth-child(3){animation-delay:0.8s}
.tt-numbers span:nth-child(4){animation-delay:0.95s}
.tt-numbers span:nth-child(5){animation-delay:1.1s}
.tt-numbers span:nth-child(6){animation-delay:1.25s}
@keyframes ttNumIn{ to{opacity:1} }
@media(max-width:768px){ .toolkit-tape{display:none} }

/* === Stat tile creative effect: tech-tile grid (12+ TECHNOLOGIES) ===
   A 4x3 grid of colored tech tiles assembles itself ABOVE the stat tile. */
.hstat-techgrid{
  position:absolute;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  padding:0.6rem;
  background:white;
  border-radius:14px;
  box-shadow:0 18px 36px rgba(31,36,53,0.18);
  z-index:1500;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -100%) scale(0.6);
  transition:opacity 0.4s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.hstat-techgrid.is-open{
  opacity:1;
  transform:translate(-50%, -100%) scale(1);
}
.hstat-techgrid::after{
  content:'';
  position:absolute;
  bottom:-7px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px;
  background:white;
}
.htg-tile{
  width:56px;
  height:56px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white;
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.04em;
  opacity:0;
  transform:scale(0) rotate(-15deg);
  animation:htgTileIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.12);
}
.htg-tile-ico{
  font-size:1rem;
  margin-bottom:1px;
}
@keyframes htgTileIn{ to{ opacity:1; transform:scale(1) rotate(0deg); } }

/* === Stat tile creative effect: odometer (10+ YEARS CODING) ===
   A retro digit-roll display showing the years counting up. */
.hstat-odo{
  position:absolute;
  display:flex;
  align-items:center;
  gap:0.85rem;
  padding:0.85rem 1.1rem;
  background:linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  color:var(--ink);
  border:1.5px solid rgba(251,191,36,0.5);
  border-radius:14px;
  box-shadow:0 18px 36px rgba(31,36,53,0.18), 0 0 0 3px rgba(251,191,36,0.15);
  z-index:1500;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -100%) scale(0.6);
  transition:opacity 0.4s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  font-family:var(--mono);
}
.hstat-odo.is-open{
  opacity:1;
  transform:translate(-50%, -100%) scale(1);
}
.hstat-odo::after{
  content:'';
  position:absolute;
  bottom:-7px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px;
  background:#fef3c7;
  border-right:1.5px solid rgba(251,191,36,0.5);
  border-bottom:1.5px solid rgba(251,191,36,0.5);
}
.hodo-label{
  font-size:0.55rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#b45309;
  font-weight:700;
  line-height:1.15;
  text-align:left;
}
.hodo-windows{ display:inline-flex; gap:3px; }
.hodo-win{
  width:24px;
  height:34px;
  background:white;
  border-radius:4px;
  box-shadow:inset 0 1px 3px rgba(120,53,15,0.18), 0 0 0 1px rgba(120,53,15,0.18);
  overflow:hidden;
  position:relative;
}
.hodo-reel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:1.3rem;
  font-weight:700;
  color:#dc2626;
  transition:transform 1.4s cubic-bezier(0.4,0.0,0.2,1);
  line-height:34px;
}
.hodo-reel span{height:34px; display:block}
.hodo-after{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hodo-years{
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink);
  margin-top:2px;
}
@media(max-width:768px){ .hstat-odo, .hstat-techgrid{ display:none; } }

/* ====================================================================
   COMPREHENSIVE MOBILE & TABLET RESPONSIVENESS - thorough pass
   Tablet (1024px), mobile (700px), small phones (420px), touch devices,
   and reduced-motion users all get specific treatment.
   ==================================================================== */

/* Tablet - 1024px and below */
@media(max-width:1024px){
  .shell{padding-left:1.25rem; padding-right:1.25rem}
  .hero-grid{gap:3rem}
  h1.hero-title{font-size:clamp(2rem, 6vw, 3.6rem)}
  .section-title{font-size:clamp(1.6rem, 4vw, 2.6rem)}
  .photo-wrap{width:min(380px, 100%)}
  .tech-grid{grid-template-columns:repeat(3, 1fr)}
  .scrap-grid{grid-template-columns:repeat(2, 1fr); gap:1.5rem}
  .brick-jar{grid-template-columns:1fr; padding:2rem; gap:1.5rem}
  .award-tile{padding:1.5rem 1.25rem}
  .hero-stats{max-width:100%}
  .projects-grid{grid-template-columns:repeat(2, 1fr); gap:1.4rem}
}

/* Mobile - 768px and below */
@media(max-width:768px){
  body{font-size:0.94rem; overflow-x:hidden}
  .shell{padding-left:1rem; padding-right:1rem}
  section{padding-top:3.5rem !important; padding-bottom:3.5rem !important}
  .section-head{margin-bottom:2rem}
  h1.hero-title{font-size:clamp(1.85rem, 8vw, 2.6rem); line-height:1.05}
  .section-title{font-size:clamp(1.45rem, 6vw, 2rem); line-height:1.15}
  .hero-greet{font-size:1.3rem; margin-bottom:0.6rem}
  .hero-role{font-size:0.95rem; line-height:1.55}

  /* Hero photo - smaller, less rotation */
  .hero{padding-top:5.5rem; padding-bottom:2.5rem; min-height:auto}
  .hero-grid{gap:2.5rem}
  .photo-wrap{width:min(300px, 80%); border-width:5px}
  .deco-1, .deco-2, .deco-3{transform:scale(0.6)}

  /* Floating photo stickers - smaller, contained */
  .sticker{font-size:0.7rem; padding:0.4rem 0.7rem}
  .sticker-1{top:-3%; left:-3%}
  .sticker-2{right:-3%}
  .sticker-3{bottom:-3%; left:-3%}

  /* Hero chips - tap-friendly */
  .hero-chip{padding:0.55rem 0.95rem; font-size:0.78rem; min-height:38px}
  .hero-chips{flex-wrap:wrap; gap:0.5rem}

  /* Hero stat tiles - tap-friendly */
  .hero-stats{grid-template-columns:repeat(3, 1fr); gap:0.6rem; max-width:100%}
  .hstat{padding:0.85rem 0.7rem; cursor:pointer}
  .hstat-num{font-size:1.6rem}
  .hstat-lbl{font-size:0.6rem; letter-spacing:0.1em}

  /* Nav - keep visible but compact */
  .nav-pill{padding:0.35rem; gap:0.1rem}
  .nav-link{padding:0.4rem 0.55rem; font-size:0.65rem}
  .nav-link.nav-brand{font-size:0.78rem}
  /* On smaller mobile, hide middle nav items to keep brand + CTA visible */
  .nav-link:not(.nav-cta):not(.nav-brand){display:none}

  /* Hero buttons */
  .hero-actions{flex-wrap:wrap; gap:0.75rem}
  .btn-primary, .btn-secondary, .btn-soft{padding:0.85rem 1.4rem; font-size:0.85rem}

  /* Projects single col */
  .projects-grid{grid-template-columns:1fr; gap:1.5rem}
  .project-card{padding:0}
  .project-body{padding:1.4rem 1.2rem}
  .project-title{font-size:1.25rem}
  .project-desc{font-size:0.88rem; line-height:1.55}

  /* Tech grid 2 columns */
  .tech-grid{grid-template-columns:repeat(2, 1fr); gap:0.75rem}
  .tech-card{min-height:220px}
  .tc-flip-inner{min-height:220px}
  .tc-face{padding:1.2rem 0.85rem}
  .tc-back-fact{font-size:1.1rem; line-height:1.35}
  .tc-back-name{font-size:0.72rem}
  .tc-icon-wrap{width:60px;height:60px}
  .tc-name{font-size:0.95rem}

  /* Scrap grid single col */
  .scrap-grid{grid-template-columns:1fr; gap:1.5rem}
  .scrap-card{transform:rotate(0deg) !important}
  .scrap-card .scrap-face{padding:1rem}

  /* ENTP - 2 columns */
  .entp-grid{grid-template-columns:repeat(2, 1fr); gap:0.75rem}
  .entp-letter{height:200px}
  .entp-big{font-size:3.4rem}
  .entp-word{font-size:1rem}
  .entp-back-word{font-size:1.55rem}
  .entp-back-desc{font-size:0.92rem; line-height:1.45}
  .entp-front, .entp-back{padding:1rem 0.75rem}

  /* Brick jar */
  .brick-jar{padding:1.5rem; gap:1rem; min-height:auto; border-radius:36px}
  .bj-canvas-wrap{height:300px}

  /* Awards exhibition wall */
  .award-tile{padding:1.25rem 1rem}
  .award-num{font-size:1.4rem}

  /* Contact card - single column */
  .contact-card{padding:2rem 1.4rem}
  .contact-grid{grid-template-columns:1fr; gap:1.5rem}

  /* Popups - full-width-centered on mobile */
  .pill-popup{
    max-width:calc(100vw - 1.5rem) !important;
    width:auto !important;
    left:50% !important;
    top:50% !important;
  }
  .pill-popup-card{padding:1.2rem 1.4rem; font-size:0.95rem}
  .pill-popup-emoji{font-size:1.9rem}

  /* About scene */
  .about-scene{height:220px}

  /* Section tags */
  .section-tag{padding:0.5rem 1.1rem; font-size:0.68rem}

  /* About fact buttons */
  .about-fact{padding:0.95rem 1.1rem; gap:0.7rem}
  .about-fact-text{font-size:0.88rem}

  /* Timeline */
  .tl-title{font-size:1.15rem}
  .tl-desc{font-size:0.88rem}

  /* Cert ring smaller */
  .cert-stage{height:420px}

  /* Marquee text smaller */
  .marquee-item{font-size:1rem; padding:0 1.5rem}
}

/* Small phones - 480px and below */
@media(max-width:480px){
  .shell{padding-left:0.85rem; padding-right:0.85rem}
  h1.hero-title{font-size:clamp(1.65rem, 9vw, 2.2rem)}
  .hero-greet{font-size:1.1rem}
  .photo-wrap{width:min(260px, 80%)}
  .hero-stats{gap:0.5rem}
  .hstat{padding:0.7rem 0.45rem}
  .hstat-num{font-size:1.35rem}
  .tech-grid{grid-template-columns:repeat(2, 1fr); gap:0.6rem}
  .entp-grid{grid-template-columns:repeat(2, 1fr); gap:0.6rem}
  .nav-pill{transform:scale(0.88); transform-origin:right center}
  .cert-stage{height:340px}
  .section-tag{padding:0.45rem 1rem; font-size:0.64rem}
}

/* Tiny phones - 360px and below */
@media(max-width:360px){
  .hero-stats{grid-template-columns:repeat(3, 1fr); gap:0.4rem}
  .hstat-num{font-size:1.2rem}
  .hstat-lbl{font-size:0.55rem}
  .entp-letter{height:170px}
  .entp-big{font-size:2.9rem}
  .entp-word{font-size:0.92rem}
  .entp-back-word{font-size:1.35rem}
  .entp-back-desc{font-size:0.85rem}
  .photo-wrap{width:min(220px, 78%)}
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE POLISH
   Added late in the cascade so it overrides earlier section-specific
   rules where needed. Targets the gaps in the existing breakpoints:
   - Large tablet portrait (900-1100px)
   - iPad/tablet (768-900px)
   - Landscape phones (520-768px)
   - Modern phones (420-520px)
   - Small phones (≤420px)
   ============================================================ */

/* Large tablets - keep two columns where it helps readability */
@media(max-width:1100px){
  .shell{padding-left:1.5rem; padding-right:1.5rem}
  .hero-grid{gap:2.5rem}
}

/* iPad / standard tablet - single-column hero with the photo above text */
@media(max-width:900px){
  .nav-pill{padding:0.45rem 0.85rem; gap:0.65rem}
  .nav-link{font-size:0.78rem; padding:0.35rem 0.6rem}

  /* Hero stacks: photo + stickers above, text below */
  .hero-grid{grid-template-columns:1fr; gap:2.5rem; text-align:center}
  .hero-text{display:flex; flex-direction:column; align-items:center}
  .hero-desc{margin-left:auto; margin-right:auto; max-width:560px}
  .hero-cta{justify-content:center}
  .hero-chips{justify-content:center}
  .hero-stats{max-width:520px; margin:0 auto}
  .photo-wrap{order:-1; width:min(300px, 70vw); margin:0 auto}
  .lead .h, .about-body .lead .h{display:inline-block}

  /* About narrative - single column under the 3D scene */
  .about-content{grid-template-columns:1fr; gap:2rem}
  .about-body .lead{font-size:1.35rem; padding-left:1rem}
  .about-body .about-close{font-size:1.05rem; padding:1rem 1.2rem}

  /* Section padding tighter so vertical rhythm fits the smaller viewport */
  section{padding-top:5rem; padding-bottom:5rem}
}

/* Tablet portrait (iPad) */
@media(max-width:820px){
  .hero-title{font-size:clamp(2rem, 5.5vw, 3rem)}
  .section-title{font-size:clamp(1.7rem, 4.8vw, 2.4rem)}
  .tech-grid{grid-template-columns:repeat(3, 1fr); gap:0.85rem}
  .entp-grid{grid-template-columns:repeat(4, 1fr); gap:0.85rem}
  .scrap-grid{grid-template-columns:repeat(2, 1fr); gap:1.4rem}
  .projects-grid{grid-template-columns:repeat(2, 1fr); gap:1.4rem}
  /* Awards orb scales down */
  .awards-section .shell > div{grid-template-columns:1fr !important}
  /* About 3D scene smaller */
  .about-scene{height:260px}
}

/* Landscape phones / small tablets (520-768px) */
@media(max-width:768px){
  /* Sticky nav stays inside the viewport - shrink + ensure it doesn't overflow */
  nav{padding:0.8rem 0.75rem}
  .nav-pill{padding:0.4rem 0.7rem; gap:0.4rem; max-width:calc(100vw - 1.5rem)}
  .nav-link{font-size:0.72rem; padding:0.3rem 0.45rem; letter-spacing:0.04em}
  .nav-cta{padding:0.5rem 0.85rem; font-size:0.72rem}
  /* Hide some nav links on very narrow nav-pills to prevent wrap */
  .nav-link[data-priority="low"]{display:none}

  /* Hero stat tiles - keep readable */
  .hero-stats{grid-template-columns:repeat(3, 1fr); gap:0.55rem; max-width:100%}
  .hstat{padding:0.85rem 0.55rem}
  .hstat-num{font-size:1.45rem}
  .hstat-lbl{font-size:0.58rem; letter-spacing:0.14em}

  /* Bigger chip pills - easier tap targets */
  .hero-chip{min-height:42px; padding:0.6rem 1rem; font-size:0.82rem}

  /* About scene smaller still */
  .about-scene{height:220px; border-radius:18px}

  /* Brick jar canvas a bit taller so bricks have room */
  .brick-jar{padding:1.5rem 1.25rem; gap:1.2rem}
  .bj-canvas-wrap{height:280px}
  .bj-quote{font-size:1.5rem; line-height:1.2}
  .bj-sub{font-size:0.92rem}
  .bj-btn{padding:0.55rem 0.9rem; font-size:0.72rem}

  /* Project cards more breathable */
  .projects-grid{grid-template-columns:1fr; gap:1.5rem}
  .project-card{min-height:auto}
  .project-img{aspect-ratio:16/9}

  /* Scrap (hobby) cards single column on small tablet */
  .scrap-grid{grid-template-columns:1fr; gap:1.2rem; max-width:480px; margin:0 auto}

  /* Tech grid 2 columns + cards fully readable */
  .tech-grid{grid-template-columns:repeat(2, 1fr); gap:0.7rem}

  /* Awards orb hidden on phone (it's decorative) */
  .awards-orb{display:none}

  /* Footer constellation smaller height already handled */
  .footer-tbc{font-size:0.95rem}
  .footer-topstrip{font-size:0.72rem; gap:0.5rem; padding:0.5rem 0}
}

/* Modern phones (420-520px) */
@media(max-width:520px){
  /* Nav pill on mobile - smaller and ensure it doesn't push the viewport */
  nav{padding:0.7rem 0.5rem}
  .nav-pill{padding:0.35rem 0.55rem; gap:0.3rem}
  .nav-link{display:none}              /* Hide all text links - keep just the brand + CTA */
  .nav-link.nav-cta, .nav-cta{display:inline-flex}
  .nav-brand{font-size:0.85rem}
  .nav-cta{padding:0.45rem 0.75rem; font-size:0.68rem}

  /* Tighter section padding */
  section{padding-top:3rem !important; padding-bottom:3rem !important}

  /* Hero title scales */
  .hero{padding-top:4rem; padding-bottom:1.5rem}
  .hero-title{font-size:clamp(1.7rem, 8.5vw, 2.4rem); line-height:1.08}
  .hero-greet{font-size:1rem; letter-spacing:0.04em}
  .hero-role{font-size:0.88rem}
  .hero-desc{font-size:0.95rem; line-height:1.6; margin-bottom:1.75rem}
  .hero-cta{flex-direction:column; align-items:stretch; gap:0.7rem}
  .hero-cta .btn{justify-content:center; width:100%}

  /* Photo + stickers - smaller photo so stickers stay inside */
  .photo-wrap{width:min(240px, 72vw); border-width:4px}
  .sticker{font-size:0.62rem; padding:0.32rem 0.55rem}

  /* Section titles */
  .section-title{font-size:clamp(1.35rem, 7vw, 1.9rem); line-height:1.15}
  .section-tag{padding:0.4rem 0.85rem; font-size:0.6rem; letter-spacing:0.18em}

  /* About narrative tighter line-length */
  .about-body p{font-size:0.96rem; line-height:1.7}
  .about-body .lead{font-size:1.18rem; padding-left:0.85rem; line-height:1.4}
  .about-body .about-close{font-size:0.98rem; padding:0.85rem 1rem}
  .about-chapter{gap:0.55rem; margin:1.6rem 0 0.7rem; padding-top:1rem}
  .about-chapter-num{font-size:1.15rem}
  .about-chapter-label{font-size:0.62rem; letter-spacing:0.18em}

  /* Tech grid - keep 2 cols but smaller cards */
  .tech-grid{grid-template-columns:repeat(2, 1fr); gap:0.55rem}
  .tech-card{min-height:200px}
  .tc-flip-inner{min-height:200px}
  .tc-face{padding:1rem 0.7rem}
  .tc-icon-wrap{width:52px; height:52px; border-radius:14px}
  .tc-name{font-size:0.88rem}
  .tc-cat{font-size:0.6rem; letter-spacing:0.14em}
  .tc-back-fact{font-size:1rem; line-height:1.35}
  .tc-back-name{font-size:0.68rem}
  .tc-dot{width:6px; height:6px}

  /* ENTP cards - 2 cols stays, but text needs care */
  .entp-grid{grid-template-columns:repeat(2, 1fr); gap:0.55rem}
  .entp-letter{height:180px}
  .entp-big{font-size:2.9rem}
  .entp-word{font-size:0.95rem}
  .entp-back-word{font-size:1.4rem}
  .entp-back-desc{font-size:0.88rem; line-height:1.4}
  .entp-front, .entp-back{padding:0.9rem 0.65rem}

  /* Hobby (scrap) cards - bigger handwritten quote */
  .scrap-back-quote{font-size:1.45rem; line-height:1.3}
  .scrap-back-author{font-size:0.72rem; letter-spacing:0.15em}

  /* Brick jar mobile */
  .brick-jar{padding:1.25rem 1rem; gap:0.9rem}
  .bj-canvas-wrap{height:240px}
  .bj-tag{padding:0.4rem 0.85rem; font-size:0.58rem}
  .bj-quote{font-size:1.3rem; line-height:1.2}
  .bj-controls{gap:0.5rem; flex-wrap:wrap; justify-content:center}
  .bj-btn{padding:0.5rem 0.75rem; font-size:0.68rem; flex:1 1 auto; min-width:0}
  .bj-counter, .bj-counter-btn{padding:0.55rem 0.95rem}
  .bj-counter-label{font-size:0.56rem}
  .bj-counter-num{font-size:1.4rem}
  .bj-counter-cue{display:none}            /* Save space on small screens */

  /* Project cards readable */
  .project-card{border-radius:18px}
  .project-title{font-size:1.25rem; line-height:1.2}
  .project-desc{font-size:0.9rem; line-height:1.55}
  .project-meta{flex-wrap:wrap; gap:0.4rem}
  .project-meta-tag{font-size:0.62rem; padding:0.3rem 0.6rem}
  .project-tech-list{flex-wrap:wrap}
  .project-tech{font-size:0.6rem; padding:0.25rem 0.55rem}

  /* Timeline mobile */
  .tl-title{font-size:1.05rem}
  .tl-desc{font-size:0.85rem; line-height:1.5}
  .tl-item{padding-left:80px}
  .tl-year{font-size:1.1rem; width:42px}

  /* Marquee text */
  .marquee-item{font-size:0.85rem; padding:0 1.2rem}

  /* Certificate ring scaled */
  .cert-stage{height:380px}
  .cert-ring{width:220px; height:316px}
  .cert-info{padding:1.2rem 0.85rem}
  .cert-name{font-size:1.05rem}

  /* Awards section */
  .award-tile{padding:1.1rem 0.85rem}
  .award-num{font-size:1.25rem}
  .award-title{font-size:0.95rem}
  .award-desc{font-size:0.82rem; line-height:1.45}

  /* Contact card */
  .contact-card{padding:1.6rem 1.1rem; border-radius:22px}
  .contact-title{font-size:1.45rem}
  .contact-desc{font-size:0.92rem}
  .contact-link{font-size:0.88rem; padding:0.6rem 0.9rem}

  /* Footer */
  .footer-constellation{height:240px}
  .footer-tbc{font-size:0.88rem}
  .footer-tbc-row{padding:0.5rem 1rem 0.2rem}
  .footer-topstrip{padding:0.45rem 0}
  .footer-brand-mini{font-size:0.72rem}
  .footer-meta{font-size:0.58rem}
  .footer-totop{padding:0.4rem 0.7rem; font-size:0.58rem}

  /* Lightbox - full-width with safe insets */
  .lb-card{
    width:100%;
    max-width:calc(100vw - 1rem) !important;
    max-height:calc(100vh - 2rem) !important;
    border-radius:18px
  }

  /* Section tag emoji bursts shouldn't overflow viewport edges */
  .burst-particle{font-size:1rem}
}

/* Small phones (420px and under) - finer tuning */
@media(max-width:420px){
  .shell{padding-left:0.75rem; padding-right:0.75rem}
  .hero-title{font-size:clamp(1.55rem, 9vw, 2.1rem)}
  .hero-greet{font-size:0.95rem}
  .hero-chips{gap:0.4rem}
  .hero-chip{padding:0.45rem 0.75rem; font-size:0.72rem; min-height:38px}

  /* Tech card icon a touch smaller */
  .tc-icon-wrap{width:48px; height:48px}
  .tc-back-fact{font-size:0.95rem}

  /* ENTP letters - slim further */
  .entp-letter{height:165px}
  .entp-big{font-size:2.5rem}
  .entp-word{font-size:0.85rem}
  .entp-back-word{font-size:1.25rem}
  .entp-back-desc{font-size:0.82rem; line-height:1.35}

  /* Hobby quote scaled */
  .scrap-back-quote{font-size:1.3rem}
  .scrap-back-quote-mark{font-size:3.5rem}

  /* Brick jar tighter */
  .bj-canvas-wrap{height:220px}
  .bj-btn-icon{font-size:1rem}

  /* Marquee tiny */
  .marquee-item{font-size:0.78rem; padding:0 1rem}

  /* Cert ring on tiny phones */
  .cert-stage{height:340px}
  .cert-ring{width:190px; height:272px}

  /* Section padding compact */
  section{padding-top:2.5rem !important; padding-bottom:2.5rem !important}
  .section-head{margin-bottom:1.5rem}
}

/* Touch-device specific - guarantee tap targets */
@media(hover:none) and (pointer:coarse){
  /* All clickable pills/buttons should be at least 44x44 - Apple HIG min */
  .hero-chip, .hstat, .section-tag, .bj-tag-btn, .bj-counter-btn,
  .nav-link, .footer-totop, .entp-badge, .pill-popup-close,
  .project-meta-tag.click-pill{
    min-height:44px;
  }
  /* Disable :hover-only transforms that look broken on touch */
  .tech-card:hover:not(.is-flipped) .tc-icon-wrap{transform:none}
  .tc-flip-cue{opacity:0.6}                 /* Always show flip cue on touch */
  /* Remove hover-only flip on hobby cards (already toggled on click) */
}

/* Landscape orientation on phones - keep things from overflowing vertically */
@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:auto; padding-top:4rem; padding-bottom:2.5rem}
  .hero-grid{gap:1.5rem}
  .photo-wrap{width:min(180px, 30vw)}
  section{padding-top:2.5rem !important; padding-bottom:2.5rem !important}
}

/* Touch-device specific */
@media(hover:none){
  .project-card:hover,
  .tech-card:hover .tc-front,
  .about-fact:hover{
    transform:none;
  }
  /* Tap target minimum 44px for accessibility */
  .click-pill, .section-tag, .hero-chip, .hstat, .entp-letter, .tech-card{
    min-height:44px;
  }
  /* Pause autoplay-style hover animations that look stuck on touch */
  .tech-card:hover .tc-icon-wrap{
    animation-play-state:running;
  }
}

/* Respect prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}