/* ═══════════════════════════════════════════════
   ELENA QIAN PORTFOLIO — style.css
   Dark theme · Cat edition · Cody Mak layout
   ═══════════════════════════════════════════════ */

/* ---------- Variables ---------- */
:root {
  /* Dark palette */
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --surface:   #1a1a1a;
  --surface2:  #222222;
  --border:    rgba(255, 255, 255, 0.07);
  --border2:   rgba(255, 255, 255, 0.12);

  /* Text */
  --text:      #f5f2ee;
  --text-soft: #ccc9c4;
  --muted:     #999;

  /* Accent — warm amber like Cody's site */
  --accent:    #f9c4d4;
  --accent2:   #fde0ea;

  /* Type */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Montserrat', system-ui, sans-serif;
  --clash:  'Montserrat', system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body  {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x:  hidden;
  cursor:      none;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
a, button, [role="button"], input, textarea, select, label { cursor: none; }

/* ═══════════════════════════════
   LOADER
═══════════════════════════════ */
#loader {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: var(--bg);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
body.loaded #loader {
  opacity:    0;
  visibility: hidden;
}

.loader-inner {
  display:     flex;
  align-items: center;
  justify-content: center;
}

.loader-cat-img {
  width:     clamp(180px, 22vw, 280px);
  height:    auto;
  animation: loaderBounce 1.8s cubic-bezier(0.36, 0, 0.66, -0.56) infinite,
             loaderPulse  4.5s ease-in-out infinite;
  transform-origin: center bottom;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.45));
}

@keyframes loaderBounce {
  0%, 100% { transform: translateY(0)    scaleX(1)    scaleY(1);   }
  45%       { transform: translateY(-40px) scaleX(0.95) scaleY(1.05); }
  55%       { transform: translateY(-42px) scaleX(0.94) scaleY(1.06); }
  80%       { transform: translateY(4px)  scaleX(1.06) scaleY(0.96); }
  90%       { transform: translateY(-8px) scaleX(0.99) scaleY(1.01); }
}

@keyframes loaderPulse {
  0%, 100% { filter: drop-shadow(0 24px 32px rgba(0,0,0,0.55)); }
  50%       { filter: drop-shadow(0 8px  16px rgba(0,0,0,0.25)); }
}

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
#nav {
  position:  fixed;
  top:       20px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   100;
}

.nav-pill {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            32px;
  font-family:    var(--serif);
  background:     rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius:  16px;
  padding:        14px 36px;
  border:         1px solid rgba(255, 255, 255, 0.08);
  box-shadow:     0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  white-space:    nowrap;
}

.nav-link {
  font-family:    var(--serif);
  font-size:      0.95rem;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: none;
  color:          rgba(255, 255, 255, 0.80);
  position:       relative;
  transition:     color 0.2s;
}
.nav-link::after { display: none; }
.nav-link:hover  { color: rgba(255, 255, 255, 1); }
.nav-link.active { color: rgba(255, 255, 255, 1); font-weight: 500; }

/* ── Cursor follower ── */
.bear-follower {
  position:       fixed;
  pointer-events: none;
  z-index:        99999;
  width:          40px;
  height:         40px;
  top:            0;
  left:           0;
  transform:      translate(-50%, -50%);
  will-change:    transform;
}
.bear-follower svg {
  display: block;
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items:    flex-start;
  padding:        140px 72px 80px;
  position:       relative;
  overflow:       visible;
}

