html, body { 
    overflow-x: hidden;
 }

/* Page background for portfolio */
body.portfolio-page { 
    background:#FBFCFF; 
}

main.portfolio{
  display: block !important;     /* override global `.portfolio { display:flex }` */
  width: 100%;
}

.portfolio-header{ order: -1; flex-basis: 100%; }
.portfolio-content{ order: 0; }

/* Keep the hero on top and full width */
.portfolio-header.hero{
  width: 100%;
  margin: 0;
}

/* Give the hero a tiny top buffer if your navbar is fixed */
:root{ --nav-h: 64px; }
.portfolio-header.hero.hero-invert{
  padding-top: max(0px, calc(var(--nav-h) * 0.25));
}

/* Full-viewport hero */
.hero-invert{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The dark strip behind the text */
.hero-invert .hero-band{
  position: absolute;
  left: 0; 
  right: 0;
  height: clamp(140px, 36vh, 420px);
  background: #212121;
}

/* Big headline */
.hero-invert .headline{
  position: relative;
  z-index: 1;                  /* sits above the band */
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .01em;
  font-size: clamp(5rem, 15vw, 30rem);
  margin: 0;
  /* reveal() needs transparent text so the bg-clip shows */
  color: transparent;
}

/* OVERRIDE reveal colors only in this hero:
   fill the glyphs with #FBFCFF as the animation plays */
.hero-invert .reveal{
  background: linear-gradient(90deg, #FBFCFF 0 100%) no-repeat;
  background-size: 0% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

/* Projects */
/* Full-viewport sections, vertical scroll */
.portfolio-section{
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* media | copy */
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 6vw, 80px);
  position: relative;
}

/* Alternate layout: swap columns */
.portfolio-section.alt{
  grid-template-columns: 1fr 1.1fr; /* copy | media */
}
.portfolio-section.alt .portfolio-media{ order: 2; }
.portfolio-section.alt .portfolio-copy{ order: 1; }

/* Media side */
.portfolio-media{
  position: relative;
  isolation: isolate;  /* so bubbles sit behind image only */
}
.portfolio-media img{
  position: relative;
  z-index: 0;   
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  transform: perspective(1200px) rotateX(0.5deg) rotateY(-2deg);
}

/* Simple whimsical bubbles */
/* .portfolio-media::before,
.portfolio-media::after{
  content:"";
  position:absolute;
  z-index:-1;
  background:#9BC13B;
  opacity:.9;
  border-radius:50%;
  filter: blur(0.5px);
}
.portfolio-media::before{
  width: clamp(80px, 12vw, 180px);
  height: clamp(80px, 12vw, 180px);
  left: -6%;
  top: -8%;
}
.portfolio-media::after{
  width: clamp(32px, 6vw, 90px);
  height: clamp(32px, 6vw, 90px);
  right: -4%;
  bottom: -6%;
}

@keyframes bubblePulse {
  0%   { transform: scale(1);    opacity: .9; }
  100% { transform: scale(1.12); opacity: .9; }
}
.portfolio-media::before{
  animation: bubblePulse 2.5s ease-in-out infinite alternate;
}
.portfolio-media::after{
  animation: bubblePulse 1.2s ease-in-out infinite alternate;
  animation-delay: .5s;
} */

.portfolio-description{
  max-width: 700px;
}
.portfolio-title{
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  color:#9BC13B;
  margin: 0 0 .6rem;
  position: relative;
}

.portfolio-description a {
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  color:#9BC13B;
  margin: 0 0 .6rem;
  position: relative;
  text-decoration: none;
}

.portfolio-description a:hover,
.portfolio-description a:focus {
  color: #FF6426;
}

.portfolio-description p{
  color:#212121;
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  margin: 1rem 0 1.4rem;
}


/* Bubble base */
.portfolio-media.bubbles {
  /* Default positions & sizes (percentages are relative to figure box).
     You can override per project below. */
  --b1-x: 8%;   --b1-y: 10%; --b1-size: clamp(80px, 12vw, 170px);
  --b2-x: 92%;  --b2-y: 85%; --b2-size: clamp(36px, 6vw, 90px);
  --b3-x: 78%;  --b3-y: 8%;  --b3-size: clamp(48px, 7vw, 120px);
  --bubble-color: #9BC13B;
  --bubble-blur: 0.5px;
  --bubble-opacity: .9;
}

.portfolio-media .bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bubble-color);
  opacity: var(--bubble-opacity);
  filter: blur(var(--bubble-blur));
  z-index: 0;
  animation: bubblePulse 2.8s ease-in-out infinite alternate;
}

/* Map each bubble to its variables */
.portfolio-media .b1 { --x: var(--b1-x); --y: var(--b1-y); --size: var(--b1-size); }
.portfolio-media .b2 { --x: var(--b2-x); --y: var(--b2-y); --size: var(--b2-size); animation-duration: 2s; animation-delay: .25s; }
.portfolio-media .b3 { --x: var(--b3-x); --y: var(--b3-y); --size: var(--b3-size); animation-duration: 3.2s; animation-delay: .6s; }

