@font-face {
  font-family: "Michroma";
  src: url("../assets/fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {

      font-family: "MebiyesDemo";
      src: url("../assets/fonts/MebiyesDemo-mLqYx.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --cream: #fff8df;
      --ink: #231f20;
      --yellow: #FFFA5A;
      --next-text: #231f20;
      --accent: #74f2a3;
      --accent-soft: #8af3d0;
      --accent-mint: #95efc4;
      --grain-mult: 1;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      overflow-x: hidden;
      background: var(--cream);
      font-family: Arial, Helvetica, sans-serif;
      color: var(--ink);
    }

    body.is-locked {
      overflow: hidden;
    }

    body.animation-complete {
      background: var(--yellow);
    }

    .intro-bg-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      mix-blend-mode: hard-light;
    }
    .intro-bg-buildings {
      position: absolute;
      inset: -110%;
      width: 320%;
      height: 320%;
      object-fit: contain;
      z-index: 1;
      opacity: 1;
      pointer-events: none;
    }
    .intro-bg-corner {
      position: absolute;
      right: -24%;
      bottom: -24%;
      width: 46vw;
      max-width: 620px;
      height: auto;
      z-index: 2;
      pointer-events: none;
    }
    .intro-splatter {
      position: absolute;
      right: -6%;
      top: -10%;
      width: 16vw;
      max-width: 220px;
      height: auto;
      z-index: 2;
      pointer-events: none;
    }
    .intro-boombox {
      position: absolute;
      left: -16%;
      top: 50%;
      transform: translateY(-50%) rotate(-6deg);
      width: 46vw;
      max-width: 600px;
      height: auto;
      z-index: 3;
      pointer-events: none;
    }
    .intro-radar {
      position: absolute;
      left: -34%;
      top: -42%;
      width: 40vw;
      max-width: 540px;
      height: auto;
      z-index: 1;
      opacity: 0.75;
      pointer-events: none;
    }
    .intro-moire-filter {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 50;
      mix-blend-mode: color-burn;
      opacity: calc(1 * var(--grain-mult, 1));
      pointer-events: none;
      transition: opacity 300ms ease;
    }
    body.animation-complete .intro-moire-filter {
      opacity: 0;
    }
    .intro-bg-shot--ceiling {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    .intro-droplet {
      position: absolute;
      width: clamp(48px, 6vw, 84px);
      z-index: 2;
      pointer-events: none;
    }
    .intro-droplet--tl { top: 16%; left: 22%; }
    .intro-droplet--br { bottom: 18%; right: 24%; transform: rotate(-10deg); }
    .intro-bg-shot--boombox {
      position: absolute;
      bottom: -4%;
      left: -4%;
      width: 30vw;
      height: 30vw;
      max-width: 400px;
      max-height: 400px;
      transform: rotate(-4deg);
      z-index: 1;
    }
    .intro-scroll-arrow {
      position: absolute;
      left: 62.2%;
      top: 100%;
      margin-top: 4px;
      width: clamp(48px, 6vw, 84px);
      transform: translateX(-50%);
      z-index: 2;
      animation: introArrowBob 1.8s ease-in-out infinite;
    }
    @keyframes introArrowBob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(10px); }
    }
    body.animation-complete .intro-scroll-arrow,
    body.reveal-playing .intro-scroll-arrow {
      opacity: 0;
      transition: opacity 400ms ease;
    }

    .intro-section {
      position: relative;
      height: 100vh;
      background: var(--cream);
      overflow: hidden;
    }

    body.animation-complete .intro-section {
      background: var(--yellow);
    }

    .blob-stage {
      position: fixed;
      inset: 0;
      z-index: 5;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: var(--cream);
      isolation: isolate;
      z-index: 5;
      transition:
        opacity 700ms ease,
        visibility 700ms ease;
    }

    body.animation-complete .blob-stage {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }


    .goo-filter {
      position: fixed;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .gooey-lava {
      position: absolute;
      inset: 0;
      z-index: 10;
      filter: url("#lava-goo");
      transform: translateZ(0);
    }

    /*
      Real lava-lamp behaviour:
      The blobs do NOT freeze when the scroll motion starts.
      JS keeps adding drift/squish/rotation on top of the scroll path,
      while the goo filter makes nearby blobs visually intercept/combine.
    */
    .blob {
      transition: border-radius 420ms ease;
    }

    body.reveal-playing .gooey-lava,
    body.animation-complete .gooey-lava {
      filter: url("#lava-goo");
    }

    .blob {
      position: absolute;
      background: var(--ink);
      border: 5px solid var(--yellow);
      border-radius: 999px;
      transform-origin: center;
      will-change: transform, left, top, border-radius, opacity;
    }

    .main {
      width: var(--w);
      height: var(--h);
      left: var(--start-x);
      top: var(--start-y);
      border-radius: var(--base-radius);
    }

    .bubble {
      width: var(--size);
      height: var(--size);
      left: var(--start-x);
      top: var(--start-y);
      border-radius: 50%;
    }

    .drop {
      width: var(--size);
      height: var(--size);
      left: var(--start-x);
      top: var(--start-y);
      border-radius: 50%;
      opacity: 0;
    }

    /* Starting screenshot positions */
    .tl-main {
      --w: 205px;
      --h: 175px;
      --start-x: -110px;
      --start-y: -58px;
      --base-radius: 37% 50% 58% 42% / 43% 37% 63% 57%;
    }

    .tl-big {
      --size: 78px;
      --start-x: 110px;
      --start-y: 35px;
    }

    .tl-small {
      --size: 38px;
      --start-x: 58px;
      --start-y: 94px;
    }

    .bl-solo {
      --size: 78px;
      --start-x: 22px;
      --start-y: calc(100vh - 86px);
    }

    .br-main {
      --w: 210px;
      --h: 180px;
      --start-x: calc(100vw - 110px);
      --start-y: calc(100vh - 120px);
      --base-radius: 53% 47% 36% 64% / 40% 56% 44% 60%;
    }

    .br-big {
      --size: 62px;
      --start-x: calc(100vw - 158px);
      --start-y: calc(100vh - 96px);
    }

    .br-small {
      --size: 22px;
      --start-x: calc(100vw - 98px);
      --start-y: calc(100vh - 134px);
      border-width: 4px;
    }

    .drop-1 {
      --size: 46px;
      --start-x: 34px;
      --start-y: 52px;
    }

    .drop-2 {
      --size: 34px;
      --start-x: calc(100vw - 80px);
      --start-y: calc(100vh - 70px);
    }

    .drop-3 {
      --size: 28px;
      --start-x: 55px;
      --start-y: calc(100vh - 70px);
    }

    .drop-4 {
      --size: 58px;
      --start-x: calc(100vw - 120px);
      --start-y: 44px;
    }




    /* Yellow sequence layer */
    .reveal-layer {
      position: fixed;
      inset: 0;
      z-index: 12;
      pointer-events: none;
      visibility: hidden;
      opacity: 1;
      background: transparent;
    }

    .reveal-blob {
      position: absolute;
      left: 50%;
      top: 54%;
      width: 34vmax;
      height: 34vmax;
      background: var(--yellow);
      border-radius: 48% 52% 56% 44% / 45% 58% 42% 55%;
      transform: translate(-50%, -50%) scale(0);
      transform-origin: center;
      will-change: transform, border-radius;
    }

    body.reveal-playing .reveal-layer,
    body.animation-complete .reveal-layer {
      visibility: visible;
      background: transparent;
    }

    body.reveal-playing .reveal-blob,
    body.animation-complete .reveal-blob {
      animation:
        yellowBlobReveal 1550ms cubic-bezier(.76, 0, .24, 1) forwards,
        yellowBlobMorph 900ms ease-in-out infinite;
    }

    body.reverse-playing .reveal-layer {
      visibility: visible;
      opacity: 1;
      background: transparent;
    }

    body.reverse-playing .reveal-blob {
      animation:
        yellowBlobShrink 1050ms cubic-bezier(.76, 0, .24, 1) forwards,
        yellowBlobMorph 900ms ease-in-out infinite;
    }

    body.reveal-finished .reveal-layer {
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 520ms ease,
        visibility 0s 520ms;
    }

    @keyframes yellowBlobReveal {
      0% {
        transform: translate(-50%, -50%) scale(0);
      }

      18% {
        transform: translate(-50%, -50%) scale(0.28);
      }

      55% {
        transform: translate(-50%, -50%) scale(1.7);
      }

      100% {
        transform: translate(-50%, -50%) scale(6.4);
      }
    }

    @keyframes yellowBlobShrink {
      0% {
        transform: translate(-50%, -50%) scale(6.4);
      }

      45% {
        transform: translate(-50%, -50%) scale(1.7);
      }

      82% {
        transform: translate(-50%, -50%) scale(0.28);
      }

      100% {
        transform: translate(-50%, -50%) scale(0);
      }
    }

    @keyframes yellowBlobMorph {
      0%, 100% {
        border-radius: 48% 52% 56% 44% / 45% 58% 42% 55%;
      }

      33% {
        border-radius: 60% 40% 46% 54% / 52% 41% 59% 48%;
      }

      66% {
        border-radius: 42% 58% 63% 37% / 39% 62% 38% 61%;
      }
    }


    .landing-svg-wrap {
      z-index: 2;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: min(75vw, 720px);
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 1;
      transition:
        opacity 420ms ease,
        transform 420ms ease;
    }

    .landing-center-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    body:not(.idle-floating) .landing-svg-wrap {
      opacity: 0.78;
      transform: translate(-50%, -50%) scale(0.96);
    }

    body.reveal-playing .landing-svg-wrap,
    body.animation-complete .landing-svg-wrap,
    body.reverse-playing .landing-svg-wrap {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.9);
    }

    @media (max-width: 700px) {
      .landing-svg-wrap {
        width: min(90vw, 520px);
      }
    }

    .progress-ui {
      position: fixed;
      left: 50%;
      bottom: 26px;
      z-index: 30;
      width: min(280px, 70vw);
      transform: translateX(-50%);
      pointer-events: none;
      opacity: var(--ui-opacity, 0.7);
      transition: opacity 400ms ease;
    }

    body.reveal-playing .progress-ui,
    body.animation-complete .progress-ui {
      opacity: 0;
    }

    .scroll-hint {
      color: var(--ink);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .progress-track {
      width: 100%;
      height: 3px;
      background: rgba(35, 31, 32, 0.18);
      overflow: hidden;
      border-radius: 999px;
    }

    .progress-fill {
      width: calc(var(--progress, 0) * 100%);
      height: 100%;
      background: var(--ink);
      border-radius: inherit;
      transition: width 120ms linear;
    }

    .next-section {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--yellow);
      color: var(--next-text);
      position: relative;
      z-index: 1;
      padding: 48px;
      overflow: hidden;
    }

    .next-content {
      position: relative;
      z-index: 2;
      width: min(900px, 90vw);
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 900ms ease 420ms,
        transform 900ms ease 420ms;
    }

    body.animation-complete .next-content {
      opacity: 1;
      transform: translateY(0);
    }


    .next-content h1,
    .content-inner h1,
    h1 {
      font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
      font-size: clamp(48px, 10vw, 128px);
      line-height: 0.85;
      letter-spacing: -0.035em;
      text-transform: uppercase;
      font-weight: 400;
    }


    .next-content p {
      margin-top: 24px;
      max-width: 540px;
      font-size: clamp(16px, 2vw, 22px);
      line-height: 1.45;
      opacity: 0.72;
    }

    .restart {
      margin-top: 32px;
      display: inline-flex;
      border: 1px solid rgba(35, 31, 32, 0.35);
      background: transparent;
      color: var(--ink);
      padding: 13px 18px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 11px;
      cursor: pointer;
    }


    /*
      Idle lava-lamp motion:
      Before the user scrolls, the first blobs gently float/morph in place forever.
      As soon as scrolling starts, the class is removed so the scroll animation can take over cleanly.
    */
    body.idle-floating .blob-stage .main {
      animation:
        idleMainFloat 6.8s ease-in-out infinite,
        idleMainMorph 5.4s ease-in-out infinite;
    }

    body.idle-floating .blob-stage .bubble {
      animation:
        idleBubbleFloat 5.4s ease-in-out infinite,
        idleBubbleMorph 4.6s ease-in-out infinite;
    }

    body.idle-floating .blob-stage .tl-main {
      animation-delay: -0.4s, -1.2s;
    }

    body.idle-floating .blob-stage .br-main {
      animation-delay: -2.1s, -0.6s;
    }

    body.idle-floating .blob-stage .tl-big {
      animation-delay: -1.7s, -0.2s;
    }

    body.idle-floating .blob-stage .tl-small {
      animation-delay: -2.8s, -1.1s;
    }

    body.idle-floating .blob-stage .bl-solo {
      animation-delay: -0.9s, -2.2s;
    }

    body.idle-floating .blob-stage .br-big {
      animation-delay: -2.4s, -1.5s;
    }

    body.idle-floating .blob-stage .br-small {
      animation-delay: -1.1s, -2.7s;
    }

    @keyframes idleMainFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
      }

      25% {
        transform: translate3d(10px, -12px, 0) rotate(2deg) scale(1.035, 0.97);
      }

      50% {
        transform: translate3d(-7px, 9px, 0) rotate(-1.6deg) scale(0.98, 1.045);
      }

      75% {
        transform: translate3d(7px, 6px, 0) rotate(1deg) scale(1.02, 0.985);
      }
    }

    @keyframes idleBubbleFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      35% {
        transform: translate3d(8px, -10px, 0) scale(1.06, 0.94);
      }

      70% {
        transform: translate3d(-6px, 8px, 0) scale(0.96, 1.05);
      }
    }

    @keyframes idleMainMorph {
      0%, 100% {
        border-radius: 48% 52% 41% 59% / 43% 38% 62% 57%;
      }

      33% {
        border-radius: 37% 63% 58% 42% / 50% 44% 56% 50%;
      }

      66% {
        border-radius: 57% 43% 35% 65% / 37% 60% 40% 63%;
      }
    }

    @keyframes idleBubbleMorph {
      0%, 100% {
        border-radius: 50%;
      }

      50% {
        border-radius: 46% 54% 51% 49% / 53% 45% 55% 47%;
      }
    }

    @media (max-width: 700px) {
      .tl-main {
        --w: 190px;
        --h: 164px;
        --start-x: -120px;
      }

      .tl-big {
        --size: 70px;
        --start-x: 105px;
      }

      .br-main {
        --w: 190px;
        --h: 164px;
        --start-x: calc(100vw - 102px);
      }

      .reveal-blob {
        width: 42vmax;
        height: 42vmax;
      }
    }
  
    /* SECOND YELLOW SECTION COMPOSITION START */
    .next-section {
      min-height: 100vh;
      display: block;
      background: var(--yellow);
      color: var(--next-text);
      position: relative;
      z-index: 1;
      padding: 0;
      overflow: hidden;
    }

    .second-yellow-composition {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: var(--yellow);
      overflow: hidden;
    }

    .second-logo {
      position: absolute;
      left: 1.8vw;
      top: 2.4vh;
      width: min(34vw, 510px);
      min-width: 260px;
      z-index: 2;
      line-height: 0;
    }

    .second-stack {
      position: absolute;
      left: -0.4vw;
      top: 28.5vh;
      width: min(76vw, 980px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(6px, 0.55vw, 10px);
      z-index: 2;
    }

    .second-label {
      display: block;
      line-height: 0;
      max-width: none;
      filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.02));
    }

    .second-label--ui-top { width: min(43vw, 540px); }
    .second-label--graphic-top { width: min(55vw, 690px); }
    .second-label--concept { width: min(68vw, 845px); }
    .second-label--graphic-bottom { width: min(56vw, 690px); }
    .second-label--ui-bottom { width: min(43vw, 540px); }

    .second-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .second-model-wrap {
      position: absolute;
      right: 3.8vw;
      bottom: 2.4vh;
      width: min(27vw, 420px);
      height: min(59vh, 560px);
      z-index: 3;
      pointer-events: auto;
    }

    .second-model {
      width: 100%;
      height: 100%;
      --poster-color: transparent;
      background: transparent;
      filter: grayscale(1) brightness(1.18) contrast(0.9);
    }

    .second-model::part(default-progress-bar),
    .second-model::part(default-progress-mask),
    .second-model::part(default-ar-button),
    .second-model::part(default-exit-webxr-button) {
      display: none;
    }

    @media (max-width: 1100px) {
      .second-logo { width: min(40vw, 440px); }
      .second-stack {
        top: 31vh;
        width: min(82vw, 860px);
      }
      .second-model-wrap {
        width: min(30vw, 340px);
        height: min(54vh, 500px);
        right: 1.8vw;
      }
    }

    @media (max-width: 700px) {
      .second-logo {
        width: min(70vw, 320px);
        top: 4vh;
        left: 4vw;
      }
      .second-stack {
        top: 35vh;
        width: 92vw;
        gap: 6px;
      }
      .second-label--ui-top,
      .second-label--ui-bottom { width: min(74vw, 470px); }
      .second-label--graphic-top,
      .second-label--graphic-bottom { width: min(92vw, 620px); }
      .second-label--concept { width: min(96vw, 760px); }
      .second-model-wrap {
        right: 50%;
        bottom: 2vh;
        transform: translateX(50%);
        width: min(44vw, 240px);
        height: min(36vh, 300px);
      }
    }
    /* SECOND YELLOW SECTION COMPOSITION END */

  
    /* TIGHT SECOND-SECTION STACK + EMBEDDED 360 MODEL FIX */
    .second-stack {
      gap: 0 !important;
      row-gap: 0 !important;
      line-height: 0 !important;
    }

    .second-label {
      display: block !important;
      line-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .second-label + .second-label {
      margin-top: -2px !important;
    }

    .second-label svg,
    .second-svg {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
    }

    .second-model-wrap {
      right: 3.2vw !important;
      bottom: 2vh !important;
      width: min(30vw, 470px) !important;
      height: min(66vh, 640px) !important;
      z-index: 5 !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .second-model {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      background: transparent !important;
      --poster-color: transparent;
      filter: grayscale(1) brightness(1.18) contrast(0.9);
    }

    .second-yellow-composition {
      isolation: isolate;
    }

    @media (max-width: 700px) {
      .second-label + .second-label {
        margin-top: -1px !important;
      }

      .second-model-wrap {
        right: 50% !important;
        bottom: 2vh !important;
        transform: translateX(50%) !important;
        width: min(50vw, 260px) !important;
        height: min(40vh, 330px) !important;
      }
    }


/* ── TEXT LOAD-IN ─────────────────────────────────────────────
   Every text element rises + fades on first paint (nav, intro) or when its
   section enters view (work grid, cards). Opacity/transform only. */
@keyframes textRise {
  0%   { opacity: 0; transform: translateY(10px) scale(.55); }
  55%  { opacity: 1; transform: translateY(0) scale(1.09); }
  78%  { transform: translateY(0) scale(.965); }
  100% { opacity: 1; transform: none; }
}
.tl-anim { animation: textRise 0.62s cubic-bezier(.4,.05,.35,1) both; }

/* first paint: the scroll hint keeps its own --ui-opacity handling and the
   nav orbs keep their infinite cornerFloat*, so neither gets a load-in here. */

/* work section text */
.projects-section.anim-in .pw-logo,
.projects-section.anim-in .pw-count,
.projects-section.anim-in .pw-toggle,
.projects-section.anim-in .pw-sort {
  animation: textRise 0.62s cubic-bezier(.4,.05,.35,1) both;
}
/* the yellow work cards pop in */
@keyframes pwCardBound {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; transform: scale(1.07); }
  78%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
.projects-section.anim-in .pw-item {
  animation: pwCardBound 0.62s cubic-bezier(.4,.05,.35,1) backwards;
  transform-origin: center center;
}
.projects-section.anim-in .pw-logo   { animation-delay: .05s; }
.projects-section.anim-in .pw-count  { animation-delay: .16s; }
.projects-section.anim-in .pw-toggle { animation-delay: .22s; }
.projects-section.anim-in .pw-sort   { animation-delay: .28s; }
.projects-section.anim-in .pw-item:nth-child(1) { animation-delay: .34s; }
.projects-section.anim-in .pw-item:nth-child(2) { animation-delay: .42s; }
.projects-section.anim-in .pw-item:nth-child(3) { animation-delay: .50s; }
.projects-section.anim-in .pw-item:nth-child(4) { animation-delay: .58s; }
.projects-section.anim-in .pw-item:nth-child(5) { animation-delay: .66s; }
.projects-section.anim-in .pw-item:nth-child(6) { animation-delay: .74s; }
/* hover must not restart the bound-in — it only plays when .anim-in is
   (re-)applied on entering the section */

/* about-me landing text */
.about-section.anim-in .am-about-title,
.about-section.anim-in .am-nav-group {
  animation: textRise 0.62s cubic-bezier(.4,.05,.35,1) both;
}
.about-section.anim-in .am-about-title      { animation-delay: .08s; }
.about-section.anim-in .am-nav-group--daisy  { animation-delay: .22s; }
.about-section.anim-in .am-nav-group--head   { animation-delay: .32s; }
.about-section.anim-in .am-nav-group--branch { animation-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .tl-anim,
  .projects-section.anim-in .pw-logo,
  .projects-section.anim-in .pw-count,
  .projects-section.anim-in .pw-toggle,
  .projects-section.anim-in .pw-sort,
  .projects-section.anim-in .pw-item,
  .about-section.anim-in .am-about-title,
  .about-section.anim-in .am-nav-group { animation: none !important; }
}

/* CORNER BLOB NAVBAR START */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: url("../assets/img/fig-moire.png") 0 0 / 900px auto repeat;
  mix-blend-mode: color-burn;
  opacity: calc(1 * var(--grain-mult, 1));
  transform: translateZ(0);
  contain: strict;
}
.blob-corner-navbar {
  position: fixed;
  z-index: 2;
  top: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 42px);
  width: clamp(150px, 16vw, 245px);
  aspect-ratio: 1 / 1;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  transform-origin: top right;
  transition: transform 620ms cubic-bezier(.5,0,.2,1), opacity 620ms ease;
}

