/* KEEP THIS AT THE TOP!!! */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

@font-face {
  font-family: 'SD Georgia';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/sd-georgia-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-thin.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-book.woff2') format('woff2');
  font-weight: 400; /* keep 400 so browser uses it as default */
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

.project-cards-container,
.project-card {
  pointer-events: auto !important;
}

/* .nav-right a,
.nav-center-star,
.nav-left {
  opacity: 0;
} */


.footer-signature {
  font-family: 'Alex Brush', cursive;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
}



/* --- INTRO SCREEN --- */
.intro-screen {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate; /* 🔑 creates a local stacking context */
}

/* Ripples must be above black background */
.ripple-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Black background sits at bottom */
.intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: black;
  z-index: 1;
}

.reveal-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}


.intro-text {
  position: relative;
  z-index: 3;
  opacity: 0;
  /* Figma "Site Intro Splash": black, yellow asterisk + text, PP Neue Montreal
     (sized like the other splashes, see js/splash.js) */
  font-family: 'PP Neue Montreal', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #EAFE07;
  letter-spacing: 0;
}

/* Loading asterisk: like the tab icon's spin but slower + chunkier (one turn per 5s, in 18° ticks).
   It sits dead centre; the "feeding the fish..." line hangs just below it.
   (The only splash whose asterisk spins; the page-to-page splashes' stay still.) */
.intro-star {
  display: block;
  width: 32px;
  height: auto;
  color: #EAFE07;
  animation: intro-star-spin 5s steps(20) infinite;   /* 18° ticks, 4 per second */
}
@keyframes intro-star-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .intro-star { animation: none; } }

.intro-label {
  position: absolute;
  top: calc(100% + 44px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* the dots grow off the end, so "feeding the fish" itself stays centred */
#intro-dots { position: absolute; left: 100%; }

/* DEV ONLY (local preview): replay-the-intro button */
.dev-replay-intro {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100001;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 12px/1 'PP Neue Montreal', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dev-replay-intro:hover { background: #0313E4; border-style: solid; }



/* Ripple transition */
.ripple-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.ripple {
  opacity: 1 !important;
  position: absolute;
  top: 50%;
  left: 50%;

  /* Make it full size immediately */
  width: 150vmax;
  height: 150vmax;
  border-radius: 50%;

  /* Center it without animating margins */
  transform: translate(-50%, -50%) scale(0);

  /* Smooth compositing */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: center;

  animation: rippleExpand 1.3s ease-out forwards;
}


/* the intro ripples are drawn on this one canvas (see startRippleTransition in main.js) */
.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ripple-blue {
  background-color: #061a8a;
  border: none;
}

.ripple-black {
  background-color: #000000;
  border: none;
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
100% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; /* stay fully visible */
}
}


.final-reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.final-reveal svg {
  width: 100%;
  height: 100%;
}

:root {
  --bg-beige: #F9F5EC;
  --text-dark: #1A1A1A;
  --blue-accent: #2563EB;
  --hero-text-blue: #006EE9;
  --hover-yellow: #C28500;
  --gold-text: #FFF3BF;
  --accent-pink: #E7A0FE;

  /* Your Figma Hex Codes */
  --bg-pink: #E7A0FE;
  --bg-blue-mid: #006EE9;
  --bg-blue-dark: #000180;

  /* The Shifting Stop: 34% for Sec 2, 52% for Sec 3 */
  --gradient-mid-stop: 34%; 
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: auto; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
html::-webkit-scrollbar { display: none; }

body {
  background-color: var(--bg-beige);
  font-family: 'SD Georgia Light', Georgia, serif;
  color: var(--text-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

/* The "Resting" positions for a vibrant sky */
  --gradient-y: 50%;          /* Starts in middle */
  --pink-stop: 0%;            /* The core */
  --blue-mid-stop: 15%;       /* The "Lighter Blue" aura */
  --blue-dark-stop: 60%;     /* The Deep Blue base */

}



/* --- CURSOR & BUBBLE EMITTER --- */
.cursor-dot {
  width: 14px;
  height: 14px;
background-color: #0313E4;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  mix-blend-mode: normal;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease,
              width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.5s ease;
  will-change: transform;
}

.cursor-dot.active {
  opacity: 0.55; /* see-through; a blend mode here would bring back scroll stutter */
}

.cursor-dot.is-blob {
  width: var(--blob-w, 48px);
  height: var(--blob-h, 48px);
  border-radius: 50%;
  /* "screen": over the dark page the bubble keeps its own blue, and text under it
     still shows through (only while hovering — a blend on the plain dot made
     scrolling stutter) */
  opacity: 0.8;
  mix-blend-mode: screen;
}

.cursor-dot.is-blob.is-pill {
  border-radius: 999px;
  opacity: 0.8;
}

/* hovering a work-nav pill: same shape + size as the pill, light see-through blue.
   Size follows the pill quickly (it springs wider on hover) instead of the slow bouncy default. */
.cursor-dot.is-blob.on-pill {
  background-color: #0A9EFF;   /* vivid cerulean / sky blue */
  opacity: 0.7;
  mix-blend-mode: color-dodge;   /* lights the pill up sky blue and makes its text glow */
  border-radius: var(--blob-r, 6px);
  transition: opacity 0.3s ease,
              width 0.15s ease-out,
              height 0.15s ease-out,
              border-radius 0.3s ease;
}

/* hovering a project card: the plain see-through bubble, no blend */
.cursor-dot.is-blob.on-card {
  mix-blend-mode: normal;
  opacity: 0.4;
}

.bubble-particle {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #006EE9;
  border-radius: 50%;
  pointer-events: none !important; /* Make sure this is here */
  z-index: 100; /* Changed from 10000 - puts bubbles BELOW nav and interactive elements */
  mix-blend-mode: difference;
  opacity: 0.5;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}




/* --- SKY (Make transparent so background shows through) --- */
.sky-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% var(--gradient-y),
    #E7A0FE var(--pink-stop),
    #006EE9 var(--blue-mid-stop),
    #000240 var(--blue-dark-stop)
  );
}


.section-2-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;   /* its own layer from the start: it drifts during the curtain */
    background: transparent !important;
  width: 100vw;
  height: 100vh;
  z-index: 15;
  pointer-events: none;
  opacity: 1;
  will-change: transform, opacity;
  clip-path: inset(0 0 0 0); /* set from the start; JS trims it as section 3 covers it */
/*   filter: saturate(1.1); */
  overflow: visible;
}


/* Light rays - perfectly overlapping */
.light-ray {
  will-change: transform;   /* moved every scroll frame (updateSection2Curtain): its own layer, so it's moved, not repainted — without it, section 2 stalled when Chrome was low on graphics memory */
  position: absolute;
  /* As section 3 rises, the rays leave with the frame, a little slower
     (RAYS_SPEED in js/main.js, updateSection2Curtain).
     Size: 'contain' in a 115% box = min(115vw, 115vh x 1.3804) wide,
     width / 1.3804 tall, centred. --ray-stretch stretches them taller upwards
     (1 = original height). */
  --ray-w: min(115vw, 158.751vh);
  --ray-h: calc(var(--ray-w) / 1.380446);
  --ray-stretch: 1;
  --ray-down: 6vh; /* nudges both rays down from their original spot */
  width: var(--ray-w);
  height: calc(var(--ray-h) * var(--ray-stretch));
  object-fit: fill;
  left: 50%;
  top: calc(50% + var(--ray-h) * (0.5 - var(--ray-stretch)) + var(--ray-down));
  transform: translateX(-50%);
  pointer-events: none;
/*   opacity: 0.8; */
}

.light-ray-2 {
  z-index: 1;  /* Below everything - border(18), text(5), fish(2) */
}

.light-ray-1 {
  z-index: 17;  /* Above everything except border(18) */
}


.water-surface {
  will-change: transform;   /* moved every scroll frame (updateSection2Curtain): its own layer, so it's moved, not repainted — without it, section 2 stalled when Chrome was low on graphics memory */
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 3;
  transform-origin: center center;
}


/* Dangles - very top of section, above fish */
.dangles-decor {
  position: absolute;
  top: -2vh;  /* Way up in the negatives */
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 4;  /* Above fish (2), below border (18) */
  will-change: transform, opacity; backface-visibility: hidden;
}

/* Bottom bubbles - similar to section 3 */
.sec2-bubble {
  position: absolute;
  pointer-events: none;
  z-index: 1;  /* Below dangles, above fish */
  bottom: 25%;  /* Near bottom of section */
}

.sec2-bubble-1 {
  width: 37px;
  left: 18%;
}

.sec2-bubble-2 {
  width: 37px;
  left: 40%;
  bottom: 24%;  /* Slightly higher */
}

.sec2-bubble-3 {
  width: 37px;
  left: 70%;
  bottom: 25%;  /* Slightly lower */
}

/* Blue flowers scattered among bubbles */
.sec2-flower {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 10px;
  bottom: 25%;
}

.sec2-flower-1 {
  left: 42%;
  bottom: 23%;
  transform: rotate(-15deg);
}

.sec2-flower-2 {
  left: 65%;
/*   bottom: 8%; */
  transform: rotate(20deg);
}


/* Container - just for structure */
#sky-text-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sky-border-bottom {
  display: none !important;
}


#sky-text-container .sky-border-top {
  display: none !important;
}