@keyframes bubblePulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.12); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .portfolio-media .bubble { 
    animation: none !important; 
  }
}

/* Tether Traverse */
.portfolio-media.bubbles.tether {
  --b1-x: 6%;   --b1-y: 12%; --b1-size: clamp(90px, 13vw, 180px);
  --b2-x: 95%;  --b2-y: 88%; --b2-size: clamp(40px, 7vw, 110px);
  --b3-x: 72%;  --b3-y: 6%;  --b3-size: clamp(52px, 8vw, 130px);
}

/* Staci's Promise */
.portfolio-media.bubbles.staci {
  --b1-x: 12%;  --b1-y: 18%; --b1-size: clamp(80px, 11vw, 160px);
  --b2-x: 84%;  --b2-y: 10%; --b2-size: clamp(34px, 6vw, 90px);
  --b3-x: 60%;  --b3-y: 80%; --b3-size: clamp(46px, 7vw, 120px);
}

/* Atlas Quest */
.portfolio-media.bubbles.atlas {
  --b1-x: 4%;   --b1-y: 8%;  --b1-size: clamp(86px, 12vw, 170px);
  --b2-x: 42%;  --b2-y: 86%; --b2-size: clamp(36px, 6vw, 90px);
  --b3-x: 90%;  --b3-y: 9%;  --b3-size: clamp(50px, 7vw, 120px);
}

/* Flagship */
.portfolio-media.bubbles.flagship {
  --b1-x: 10%;  --b1-y: 14%; --b1-size: clamp(88px, 12vw, 175px);
  --b2-x: 92%;  --b2-y: 80%; --b2-size: clamp(42px, 6.5vw, 100px);
  --b3-x: 72%;  --b3-y: 12%; --b3-size: clamp(52px, 7.5vw, 125px);
}

/* Antipode */
.portfolio-media.bubbles.antipode {
  --b1-x: 7%;   --b1-y: 11%; --b1-size: clamp(84px, 11.5vw, 165px);
  --b2-x: 90%;  --b2-y: 90%; --b2-size: clamp(40px, 6vw, 95px);
  --b3-x: 65%;  --b3-y: 15%; --b3-size: clamp(52px, 7vw, 120px);
}

/* Stochasticity */
.portfolio-media.bubbles.stochasticity {
  --b1-x: 8%;   --b1-y: 16%; --b1-size: clamp(88px, 12vw, 170px);
  --b2-x: 78%;  --b2-y: 8%;  --b2-size: clamp(38px, 6vw, 95px);
  --b3-x: 94%;  --b3-y: 88%; --b3-size: clamp(50px, 7vw, 120px);
}

/* Optional: smaller bubbles on narrow screens */
@media (max-width: 960px) {
  .portfolio-media.bubbles {
    --b1-size: clamp(60px, 16vw, 120px);
    --b2-size: clamp(28px, 10vw, 80px);
    --b3-size: clamp(36px, 12vw, 100px);
  }
}

/* Tech badges */
.tech{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem .7rem;
  list-style:none;
  padding:0;
  margin:0;
}
.tech li{
  font-weight: 800;
  font-size: .95rem;
  color:#212121;
  background:#FF6426;
  padding: .5rem .8rem;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08) inset;
}

/* ===== Scroll reveal for project media & copy ===== */
.portfolio-media img{
  opacity: 0;
  transform: scale(.985);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
.portfolio-media img.is-visible{
  opacity: 1;
  transform: scale(1);
}

/* copy starts slightly below; goes to 0 when visible; slides up a touch when exiting */
.portfolio-description{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
.portfolio-description.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.portfolio-description.is-exiting{
  /* tiny nudge upward as it leaves */
  transform: translateY(-10px);
  opacity: 0;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .portfolio-media img,
  .portfolio-description{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .portfolio-section,
  .portfolio-section.alt{
    grid-template-columns: 1fr;
  }
  .portfolio-media{ order:1; }
  .portfolio-description{ order:2; }
  .portfolio-media img{
    transform: none;
  }
  .portfolio-title{
    text-align:center;
  }
  .portfolio-title::after{
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio-description{ 
    margin-inline: auto;
    text-align: justify;
  }
}

@media (max-width: 768px) {
    .hero-invert {
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
  }

  .hero-invert .hero-band {
    width: 100%;
    height: 150px; /* Let it size by text */
    padding: 0.5em 0; /* top/bottom spacing */
    box-sizing: border-box;
  }

  .hero-invert .headline {
    width: 100%;
    margin: 0;
    text-align: center;
    display: block;
    white-space: nowrap;
    font-size: clamp(2.25rem, 14vw, 7.5rem);
  }
}