/* auto-retract: phase 1 — orbs collapse into the home centre */
.blob-corner-navbar.is-collapsing .corner-nav-orb {
  animation: none !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.12) !important;
  opacity: 0 !important;
  transition: left 260ms cubic-bezier(.5,0,.2,1),
              top 260ms cubic-bezier(.5,0,.2,1),
              transform 260ms cubic-bezier(.5,0,.2,1),
              opacity 220ms ease !important;
}
/* auto-retract: phase 2 — slide the whole navbar off the right edge */
.blob-corner-navbar.is-retracted {
  right: -34vw !important;
  opacity: 0 !important;
  transition: transform 360ms cubic-bezier(.5,0,.2,1),
              right 360ms cubic-bezier(.5,0,.2,1),
              opacity 320ms ease !important;
}
.blob-corner-navbar.is-retracted .corner-nav-orb,
.blob-corner-navbar.is-retracted .corner-nav-home {
  pointer-events: none;
}

/* resume: replay the retract in reverse — the bar fades + slides back in
   while the orbs grow out of the centre to their resting positions */
.blob-corner-navbar.is-waking {
  transition: transform 460ms cubic-bezier(.2,0,.15,1),
              right 460ms cubic-bezier(.2,0,.15,1),
              opacity 380ms ease !important;
}
.blob-corner-navbar.is-waking .corner-nav-orb {
  animation: none !important;
  opacity: 1;
  transition: left 460ms cubic-bezier(.2,0,.15,1),
              top 460ms cubic-bezier(.2,0,.15,1),
              transform 460ms cubic-bezier(.2,0,.15,1),
              opacity 400ms ease !important;
}