/* The ONLY border - in the wrapper */
.section-2-wrapper > .sky-border-top {
  position: absolute;
  top: -1vh;
  left: -1vw;
  width: 102vw;
  height: 102vh;
  
  background-image: url('https://melodysz.github.io/baubles/border-top.webp');
  background-size: cover;  /* Your original setting */
  background-position: center center;
  background-repeat: no-repeat;
  
  pointer-events: none;
  opacity: 1;
  z-index: 18;
  will-change: transform; /* slides up with section 3 (see updateSection2Curtain) */
}

/* NEW: Add a black extension below the border to cover any gap */
.section-2-wrapper::after {
  content: "";
  position: absolute;
  bottom: -50vh;  /* Extends below the wrapper */
  left: 0;
  width: 100vw;
  height: 50vh;  /* Black safety zone */
  background: #000000;
  z-index: 17;  /* Just below the border */
  pointer-events: none;
}


/* Section 2 version of blue tang - same image, different class name */
.fish-tang-sec2 { 
  width: 135px; 
  height: 90px;  
  background-image: url('https://melodysz.github.io/baubles/fish/bluetang.webp'); 
}

#fish-tank {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
}

/* --- NAV --- */
/* nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 0 3rem; display: flex; justify-content: space-between; align-items: center; z-index: 10000; color: #0033FF; }
.nav-left { position: relative; font-family: 'Zen Old Mincho', serif; font-size: 1.2rem; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; height: 30px; overflow: hidden; }
.name-inner { display: inline-block; will-change: transform, opacity; } */
/* .nav-right {
  display: flex;
  align-items: center;
  gap: 3rem;
} */

/* .nav-right a {
  color: inherit;
  text-decoration: none;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 0 0.2rem;
} */

/* .nav-right a .nav-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform, opacity;
} */

/* .nav-left:hover, .nav-right a:hover { opacity: 1; color: var(--hover-yellow) !important; } */

/* .nav-center-star {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  color: inherit;
  transition: opacity 0.4s ease;
  pointer-events: auto;
} */

/* #nav-star-icon {
  width: 100%;
  height: 100%;
  display: block;
} */


/* Replace all existing nav { } rules with: */
.nav-pill-wrap {
  position: fixed;
  top: 20px;
  /* spans the screen so its asterisk and last link line up with the footer's
     small text (48px from each edge): the asterisk sits 9px inside the nav's
     left edge, the last link's text 43.5px inside its right edge */
  left: 39px;
  right: 4.5px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.nav-pill {
  position: relative;
  height: 52px;
  border-radius: 999px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  width: 52px;
  white-space: nowrap;
  pointer-events: auto;
  transition: width 0.55s cubic-bezier(0.32, 0, 0.08, 1);
}

.nav-pill.expanded {
  width: 100%;
    pointer-events: none;
}

.nav-asterisk {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding-right: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
  pointer-events: none;
}

.nav-pill.expanded .nav-content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: none;
}

.nav-pill.expanded .nav-wordmark,
.nav-pill.expanded .nav-link-item {
  pointer-events: auto;
}

.nav-wordmark {
  color: inherit;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav-pill.expanded .nav-wordmark {
  opacity: 1;
  transition: opacity 0.25s ease 0.45s;
}

.wm-melody {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 20px;
}

.wm-zhang {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.nav-link-item {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 16px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: translateX(-10px);
  transition: color 0.25s ease, opacity 0.3s ease, transform 0.3s ease;
  min-width: 80px;
  text-align: center;
}

.nav-pill.expanded .nav-link-item:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.55s, transform 0.3s ease 0.55s, color 0.25s ease;
}

.nav-pill.expanded .nav-link-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.68s, transform 0.3s ease 0.68s, color 0.25s ease;
}

.nav-pill.expanded .nav-link-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.81s, transform 0.3s ease 0.81s, color 0.25s ease;
}



/* --- SCROLL RIG --- */
.scroll-tracker { 
  height: 160vh;
  position: relative; 
  z-index: 10; 
}
.scaling-rig {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  /* the black surround + porthole is drawn on .scaling-rig-canvas (drawHeroWindow in main.js) */
}

.scaling-rig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scaling-rig, .hero-peek-layer, .hero-halo {
  /* --- THE PERFORMANCE FIX --- */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0); /* Force hardware acceleration */
}

.hero-orbit {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(620px, 80vmin);
  height: min(620px, 80vmin);

  pointer-events: none;
  z-index: 21;
  opacity: 0;      /* Start hidden */
  
  will-change: transform, opacity;
  transform-origin: center center;
}

.hero-orbit img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-straight-text { position: absolute; top: calc(50% + 120px); left: 50%; transform: translateX(-50%); color: var(--hero-text-blue); font-family: 'SD Georgia Light', Georgia, serif; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; z-index: 25;}

/* HERO IDENTITY FRAME (scales/fades with .scaling-rig just like before) */
.hero-identity-frame{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(920px, 72vw);
  height: min(560px, 56vh);

  pointer-events: none;
  display: block;

  color: #D1FFA4;
  padding: 18px;
  box-sizing: border-box;

  opacity: 0;          /* start hidden */
  will-change: opacity;
  z-index: 22;
}

.hero-text-layer {
  position: fixed;
  inset: 0;
  z-index: 30;       /* above halo */
  pointer-events: none;
}

.hero-identity-frame {
  transform: translate(-50%, -50%);
  scale: 1 !important;
  will-change: filter, opacity;
}

/* Fish layer should NOT be inside anything that scales */
.hero-fish-layer{
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  /* makes the fish animation stable */
  transform: none !important;
}

.hero-fish-stage{
  position: relative;
  width: 520px;
  height: 520px;
}

/* Make sure the mask stays above the fish */
.arch-svg-mask{ z-index: 1; display: none;}

/* 1. Expand the container to the full viewport */
.hero-peek-layer {
  position: fixed;
  isolation: isolate;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  inset: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  pointer-events: none;
  z-index: 19;
  overflow: hidden;
  border-radius: 0;
  
  /* ✅ pre-promote so first scroll doesn't snap */
  transform: translateZ(0) scale(1);
  filter: blur(0px);
}

