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

/* Big Caslon FB for special characters like apostrophes */
@font-face {
  font-family: 'Big Caslon FB';
  src: url('https://melodysz.github.io/baubles/fonts/big-caslon-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@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;
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: normal;
  font-size: 1.6rem;
  color: #0313E4;
  letter-spacing: -0.05em;
}



/* 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;
}


.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: 18px;
  height: 18px;
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: 1;
}

.cursor-dot.is-blob {
  width: var(--blob-w, 48px);
  height: var(--blob-h, 48px);
  border-radius: 50%;
  opacity: 0.4;
  mix-blend-mode: normal;
}

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

.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;
    background: transparent !important;
  width: 100vw;
  height: 100vh;
  z-index: 15;
  pointer-events: none;
  opacity: 1;
  will-change: transform, opacity;
/*   filter: saturate(1.1); */
  overflow: visible;
}


/* Light rays - perfectly overlapping */
.light-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  height: 115%;
  object-fit: contain;
  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 {
  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;
  will-change: transform;
}


/* 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.png');
  background-size: cover;  /* Your original setting */
  background-position: center center;
  background-repeat: no-repeat;
  
  pointer-events: none;
  opacity: 1;
  z-index: 18;
}

/* 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.png'); 
}

#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;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1320px, calc(100vw - 80px));
  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: 400;
  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;
}



/* --- 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;

  
  background: black;

  -webkit-mask-image: url('https://melodysz.github.io/baubles/mask.png');
  mask-image: url('https://melodysz.github.io/baubles/mask.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.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: -20%;
  background-image: url('https://melodysz.github.io/baubles/hero/water%20lines.png');
  background-size: 30%;
  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{
  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 {
  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;
  will-change: transform, opacity;
}


.third-section {
  position: relative;
  z-index: 50;
  min-height: 110vh;
  padding-bottom: 200px;
  justify-content: center;
background: linear-gradient(to bottom, #000000 30%, transparent 100%);
  color: #F9F5EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible !important;
  transform: translateZ(0);
/*   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-weight: 300; 
  font-size: 50px;  /* Kept at 50px to match third section */
  line-height: 0.9;
  letter-spacing: -0.03em; 
  margin: 0; 
  pointer-events: none; 
}

.footer-tagline .italic-text {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  text-transform: none;
  font-size: 50px;  /* Same as helvetica */
  letter-spacing: -0.1em; /* -10% */
}

.footer-tagline .helvetica-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 50px;
  text-transform: lowercase;
}

.footer-tagline .caslon-text {
  font-family: 'Big Caslon FB', 'Playfair Display', serif;
  font-style: italic;
  font-size: 50px;
  letter-spacing: -0.1em;
}
.block { display: block; }
.footer-anim { display: block; transform: translateY(40px); opacity: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }
.reveal .footer-anim { transform: translateY(0); opacity: 1; }
.btn-touch { display: inline-block; 
  border: 1px solid #E7A0FE; border-radius: 999px; padding: 0.8rem 2.4rem; font-family: 'PP Neue Montreal', sans-serif; font-size: 1.3rem; text-decoration: none; color: #E7A0FE !important;
 background-color: transparent; transition: background-color 0.3s ease, color 0.3s ease; pointer-events: auto !important;   pointer-events: auto !important; }
.btn-touch:hover { background-color: #E7A0FE !important; 
  color: #000000 !important; }
.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.png'); }
.fish-layout     { background-image: url('https://melodysz.github.io/baubles/fish/layouttxt.png'); }
.fish-narrative  {background-image: url('https://melodysz.github.io/baubles/fish/narrativetxt.png'); }
.fish-product    { background-image: url('https://melodysz.github.io/baubles/fish/producttxt.png'); }
.fish-ui         { background-image: url('https://melodysz.github.io/baubles/fish/uitxt.png'); }
.fish-ux         { background-image: url('https://melodysz.github.io/baubles/fish/uxtxt.png'); }
.fish-visual     { background-image: url('https://melodysz.github.io/baubles/fish/visualtxt.png'); }
.fish-branding   { background-image: url('https://melodysz.github.io/baubles/fish/brandingtxt.png'); }

/* 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-size: 18px;
  line-height: 1;
  color: #00CEFF;
/*   letter-spacing: -0.05em; */
  text-transform: none;
  text-align: center;
}

.sky-subtitle-new .helvetica-text {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 18px !important;
  text-transform: lowercase;
}

.sky-subtitle-new .xanh-regular {
  font-family: 'Xanh Mono', monospace;
  font-style: normal;
  font-size: 18px !important;
}

.sky-subtitle-new .italic-text {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-size: 18px !important;
  letter-spacing: -0.1em;
}



.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.png'); 
  top: 45%; 
  left: 5%; 
}

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

.fish-tang { 
  background-image: url('https://melodysz.github.io/baubles/fish/bluetang.png'); 
  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.png');
  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: 70;
  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);
  color: #2584EE;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: lowercase;
/*   letter-spacing: 0.03em; */
  padding: 0.4rem 1.1rem;
  border-radius: 6px;
  opacity: 0;
  cursor: default;
  white-space: nowrap;
}

.work-nav-pill.active {
  border-radius: 30px;
  background: rgba(0, 110, 233, 0.8);
  color: #F5B7FF;
}

.work-nav-pill,
.work-nav-pill.active {
  transition: background 0.3s ease, color 0.3s ease, border-radius 0.1s ease !important;
}

.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;
}