.corner-nav-orb--case::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background-image: radial-gradient(circle, #fff 30%, transparent 32%);
  background-size: 18% 18%;
  background-position: 0 0;
  mix-blend-mode: plus-lighter;
  opacity: 0.22;
  pointer-events: none;
  z-index: 3;
}
.corner-nav-orb,
.corner-nav-home {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform, filter;
}

.corner-nav-orb img,
.corner-nav-home img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* ── About-section colour shift: cross-fade the green orb variants ──
   The green <img> sits exactly over the base <img>; we fade it in when
   the navbar's true current section is ABOUT. */
.corner-nav-green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 600ms ease;
}
.blob-corner-navbar[data-current="ABOUT"] .corner-nav-green { opacity: 1; }
.blob-corner-navbar[data-current="ABOUT"] .corner-nav-base { opacity: 0; transition: opacity 600ms ease; }
.corner-nav-base { transition: opacity 600ms ease; }

/* All outer circles stay BEHIND the central circle */
.corner-nav-orb {
  z-index: 1;
  transition:    transform 330ms cubic-bezier(.2,.9,.2,1.22),
    filter 330ms ease,
    opacity 250ms ease;
}

.corner-nav-home {
  width: 58%;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  transition:
    transform 330ms cubic-bezier(.2,.9,.2,1.16),
    filter 330ms ease;
}