/* 2. Make the background gradient fill the screen */
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  /* Expanded stops for a natural full-screen look */
  background: radial-gradient(
    circle at 50% 50%, 
    #E7A0FE 4%, 
    #006EE9 18%, 
    #0D00C4 30%,
    #000000 70%  /* NEW: Fades to black at bottom */
  );
  border-radius: 0;
  z-index: 1; 
}

/* 3. Make water lines smaller and repeated */
.water-lines{
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.water-lines::before{
  content: "";
  position: absolute;
  inset: -20px; /* just enough room for the ±14px drift (was -20%: a much bigger layer) */
  background-image: url('https://melodysz.github.io/baubles/hero/water%20lines.webp');
  background-size: 42vw auto; /* same ripple size as before (30% of the old 140%-wide layer) */
  background-repeat: repeat;
  background-position: 7% 50%;

  /* ✅ no CSS animation */
  transform: translate(var(--wx, 0px), var(--wy, 0px));
  will-change: transform;
}





/* The Star - Centered and Static */
.hero-star {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-image: url('https://melodysz.github.io/baubles/hero/hero%20star.png');
  background-size: contain;
  background-repeat: no-repeat;
  
  /* --- THE FIX --- */
  z-index: 21;
  pointer-events: none;
  will-change: transform, opacity;
}


.hero-halo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 620px;
  height: 620px;

  pointer-events: none;
  z-index: 21;     /* just under/over — see note below */
  opacity: 1;
  
  will-change: transform, opacity;
  transform-origin: center center;
}

.hero-identity-frame{ z-index: 22; }

.hero-halo svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Corners of the centered rectangle */
.id-top-left{
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;              /* important: no extra spacing */
}

.id-bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;              /* important: no extra spacing */
}

/* Big text (Georgia Light) */
.id-big{
  font-family: 'SD Georgia Light', Georgia, serif;
  font-weight: 300;
  text-transform: uppercase;

  font-size: clamp(34px, 4.2vw, 45px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 0.92;   /* match your Georgia line spacing exactly */
  display: block;
}

.id-small{
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: none;

  margin: 0;                 /* IMPORTANT: no extra spacing */
  line-height: 0.92;         /* IMPORTANT: match .id-big */
  letter-spacing: 0.02em;    /* pick one; don't duplicate */
  display: block;
}

/* Pink accent color */
:root{
  --accent-pink: #E7A0FE;
}

/* Top-left "who?" */
.id-accent{
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--accent-pink);
  margin-bottom: 0; /* was 10px */
  letter-spacing: -0.1em; /* -10% */
}

/* Bottom-right tagline */
.id-tagline{
  margin-top: 0; /* was 12px */
  font-size: clamp(18px, 2vw, 22px);
  color: var(--accent-pink);
  text-align: right;
  line-height: 1.2;
}

.id-tagline .helv{
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 300;
}

.id-tagline .caslon{ /* class name is historical — the font is Xanh Mono */
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  letter-spacing: -0.1em; /* -10% */
}

/* Update the identity frame lines to start hidden */
.id-top-left .id-accent,
.id-top-left .id-big,
.id-top-left .id-small,
.id-bottom-right .id-small,
.id-bottom-right .id-big,
.id-bottom-right .id-tagline,
.id-scroll-arrow {
  opacity: 0;
  will-change: transform, opacity;
}


/* ========================================
   THIRD SECTION - CLEAN VERSION (NO DUPLICATES)
   Replace ALL your third section CSS with this
   ======================================== */

.third-stage {
  position: relative;
    overflow: visible !important;
  width: 100%;
  min-height: 100vh;
  transform-origin: center center;
  /* (no will-change: nothing animates this; the hint kept a full-screen layer in graphics memory) */
}


.third-section {
  /* extra space above the cards: everything below the project pills (cards,
     decor, background gradient) moves down together; the pills stay put */
  --work-top-space: 40px;
  position: relative;
  z-index: 50;
  min-height: calc(110vh + var(--work-top-space));
  padding-top: var(--work-top-space);
  padding-bottom: 200px;
  justify-content: center;
  /* solid black strip for the extra space, then the original gradient, unchanged */
  background:
    linear-gradient(#000000, #000000) top / 100% var(--work-top-space) no-repeat,
    linear-gradient(to bottom, #000000 30%, transparent 100%) 0 var(--work-top-space) / 100% calc(100% - var(--work-top-space)) no-repeat;
  color: #F9F5EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible !important;
/*   isolation: isolate; */
}

/* Add a wrapper style matching footer behavior */
.third-title-wrapper {
  transform-origin: center center;
  will-change: transform, opacity;
  position: relative;
  top: -2rem;
}

/* Title - above overlay - uniform sizing */
.third-title {
  color: #006EE9;
  font-weight: 300;
  font-size: 50px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  pointer-events: none;
  position: relative;
  z-index: 60;
}

/* All text same size now */
.third-title .italic-text {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.05em; /* -5% */
}

.third-title .helvetica-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  text-transform: lowercase;
}

/* Content wrapper */
.third-content {
  position: relative;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* CARDS CONTAINER - FIXED CENTERING */
.project-cards-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 2.5rem auto 0 auto; /* CHANGED - Added auto left/right margins */
  position: relative;
}

/* Individual cards */
.project-card {
  z-index: 56;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
}

/* Hovered card stays sharp */
.project-card.is-hovered {
  z-index: 100;
  filter: none !important; /* Ensures hovered card never gets blurred */
}

/* Hover animation */
.project-card:hover {
  transform: translateY(-8px) scale(1.12) rotate(var(--tilt, 0deg));
}

.project-cards-container.cards-locked {
  pointer-events: none;
}


.third-anim {
  display: block;
  transform: translateY(0px);
  opacity: 1;
  will-change: transform, opacity;
}

.reveal-third .third-anim {
  transform: translateY(0);
  opacity: 1;
}

.third-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 1.2rem;
  max-width: 600px;
  line-height: 1.6;
}



/* Wavy line - behind cards */
.wavy-line {
  position: absolute;
  width: 100vw;
  height: auto;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 55;
  opacity: 1;
  pointer-events: none;
  will-change: auto;
}

/* Bubble decorations */
.bubble-decor {
  position: absolute;
  pointer-events: none;
  z-index: 55; /* Below cards */
  opacity: 1;
}

.bubble-1 {
  width: 37px;
  bottom: 24%;
  left: 18%;
}

.bubble-2 {
  width: 37px;
  bottom: 25%;
  left: 30%;
}

.bubble-3 {
  width: 37px;
  bottom: 23%;
  right: 22%;
}

.bubble-4 {
  width: 37px;
  bottom: 38%;
  right: 8%;
}

/* Flower decorations */
.flower-decor {
  position: absolute;
  pointer-events: none;
  z-index: 55; /* Below cards */
  width: 18px;  /* Increased from 15px */
  opacity: 1;
}

.flower-1 {
  bottom: 38%;
  left: 31%;
  transform: rotate(15deg);
}

.flower-2 {
  bottom: 27%;
  left: 64%;
  transform: translateX(-50%) rotate(25deg);
}

.flower-3 {
  bottom: 34%;
  right: 15%;
  transform: rotate(-10deg);
}

/* Ensure all decorative elements get dimmed/blurred */
.third-decor {
  transition: filter 0.4s ease, opacity 0.4s ease;
  transform-origin: center center;
  will-change: transform, opacity;
}


/* Reusable text styles (used in footer AND section 3) */
.helvetica-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
}

.italic-text {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: normal;
}





/* --- FOOTER --- */
.footer-section { 
  position: relative; 
  z-index: 49; 
  min-height: 100vh;   
  background: transparent;
  color: #D1FFA4; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  padding: 2rem; 
  overflow: hidden; 
  transform: translateZ(0); 
}

.footer-tagline { 
  font-family: 'SD Georgia', Georgia, serif;
  font-weight: 300;     /* Light */
  font-size: 50px;  /* Kept at 50px to match third section */
  line-height: 0.9;
  letter-spacing: -0.07em;   /* -7% */
  text-transform: uppercase;
  margin: 0; 
  pointer-events: none; 
}