/* Diamond star inline with hi! — all screen sizes */
.hero-greeting-star {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
@media (max-width: 540px) {
  .hero-greeting-star { width: 28px; height: 28px; }
}
.hero-greeting {
  display: flex;
  align-items: center;
  gap: 40px; /* desktop */
}
@media (max-width: 540px) {
  .hero-greeting { gap: 15px; }
}

/* ---------- Hero text ---------- */
.hero-greeting {
  position:       absolute;
  top:            30%;
  left:           25%;
  z-index:        1;
  font-family:    var(--serif);
  font-size:      clamp(2.8rem, 6.5vw, 6rem);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.05;
  color:          var(--text);
  opacity:        0;
  white-space:    nowrap;
}

/* centered name block */
.hero-center {
  position:        absolute;
  top:             58%;
  left:            50%;
  transform:       translate(-50%, -50%);
  text-align:      center;
  z-index:         1;
  pointer-events:  none;
}

.hero-name {
  font-family:    var(--serif);
  font-size:      clamp(2.8rem, 6.5vw, 6rem);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.05;
  color:          var(--text);
  margin-bottom:  12px;
  opacity:        0;
  transform:      translateY(40px);
  position:       relative;
  z-index:        1;
  display:        block;
}

.hero-name-accent { color: #dbeafe; }

/* Sketch image floating behind the name */
@keyframes sketchFloat {
  0%   { transform: translateX(-50%) translateY(0px)   scale(1.00); }
  30%  { transform: translateX(-50%) translateY(-10px) scale(1.02); }
  65%  { transform: translateX(-50%) translateY(-5px)  scale(1.01); }
  100% { transform: translateX(-50%) translateY(0px)   scale(1.00); }
}
.hero-name-wrap {
  position:   relative;
  display:    inline-block;
}
.hero-sketch {
  position:   absolute;
  top:        calc(20px - 14vh);
  bottom:     auto;
  left:       50%;
  transform:  translateX(-50%);
  width:      auto;
  height:     auto;
  min-width:  clamp(400px, 54vw, 750px);
  opacity:    0.22;
  z-index:    0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: center center;
  will-change: transform;
}

/* ── Hero decorative floaters (candy + bubble) ── */
@keyframes candyDrift {
  0%   { transform: translateY(0px)   rotate(-3deg) scale(1.00); }
  30%  { transform: translateY(-20px) rotate(3deg)  scale(1.03); }
  60%  { transform: translateY(-10px) rotate(-1deg) scale(1.01); }
  80%  { transform: translateY(-24px) rotate(4deg)  scale(1.04); }
  100% { transform: translateY(0px)   rotate(-3deg) scale(1.00); }
}
@keyframes bigBubblePulse {
  0%,100% { transform: scale(1.00); }
  40%     { transform: scale(1.10); }
  70%     { transform: scale(0.96); }
}
@keyframes smallBubblePulse {
  0%,100% { transform: scale(1.00); }
  45%     { transform: scale(1.10); }
  70%     { transform: scale(0.97); }
}
@keyframes bubbleRise {
  0%   { transform: translateX(-50%) translateY(120px); opacity: 0;   }
  15%  { opacity: 1; }
  75%  { opacity: 0.9; }
  100% { transform: translateX(-50%) translateY(-120px); opacity: 0;  }
}
.hero-deco-candy,
.hero-deco-bubble {
  position:       absolute;
  top:            -50px;
  left:           50%;
  transform:      translateX(-50%);
  pointer-events: none;
  z-index:        1;
}
.hero-deco-img {
  display:   block;
  width:     auto;
  height:    auto;
  min-width: clamp(900px, 120vw, 1600px);
  opacity:   0.32;
}
.hero-deco-candy {
  left: 55%;
}
.hero-deco-img--candy {
  animation: candyDrift 7s ease-in-out infinite;
  transform-origin: center center;
  min-width: clamp(400px, 55vw, 750px);
}
.hero-deco-bigbubble,
.hero-deco-smallbubble {
  left: 0%;
  top: -40px;
  transform: translateX(-50%);
}
.hero-deco-bigbubble {
  left: -30%;
  top: -48vh;
}
.hero-deco-smallbubble {
  left:      15%;
  top:       -58vh;
  transform: translateX(-50%);
}
.hero-deco-img--bigbubble {
  animation: bigBubblePulse 6.4s ease-in-out infinite;
  animation-delay: 0s;
  transform-origin: center center;
  min-width: clamp(1053px, 130vw, 1782px);
}
.hero-deco-img--smallbubble {
  animation: smallBubblePulse 4.9s ease-in-out infinite;
  animation-delay: -2.7s;
  transform-origin: center center;
  min-width: clamp(800px, 100vw, 1400px);
}

.hero-pronunciation {
  font-size:  0.9rem;
  color:      var(--text-soft);
  font-weight: 300;
  opacity:    0;
}

.hero-sub {
  position:      static;
  margin-top:    28px;
  margin-bottom: 40px;
  font-family:   var(--serif);
  font-size:     1.05rem;
  color:         var(--text-soft);
  line-height:   1.7;
  max-width:     420px;
  opacity:       0;
  transform:     translateY(20px);
  z-index:       1;
}
.hero-sub strong {
  color:       var(--text);
  font-weight: 500;
}

/* ── "feel" strikethrough animation ── */
@keyframes strikeThrough {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes feelGrayOut {
  from { color: inherit; }
  to   { color: rgba(255, 255, 255, 0.45); }
}
.feel-strike {
  position:  relative;
  display:   inline-block;
  animation: feelGrayOut 1.2s ease-in-out 3s forwards;
}
.feel-strike::after {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  height:     1.5px;
  width:      0;
  background: #93c5fd;
  animation:  strikeThrough 1.2s ease-in-out 3s forwards;
}

/* ---------- Story of My Works link (bottom-right) ---------- */
.hero-story-link {
  position:    absolute;
  right:       72px;
  bottom:      64px;
  display:     flex;
  align-items: center;
  gap:         7px;
  font-family: var(--serif);
  font-style:  italic;
  font-size:   1rem;
  color:       var(--text-soft);
  z-index:     1;
  transition:  color 0.2s, gap 0.3s;
}
.hero-story-link:hover {
  color: var(--text);
  gap:   12px;
}

/* ---------- Cat + star illustration ---------- */
.hero-illustration {
  position:       absolute;
  left:           50%;
  top:            50%;
  transform:      translate(-50%, -50%);
  width:          clamp(520px, 68vw, 860px);
  height:         clamp(520px, 68vw, 860px);
  pointer-events: none;
  z-index:        0;
}

/* Outer wrapper — JS writes parallax transform here */
.illus-parallax {
  position:    absolute;
  transition:  transform 0.14s ease-out;
  will-change: transform;
}

/* ── Cat ── */
.cat-parallax {
  inset: 0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.cat-idle {
  width:     clamp(480px, 62vw, 780px);
  display:   none;
  opacity:          0;
  transform-origin: center bottom;
}

@keyframes catBob {
  0%,  100% { transform: translateY(0)    rotate(-1deg); }
  40%        { transform: translateY(-18px) rotate(1.5deg); }
  70%        { transform: translateY(-10px) rotate(-0.5deg); }
}

/* Entrance: cat scales up from below */
@keyframes catAppear {
  from { opacity: 0; transform: translateY(40px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.cat-idle { animation: catAppear 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards,
                        catBob   5s ease-in-out 1.2s infinite; }

/* ── Stars ── */
.star-parallax { display: flex; }

/* Positions relative to the illustration container */
.star-a { display: none; }  /* replaced by inline greeting star */
.star-b { bottom: 14%; right: 10%; }  /* large filled  — lower-right */
.star-c { bottom: 30%; right: 20%; }  /* medium filled — beside b    */

.sparkle { display: block; }
.sparkle--sm { width: 34px;  height: 34px;  }
.sparkle--md { width: 44px;  height: 44px;  }
.sparkle--lg { width: 62px;  height: 62px;  }

/* Idle animations per star */
@keyframes starPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  50%       { transform: scale(1.25) rotate(15deg); }
}
@keyframes starDrift {
  0%, 100% { transform: translateY(0)   scale(1);    }
  50%       { transform: translateY(-10px) scale(1.1); }
}
@keyframes starSpin {
  0%, 100% { transform: rotate(0deg)  scale(1);    }
  50%       { transform: rotate(22deg) scale(0.88); }
}
/* Slow independent floats for the two opaque blue stars */
@keyframes starFloatB {
  0%   { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
  20%  { transform: translate(6px,  -9px)   scale(1.05) rotate(3deg);  }
  45%  { transform: translate(9px,  -4px)   scale(1.08) rotate(1deg);  }
  70%  { transform: translate(3px,   7px)   scale(1.03) rotate(-3deg); }
  100% { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
}
@keyframes starFloatC {
  0%   { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
  25%  { transform: translate(-7px, -11px)  scale(1.06) rotate(-4deg); }
  55%  { transform: translate(-5px,  6px)   scale(1.03) rotate(2deg);  }
  80%  { transform: translate(4px,   3px)   scale(1.05) rotate(-1deg); }
  100% { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
}

/* Entrance: stars pop in */
@keyframes starAppear {
  from { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);   }
}

.star-idle--a {
  animation: starAppear 0.6s cubic-bezier(0.16,1,0.3,1) 0.7s both,
             starPulse  3.2s ease-in-out 1.3s infinite;
}
.star-idle--b {
  animation: starAppear  0.6s cubic-bezier(0.16,1,0.3,1) 0.9s both,
             starFloatB  10s  ease-in-out                 1.5s infinite;
}
.star-idle--c {
  animation: starAppear  0.6s cubic-bezier(0.16,1,0.3,1) 1.1s both,
             starFloatC  13s  ease-in-out                 1.7s infinite;
}

/* ═══════════════════════════════
   MARQUEE TICKER
═══════════════════════════════ */
.marquee-wrap {
  border-top:    1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:    transparent;
  padding:       14px 0;
  overflow:      hidden;
  white-space:   nowrap;
  position: relative;
  margin-top:    120px;
}
.marquee-track {
  display:     inline-flex;
  align-items: center;
  gap:         28px;
  animation:   marquee 26s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-size:      0.78rem;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,0.7);
  flex-shrink:    0;
}
.marquee-track .star {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Label below marquee */
.work-label {
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  gap:         6px;
  padding:     20px 52px 0;
  font-family: var(--serif);
  font-style:  italic;
  font-size:   0.92rem;
  color:       var(--text-soft);
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════
   FEATURED WORK — editorial split layout
═══════════════════════════════ */
.work {
  padding:        80px 72px 60px;
  max-width:      1280px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Base card reset */
.project-card {
  display:         block;
  text-decoration: none;
  color:           inherit;
  width:           100%;
  background:      transparent;
  border:          none;
  border-radius:   0;
  overflow:        visible;
}
.project-card:hover { transform: none; box-shadow: none; }

.project-card--ghost {
  background:    transparent;
  border:        none;
  border-radius: 0;
  box-shadow:    none;
  width:         100%;
  overflow:      visible;
}
.project-card--ghost:hover { transform: none; box-shadow: none; border-color: transparent; }

/* ── Case study card ── */
.cs-card {
  display:         block;
  text-decoration: none;
  color:           inherit;
  padding:         72px 0;
  border-top:      1px solid rgba(255,255,255,0.08);
  overflow:        visible;
}
.work .cs-card:first-child { border-top: none; padding-top: 0; }

/* Flex row: left text + right image */
.cs-layout {
  display:     flex;
  align-items: flex-end;   /* bottom-align: description sits beside lower image */
  gap:         10px;
  position:    relative;
}

/* Even cards: swap columns */
.cs-card:nth-child(even) .cs-layout { flex-direction: row-reverse; }

/* Crossfill chart — larger, overlays image + description, shows on hover */
.cs-chart {
  display:         block;
  width:           clamp(200px, 26vw, 360px);
  height:          auto;
  margin-left:     -80px;          /* pull left into the image */
  margin-bottom:   -110px;         /* overlap the description below */
  position:        relative;
  z-index:         2;              /* above .cs-detail */
  pointer-events:  none;
  opacity:         0;
  transform:       translateY(calc(-50% + 10px));
  transition:      opacity 0.9s ease, transform 0.9s ease;
  border-radius:   10px;
  filter:          drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}
.cs-chart.visible {
  opacity:    0.25;
  transform:  translateY(-50%);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.cs-card:hover .cs-chart,
.cs-card.cs-in-view .cs-chart {
  opacity: 0.82;
  transition: opacity 0.4s ease, transform 0.9s ease;
}
.cs-detail {
  position: relative;
  z-index:  1;                     /* behind the chart */
}

/* ── Plantment: plant image group ── */
.plant-img-group {
  position: relative;
  display:  inline-block;
}

.aiplant-img {
  position:   absolute;
  top:        20%;
  left:       60%;
  width:      min(100%, 240px);
  height:     auto;
  object-fit: contain;
  opacity:    0.25;
  transform:  translateX(0);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.cs-card:hover .aiplant-img,
.cs-card.cs-in-view .aiplant-img {
  opacity: 0.82;
  filter: drop-shadow(0 0 40px rgba(50, 120, 80, 0.75));
}

/* ── Plantment: project stats pills ── */
.plant-card-img {
  display:       block;
  width:         min(100%, 280px);
  height:        auto;
  margin:        0;
  object-fit:    contain;
  opacity:       0;
  transform:     translateX(-28px);
  transition:    opacity 1.2s ease, transform 1.2s ease;
}
.plant-card-img.visible {
  opacity:   1;
  transform: translateX(0);
}
.plant-stats {
  display:       flex;
  flex-wrap:     nowrap;
  gap:           0;
  margin-bottom: 32px;
  max-width:     none;
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow:      hidden;
  position:      relative;
  top:           -100%;
}
.plant-stat-pill {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        8px 14px;
  white-space:    nowrap;
  cursor:         default;
  position:       relative;
  flex:           1;
  justify-content: center;
  border-right:   1px solid rgba(255,255,255,0.08);
  opacity:        0;
  transform:      translateY(4px);
  transition:     opacity 0.5s ease, transform 0.5s ease,
                  background 0.25s ease;
}
.plant-stat-pill:last-child { border-right: none; }
.plant-stat-pill:hover {
  background: rgba(255,255,255,0.05);
}
.plant-stat-pill:hover .plant-pill-dot {
  background:  #5cdb95;
  box-shadow:  0 0 6px #5cdb95;
}
.plant-stats.animated .plant-pill-dot {
  background:  #5cdb95;
  animation:   dot-pulse 2s ease-in-out infinite;
}
.plant-stats.animated .plant-stat-pill:nth-child(1) .plant-pill-dot { animation-delay: 0s; }
.plant-stats.animated .plant-stat-pill:nth-child(2) .plant-pill-dot { animation-delay: 0.3s; }
.plant-stats.animated .plant-stat-pill:nth-child(3) .plant-pill-dot { animation-delay: 0.6s; }
.plant-stats.animated .plant-stat-pill:nth-child(4) .plant-pill-dot { animation-delay: 0.9s; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0px #5cdb95;  opacity: 0.5; }
  50%       { box-shadow: 0 0 8px #5cdb95;  opacity: 1; }
}
.plant-stats.animated .plant-stat-pill:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.plant-stats.animated .plant-stat-pill:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.plant-stats.animated .plant-stat-pill:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.16s; }
.plant-stats.animated .plant-stat-pill:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; }
.plant-pill-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.25);
  flex-shrink:   0;
  transition:    background 0.25s ease, box-shadow 0.25s ease;
}
.plant-pill-label {
  font-family:    'Courier New', monospace;
  font-size:      0.6rem;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,0.55);
  transition:     color 0.25s ease;
}
.plant-stat-pill:hover .plant-pill-label {
  color: rgba(255,255,255,0.9);
}

/* Greek Clean: description and button moved down */
.cs-card:nth-child(2) .cs-layout { gap: 0; align-items: flex-start; }
.cs-card:nth-child(2) .cs-right  { padding-top: 200px; }

/* Greek Clean: trashcat + greek2 */
.cs-card:nth-child(2) .cs-detail { margin-bottom: 32px; }
.gc-cattrash {
  position:      absolute;
  bottom:        0;
  right:         -30%;
  width:         55%;
  height:        auto;
  opacity:       0.45;
  pointer-events: none;
}
.gc-cta-row {
  display:   flex;
  align-items: center;
  position:  relative;
}
.gc-greek2 {
  height:          290px;
  width:           auto;
  max-width:       none;
  opacity:         0.5;
  pointer-events:  none;
  position:        absolute;
  left:            calc(100% + 120px);
  top:             50%;
  transform:       translateY(-20%);
  transition:      opacity 0.5s ease;
}
.cs-card:hover .gc-greek2,
.cs-card.cs-in-view .gc-greek2 {
  opacity: 0.9;
}

/* ── LEFT: number + title + image stacked ── */
.cs-left {
  flex:            0 0 55%;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  position:        relative;
}
/* Glow sits behind the image column */
.cs-left::before {
  content:    '';
  position:   absolute;
  inset:      -10%;
  background: radial-gradient(ellipse at center, var(--glow, transparent) 0%, transparent 68%);
  opacity:    0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index:    -1;
}
.cs-card:hover .cs-left::before,
.cs-card.cs-in-view .cs-left::before { opacity: 1; }

/* Slow fade-out when card leaves view */
.cs-card.cs-leaving-view .cs-left::before { transition: opacity 1.6s ease; }
.cs-card.cs-leaving-view .cs-chart        { transition: opacity 1.6s ease; }
.cs-card.cs-leaving-view .aiplant-img     { transition: opacity 1.6s ease; }
.cs-card.cs-leaving-view .gc-greek2       { transition: opacity 1.6s ease, transform 1.6s ease; }
.cs-card.cs-leaving-view .cs-cta          { transition: transform 1.6s ease; }

/* Large faded counter behind the title */
.cs-num {
  font-family:  var(--serif);
  font-size:    clamp(5rem, 12vw, 10rem);
  font-weight:  400;
  line-height:  1;
  color:        rgba(255,255,255,0.04);
  margin-bottom: -0.55em;   /* pull title up into the number */
  user-select:  none;
  pointer-events: none;
}

.cs-title {
  font-family:    var(--serif);
  font-size:      clamp(4rem, 8vw, 8rem);
  font-weight:    400;
  letter-spacing: -0.03em;
  line-height:    1.0;
  color:          var(--text);
  margin-bottom:  16px;
}

/* Subtle card for description + tags */
.cs-detail {
  background:    rgba(255,255,255,0.03);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding:       22px 26px;
  margin-bottom: 32px;
  max-width:     400px;
  width:         100%;
}
.cs-desc {
  font-size:     0.9rem;
  color:         rgba(255,255,255,0.82);
  line-height:   1.85;
  margin-bottom: 14px;
}
.cs-cats {
  font-family:    var(--sans);
  font-size:      0.58rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color:          rgba(255,255,255,0.58);
}

/* Filled CTA button */
.cs-cta {
  display:        inline-flex;
  align-items:    center;
  gap:            14px;
  font-family:    var(--sans);
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color:          var(--bg);
  background:     var(--text);
  padding:        14px 32px;
  border-radius:  3px;
  position:       relative;
  transition:     transform 0.35s ease;
}
/* SVG border injected by JS sits inside this element */
.cs-cta svg.cta-border-svg {
  position:       absolute;
  left:           -2px;
  top:            -2px;
  pointer-events: none;
  overflow:       visible;
}
.cs-card:hover .cs-cta,
.cs-card.cs-in-view .cs-cta { transform: translateX(6px); }

/* ── RIGHT: description + CTA, bottom-aligned beside image ── */
.cs-right {
  flex:            1 1 0;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: flex-end;
  perspective:     900px;
  padding-bottom:  4px;
}
.cs-img {
  width:            100%;
  height:           auto;
  display:          block;
  transform-origin: center center;
  transition:       transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change:      transform;
}
/* Greek Clean image has baked-in whitespace — expand it to bleed the padding off-screen */
.cs-card:nth-child(2) .cs-img {
  width:       120%;
  margin-left: -10%;
}

/* ═══════════════════════════════
   OLDIES
═══════════════════════════════ */
.oldies {
  background: var(--bg2);
  padding:    100px 52px;
  border-top: 1px solid var(--border);
}
.oldies-label {
  font-family:  var(--serif);
  font-style:   italic;
  font-size:    1.1rem;
  color:        var(--text-soft);
  text-align:   center;
  margin-bottom: 56px;
}
.oldies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        22px;
  max-width:  1100px;
  margin:     0 auto;
}
.oldie-card {
  background:    var(--surface);
  border-radius: 14px;
  overflow:      hidden;
  border:        1px solid var(--border);
  display:       block;
  transition:    transform 0.45s var(--ease), border-color 0.3s;
}
.oldie-card:hover {
  transform:    translateY(-7px);
  border-color: var(--border2);
}
.oldie-img-wrap {
  aspect-ratio: 1/1;
  background:   var(--surface2);
  overflow:     hidden;
}
.oldie-placeholder {
  width: 100%; height: 100%;
  min-height: 180px;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  3.5rem;
  transition: transform 0.5s var(--ease);
}
.oldie-card:hover .oldie-placeholder { transform: scale(1.1) rotate(6deg); }

.oldie-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.oldie-card:hover .oldie-img { transform: scale(1.07); }

.oldie-info { padding: 20px 22px 24px; }
.oldie-year {
  display:        block;
  font-size:      0.72rem;
  letter-spacing: 0.06em;
  color:          var(--accent);
  margin-bottom:  6px;
}
.oldie-title {
  font-family:  var(--serif);
  font-size:    1.3rem;
  font-weight:  400;
  margin-bottom: 8px;
}
.oldie-desc {
  font-size:  0.85rem;
  color:      var(--text-soft);
  line-height: 1.65;
}

/* ═══════════════════════════════
   EXPERIENCE
═══════════════════════════════ */
.experience {
  padding:   100px 52px;
  max-width: 880px;
  margin:    0 auto;
}
.section-title {
  font-family:    var(--serif);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    400;
  letter-spacing: -0.02em;
  margin-bottom:  56px;
}
.exp-list {
  display:        flex;
  flex-direction: column;
}
.exp-item {
  display:       flex;
  flex-direction: column;
  padding:       26px 0;
  border-bottom: 1px solid var(--border);
  gap:           0;
}
.exp-item:last-child {
  border-bottom: none;
}
.exp-item__top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             24px;
  margin-bottom:   16px;
}
.exp-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.exp-role {
  font-size:   1rem;
  font-weight: 400;
  color:       var(--text);
}
.exp-date {
  font-size:      0.8rem;
  letter-spacing: 0.04em;
  color:          var(--text-soft);
}
.exp-desc {
  font-size:   0.88rem;
  color:       rgba(255,255,255,0.7);
  margin-top:  6px;
  line-height: 1.5;
}
.exp-img-wrap {
  width:  68px;
  height: 52px;
  border-radius: 8px;
  overflow:   hidden;
  flex-shrink: 0;
  background: var(--surface);
  border:     1px solid var(--border);
  display:    flex;
  align-items: center;
  justify-content: center;
}
.exp-placeholder { font-size: 1.6rem; }
.exp-img { width: 100%; height: 100%; object-fit: cover; }

.exp-li-wrap {
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  40px;
  height: 40px;
}
.exp-li-icon {
  width:      22px;
  height:     22px;
  color:      rgba(255,255,255,0.85);
  transition: color 0.25s;
  display:    block;
  flex-shrink: 0;
}
.exp-li-wrap:hover .exp-li-icon,
.exp-li-wrap:active .exp-li-icon { color: #0a66c2; }

.btn-resume {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  margin-top:    48px;
  padding:       14px 40px;
  border:        1px solid var(--border2);
  border-radius: 100px;
  font-size:     0.82rem;
  letter-spacing: 0.06em;
  color:         var(--text);
  transition:    background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.btn-resume:hover {
  background:   var(--text);
  color:        var(--bg);
  border-color: var(--text);
  transform:    translateY(-2px);
}

.btn-download-resume {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        14px 32px;
  border-radius:  100px;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  font-family:    var(--sans);
  font-weight:    600;
  background:     var(--text);
  color:          var(--bg);
  border:         1px solid var(--text);
  position:       relative;
  overflow:       hidden;
  transition:     color 0.25s;
  text-decoration: none;
}
.btn-download-resume::before {
  content:      '';
  position:     absolute;
  inset:        0;
  background:   var(--accent);
  transform:    translateY(100%);
  transition:   transform 0.32s cubic-bezier(0.4,0,0.2,1);
  border-radius: 100px;
}
.btn-download-resume:hover::before { transform: translateY(0); }
.btn-download-resume span,
.btn-download-resume .btn-dl-arrow { position: relative; z-index: 1; }
.btn-dl-arrow {
  display:    inline-block;
  transition: transform 0.25s ease;
}
.btn-download-resume:hover .btn-dl-arrow { transform: translateY(3px); }

/* ═══════════════════════════════
   BOBA O ANIMATION
═══════════════════════════════ */
.boba-o-wrap {
  display:        inline-block;
  position:       relative;
  vertical-align: middle;
}
.boba-o-letter {
  display:    inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity:    1;
  transform:  scale(1);
}
.boba-o-img {
  position:        absolute;
  left:            50%;
  top:             50%;
  transform:       translate(-50%, -260%);
  opacity:         0;
  width:           1.05em;
  height:          1.05em;
  object-fit:      contain;
  pointer-events:  none;
  transition:      none;
}
.boba-o-wrap.animate .boba-o-letter {
  opacity:   0;
  transform: scale(0);
  transition: opacity 0.2s ease 0.3s, transform 0.2s ease 0.3s;
}
.boba-o-wrap.animate .boba-o-img {
  opacity:   0.55;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease 0.1s,
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  animation: none;
}
.boba-o-wrap.floating .boba-o-img {
  animation: bobaFloat 4s ease-in-out infinite;
}
@keyframes bobaFloat {
  0%   { transform: translate(-50%, -50%) rotate(-4deg); }
  25%  { transform: translate(-46%, -58%) rotate(3deg); }
  50%  { transform: translate(-54%, -44%) rotate(-2deg); }
  75%  { transform: translate(-48%, -56%) rotate(4deg); }
  100% { transform: translate(-50%, -50%) rotate(-4deg); }
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
footer {
  background:  var(--bg2);
  border-top:  none;
  padding:     80px 52px 40px;
  position:    relative;
  overflow:    hidden;
}
.footer-cat-bg {
  position:   absolute;
  left:       48%;
  top:        55%;
  transform:  translateX(-50%) translateY(-50%);
  width:      clamp(200px, 86vw, 801px);
  opacity:         0.25;
  pointer-events:  none;
  animation:       catFloat 8s ease-in-out infinite;
  transform-origin: center center;
  user-select:     none;
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes catFloat {
  0%   { transform: translateX(-50%) translateY(-50%)         rotate(-2deg); }
  50%  { transform: translateX(-50%) translateY(calc(-50% - 16px)) rotate(2deg); }
  100% { transform: translateX(-50%) translateY(-50%)         rotate(-2deg); }
}
.footer-top {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  text-align:     center;
  margin-bottom:  48px;
}
.footer-logo {
  font-family:  var(--serif);
  font-size:    0.85rem;
  width:  42px; height: 42px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}
.footer-heading {
  font-family:    var(--serif);
  font-size:      clamp(1.8rem, 4vw, 3.2rem);
  font-weight:    400;
  font-style:     italic;
  letter-spacing: -0.02em;
}
.footer-divider { display: none; }
.footer-contact {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  margin-bottom:   48px;
  gap:             10px;
}
.footer-email a {
  font-family: var(--serif);
  font-size:   clamp(1rem, 2vw, 1.4rem);
  font-style:  italic;
  color:       var(--text);
  transition:  color 0.2s;
}
.footer-email a:hover { color: var(--accent); }

.footer-links {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}
.footer-links a {
  font-size:      0.78rem;
  letter-spacing: 0.04em;
  color:          var(--text-soft);
  transition:     color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-links-row {
  display: flex;
  gap: 24px;
}

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.78rem;
  color:           var(--muted);
}
.footer-star { color: var(--accent); }

/* ═══════════════════════════════
   SCROLL REVEAL UTILITY
═══════════════════════════════ */
.sr {
  opacity:   0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.sr.visible {
  opacity:   1;
  transform: none;
}

/* ═══════════════════════════════
   PROJECT CARD SCROLL ENTRANCE
═══════════════════════════════ */

.project-card--ghost {
  --enter-x: 0px;
  --enter-rot: 0deg;
}

.project-card--ghost.pc-enter {
  opacity: 0;
  transform: translateY(48px) translateX(var(--enter-x)) rotate(var(--enter-rot)) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.project-card--ghost.pc-enter.pc-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) rotate(0deg) scale(1);
}
.project-card--ghost.pc-enter .laptop-mockup {
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s;
  transform: translateY(12px);
}
.project-card--ghost.pc-enter.pc-visible .laptop-mockup {
  transform: translateY(0);
}

/* counter-label that appears above each card on scroll */
.pc-counter {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.2);
  text-align: center;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}
.pc-enter.pc-visible .pc-counter {
  opacity: 1;
}

/* ═══════════════════════════════
   RESPONSIVE — tablet
═══════════════════════════════ */
@media (max-width: 900px) {
  /* Nav */
  #nav { top: 12px; }
  .nav-pill { padding: 10px 20px; gap: 16px; }
  .nav-link  { font-size: 0.8rem; }
  .bear-follower { display: none; }

  /* Floaters — tablet: match hero-sketch tablet size */
  .hero-deco-candy,
  .hero-deco-bubble { top: 20px; transform: translateX(-50%); }
  .hero-deco-img    { min-width: clamp(500px, 100vw, 900px); }

  /* Sketch — tablet */
  .hero-sketch {
    top:       100px;
    bottom:    auto;
    min-width: clamp(360px, 80vw, 680px);
    opacity:   0.20;
  }

  /* Hero */
  .hero { padding: 110px 28px 80px; }
  .hero-illustration {
    width:  clamp(300px, 80vw, 520px);
    height: clamp(300px, 80vw, 520px);
    left: 60%;
    top:  52%;
  }
  .cat-idle { width: clamp(260px, 72vw, 480px); }
  .hero-story-link { right: 24px; bottom: 28px; font-size: 0.85rem; }

  /* Work */
  .work { padding: 60px 32px; }
  .project-card        { width: 100%; }
  .project-card--ghost { width: 100%; }
  .cs-layout  { flex-direction: column !important; align-items: flex-start !important; gap: 20px; }
  .cs-left    { flex: unset; width: 100%; }
  .cs-right   { width: 100%; justify-content: flex-start; }
  .cs-num     { font-size: clamp(3rem, 8vw, 5rem); }
  .cs-title   { font-size: clamp(2rem, 6vw, 3.2rem); }
  .cs-detail  { max-width: 100%; }

  /* Oldies */
  .oldies      { padding: 60px 24px; }
  .oldies-grid { grid-template-columns: 1fr; }

  /* Experience */
  .experience { padding: 60px 24px; }

  /* Footer */
  footer { padding: 60px 24px 36px; }
  .footer-contact {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* ═══════════════════════════════
   RESPONSIVE — mobile
═══════════════════════════════ */
@media (max-width: 540px) {
  .footer-cat-bg {
    opacity:  0.12;
    width:    clamp(180px, 85vw, 360px);
    left:     50%;
    top:      50%;
  }
  html { font-size: 15px; }

  /* Nav — shrink to fit small screens */
  #nav { top: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); }
  .nav-pill {
    padding:        9px 16px;
    gap:            18px;
    border-radius:  14px;
    justify-content: space-around;
    width:          100%;
  }
  .nav-link { font-size: 0.78rem; }

  /* Loader */
  .loader-cat-img { width: clamp(100px, 45vw, 160px); }

  /* Hero — mobile height */
  .hero {
    padding:    100px 20px 5px;
    min-height: 50vh;
  }
  .hero-greeting,
  .hero-name {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }
  .hero-center { position: static; transform: none; text-align: left; margin-top: 16px; }

  /* Floaters — mobile: hide bbig only, scale down candy + bsmall */
  .hero-deco-bigbubble { display: none; }
  .hero-deco-candy,
  .hero-deco-bubble { top: 10px; }
  .hero-deco-candy  { left: 55%; }
  .hero-deco-img--candy    { min-width: clamp(160px, 45vw, 280px); }
  .hero-deco-img--smallbubble { min-width: clamp(220px, 60vw, 360px); }

  /* Sketch — mobile: rest touching the marquee separator */
  .hero-sketch {
    position:  absolute;
    top:       auto;
    bottom:    -80px;
    left:      50%;
    min-width: clamp(280px, 90vw, 420px);
    opacity:   0.07;
  }

  /* Force accent colour to match desktop */
  .hero-name-accent {
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
  }
  .hero-sub { font-size: 0.95rem; max-width: 100%; margin-top: 20px; margin-bottom: 3px; }
  .hero-pronunciation { font-size: 0.8rem; }
  .hero-story-link { position: static !important; margin-top: 32px; }

  /* On mobile: hide cat, show stars instead */
  .hero-illustration {
    width:  clamp(260px, 90vw, 360px);
    height: clamp(260px, 90vw, 360px);
    left:   50%;
    top:    52%;
    opacity: 0.6;
  }
  .cat-idle { display: none; }
  .star-b, .star-c { display: flex; }


  .hero-story-link {
    font-size: 0.82rem;
  }

  /* Marquee */
  .marquee-wrap { margin-top: 60px; }
  .marquee-track { gap: 18px; }
  .marquee-track span { font-size: 0.72rem; }

  /* Work */
  .work { padding: 40px 16px; }
  .cs-card    { padding: 48px 0; }
  .work .cs-card:first-child { padding-top: 0; }
  .cs-layout  { flex-direction: column !important; align-items: flex-start !important; gap: 20px; }
  .cs-left    { flex: unset; width: 100%; }
  .cs-right   { width: 100%; justify-content: flex-start; }
  .cs-num     { font-size: clamp(2.8rem, 10vw, 4rem); }
  .cs-title   { font-size: clamp(2rem, 8vw, 2.8rem); }
  .cs-detail  { max-width: 100%; padding: 16px 18px; }
  .cs-desc    { font-size: 0.85rem; }
  .cs-cta     { font-size: 0.65rem; padding: 11px 22px; }

  /* Greek Clean: reset desktop overrides on mobile */
  .cs-card:nth-child(2) .cs-right { padding-top: 0; }
  .cs-card:nth-child(2) .cs-layout { gap: 20px; }

  /* Hide all desktop-only overlay / hover images on mobile */
  .cs-chart,
  .gc-greek2,
  .gc-cattrash,
  .gc-greek2-mobile { display: none; }

  /* gc-cta-row: reset absolute positioning context */
  .gc-cta-row { position: static; }

  /* Plant stats: wrap + reset top offset */
  .plant-stats { flex-wrap: wrap; top: 0; }
  .plant-card-img,
  .aiplant-img { display: none; }

  /* Oldies */
  .oldies { padding: 48px 16px; }
  .oldie-card { border-radius: 12px; }

  /* Experience */
  .experience { padding: 48px 16px; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 36px; }
  .exp-item { flex-wrap: wrap; gap: 12px; }

  /* Footer */
  footer { padding: 48px 16px 28px; }
  .footer-heading { font-size: clamp(1.4rem, 6vw, 2rem); }
  .footer-email a { font-size: clamp(1rem, 5vw, 1.4rem); }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

}