.corner-nav-orb--about {
  width: 40%;
  left: 7%;
  top: 5%;
}

.corner-nav-orb--proj {
  width: 38%;
  right: 4%;
  top: 14%;
}

L%;
  bottom: 6%;
}

/* Scale keeps center position, so it expands without moving away */
.corner-nav-orb:hover,
.corner-nav-orb:focus-visible,
.corner-nav-orb.is-active {
  transform: scale(1.13);
}

.corner-nav-home:hover,
.corner-nav-home:focus-visible {
  transform: translate(-50%, -50%) scale(1.045);
}

.corner-nav-label {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  transform: translate(-50%, -50%);
  font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
  font-size: clamp(9px, 1vw, 16px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ececec;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.32),
    0 0 1px rgba(255,255,255,0.85);
  transition:
    opacity 160ms ease,
    transform 220ms ease;
}

.corner-nav-label.is-changing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
}

.blob-corner-navbar[data-section="HOME"] .corner-nav-home,
.blob-corner-navbar[data-section="ABOUT"] .corner-nav-orb--about,
.blob-corner-navbar[data-section="WORK"] .corner-nav-orb--proj,
.blob-corner-navbar[data-section="CASE"] .corner-nav-orb--case {
}

@media (prefers-reduced-motion: no-preference) {
  .corner-nav-orb--about {
    animation: cornerFloatA 6.5s ease-in-out infinite;
  }

  .corner-nav-orb--proj {
    animation: cornerFloatB 7.1s ease-in-out infinite;
  }

  .corner-nav-orb--case {
    animation: cornerFloatC 6.8s ease-in-out infinite;
  }

  .corner-nav-home {
    animation: cornerFloatHome 7.5s ease-in-out infinite;
  }

  .corner-nav-orb:hover,
  .corner-nav-orb:focus-visible,
  .corner-nav-orb.is-active,
  .corner-nav-home:hover,
  .corner-nav-home:focus-visible {
    animation-play-state: paused;
  }
}

@keyframes cornerFloatA {
  0%, 100% { translate: 0 0; }
  50% { translate: -2px 3px; }
}

@keyframes cornerFloatB {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px -2px; }
}

@keyframes cornerFloatC {
  0%, 100% { translate: 0 0; }
  50% { translate: 2px 3px; }
}