/* one font for the whole tagline: SD Georgia Light, all caps */
.footer-tagline .italic-text,
.footer-tagline .helvetica-text {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  font-size: 50px;
  letter-spacing: inherit;
  text-transform: uppercase;
}

.block { display: block; }
.footer-anim { display: block; transform: translateY(40px); opacity: 0; will-change: transform, opacity; } /* animated by GSAP (a CSS transition on top made it lag) */
.reveal .footer-anim { transform: translateY(0); opacity: 1; }
/* Footer "with me!" button — same hover as the project cards' "dive in":
   it lengthens to the right, grows 10% and fills in pink, and a round hole
   (showing the background) with a pink arrow rides in on the end.
   The outline + fill are drawn by ::before so the button's own box never
   changes size (it stays centred on the label and nothing around it shifts). */
@property --btn-hole {             /* lets the hole's size animate */
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
.btn-touch {
  --btn-grow: 24px;               /* how much longer it gets on hover */
  --btn-arrow: 40px;              /* arrow hole size */
  --btn-hole: 0px;                /* hole radius: 0 at rest, opens on hover */
  position: relative;
  display: inline-block;
  padding: 0.8rem 2.4rem;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 1.3rem;
  text-decoration: none;
  color: #E7A0FE !important;
  background: transparent;
  pointer-events: auto !important;
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease,
              --btn-hole 0.2s ease;
}
.btn-touch::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #E7A0FE;
  border-radius: 999px;
  background-color: rgba(231, 160, 254, 0);
  /* punch a round hole where the arrow sits (it follows the growing right end) */
  -webkit-mask: radial-gradient(circle at calc(100% - 5px - var(--btn-arrow) / 2) 50%,
                  #0000 var(--btn-hole), #000 calc(var(--btn-hole) + 0.5px));
          mask: radial-gradient(circle at calc(100% - 5px - var(--btn-arrow) / 2) 50%,
                  #0000 var(--btn-hole), #000 calc(var(--btn-hole) + 0.5px));
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.btn-touch-label { position: relative; }

/* the pink arrow, pinned to the right end (it sits inside the hole) */
.btn-touch-arrow {
  position: absolute;
  top: 50%;
  right: 5px;
  width: var(--btn-arrow);
  height: var(--btn-arrow);
  margin-top: calc(var(--btn-arrow) / -2);
  opacity: 0;
  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s ease;
}
.btn-touch-arrow::after {        /* arrow icon, recoloured pink */
  content: "";
  position: absolute;
  inset: 24%;
  background: #E7A0FE;
  -webkit-mask: url('../images/arrow-icon.png') center / contain no-repeat;
          mask: url('../images/arrow-icon.png') center / contain no-repeat;
}

.btn-touch:hover {
  transform: scale(1.1);
  color: #000000 !important;
  --btn-hole: calc(var(--btn-arrow) / 2);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease,
              --btn-hole 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}
.btn-touch:hover::before {
  right: calc(-1 * var(--btn-grow));
  background-color: rgba(231, 160, 254, 1);
}
.btn-touch:hover .btn-touch-arrow {
  opacity: 1;
  transform: translateX(var(--btn-grow));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease 0.05s;
}
.footer-bottom { position: absolute; bottom: 0; left: 0; width: 100%; padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; align-items: end; z-index: 60; transform-origin: center bottom; will-change: transform, opacity; pointer-events: auto; }
.footer-left { text-align: left; display: flex; flex-direction: column; gap: 0.4rem; font-family: 'PP Neue Montreal', sans-serif; }
.footer-right { text-align: right; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: auto; }
.footer-right a { font-size: 0.85rem; text-transform: uppercase; color: #D1FFA4; text-decoration: none; font-family: 'PP Neue Montreal', sans-serif; letter-spacing: 0.05em; pointer-events: auto; }

.footer-star-wrapper { 
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  opacity: 0;
  transform: scale(0);
  margin: 0 auto;
  will-change: transform, opacity;
  pointer-events: none;
}

#footer-main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;   /* 👈 one value controls all spacing */
}

#footer-star-icon { 
  transform-origin: center center; 
  display: block; 
  position: relative; 
  z-index: 1; 
  overflow: visible; 
}

/* Base class for all Section 2 fish */
.sky-fish {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 2;
  width: 115px;          /* ← pick your base size */
  aspect-ratio: 1 / 1;  /* keeps things predictable */
}

/* Section 2 Fish Assets - Text versions */
.fish-canvas     { background-image: url('https://melodysz.github.io/baubles/fish/canvastxt.webp'); }
.fish-layout     { background-image: url('https://melodysz.github.io/baubles/fish/layouttxt.webp'); }
.fish-narrative  {background-image: url('https://melodysz.github.io/baubles/fish/narrativetxt.webp'); }
.fish-product    { background-image: url('https://melodysz.github.io/baubles/fish/producttxt.webp'); }
.fish-ui         { background-image: url('https://melodysz.github.io/baubles/fish/uitxt.webp'); }
.fish-ux         { background-image: url('https://melodysz.github.io/baubles/fish/uxtxt.webp'); }
.fish-visual     { background-image: url('https://melodysz.github.io/baubles/fish/visualtxt.webp'); }
.fish-branding   { background-image: url('https://melodysz.github.io/baubles/fish/brandingtxt.webp'); }

/* Fish container - covering screen */
.fish-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible !important;  /* IMPORTANT - let fish swim across edges */
  z-index: 2;
  opacity: 1;
}

/* Hide old text version */
#skyRevealText {
  display: none !important;
}

.sky-text-images {
  position: absolute;
  inset: 0;                    /* replaces top/left/transform centering */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertical centering */
  align-items: center;         /* horizontal centering */
  z-index: 1;
  pointer-events: none;
  text-align: center;
  width: 100%;
  gap: 0;
  opacity: 1;
  will-change: opacity, transform;
}

/* Individual text images */
.sky-text-img {
  display: block;
  width: 40%; /* Much smaller - adjust this to your liking */
  max-width: 700px; /* Cap the maximum size */
  height: auto;
  object-fit: contain;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.sky-text-img-1 {
  margin-bottom: -4%;
}

.sky-text-img-2 {
  margin-bottom: 0;
}

/* Updated subtitle positioning - MUCH higher up */
.sky-subtitle-new {
  margin-top: 1.3rem; /* Space from "ocean blue" image */
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;     /* Book */
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  color: #00CEFF;
  text-transform: none;
  text-align: center;
}

/* the whole line is one font now: PP Neue Montreal Book, default spacing */
.sky-subtitle-new span {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  font-size: 18px !important;
  letter-spacing: normal !important;
}

.sky-anim {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}


.hero-fish {
  position: absolute;
  width: 220px; 
  height: 90px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* This ensures the fish boxes themselves don't have a background color */
  background-color: transparent !important;
  will-change: transform, opacity;
  z-index: 1;  /* Relative to hero-fish-layer */
}

.fish-clown-1 { 
  background-image: url('https://melodysz.github.io/baubles/fish/clown.webp'); 
  top: 45%; 
  left: 5%; 
}

.fish-clown-2 { 
  background-image: url('https://melodysz.github.io/baubles/fish/smallclown.webp'); 
  top: 58%; 
  left: 0%; 
}

.fish-tang { 
  background-image: url('https://melodysz.github.io/baubles/fish/bluetang.webp'); 
  top: 29%; 
  left: 50%; 
}

.hero-identity-frame {
  isolation: isolate;          /* creates its own render layer */
  will-change: filter, opacity;
  opacity: 1; /* Keep the container visible */
  z-index: 22;
}

/* Individual lines within the frame */
.id-top-left > div, 
.id-bottom-right > div,
.id-bottom-right .id-tagline {
  will-change: transform, opacity;
}

.cursor-dot,
.bubble-particle {
  pointer-events: none !important;
}

.scaling-rig, 
.hero-peek-layer, 

.scaling-rig, .hero-peek-layer {
  contain: paint;
  isolation: isolate; /* Creates a separate stacking context */
}


.footer-signature {
  font-family: 'Alex Brush', cursive !important;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}




body {
  contain: none !important;
  isolation: isolate;
  background: transparent;
  background-attachment: unset;
}





.third-section .third-title {
  color: #006EE9 !important;
}



.black-cover {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 1; /* Above body (0) but below everything else */
  pointer-events: none;
  opacity: 0;
}





/* Add to your CSS file */
.page-loading .scroll-tracker,
.page-loading .section-2-wrapper,
.page-loading .third-section {
  opacity: 0;
  transition: opacity 0.3s ease;
}

html:not(.page-loading) .scroll-tracker,
html:not(.page-loading) .section-2-wrapper,
html:not(.page-loading) .third-section {
  opacity: 1;
}

.bubble-decor,
.flower-decor {
  will-change: transform, opacity;
  transform: translateZ(0);
}



#exit-ripple-container {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}



.fish-clown-1,
.fish-clown-2,
.fish-tang {
  pointer-events: auto !important;
}



html, body {
  overscroll-behavior-x: none;
}


.diamond-pattern {
  position: absolute;
  inset: 0;
  background-image: url('https://melodysz.github.io/baubles/fish/diamond%20pattern.webp');
  background-size: auto 100%;  /* tile at natural width, full height */
  background-position: 0 center;
  background-repeat: repeat-x;
  mix-blend-mode: overlay;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  will-change: transform;
}

@keyframes shimmerChev {
  0%   { opacity: 0.1; }
  50%  { opacity: 0.75; }
  100% { opacity: 0.1; }
}

.scroll-hint {
  position: fixed;
  left: 50%;
  top: calc(100vh - 2.5rem);
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
    display: none;

}

.scroll-hint.hidden {
  opacity: 0 !important;
}

.scroll-hint path {
  animation: shimmerChev 2s ease-in-out infinite;
}

.scroll-hint path:nth-child(1) { animation-delay: 0s; }
.scroll-hint path:nth-child(2) { animation-delay: 0.3s; }

.circular-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  overflow: visible !important;
  left: 0;
  margin: 0 auto;
}

.circular-carousel.is-dragging {
  cursor: grabbing;
}


.circular-carousel .project-card {
  position: absolute;
  width: 420px;
  aspect-ratio: 3 / 4;
  transform-origin: center center;
  pointer-events: auto;
  will-change: transform, opacity;
  left: 50%;
  top: 50%;
    cursor: default !important;
}

.work-circle {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 52; /* below cards (56) but above background */
  opacity: 1;
}

/* Prevent hand cursor on carousel area */
.circular-carousel {
  cursor: default !important;
}

/* Prevent hand cursor on project cards */
.project-card {
  cursor: default !important;
}

/* Prevent text cursor on all text */
* {
  user-select: none;
}

/* Prevent pointer on footer button */
.btn-touch {
  cursor: default !important;
}

/* Prevent pointer on nav star */
/* .nav-center-star,
.nav-center-star * {
  cursor: default !important;
} */

/* Prevent pointer on footer links */
.footer-right a,
.footer-left,
.footer-section * {
  cursor: default !important;
}

a, button, [role="button"] {
  cursor: default !important;
}

.work-footer-gradient {
  position: fixed;
  inset: 0;
  z-index: 48; /* below both third-section (50) and footer (49) */
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    #009DD6 0%,
    #000180 40%,
    #000000 70%
  );
  opacity: 0; /* fades in when work section arrives */
}