@keyframes cornerFloatHome {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (max-width: 700px) {
  .blob-corner-navbar {
    width: clamp(126px, 31vw, 165px);
    top: 14px;
    right: 14px;
  }

  .corner-nav-label {
    font-size: clamp(12px, 3.5vw, 18px);
  }
}

/* Navbar active-section indication: keeps the current section looking hovered */
.blob-corner-navbar[data-section="ABOUT"] .corner-nav-orb--about,
.blob-corner-navbar[data-section="WORK"] .corner-nav-orb--proj,
.blob-corner-navbar[data-section="CASE"] .corner-nav-orb--case {
  transform: scale(1.13);
  z-index: 4;
}

.blob-corner-navbar[data-section="HOME"] .corner-nav-home {
  transform: translate(-50%, -50%) scale(1.035);
}

.blob-corner-navbar[data-section="ABOUT"] .corner-nav-orb--about,
.blob-corner-navbar[data-section="WORK"] .corner-nav-orb--proj,
.blob-corner-navbar[data-section="CASE"] .corner-nav-orb--case,
.blob-corner-navbar[data-section="HOME"] .corner-nav-home {
  animation-play-state: paused;
}

/* CORNER BLOB NAVBAR END */



/* ABOUT YELLOW DETAILS START */
.next-section.about-section {
  min-height: 100vh;
  display: block;
  background: var(--yellow);
  color: var(--ink);
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
}

.about-yellow-content {
  position: relative;
  height: 100vh;
  width: 100%;
  background: var(--yellow);
  overflow: hidden;
  padding: clamp(22px, 3.2vw, 42px) clamp(28px, 4.2vw, 64px);
}

.about-logo {
  position: absolute;
  left: clamp(28px, 4vw, 58px);
  top: clamp(22px, 3vw, 38px);
  width: min(34vw, 500px);
  min-width: 250px;
  height: auto;
  display: block;
  z-index: 2;
}

.about-list {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: clamp(170px, 19vh, 220px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  max-width: min(980px, 75vw);
  padding-bottom: clamp(24px, 4vh, 42px);
}

.about-item {
  margin: 0;
}

.about-item h2 {
  margin: 0;
  font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
  font-size: clamp(38px, 5.35vw, 74px);
  line-height: 0.82;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.about-item p {
  margin: clamp(8px, 1vh, 12px) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(20px, 2.9vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .about-logo {
    width: min(48vw, 390px);
  }

  .about-list {
    max-width: 92vw;
    padding-top: clamp(150px, 18vh, 195px);
    padding-bottom: 28px;
  }

  .about-item h2 {
    font-size: clamp(34px, 8.2vw, 62px);
    white-space: normal;
  }

  .about-item p {
    font-size: clamp(20px, 5vw, 34px);
  }
}

@media (max-width: 600px) {
  .about-yellow-content {
    padding: 24px 22px;
    height: 100vh;
  }

  .about-logo {
    position: relative;
    left: auto;
    top: auto;
    width: min(70vw, 300px);
    min-width: 0;
    margin-bottom: 42px;
  }

  .about-list {
    height: calc(100vh - 130px);
    padding-top: 0;
    padding-bottom: 18px;
    max-width: 100%;
  }

  .about-item h2 {
    font-size: clamp(31px, 10vw, 48px);
  }

  .about-item p {
    font-size: clamp(18px, 6vw, 26px);
  }
}
/* ABOUT YELLOW DETAILS END */



/* NAVBAR SHAPE PATCH START */
.blob-corner-navbar {
  width: clamp(150px, 16vw, 245px);
}

.corner-nav-home {
  width: 58%;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
}

.corner-nav-orb {
  z-index: 2;
}

.corner-nav-orb--about {
  width: 43%;
  left: 3%;
  top: 3%;
}

.corner-nav-orb--proj {
  width: 39%;
  right: 2%;
  top: 12%;
}

/* CASE circle reverted closer to original reference position */
.corner-nav-orb--case {
  width: 37%;
  left: 8%;
  bottom: 5%;
}

.corner-nav-label {
  font-size: clamp(9px, 1vw, 16px);
}

@media (max-width: 700px) {
  .corner-nav-label {
    font-size: clamp(8px, 2.4vw, 12px);
  }

  .corner-nav-orb--case {
    left: 8%;
    bottom: 5%;
  }
}
/* NAVBAR SHAPE PATCH END */



/* WORK PROJECTS SECTION START */
.projects-section {
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.projects-content {
  position: relative;
  min-height: 100vh;
  padding: clamp(24px, 3vw, 42px) clamp(30px, 3.8vw, 58px);
  overflow: hidden;
}

.projects-logo {
  position: absolute;
  left: clamp(24px, 3.4vw, 48px);
  top: clamp(22px, 3vw, 36px);
  width: min(32vw, 430px);
  min-width: 250px;
  height: auto;
  z-index: 2;
}

.work-intro {
  position: relative;
  z-index: 2;
  padding-top: clamp(160px, 21vh, 230px);
  max-width: min(980px, 82vw);
}

.work-intro h1 {
  margin: 0 0 clamp(40px, 7vh, 72px);
  font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
  font-size: clamp(72px, 13vw, 170px);
  line-height: 0.7;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
}

.work-intro p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 1.35vw, 25px);
  line-height: 1.45;
  color: #111;
}

.work-slider-label {
  position: absolute;
  left: clamp(30px, 3.8vw, 58px);
  top: clamp(58vh, 60vh, 63vh);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 1.45vw, 26px);
  line-height: 1;
  color: #111;
}

.work-slider-icon {
  position: absolute;
  right: clamp(30px, 3.8vw, 58px);
  top: clamp(57vh, 59vh, 62vh);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.18em;
  color: #111;
  transform: rotate(0deg);
}

.project-card-row {
  position: absolute;
  left: clamp(28px, 3vw, 48px);
  right: clamp(22px, 3vw, 44px);
  bottom: -7.5vh;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: clamp(18px, 2vw, 34px);
  z-index: 2;
}

.project-card {
  position: relative;
  height: clamp(420px, 47vh, 570px);
  background: var(--yellow);
  overflow: hidden;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ink);
}

.project-number {
  position: absolute;
  left: 50%;
  top: clamp(82px, 14vh, 140px);
  width: 78%;
  max-width: 240px;
  height: auto;
  transform: translateX(-50%);
  display: block;
}

.project-card--two .project-number,
.project-card--three .project-number {
  width: 82%;
  max-width: 260px;
}

.project-card--four .project-number {
  width: 78%;
  max-width: 245px;
}

.project-meta {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(22px, 2.2vh, 34px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1;
  color: #111;
}

.project-card h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Michroma", Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.5vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.07em;
  font-weight: 400;
  color: #111;
  text-transform: uppercase;
}

.project-card::after,
.project-card::before {
  content: "";
  position: absolute;
  bottom: -58px;
  width: 18px;
  height: 92px;
  background: var(--yellow);
  border-radius: 999px;
}

.project-card::after {
  right: 28px;
}

.project-card::before {
  right: 58px;
}

@media (max-width: 1000px) {
  .projects-content {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .project-card-row {
    width: max-content;
    right: auto;
    grid-template-columns: repeat(4, 260px);
  }
}

@media (max-width: 700px) {
  .projects-logo {
    width: min(66vw, 310px);
    min-width: 0;
  }

  .work-intro {
    padding-top: 145px;
  }

  .work-intro h1 {
    font-size: clamp(64px, 24vw, 118px);
    margin-bottom: 32px;
  }

  .work-intro p {
    font-size: 15px;
  }

  .work-slider-label,
  .work-slider-icon {
    top: 55vh;
  }

  .project-card-row {
    bottom: -5vh;
    grid-template-columns: repeat(4, 230px);
  }

  .project-card {
    height: 390px;
  }
}
/* WORK PROJECTS SECTION END */



/* CONSISTENT SECTION TITLE SVG START */
.about-logo,
.projects-logo {
  width: min(34vw, 430px) !important;
  min-width: 230px !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 700px) {
  .about-logo,
  .projects-logo {
    width: min(68vw, 310px) !important;
    min-width: 0 !important;
  }
}
/* CONSISTENT SECTION TITLE SVG END */



/* WORK SECTION SIZE TWEAK START */
.projects-content {
  height: 100vh;
  min-height: 100vh;
  padding: clamp(24px, 3vw, 42px) clamp(30px, 3.8vw, 58px);
  overflow: hidden;
}

.work-intro {
  padding-top: clamp(155px, 18.5vh, 205px) !important;
  max-width: min(980px, 82vw);
}

.work-intro h1 {
  margin-bottom: clamp(42px, 7vh, 70px) !important;
}

.work-intro p {
  max-width: 980px;
}

/* extra air between description and cards, like the reference */
.work-slider-label {
  top: clamp(55.5vh, 58vh, 60vh) !important;
}

.work-slider-icon {
  top: clamp(54.5vh, 57vh, 59vh) !important;
}

/* card row starts lower and no longer crashes into the paragraph */
.project-card-row {
  bottom: -7vh !important;
  gap: clamp(22px, 2vw, 34px) !important;
}

.project-card {
  height: clamp(405px, 45.5vh, 545px) !important;
  padding: clamp(26px, 2.55vw, 38px) clamp(28px, 2.8vw, 42px) clamp(34px, 3.2vw, 48px) !important;
}

/* numbers should sit with the same breathing room as the reference */
.project-number {
  top: clamp(92px, 13.5vh, 132px) !important;
  width: 70% !important;
  max-width: 218px !important;
}

.project-card--two .project-number,
.project-card--three .project-number {
  width: 73% !important;
  max-width: 238px !important;
}

.project-card--four .project-number {
  width: 71% !important;
  max-width: 226px !important;
}

.project-meta {
  margin-bottom: clamp(22px, 2.1vh, 32px) !important;
}

/* thinner, longer, more reference-like yellow drips */
.project-card::after,
.project-card::before {
  bottom: -66px !important;
  width: 16px !important;
  height: 104px !important;
  border-radius: 999px !important;
}

.project-card::after {
  right: 24px !important;
}

.project-card::before {
  right: 54px !important;
}

.project-card--one::before {
  display: none;
}

@media (min-width: 1200px) {
  .project-card-row {
    bottom: -7.8vh !important;
  }

  .project-card {
    height: 46.5vh !important;
  }
}

@media (max-width: 1000px) {
  .project-card-row {
    bottom: -6vh !important;
    grid-template-columns: repeat(4, 260px) !important;
  }

  .project-number {
    width: 70% !important;
  }
}

@media (max-width: 700px) {
  .projects-content {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .work-intro {
    padding-top: 132px !important;
  }

  .work-slider-label,
  .work-slider-icon {
    top: 54vh !important;
  }

  .project-card-row {
    bottom: -5.5vh !important;
    grid-template-columns: repeat(4, 230px) !important;
  }

  .project-card {
    height: 380px !important;
  }

  .project-number {
    top: 82px !important;
    max-width: 180px !important;
  }
}
/* WORK SECTION SIZE TWEAK END */



/* TALL PROJECT CARD PATCH START */

/* Give the work section enough room for tall cards */
.projects-section {
  min-height: 122vh !important;
  overflow: visible !important;
}

.projects-content {
  min-height: 122vh !important;
  height: 122vh !important;
  overflow: visible !important;
}

/* More vertical air before the cards */
.work-slider-label {
  top: 58vh !important;
}

.work-slider-icon {
  top: 57vh !important;
}

/* Cards are tall like the reference and begin lower */
.project-card-row {
  bottom: -12vh !important;
  align-items: stretch !important;
  gap: clamp(26px, 2.25vw, 42px) !important;
}

.project-card {
  height: clamp(620px, 70vh, 820px) !important;
  min-height: 620px !important;
  padding: clamp(44px, 4vw, 70px) clamp(44px, 4vw, 72px) clamp(50px, 4.6vw, 76px) !important;
}

/* Numbers: smaller, more padding, centered in the upper area */
.project-number {
  top: clamp(145px, 18vh, 220px) !important;
  width: 68% !important;
  max-width: 330px !important;
}

.project-card--one .project-number {
  width: 66% !important;
  max-width: 315px !important;
}

.project-card--two .project-number {
  width: 70% !important;
  max-width: 335px !important;
}

.project-card--three .project-number {
  width: 70% !important;
  max-width: 335px !important;
}

.project-card--four .project-number {
  width: 68% !important;
  max-width: 325px !important;
}

/* Text sits lower, like the example */
.project-meta {
  margin-bottom: clamp(28px, 3vh, 42px) !important;
  font-size: clamp(12px, 0.95vw, 16px) !important;
}

.project-card h2 {
  font-size: clamp(22px, 1.65vw, 31px) !important;
}

/* Tall yellow drips under the card */
.project-card::after,
.project-card::before {
  bottom: -112px !important;
  width: 24px !important;
  height: 156px !important;
  border-radius: 999px !important;
}

.project-card::after {
  right: 34px !important;
}

.project-card::before {
  right: 74px !important;
}

/* First card in the example has one strong visible drip */
.project-card--one::before {
  display: none !important;
}

@media (min-width: 1300px) {
  .project-card {
    height: 73vh !important;
  }

  .project-card-row {
    bottom: -13vh !important;
  }
}

@media (max-width: 1000px) {
  .projects-section,
  .projects-content {
    min-height: 118vh !important;
    height: 118vh !important;
  }

  .project-card-row {
    bottom: -10vh !important;
    grid-template-columns: repeat(4, 300px) !important;
  }

  .project-card {
    height: 610px !important;
    min-height: 610px !important;
  }

  .project-number {
    top: 150px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 700px) {
  .projects-section,
  .projects-content {
    min-height: 112vh !important;
    height: 112vh !important;
  }

  .project-card-row {
    bottom: -8vh !important;
    grid-template-columns: repeat(4, 260px) !important;
  }

  .project-card {
    height: 540px !important;
    min-height: 540px !important;
    padding: 34px 34px 48px !important;
  }

  .project-number {
    top: 130px !important;
    width: 68% !important;
  }
}
/* TALL PROJECT CARD PATCH END */





/* PROJECTS LOCKED HANDOFF START */

/*
  About -> Projects should behave like Landing -> About:
  About is fixed/locked, the user scrolls only to play the transition,
  then Projects appears after the blob fully disappears.
*/
body.about-project-lock {
  overflow: hidden;
}

body.about-project-lock .next-section.about-section {
  position: fixed;
  inset: 0;
  z-index: 120;
}

body.about-project-lock .projects-section {
  display: none;
}

/* While the transition plays, the cover stays on top. */
body.about-project-transitioning {
  overflow: hidden;
  background: var(--cream);
}

body.about-project-transitioning .next-section.about-section {
  position: fixed;
  inset: 0;
  z-index: 120;
}

body.about-project-transitioning .projects-section {
  display: none;
}

body.about-project-complete .next-section.about-section {
  position: relative;
}

body.about-project-complete .projects-section {
  display: block;
}

/* Full-screen transition layer */
.about-to-projects-transition {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: transparent;
}

.about-to-projects-transition.is-active {
  visibility: visible;
  opacity: 1;
}

/* When apFinish() uncovers Projects it adds .is-fade so the cover eases out
   instead of popping (and never gets left stuck covering the page). */
.about-to-projects-transition.is-fade {
  transition: opacity 380ms ease;
}

/*
  This is the "background changes to white/cream" moment.
  The full overlay turns cream only when the blob is already covering the screen,
  so Projects can be placed underneath invisibly.
*/
.about-to-projects-transition.is-cream {
  background: var(--cream);
}

.about-to-projects-blob {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 36vmax;
  height: 36vmax;
  background: var(--yellow);
  border-radius: 48% 52% 56% 44% / 45% 58% 42% 55%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  will-change: transform, border-radius, opacity;
}

/* Blob grows first, then deflates, revealing cream/Projects below. */
@keyframes aboutProjectBlobHandoff {
  0% {
    transform: translate(-50%, -50%) scale(0);
    border-radius: 48% 52% 56% 44% / 45% 58% 42% 55%;
  }

  32% {
    transform: translate(-50%, -50%) scale(6.9);
    border-radius: 50%;
  }

  58% {
    transform: translate(-50%, -50%) scale(6.9);
    border-radius: 50%;
  }

  78% {
    transform: translate(-50%, -50%) scale(2.1);
    border-radius: 60% 40% 46% 54% / 52% 41% 59% 48%;
  }

  100% {
    transform: translate(-50%, -50%) scale(0);
    border-radius: 42% 58% 63% 37% / 39% 62% 38% 61%;
  }
}

.about-to-projects-transition.is-handoff .about-to-projects-blob {
  animation:
    aboutProjectBlobHandoff 1450ms cubic-bezier(.76, 0, .24, 1) forwards,
    yellowBlobMorph 900ms ease-in-out infinite;
}
/* PROJECTS LOCKED HANDOFF END */


/* PROJECTS BACKGROUND COVER FIX START */
.projects-section {
  background: var(--cream) !important;
  min-height: 138vh !important;
  overflow: visible !important;
}

.projects-content {
  background: var(--cream) !important;
  min-height: 138vh !important;
  height: 138vh !important;
  overflow: visible !important;
}

.projects-section::before,
.projects-section::after,
.projects-content::before,
.projects-content::after,
.project-card-row::after {
  content: none !important;
}
/* PROJECTS BACKGROUND COVER FIX END */



/* ABOUT SCROLL BRIDGE SAFETY START */
body.about-project-lock,
body.about-project-transitioning {
  overflow: hidden !important;
}

body.about-project-lock .next-section.about-section,
body.about-project-transitioning .next-section.about-section {
  position: fixed !important;
  inset: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* restore normal after the existing handoff completes */
body.about-project-complete .next-section.about-section {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;
}
/* ABOUT SCROLL BRIDGE SAFETY END */



/* PROJECTS TO ABOUT REVERSE HANDOFF START */

/*
  Reverse of About -> Projects:
  while on Projects, scroll up triggers a blob grow/cover,
  About is moved underneath, then the cover fades away.
*/
body.projects-about-reverse-running {
  overflow: hidden !important;
  background: var(--yellow);
}

body.projects-about-reverse-running .about-to-projects-transition {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9600 !important;
  pointer-events: none !important;
  background: var(--cream);
}

body.projects-about-reverse-running .about-to-projects-blob {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--yellow) !important;
  transform: translate(-50%, -50%) scale(0);
  animation:
    projectsAboutBlobGrow 1250ms cubic-bezier(.76, 0, .24, 1) forwards,
    yellowBlobMorph 900ms ease-in-out infinite !important;
}

body.projects-about-yellow-covered .about-to-projects-transition {
  background: var(--yellow) !important;
}

body.projects-about-reverse-done .about-to-projects-transition {
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    opacity 520ms ease,
    visibility 0s 520ms;
}

@keyframes projectsAboutBlobGrow {
  0% {
    transform: translate(-50%, -50%) scale(0);
    border-radius: 42% 58% 63% 37% / 39% 62% 38% 61%;
  }

  42% {
    transform: translate(-50%, -50%) scale(1.7);
    border-radius: 60% 40% 46% 54% / 52% 41% 59% 48%;
  }

  100% {
    transform: translate(-50%, -50%) scale(6.9);
    border-radius: 50%;
  }
}
/* PROJECTS TO ABOUT REVERSE HANDOFF END */







/* REVERSE STOPS AT ABOUT PATCH START */
/* Only used for a 160ms momentum absorber after Projects -> About. */
body.prevent-about-to-landing {
  overscroll-behavior: none;
}
/* REVERSE STOPS AT ABOUT PATCH END */



/* ABOUT UPPER SCROLL UNLOCK CSS START */

/*
  If About is active and the script clears about-project-lock, the page must be able
  to release upward into the original landing reverse handoff.
*/
body:not(.about-project-lock):not(.about-project-transitioning):not(.projects-about-reverse-running):not(.projects-about-yellow-covered) {
  overscroll-behavior-y: auto;
}

/* Do not let stale blockers permanently trap About. */
body.prevent-about-to-landing:not(.projects-about-reverse-running) {
  overscroll-behavior-y: auto;
}
/* ABOUT UPPER SCROLL UNLOCK CSS END */


/* ABOUT TO LANDING HARD FIX CSS START */
body:not(.about-project-lock):not(.about-project-transitioning):not(.projects-about-reverse-running) .next-section.about-section {
  max-height: none;
}
/* ABOUT TO LANDING HARD FIX CSS END */


/* PROJECT ABOUT LANDING GATE PATCH START */
body.block-about-landing-reverse {
  overscroll-behavior-y: none;
}
/* PROJECT ABOUT LANDING GATE PATCH END */


/* ===== WORK CARDS REDESIGN START =====
   DEFAULT  : all 4 cards yellow, crisp black outline, black number, outlined drips.
   ON HOVER : teal mural art + lime-green glow frame reveal, number/text flip white,
              drips turn mint. Drips hang below, so cards must not clip. */

.project-card {
  box-sizing: border-box !important;
  overflow: visible !important;
  background: var(--yellow) !important;
  border: 2.5px solid var(--ink) !important;
  transition: box-shadow 280ms ease, border-color 280ms ease, transform 280ms ease;
}

/* Layering: mural sits above the yellow fill, text above the mural */
.project-card > .project-mural { z-index: 1; }
.project-number,
.project-meta,
.project-card h2 { z-index: 2; }

/* Numbers normalized to solid black so they read on yellow (flip white on hover) */
.project-number {
  filter: brightness(0);
  transition: filter 280ms ease;
}

/* ---- The teal mural art (hidden by default, revealed on hover) ---- */
.project-mural {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  /* Sky-blue -> teal wash with playful organic "doodle" blobs.
     Replace this whole background with a background-image to drop in a real mural. */
  background:
    radial-gradient(42px 52px at 22% 28%, rgba(255,255,255,0.9) 0 38%, transparent 41%),
    radial-gradient(30px 38px at 21% 27%, #4fb6e0 0 60%, transparent 63%),
    radial-gradient(46px 40px at 74% 18%, rgba(123,224,192,0.95) 0 40%, transparent 43%),
    radial-gradient(60px 70px at 86% 62%, rgba(255,255,255,0.55) 0 44%, transparent 47%),
    radial-gradient(50px 50px at 14% 78%, rgba(123,224,192,0.85) 0 42%, transparent 45%),
    radial-gradient(38px 46px at 60% 88%, rgba(255,255,255,0.7) 0 40%, transparent 43%),
    radial-gradient(120% 120% at 30% 12%, #7fe3ef 0%, #4fb6e0 46%, #56c7c0 100%);
  background-repeat: no-repeat;
}

.project-mural::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(118deg, transparent 0 26px, rgba(123,224,192,0.35) 26px 28px),
    repeating-linear-gradient(-46deg, transparent 0 40px, rgba(255,255,255,0.18) 40px 42px);
  mix-blend-mode: soft-light;
  opacity: 0.7;
}

/* Old pseudo-element drips replaced by the gooey .card-drips system below */
.project-card::after,
.project-card::before {
  display: none !important;
}

/* ===== HOVER : reveal the design ===== */
.project-card:hover {
  border-color: #b9f7c8 !important;
  transform: translateY(-8px);
  box-shadow:
    0 0 0 2px #1f2a24,
    0 0 0 7px #c7ff66,
    0 0 40px 8px rgba(199, 255, 102, 0.6) !important;
}

.project-card:hover .project-mural { opacity: 1; }

.project-card:hover .project-number {
  filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(20, 60, 70, 0.35));
}

.project-card:hover .project-meta,
.project-card:hover h2 {
  color: #ffffff !important;
}

/* (drip hover handled in the gooey drip system below) */

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-mural,
  .project-number,
  .project-card::after,
  .project-card::before {
    transition: none !important;
  }
}
/* ---- DRIPPING BOTTOM EDGE ----
   An inline SVG per card whose stroke continues the card's bottom border and
   weaves straight down into crisp finger-drips (right-angle dips). The yellow
   fill covers the CSS border beneath each finger, so the line appears to DIP
   into the drip rather than cross over its top. */
.card-drips {
  position: absolute;
  right: clamp(30px, 4vw, 66px);
  top: calc(100% - 8px);   /* overlap the card's bottom border by 8px */
  width: 150px;
  height: 240px;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}
.card-drips--single { width: 70px; }

.drip-fill { fill: var(--yellow); }
.drip-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.drop {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dripFall 4.8s ease-in infinite;
}
.drop--b { animation-delay: -2.4s; }

/* Hover: drips flow mint to match the revealed frame */
.project-card:hover .drip-fill,
.project-card:hover .drop { fill: #b9f7c8; }

/* A droplet forms at the finger tip, swells, then falls away and resets */
@keyframes dripFall {
  0%, 56%  { transform: translateY(0) scale(0.5); opacity: 0; }
  64%      { transform: translateY(4px) scale(1); opacity: 1; }
  86%      { opacity: 1; }
  100%     { transform: translateY(66px) scale(0.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drop { animation: none !important; opacity: 0 !important; }
}

/* Cream backdrop extended below the bleeding cards + drips, so the section
   colour falls all the way to the bottom (cards stay anchored where they are). */
.projects-floor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 16vh + 300px);
  background: var(--cream);
  z-index: 0;
  pointer-events: none;
}
/* ===== WORK CARDS REDESIGN END ===== */


/* =============================================================
   SECTION ENTRANCE ANIMATIONS
   After the blob/reveal finishes, each section's elements rise +
   fade in on a consistent stagger instead of popping in abruptly.
   - About   : fires when .about-section gets .anim-in (added by IntersectionObserver)
   - Projects : fires when .projects-section gets .anim-in
   The observer re-adds the class every time a section re-enters view, so the
   entrance replays whether you arrive scrolling DOWN or UP.
   ============================================================= */
@keyframes secRise {
  0%   { opacity: 0; transform: translateY(16px) scale(.6); }
  55%  { opacity: 1; transform: translateY(0) scale(1.08); }
  78%  { transform: translateY(0) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes secRiseCard {
  0%   { opacity: 0; transform: translateY(18px) scale(.58); }
  55%  { opacity: 1; transform: translateY(0) scale(1.07); }
  78%  { transform: translateY(0) scale(.975); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- ABOUT ---- */
.about-logo,
.about-item { opacity: 0; }

.about-section.anim-in .about-logo,
.about-section.anim-in .about-item {
  animation: secRise 0.72s cubic-bezier(.4,.05,.35,1) both;
}
.about-section.anim-in .about-logo            { animation-delay: 0.05s; }
.about-section.anim-in .about-item:nth-child(1) { animation-delay: 0.20s; }
.about-section.anim-in .about-item:nth-child(2) { animation-delay: 0.32s; }
.about-section.anim-in .about-item:nth-child(3) { animation-delay: 0.44s; }
.about-section.anim-in .about-item:nth-child(4) { animation-delay: 0.56s; }

/* ---- PROJECTS (non-card elements) ---- */
.projects-logo,
.work-intro h1,
.work-intro p,
.work-slider-label,
.work-slider-icon { opacity: 0; }

.projects-section.anim-in .projects-logo,
.projects-section.anim-in .work-intro h1,
.projects-section.anim-in .work-intro p,
.projects-section.anim-in .work-slider-label,
.projects-section.anim-in .work-slider-icon {
  animation: secRise 0.72s cubic-bezier(.4,.05,.35,1) both;
}
.projects-section.anim-in .projects-logo      { animation-delay: 0.05s; }
.projects-section.anim-in .work-intro h1       { animation-delay: 0.16s; }
.projects-section.anim-in .work-intro p        { animation-delay: 0.28s; }
.projects-section.anim-in .work-slider-label,
.projects-section.anim-in .work-slider-icon    { animation-delay: 0.38s; }

/* ---- PROJECT CARDS ----
   `backwards` fill hides them during their delay, then reverts to the base
   state on finish so the :hover lift / transform keeps working. */
.projects-section.anim-in .project-card-row .project-card {
  animation: secRiseCard 0.7s cubic-bezier(.4,.05,.35,1) backwards;
}
.projects-section.anim-in .project-card-row .project-card:nth-child(1) { animation-delay: 0.46s; }
.projects-section.anim-in .project-card-row .project-card:nth-child(2) { animation-delay: 0.56s; }
.projects-section.anim-in .project-card-row .project-card:nth-child(3) { animation-delay: 0.66s; }
.projects-section.anim-in .project-card-row .project-card:nth-child(4) { animation-delay: 0.76s; }

@media (prefers-reduced-motion: reduce) {
  .about-logo, .about-item,
  .projects-logo, .work-intro h1, .work-intro p,
  .work-slider-label, .work-slider-icon {
    opacity: 1 !important;
    animation: none !important;
  }
  .projects-section.anim-in .project-card-row .project-card {
    animation: none !important;
  }
}


/* =============================================================
   PROJECTS — GRID VIEW (toggled by clicking the slide control)
   Card 1 spans full width over a 2-column grid (cards 2..5).
   ============================================================= */
.work-slider-label,
.work-slider-icon { cursor: pointer; user-select: none; }

/* Once the user has toggled the layout at least once, stop the section's
   `secRiseCard` entrance from replaying on the cards. The IntersectionObserver
   re-adds `.anim-in` whenever the section's height changes (which the morph
   does), and that replay is what made the cards flicker / re-animate AFTER the
   transition. Flip owns the motion now. */
.projects-content.layout-toggled .project-card-row .project-card {
  animation: none !important;
}

/* While GSAP Flip is morphing the layout, kill the cards' CSS `transition`
   (which includes `transform 280ms`). That transition fights Flip — it lags
   the transform Flip is driving and leaves a stuck residual offset on each
   card once the tween ends. Flip must own transform outright during the morph. */
.projects-content.morphing .project-card,
.projects-content.morphing .project-number {
  transition: none !important;
}

.projects-content.grid-view {
  height: auto !important;
  min-height: 100vh !important;
  padding: clamp(64px, 9vh, 110px) clamp(18px, 2.6vw, 40px) clamp(40px, 6vh, 90px) !important;
  overflow: visible !important;
}

/* Hide slider-only chrome */
.projects-content.grid-view .projects-logo,
.projects-content.grid-view .work-intro {
  display: none !important;
}

/* Header bar: hamburger left, slide right */
.projects-content.grid-view .work-slider-icon {
  top: clamp(20px, 2.6vw, 36px) !important;
  left: clamp(20px, 3vw, 48px) !important;
  right: auto !important;
  transform: rotate(90deg) !important;
  transform-origin: left center !important;
  letter-spacing: -0.18em !important;
  font-size: clamp(26px, 2.6vw, 40px) !important;
}
.projects-content.grid-view .work-slider-label {
  top: clamp(20px, 2.6vw, 34px) !important;
  right: clamp(20px, 3vw, 48px) !important;
  left: auto !important;
}

/* The grid itself — a clean 2×2 of the four projects. (Layout morph is handled
   by GSAP Flip in main.js, so no CSS keyframe here — a CSS animation would
   fight the Flip tween.) */
.projects-content.grid-view .project-card-row {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(12px, 1.5vw, 22px) !important;
  margin: 0 !important;
}

/* Cards become normal-flow blocks */
.projects-content.grid-view .project-card {
  height: auto !important;
  min-height: clamp(320px, 40vh, 440px) !important;
  padding: clamp(26px, 3vw, 46px) !important;
}

/* Number: top-left, smaller */
.projects-content.grid-view .project-number {
  left: clamp(26px, 3vw, 46px) !important;
  top: clamp(30px, 4vh, 58px) !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: clamp(110px, 15vh, 175px) !important;
}

/* Title bottom-left, meta bottom-right on the same line */
.projects-content.grid-view .project-meta {
  position: absolute !important;
  right: clamp(26px, 3vw, 46px) !important;
  bottom: clamp(26px, 3vw, 46px) !important;
  margin: 0 !important;
}

/* Drips: keep only on the bottom row (cards 3 & 4); they fall onto the cream
   floor. Top-row drips are hidden so they don't overlap the row below. */
.projects-content.grid-view .project-card--one .card-drips,
.projects-content.grid-view .project-card--two .card-drips {
  display: none !important;
}

@keyframes gridIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.62); }
  55%  { opacity: 1; transform: translateY(0) scale(1.08); }
  78%  { transform: translateY(0) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}