.work-nav {
  position: absolute;
  top: 3rem; /* distance from top of third-section, adjust this */
  left: 0;
  right: 0;
  z-index: 150; /* above the cards and badges, which scroll under it while it's pinned */
  display: flex;
  flex-direction: row;
  gap: 2px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.work-nav-pill {
  background: rgba(0, 110, 233, 0.5);
  /* frosted glass: blur whatever passes behind the pill (cards, glow) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #2584EE;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;   /* same as the main nav links */
  font-weight: 500;
  text-transform: lowercase;
/*   letter-spacing: 0.03em; */
  padding: 0.5rem 0.7rem;   /* top/bottom, left/right */
  border-radius: 6px;
  opacity: 0;
  cursor: default;
  white-space: nowrap;
}

.work-nav-pill.active {
  /* half the pill's height = fully round. (30px looked the same but rounded
     fully within the first ~third of the transition, so it read as a jump) */
  border-radius: 18.5px;
  background: rgba(0, 110, 233, 0.8);
  color: var(--pill-color, #F5B7FF);   /* each pill: its card's colour (set in index.html) */
}

/* Unselected pill sitting over a project card: darker text so it stays readable
   (toggled by updatePillContrast in main.js; fades via the color transition below) */
.work-nav-pill.over-card:not(.active) {
  color: #000180;
}

.work-nav-pill,
.work-nav-pill.active {
  /* width: a gentle spring (overshoots ~4%, then settles) */
  transition: width 0.65s linear(0, 0.018, 0.065, 0.133, 0.214, 0.303, 0.394, 0.483, 0.569, 0.649, 0.721, 0.785, 0.841, 0.889, 0.929, 0.962, 0.988, 1.009, 1.024, 1.034, 1.041, 1.045, 1.046, 1.045, 1.043, 1.04, 1.037, 1.033, 1.029, 1.024, 1.02, 1.017, 1.013, 1.01, 1.008, 1.005, 1),
              background 0.3s ease, color 0.3s ease, border-radius 0.3s ease;
}

.pent-up-award {
  width: 130px;
  height: auto;
  position: absolute;
  left: calc(50% + 120px);
  top: calc(50% - 200px);
  pointer-events: none;
  z-index: 110;
  opacity: 0;
  will-change: transform, opacity;
}

.coming-soon-badge {
  position: absolute;
  width: 130px;
  height: auto;
  left: calc(50% + 120px);
  top: calc(50% - 200px);
  pointer-events: none;
  z-index: 110;
  opacity: 0;
  will-change: transform, opacity;
}

/* === CORAL DECORATIONS - Section 2 Bottom === */
.coral-decor {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  object-fit: contain;
  z-index: 3; /* above light rays, below border (18) */
  will-change: transform, opacity;
    display: none;
}

/* Back layer: midnight coral */
.coral-back-midnight {
  width: 16%;
  max-width: 200px;
}
.coral-back-left  { left: -2%;  bottom: 5vh; }
.coral-back-right { right: -2%; bottom: 5vh; transform: scaleX(-1); }

/* Back layer: navy coral */
.coral-back-navy {
  width: 13%;
  max-width: 170px;
}
.coral-navy-left  { left: 10%;  bottom: 5vh; }
.coral-navy-right { right: 10%; bottom: 5vh; transform: scaleX(-1); }

/* Middle layer: green coral */
.coral-middle {
  width: 9%;
  max-width: 120px;
}
.coral-green-left  { left: 20%; bottom: 3vh; }
.coral-green-right { right: 20%; bottom: 3vh; transform: scaleX(-1); }

/* Middle layer: orange coral */
.coral-orange-left  { left: 28%;  bottom: 5vh; }
.coral-orange-right { right: 28%; bottom: 5vh; transform: scaleX(-1); }

/* Front layer: light blue coral */
.coral-front {
  width: 11%;
  max-width: 140px;
}
.coral-front-left  { left: 14%; bottom: 3vh; }
.coral-front-right { right: 14%; bottom: 3vh; transform: scaleX(-1); }

#work-wipe-overlay {
  transform: translateY(100%);
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
/* --- PROJECT CARD CTA BUTTON ---
   Sits exactly on top of the "dive in" button painted into each card image,
   so it can grow when the card is hovered. Sizes use cqw (1% of the card's
   width) so it stays lined up at any card size. */
.circular-carousel .project-card {
  container-type: inline-size;
}

.card-cta {
  /* resting length, and how much it grows on hover to fit the arrow circle
     (card units: 1 design px = 0.2237cqw; grows 19.3 design px) */
  --cta-w: calc(23.49cqw + 1px);  /* +1px hides the painted button's soft edge */
  --cta-grow: 4.32cqw;
  position: absolute;
  left: calc(50% - var(--cta-w) / 2);  /* left edge stays put — the button grows to the right */
  top: 114.54cqw;               /* button's position in the card art */
  width: var(--cta-w);
  height: calc(8.95cqw + 1px);
  transform: translateY(-0.5px) scale(1);
  transform-origin: calc(var(--cta-w) / 2) 50%;  /* scale around the label's centre, so the text stays put */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000180;
  border-radius: 999px;
  font-family: 'PP Neue Montreal', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 3.74cqw;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-cta--wide {
  --cta-w: calc(31.1cqw + 1px);
  --cta-grow: 0px; /* "coming soon!" has nowhere to go yet: no arrow, it only enlarges */
}

.project-card.cta-hover .card-cta {
  width: calc(var(--cta-w) + var(--cta-grow));
  transform: translateY(-0.5px) scale(1.1);   /* grows 10% as well as lengthening */
}

/* the label never moves: it stays centred on the button's resting length */
.cta-label {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cta-w);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow circle (same colour as the button's text). It's pinned to the button's right
   end, so while the button grows it rides along with a constant margin, fading in.
   Leaving: it fades out quickly in place (it counter-slides exactly as far as the
   shrinking end moves, so it doesn't travel). */
.cta-arrow {
  --cta-arrow-size: 7.2cqw;      /* 32 design px */
  position: absolute;
  right: 0.72cqw;                /* ~3 design px margin */
  top: 50%;
  width: var(--cta-arrow-size);
  height: var(--cta-arrow-size);
  margin-top: calc(var(--cta-arrow-size) / -2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(var(--cta-grow));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s ease;
}

/* the circle itself: pops open from a dot with a little bounce, and shrinks
   away on leave (same as the footer "with me!" button's arrow) */
.cta-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.cta-arrow img {
  position: relative;   /* sits on top of the circle */
  width: 52%;
  height: auto;
  display: block;
}

.project-card.cta-hover .cta-arrow {
  opacity: 1;
  transform: translateX(0);
  /* entering: jump to the pinned spot at once, then just ride the growing edge */
  transition: transform 0s, opacity 0.35s ease 0.05s;
}
.project-card.cta-hover .cta-arrow::before {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

/* Intro reveal: canvas that draws the black + blue ripple and cuts the growing hole */
.reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.intro-screen.is-canvas-reveal {
  background: transparent;
}

.intro-screen.is-canvas-reveal::before {
  display: none;
}


/* Keep this page on screen until the next page is ready to draw (no blank flash
   between the homepage and project pages) */
@view-transition {
  navigation: auto;
}

/* Arriving from a project page: the splash starts covering the screen */
.arrive-wipe #work-wipe-overlay {
  transform: none;
  pointer-events: all !important;
}

/* Nav links ("work" / "who"): medium weight at rest; Xanh Mono italic on hover
   (same font as "zhang" in the wordmark — free Google Font, no credit needed) */
.nav-hover-italic {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: 400;
}

/* Cursor dot fades out while the mouse is outside the browser window */
.cursor-dot.is-away {
  opacity: 0 !important;
}


/* Everything inside the porthole — blurred by JS as section 3 covers it.
   Sits just below the frame (.sky-border-top, z-index 18). */
.section-2-contents {
  position: absolute;
  inset: 0;
  z-index: 17;
  pointer-events: none;
}

/* The blur: one overlay above the aquarium (below the frame) that blurs
   whatever is behind it. JS grows its blur from ~0 to 12px as section 3
   covers the aquarium. It's always on (at 0.01px when idle) so it never has
   to be set up mid-scroll. */
.section-2-blur {
  position: absolute;
  inset: 0;
  z-index: 17;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0.01px);
  backdrop-filter: blur(0.01px);
}


/* Copy of .sky-container + #blackCover inside the section 2 layer (see index.html).
   The sky is redrawn by JS on a small canvas (1/8 size) and stretched to fill the
   screen — a soft gradient looks the same, and redrawing it is ~64× cheaper. */
.section-2-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.section-2-backdrop-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.section-2-backdrop-black {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0;
}

/* Hero layers switched fully off once scrolled past (they're transparent by
   then anyway) so they stop using graphics memory. See setHeroActive().
   (.scaling-rig is a canvas picture now, so hiding/showing it is always safe.) */
body.hero-offscreen .scaling-rig,
body.hero-offscreen .hero-peek-layer,
body.hero-offscreen .hero-halo,
body.hero-offscreen .hero-orbit,
body.hero-offscreen .hero-star,
body.hero-offscreen .hero-fish-layer,
body.hero-offscreen .hero-text-layer {
  visibility: hidden !important;
}

.work-footer-gradient {
  visibility: hidden; /* shown by JS once the work section arrives */
}

/* Section 2 switched off while the hero fully covers it (top of the page) */
body.section2-offscreen .section-2-wrapper {
  visibility: hidden !important;
}

/* Work nav pills: number only; the name appears (and the pill springs wider)
   when hovered or selected. main.js sets each pill's width. */
.work-nav-pill {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.work-nav-pill .pill-num,
.work-nav-pill .pill-name { flex-shrink: 0; }

/* the project number: same font as the numbers in the "work" dropdown menu */
.work-nav-pill .pill-num {
  font-family: 'HafferXH', monospace;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.work-nav-pill .pill-name {
  margin-left: 0.55em;          /* room between the number and the name */
  opacity: 0;
  transition: opacity 0.12s ease;
}
.work-nav-pill.is-open .pill-name {
  opacity: 1;
  transition: opacity 0.25s ease 0.06s;
}

/* Solid black stitched onto the bottom of the section 2 frame too, so no gap
   ever opens between the frame and section 3 (which would show the blue aquarium). */
.section-2-wrapper > .sky-border-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 2vh);
  height: 60vh;
  background: #000000;
  pointer-events: none;
}

/* Solid black stitched onto the top of the section 2 frame, so its top edge is
   never visible while it rises in (overlaps 2vh into the frame's own black band
   to hide the image's thin see-through edge). */
.section-2-wrapper > .sky-border-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2vh);
  height: 120vh;
  background: #000000;
  pointer-events: none;
}

/* ================================
   LIVE PROJECT CARD (built in HTML instead of a flat image) — experimental
   Laid out in the card's design units: the Figma frame is 447 × 584, so
   --u = 1 design px, scaled to whatever size the carousel shows the card.
   ================================ */
@font-face {                       /* same file the work dropdown's numbers use */
  font-family: 'HafferXH';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/HafferXHMono-TRIAL-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer XH Mono';
  src: url('../fonts/HafferXHMono-TRIAL-SemiBold.otf') format('opentype'); /* TRIAL font: local testing only */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.circular-carousel .project-card--live {
  background: none !important;
}

.pc-card {
  --u: calc(100cqw / 447);
  --pc-bg: #D2ABFF;
  --pc-bg-rgb: 210 171 255;   /* same colour, for the bottom fade */
  --pc-tag: #C496F8;
  --pc-cat-w: 159;            /* category tag width (design px) */
  --pc-ink: #000180;
  position: absolute;
  left: 0;
  top: calc((133.333cqw - 584 * var(--u)) / 2); /* centred in the 3:4 card box, like the old image */
  width: calc(447 * var(--u));
  height: calc(584 * var(--u));
  border-radius: calc(20 * var(--u));
  overflow: hidden;              /* clipping mask: nothing spills past the rounded card */
  /* the same rounded clip again as a clip-path: Chrome keeps applying this one even
     while something inside is animating (the rounded overflow clip alone could
     briefly drop, showing the corners filled) */
  clip-path: inset(0 round calc(20 * var(--u)));
  background: var(--pc-bg);
  color: var(--pc-ink);
  text-align: center;
  pointer-events: none;
}

.pc-tags {
  position: absolute;
  top: calc(45 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: calc(1 * var(--u));
}

.pc-tag {
  height: calc(29.5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-tag);
  font-size: calc(15.4 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.pc-date {
  width: calc(50.8 * var(--u));
  border-radius: 999px;
  font-family: 'Haffer XH Mono', monospace;
  font-weight: 600;
}

.pc-category {
  width: calc(var(--pc-cat-w) * var(--u));
  border-radius: calc(4 * var(--u));
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.pc-asterisk {
  position: absolute;
  top: calc(93.8 * var(--u));
  transform: rotate(-12.8deg); /* = 12.8° in Figma (Figma measures rotation the opposite way) */
  left: calc(209 * var(--u));
  width: calc(28.8 * var(--u));
  height: calc(29.4 * var(--u));
  fill: var(--pc-ink);
}

.pc-title {
  position: absolute;
  top: calc(133.5 * var(--u));
  left: calc(-3.9 * var(--u)); /* optical nudge: tight letter-spacing shifts the centred word right */
  right: 0;
  margin: 0;
  font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: calc(75 * var(--u));
  letter-spacing: -0.07em;
  line-height: 1;
}

.pc-desc {
  position: absolute;
  top: calc(228.5 * var(--u));
  left: 0;
  right: 0;
  margin: 0;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: calc(21.7 * var(--u));
}

.pc-graphic {
  position: absolute;
  width: calc(515 * var(--u));
  height: auto;
  display: block;
}

.pc-graphic--back  { left: calc(-29.25 * var(--u)); top: calc(307.25 * var(--u)); }
.pc-graphic--front { left: calc(-1 * var(--u));     top: calc(339 * var(--u)); }

/* bottom of the card: blur that ramps in, then the card colour washing over it */
.pc-fade-color {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* rounded like the card's own bottom corners: Chrome sometimes briefly stops
     trimming the card's corners while its photo animates, and this (see-through)
     layer then showed as filled-in square corners */
  border-radius: 0 0 calc(20 * var(--u)) calc(20 * var(--u));
  top: calc(425 * var(--u));
}

/* Progressive blur: the blur really gets stronger toward the bottom. Four copies of
   the graphic, blurred 1 → 2 → 4 → 8 design px, each fading into the next down the
   card (474u → 546u). Fixed blur amounts, so nothing is recalculated while the
   carousel moves (a masked backdrop-filter lost its soft edge whenever it moved). */
.pc-sharp,
.pc-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pc-blur-1 .pc-graphic { filter: blur(calc(1 * var(--u))); }
.pc-blur-2 .pc-graphic { filter: blur(calc(2 * var(--u))); }
.pc-blur-3 .pc-graphic { filter: blur(calc(4 * var(--u))); }
.pc-blur-4 .pc-graphic { filter: blur(calc(8 * var(--u))); }

/* Each stronger step fades in over the one before it and stays — it never fades
   back out, so the layers never thin out mid-handover (that showed as light bands). */
.pc-blur-1 { -webkit-mask-image: linear-gradient(to bottom, transparent calc(474 * var(--u)), #000 calc(492 * var(--u)));
                     mask-image: linear-gradient(to bottom, transparent calc(474 * var(--u)), #000 calc(492 * var(--u))); }
.pc-blur-2 { -webkit-mask-image: linear-gradient(to bottom, transparent calc(492 * var(--u)), #000 calc(510 * var(--u)));
                     mask-image: linear-gradient(to bottom, transparent calc(492 * var(--u)), #000 calc(510 * var(--u))); }
.pc-blur-3 { -webkit-mask-image: linear-gradient(to bottom, transparent calc(510 * var(--u)), #000 calc(528 * var(--u)));
                     mask-image: linear-gradient(to bottom, transparent calc(510 * var(--u)), #000 calc(528 * var(--u))); }
.pc-blur-4 { -webkit-mask-image: linear-gradient(to bottom, transparent calc(528 * var(--u)), #000 calc(546 * var(--u)));
                     mask-image: linear-gradient(to bottom, transparent calc(528 * var(--u)), #000 calc(546 * var(--u))); }

.pc-fade-color {
  /* card colour: 80% at the bottom edge, tapering to 0% toward the top */
  background: linear-gradient(to bottom, rgb(var(--pc-bg-rgb) / 0) 8%, rgb(var(--pc-bg-rgb) / 0.8) 100%);
}

/* --- deep24: same card, lilac-grey, the photo seen through a big circle --- */
.pc-card--deep24 {
  --pc-bg: #EFEDF8;
  --pc-bg-rgb: 239 237 248;
  --pc-tag: #DCD4FE;
  --pc-cat-w: 172;
  --circle-r: 204.26;           /* circle radius (design px); animated on hover */
}
/* the photo, cut out by a circle (centre 223.65, 521.59 on the card, matched to
   the original card art). It's shown 8% larger than in the original (scaled
   around the circle's centre) so the hover bounce, which briefly overshoots the
   circle, never runs past the photo's edges. */
.pc-card--deep24 .pc-graphic--circle {
  width: calc(450.36 * var(--u));      /* 417 × 1.08 */
  left: calc(-0.61 * var(--u));
  top: calc(65.8 * var(--u));           /* nudged 6 design px lower inside the circle */
  clip-path: circle(calc(var(--circle-r) * var(--u)) at calc(224.26 * var(--u)) calc(455.8 * var(--u)));
}

/* --- knouri: same card, green, the photo seen through a "stadium" (a rectangle
   with round ends: 365.5 × 202.5 design px, centred 223.25, 418.75 on the card,
   matched to the original card art) --- */
.pc-card--knouri {
  --pc-bg: #D1FFA4;
  --pc-bg-rgb: 209 255 164;
  --pc-tag: #B0EC74;
  --pc-cat-w: 160;
  --shape-k: 1;                 /* shape size: 1 = normal, 0 = gone; animated on hover */
}
.pc-card--knouri .pc-graphic--shape {
  /* photo: 447 × 323 — trimmed to exactly the card's width */
  width: calc(447 * var(--u));
  left: 0;
  top: calc(248 * var(--u));
  /* The stadium is a stencil (an SVG rounded rectangle, 365.54 × 202.5 with fully
     round ends) centred on (223.25, 170.75) in the photo, and scaled by --shape-k.
     (It used to be a rounded clip-path, which Chrome could briefly draw as a plain
     rectangle as the hover bounce settled, faintly showing the photo's corners.) */
  --stadium: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 365.54 202.5' preserveAspectRatio='none'><rect width='365.54' height='202.5' rx='101.25' ry='101.25'/></svg>");
  -webkit-mask-image: var(--stadium);
          mask-image: var(--stadium);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(365.54 * var(--shape-k) * var(--u)) calc(202.5 * var(--shape-k) * var(--u));
          mask-size: calc(365.54 * var(--shape-k) * var(--u)) calc(202.5 * var(--shape-k) * var(--u));
  -webkit-mask-position: calc((223.25 - 182.77 * var(--shape-k)) * var(--u)) calc((170.75 - 101.25 * var(--shape-k)) * var(--u));
          mask-position: calc((223.25 - 182.77 * var(--shape-k)) * var(--u)) calc((170.75 - 101.25 * var(--shape-k)) * var(--u));
}

/* knouri's bottom wash starts a little higher than the template's (matched to its original art) */
.pc-card--knouri .pc-fade-color {
  top: calc(400 * var(--u));
  background: linear-gradient(to bottom, rgb(var(--pc-bg-rgb) / 0) 0%, rgb(var(--pc-bg-rgb) / 0.8) 87%, rgb(var(--pc-bg-rgb) / 0.8) 100%);
}

/* --- pent up: same card, pink, with the laptop (432 × 258 design px, matched to the original art) --- */
.pc-card--pentup {
  --pc-bg: #F5B7FF;
  --pc-bg-rgb: 245 183 255;
  --pc-tag: #E7A0FE;
  --pc-cat-w: 148;
}
.pc-card--pentup .pc-graphic--back {
  width: calc(432 * var(--u));
  left: calc(8 * var(--u));
  top: calc(326 * var(--u));
}
/* the "!" is the only part of the title that leans right; it stays on the same baseline */
.pc-bang {
  display: inline-block;
  margin-left: -0.05em;   /* tucked in close to "up" */
  transform: rotate(12deg);          /* physically tilted to the right… */
  transform-origin: 50% 88%;         /* …pivoting on its dot, so it stays on the baseline */
}

/* --- settlyfe: same card, blue, with two tilted phones --- */
.pc-card--settlyfe {
  --pc-bg: #83E7FF;
  --pc-bg-rgb: 131 231 255;
  --pc-tag: #66C8F2;
  --pc-cat-w: 117;
}
/* phones: 198 design px wide, tilted ~27° (positions matched to the original card art) */
.pc-card--settlyfe .pc-graphic {
  width: calc(198 * var(--u));
  transform-origin: center center;
}
.pc-card--settlyfe .pc-graphic--back  { left: calc(-9.75 * var(--u)); top: calc(302.5 * var(--u));  rotate: 26.9deg; }  /* both nudged 12 design px left of the original art */
.pc-card--settlyfe .pc-graphic--front { left: calc(215.5 * var(--u)); top: calc(315.25 * var(--u)); rotate: 26.8deg; }

/* Hero scroll cue: a small down arrow hanging just below the bottom-right text
   block (absolutely placed, so the text itself doesn't move). Bobbing is driven
   by the hero's 30fps ticker in main.js. */
.id-scroll-arrow {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: 16px;
  color: var(--accent-pink);
}

.id-scroll-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Cards (and the images inside them) can't be dragged out as links/pictures —
   dragging them spins the carousel instead */
.circular-carousel .project-card,
.circular-carousel .project-card * {
  -webkit-user-drag: none;
  user-select: none;
}


/* ============================================================
   WHO + PLAY PANELS — open over the homepage (see js/panels.js)
   ============================================================ */
.home-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;            /* above the page, below the nav (10000) and the splash */
  background: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.home-panel.is-open { visibility: visible; }

/* --- who --- */
.home-panel--who { --card-bg: #F5F5F7; --text: #1D1D1F; }
.who-wrapper {
  width: 100%;
  min-height: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.home-panel--who .who-card {
  background: var(--card-bg);
  border-radius: 30px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.home-panel--who .who-photo-col {
  padding: 32px 16px 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-panel--who .who-photo {
  height: 85%;
  width: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  display: block;
}
.home-panel--who .who-text-col {
  padding: 32px 80px 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  position: relative;
}
.home-panel--who .who-title {
  font-family: 'Instrument Serif', serif;
  font-size: 84px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0 0 4px;
}
.home-panel--who .who-title em { font-style: italic; }
.home-panel--who .who-text-col p {
  font-family: 'PP Neue Montreal', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
.home-panel--who .hl {
  background-color: rgba(185, 228, 240, 0.65);
  padding: 1px 3px;
  border-radius: 3px;
}
.home-panel--who .who-link { color: var(--text); text-decoration: underline; }
.home-panel--who .who-signature-img {
  position: absolute;
  bottom: 32px;
  right: 40px;
  height: 130px;
  width: auto;
  display: block;
}
@media (max-width: 800px) {
  .who-wrapper { height: auto; padding: 12px; }
  .home-panel--who .who-card { grid-template-columns: 1fr; height: auto; padding-top: 70px; }
  .home-panel--who .who-photo-col { padding: 16px; }
  .home-panel--who .who-photo { height: auto; width: 100%; max-height: 60vh; }
  .home-panel--who .who-text-col { padding: 8px 20px 170px; }
  .home-panel--who .who-title { font-size: 56px; }
}

/* ================================
   PLAY PANEL (mockup) — inside the homepage
   ================================ */

.home-panel--play {
  --play-blue: #3136E6;
  --sidebar-w: clamp(260px, 25vw, 420px);
}


/* ---------- sidebar (fixed) ---------- */
.play-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  color: var(--play-blue);
  /* periwinkle fading to lilac, with a faint diamond pattern */
  background:
    repeating-conic-gradient(from 45deg, rgba(255, 255, 255, 0.10) 0 25%, transparent 0 50%) 0 0 / 34px 34px,
    linear-gradient(to bottom, #A9A9F6 0%, #BCB3F5 50%, #E7D6F7 100%);
  z-index: 5;
}

.play-title-wrap { position: relative; }

.play-star {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 64%;
  top: 50%;
  margin-top: -64px;
  color: #F4EE8C;
  animation: play-star-spin 30s linear infinite;
  pointer-events: none;
}
@keyframes play-star-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .play-star { animation: none; } }

.play-title {
  position: relative;
  font-family: 'Unbounded', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.play-subtitle {
  position: relative;
  margin-top: 6px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
}

.play-cats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.play-cat {
  font-family: 'Zen Old Mincho', serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--play-blue);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.play-cat:hover { transform: translateX(4px); }
.play-cat.is-active::before { content: ">> "; }

/* ---------- work (right) ---------- */
.play-main {
  margin-left: var(--sidebar-w);
  padding: 130px 56px 120px;
}

.play-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1100px;
}

.play-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* staggered: the left column starts lower, under the heading */
.play-col--left { padding-top: 80px; }
.play-col--right { will-change: transform; }

.play-heading {
  margin-bottom: -16px;
  font-family: 'Zen Old Mincho', serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--play-blue);
}

/* placeholder pieces (swap for real images later) */
.play-piece {
  width: 100%;
  border-radius: 14px;
  background: var(--piece-bg, #ECEBF7);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(49, 54, 230, 0.55);
  animation: play-piece-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes play-piece-in {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- smaller screens: sidebar on top, one column ---------- */
@media (max-width: 800px) {
  .play-sidebar {
    position: relative;
    width: auto;
    padding: 110px 20px 32px;
    gap: 28px;
  }
  .play-cats { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .play-main { margin-left: 0; padding: 32px 16px 80px; }
  .play-grid { grid-template-columns: 1fr; gap: 20px; }
  .play-col { gap: 20px; }
  .play-col--left { padding-top: 0; }
  .play-col--right { transform: none !important; }
}

/* PLAY is still being built: hidden on the live site, shown on the local
   preview (js/favicon.js adds .show-play on localhost). To launch it, remove
   the line marked PLAY SWITCH in js/favicon.js. */
html:not(.show-play) .nav-link-item[data-default="play"] { display: none; }

/* cursor colour per panel — like each page has its own */
html.panel-who .cursor-dot { background-color: #83E7FF; }            /* who: light blue, as on the old who page */
html.panel-who .cursor-dot.active { opacity: 1; }
/* the panels are white: "multiply" keeps the bubble's colour and dark text stays crisp under it */
html.panel-who .cursor-dot.is-blob,
html.panel-who .cursor-dot.is-blob.is-pill,
html.panel-play .cursor-dot.is-blob,
html.panel-play .cursor-dot.is-blob.is-pill { opacity: 0.7; mix-blend-mode: multiply; }
html.panel-play .cursor-dot { background-color: #3136E6; }           /* play: the sidebar's blue */