@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("./assets/fonts/ITCAvantGardeGothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer reset, tokens, base, hero, layout, cube, ui, cards, reveal, theme, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer tokens {
  :root {
    color-scheme: dark;

    --dark-bg: #000000;
    --dark-fg: #f5fbff;
    --dark-muted: #86a9c4;
    --light-bg: #ffffff;
    --light-fg: #11131a;
    --light-muted: #7e8899;
    --accent-dark: #9bdcff;
    --accent-light: #1f7fbf;
    --marble-shadow: #b9c7d8;
    --cloud-top: #c8eaff;
    --cloud-mid: #e2f5ff;
    --cloud-haze: #f5fbff;
    --button-radius: 0.42rem;
    --icon-button-radius: 0.52rem;

    --bg: var(--dark-bg);
    --fg: var(--dark-fg);
    --muted: var(--dark-muted);
    --accent: var(--accent-dark);
    --cube-chrome: #ffffff;
    --cube-chrome-muted: rgba(255, 255, 255, 0.78);
    --cube-chrome-soft: rgba(255, 255, 255, 0.46);
    --cube-card-border: rgba(255, 255, 255, 0.18);

    --font-display: "ITC Avant Garde Gothic", "Avant Garde Gothic", "Inter",
      sans-serif;
    --font-display-weight: 700;
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    --font-mono: var(--font-body);
    --hairline: 0.0625rem;
    --ui-inset: 2rem;
    --card-bg: rgba(0, 0, 0, 0.72);
    --card-border: var(--cube-card-border);
    --nav-x: calc(var(--ui-inset) + 1.25rem);
    --reveal-offset: 0.625rem;
    --reveal-duration: 0.5s;
    --z-ui: 10;
    --cube-stage-opacity: 0;
    --cube-stage-scale: 0.94;
    --cube-stage-y: 8vh;
    --cube-ui-opacity: 0;
    --gallery-overlay-opacity: 1;
    --hero-title-scale: 1;
    --hero-title-scale-x: 1;
    --hero-title-y: 0px;
    --hero-title-opacity: 1;
    --hero-logo-opacity: 0;
    --hero-logo-scale: 0.82;
    --hero-logo-scale-x: 1;
    --hero-logo-y: 0px;
    --corner-logo-opacity: 0;
    --corner-logo-scale: 1;
    --corner-logo-y: 0rem;
  }
}

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer hero {
  #cloud_hero_stage {
    position: relative;
    z-index: 6;
    min-height: 178svh;
    background: #bfe6ff;
  }

  #cloud_hero {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2rem, 4vw, 5rem);
    color: #101722;
    background: #bfe6ff;
    box-shadow: 0 2rem 4.5rem -2.5rem rgba(255, 255, 255, 0.94);
  }

  #cloud_hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -4px;
    height: clamp(17rem, 52vh, 33rem);
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 120% 70% at 50% 104%,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.78) 32%,
        rgba(245, 251, 255, 0.5) 52%,
        rgba(226, 245, 255, 0.2) 76%,
        rgba(226, 245, 255, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(245, 251, 255, 0) 0%,
        rgba(255, 255, 255, 0.66) 100%
      );
  }

  .cloud-hero-video {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    filter: saturate(1.08) contrast(0.98) brightness(1.04);
  }

  .cloud-hero-tint {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(
        ellipse 96% 42% at 50% 104%,
        rgba(255, 255, 255, 0.74) 0%,
        rgba(255, 255, 255, 0.32) 42%,
        rgba(255, 255, 255, 0) 76%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 56%,
        rgba(255, 255, 255, 0.62) 100%
      );
  }

  .cloud-hero-nav {
    position: fixed;
    top: var(--ui-inset);
    left: calc(50% + ((100vw - 100%) / 2));
    transform: translateX(-50%);
    z-index: calc(var(--z-ui) + 2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.15rem, 2.2vw, 2rem);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    animation: hero-rise 0.75s ease 0.08s both;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-nav a {
    position: relative;
    display: inline-grid;
    color: rgba(0, 0, 0, 0.72);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .cloud-hero-nav a:last-child {
    color: rgba(0, 0, 0, 0.72);
  }

  .cloud-hero-nav a:hover {
    color: #000000;
  }

  .cloud-hero-nav-label {
    position: relative;
    z-index: 2;
  }

  .cloud-hero-nav-preview {
    position: absolute;
    top: calc(100% + 1.12rem);
    left: 50%;
    width: min(34rem, calc(100vw - 2rem));
    min-height: clamp(12rem, 16vw, 15rem);
    display: grid;
    grid-template-columns: clamp(10.8rem, 13vw, 13.2rem) minmax(0, 1fr);
    gap: clamp(1.1rem, 1.8vw, 1.55rem);
    align-items: center;
    padding: clamp(1rem, 1.6vw, 1.25rem);
    color: #11131a;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(17, 19, 26, 0.1);
    border-radius: 8px;
    box-shadow: 0 1.1rem 3.6rem rgba(17, 19, 26, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 0.62rem, 0) scale(0.965);
    transform-origin: top center;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s,
      transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .cloud-hero-nav a:hover .cloud-hero-nav-preview,
  .cloud-hero-nav a:focus-visible .cloud-hero-nav-preview,
  .cloud-hero-nav.is-previewing .cloud-hero-nav-item.is-preview-active .cloud-hero-nav-preview {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0) scale(1);
    transition-delay: 0s;
  }

  .cloud-hero-nav.is-previewing .cloud-hero-nav-item.is-preview-active {
    color: #000000;
  }

  .nav-preview-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid rgba(17, 19, 26, 0.08);
    border-radius: 8px;
  }

  .nav-preview-art--ed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    border-radius: inherit;
  }

  .nav-preview-art--work {
    background: #f5f5f5;
  }

  /* Work preview: a fixed square whose artwork dissolves project to
     project — no 3D turn, so nothing ever reads as a half-rotated face.
     Slides and copy share one 20s cycle, 4s per project (5 projects,
     boundaries every 20%). */
  .nav-preview-slides {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .nav-preview-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    opacity: 0;
  }

  .nav-preview-slide--strikeless {
    background: #ffffff;
    border: 1px solid rgba(17, 19, 26, 0.08);
    animation: nav-preview-slide-a 20s ease infinite;
  }

  .nav-preview-slide--carni {
    background: #fefefe;
    border: 1px solid rgba(13, 18, 24, 0.08);
    animation: nav-preview-slide-b 20s ease infinite;
  }

  .nav-preview-slide--siobhan {
    background: #fefefe;
    border: 1px solid rgba(1, 39, 84, 0.12);
    animation: nav-preview-slide-c 20s ease infinite;
  }

  .nav-preview-slide--splitpay {
    background: #fefefe;
    border: 1px solid rgba(13, 18, 24, 0.08);
    animation: nav-preview-slide-d 20s ease infinite;
  }

  .nav-preview-slide--tree {
    background: #747b73;
    animation: nav-preview-slide-e 20s ease infinite;
  }

  .nav-preview-slide-mark {
    width: 74%;
    height: 74%;
    object-fit: contain;
  }

  .nav-preview-slide-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @keyframes nav-preview-slide-a {
    0%,
    20% {
      opacity: 1;
    }
    22%,
    98% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes nav-preview-slide-b {
    0%,
    20% {
      opacity: 0;
    }
    22%,
    40% {
      opacity: 1;
    }
    42%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-slide-c {
    0%,
    40% {
      opacity: 0;
    }
    42%,
    60% {
      opacity: 1;
    }
    62%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-slide-d {
    0%,
    60% {
      opacity: 0;
    }
    62%,
    80% {
      opacity: 1;
    }
    82%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-slide-e {
    0%,
    80% {
      opacity: 0;
    }
    82%,
    98% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .nav-preview-mark {
    width: 92%;
    height: 92%;
    object-fit: contain;
  }

  .nav-preview-mark-dark {
    display: none;
  }

  .nav-preview-copy-item {
    grid-area: 1 / 1;
    display: grid;
    gap: 0.62rem;
  }

  /* Copy is sequential, never a crossfade: the outgoing item is fully out
     before the incoming starts, so two titles can never overlap. */
  .nav-preview-copy-item--strikeless {
    animation: nav-preview-copy-a 20s ease infinite;
  }

  .nav-preview-copy-item--carni {
    opacity: 0;
    animation: nav-preview-copy-b 20s ease infinite;
  }

  .nav-preview-copy-item--siobhan {
    opacity: 0;
    animation: nav-preview-copy-c 20s ease infinite;
  }

  .nav-preview-copy-item--splitpay {
    opacity: 0;
    animation: nav-preview-copy-d 20s ease infinite;
  }

  .nav-preview-copy-item--tree {
    opacity: 0;
    animation: nav-preview-copy-e 20s ease infinite;
  }

  @keyframes nav-preview-copy-a {
    0%,
    17.8% {
      opacity: 1;
    }
    19.6%,
    98.2% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes nav-preview-copy-b {
    0%,
    20% {
      opacity: 0;
    }
    21.8%,
    37.8% {
      opacity: 1;
    }
    39.6%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-copy-c {
    0%,
    40% {
      opacity: 0;
    }
    41.8%,
    57.8% {
      opacity: 1;
    }
    59.6%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-copy-d {
    0%,
    60% {
      opacity: 0;
    }
    61.8%,
    77.8% {
      opacity: 1;
    }
    79.6%,
    100% {
      opacity: 0;
    }
  }

  @keyframes nav-preview-copy-e {
    0%,
    80% {
      opacity: 0;
    }
    81.8%,
    96.4% {
      opacity: 1;
    }
    98.2%,
    100% {
      opacity: 0;
    }
  }

  .nav-preview-art--cal {
    background: #eef6fb;
  }

  .nav-preview-cal {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    border: 0;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
    background: #ffffff;
  }

  .nav-preview-copy {
    display: grid;
    gap: 0.62rem;
    text-align: left;
  }

  .nav-preview-kicker {
    color: rgba(17, 19, 26, 0.58);
    font-size: clamp(0.56rem, 0.72vw, 0.68rem);
    letter-spacing: 0.18em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .nav-preview-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.45vw, 2.45rem);
    font-weight: var(--font-display-weight);
    letter-spacing: 0.02em;
    line-height: 0.96;
    text-transform: uppercase;
  }

  .cloud-hero-copy {
    --hero-title-copy-gap: 1rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(72rem, calc(100vw - clamp(2.5rem, 8vw, 8rem)));
    padding-block-end: 0;
    text-align: center;
  }

  .cloud-hero-kicker {
    color: #000000;
    font-size: clamp(0.62rem, 1.2vw, 0.78rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-block-end: var(--hero-title-copy-gap);
    animation: hero-rise 0.75s ease both;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-title-wrap {
    --hero-title-size: clamp(6.6rem, 15.4vw, 16.25rem);
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
    margin-block-end: 0;
  }

  .cloud-hero-copy h1 {
    position: relative;
    display: block;
    z-index: 1;
    font-family: var(--font-display);
    font-size: var(--hero-title-size);
    font-weight: var(--font-display-weight);
    letter-spacing: -0.055em;
    line-height: 0.78;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: #11131a;
    text-shadow: 0 1.25rem 4rem rgba(95, 143, 184, 0.18);
    opacity: var(--hero-title-opacity);
    filter: opacity(var(--hero-title-opacity));
    transform:
      translate3d(0, var(--hero-title-y), 0)
      scale(var(--hero-title-scale))
      scaleX(var(--hero-title-scale-x));
    transform-origin: left center;
    will-change: transform, filter, opacity;
  }

  .hero-logo-mark {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: calc(var(--hero-title-size) * 1.05);
    height: calc(var(--hero-title-size) * 0.78);
    opacity: var(--hero-logo-opacity);
    transform:
      translate3d(0, var(--hero-logo-y), 0)
      scale(var(--hero-logo-scale))
      scaleX(var(--hero-logo-scale-x));
    transform-origin: left top;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .hero-logo-mark.is-handed-off {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .hero-logo-mark img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero-logo-mark .hero-logo-light-mark {
    display: none;
  }

  .cloud-hero-copy p {
    max-width: 31rem;
    margin-inline: auto;
    margin-block-start: var(--hero-title-copy-gap);
    color: rgba(17, 19, 26, 0.72);
    font-size: clamp(0.82rem, 1.25vw, 1rem);
    line-height: 1.75;
    animation: hero-rise 0.8s ease 0.16s both;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: min(37rem, 100%);
    margin-block-start: clamp(1rem, 2.2vw, 1.45rem);
    animation: hero-rise 0.8s ease 0.21s both;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-proof span {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.42rem 0.62rem;
    border: var(--hairline) solid rgba(31, 127, 191, 0.28);
    border-radius: 999px;
    color: rgba(17, 19, 26, 0.72);
    background: rgba(255, 255, 255, 0.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      0 0.4rem 1.2rem rgba(31, 127, 191, 0.06);
    backdrop-filter: blur(1.25rem) saturate(150%);
    -webkit-backdrop-filter: blur(1.25rem) saturate(150%);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cloud-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.7rem;
    margin-block-start: 1.45rem;
    animation: hero-rise 0.8s ease 0.27s both;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-cta {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    gap: 0.54rem;
    width: fit-content;
    padding: 0.08rem 0;
    border: 0;
    border-radius: 0;
    color: var(--accent-light);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    will-change: clip-path, transform, opacity;
  }

  .cloud-hero-cta-secondary {
    color: rgba(17, 19, 26, 0.66);
  }

  .cloud-hero-cta::before {
    content: none;
  }

  .cloud-hero-cta::after {
    content: none;
  }

  .cloud-hero-cta:hover {
    color: color-mix(in srgb, var(--accent-light) 82%, white);
  }

  .hero-gsap-active .cloud-hero-kicker,
  .hero-gsap-active .cloud-hero-copy p,
  .hero-gsap-active .cloud-hero-proof,
  .hero-gsap-active .cloud-hero-actions {
    animation: none;
    will-change: transform, opacity, filter;
  }

  .cloud-hero-cta svg {
    width: 0.72rem;
    height: 0.72rem;
    transition: transform 0.2s ease;
  }

  .cloud-hero-cta:hover svg {
    transform: translateX(0.18rem);
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      translate: 0 1rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cloud-hero-kicker,
    .cloud-hero-copy h1,
    .cloud-hero-copy p,
    .cloud-hero-proof,
    .cloud-hero-actions,
    .nav-preview-slide,
    .nav-preview-copy-item {
      animation: none;
    }

    .nav-preview-slide--strikeless {
      opacity: 1;
    }

    .nav-preview-slide--carni,
    .nav-preview-slide--siobhan,
    .nav-preview-slide--splitpay,
    .nav-preview-slide--tree,
    .nav-preview-copy-item--carni,
    .nav-preview-copy-item--siobhan,
    .nav-preview-copy-item--splitpay,
    .nav-preview-copy-item--tree {
      display: none;
    }
  }
}

@layer ui {
  #mouse_trail {
    position: fixed;
    inset: 0;
    z-index: 18;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.16s ease;
    mix-blend-mode: normal;
  }

  #mouse_trail.is-hidden {
    opacity: 0;
  }

  .mouse-trail-label {
    --trail-stretch: 1;
    position: absolute;
    left: 0;
    top: 0;
    translate: -50% -50%;
    rotate: -3deg;
    color: rgba(4, 43, 72, 0.72);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0.45rem 1rem rgba(31, 127, 191, 0.12);
    opacity: 0;
    transform: scale(0.96) scaleX(var(--trail-stretch));
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center;
    will-change: transform, opacity, left, top;
  }

  .mouse-trail-char {
    position: relative;
    display: inline-block;
    color: inherit;
    filter: none;
    mix-blend-mode: normal;
  }

  .mouse-trail-char::after {
    content: attr(data-char);
    position: absolute;
    inset: 0;
    color: #ffffff;
    filter: contrast(1.3) brightness(1.08);
    mix-blend-mode: difference;
    opacity: var(--trail-contrast-opacity, 0);
    clip-path: inset(
      var(--trail-clip-top, 100%)
      var(--trail-clip-right, 0%)
      var(--trail-clip-bottom, 0%)
      var(--trail-clip-left, 0%)
    );
    transition: opacity 0.08s ease;
    pointer-events: none;
    text-shadow: none;
  }

  #mouse_trail:not(.is-hidden) .mouse-trail-label {
    opacity: 1;
    transform: scale(1) scaleX(var(--trail-stretch));
  }

  #corner_brand_logo {
    position: fixed;
    top: var(--ui-inset);
    left: var(--ui-inset);
    translate: 0 0;
    z-index: var(--z-ui);
    width: 2.6rem;
    height: 1.93rem;
    opacity: var(--corner-logo-opacity);
    transform:
      translate3d(0, var(--corner-logo-y), 0)
      scale(var(--corner-logo-scale));
    transform-origin: left top;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.14s ease;
    will-change: opacity, transform;
  }

  #corner_brand_logo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  #corner_brand_logo .corner-logo-light-mark {
    display: none;
  }
}

@layer layout {
  .hero-scroll-buffer {
    position: relative;
    z-index: 5;
    margin-top: -2px;
    min-height: clamp(18rem, 52vh, 34rem);
    background: var(--bg);
    pointer-events: none;
    display: grid;
    place-items: center;
    padding-block: clamp(3.5rem, 9vh, 7rem);
  }

  /* Portfolio metrics — count-up band between the hero and the cube stage.
     Numbers tick up and rise in (JS) the first time the band scrolls
     into view; same stat language as the project cards, sized up. */
  .hero-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    row-gap: 1.7rem;
    max-width: min(94rem, calc(100vw - 3rem));
  }

  .hero-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding-inline: clamp(1.1rem, 2.2vw, 2.3rem);
    opacity: 0;
    translate: 0 0.9rem;
    transition:
      opacity 0.7s ease var(--metric-delay, 0s),
      translate 0.8s cubic-bezier(0.23, 1, 0.32, 1) var(--metric-delay, 0s);
  }

  .hero-metrics.is-live .hero-metric {
    opacity: 1;
    translate: 0 0;
  }

  .hero-metric + .hero-metric {
    border-left: var(--hairline) solid
      color-mix(in srgb, var(--fg) 16%, transparent);
  }

  .hero-metric-num {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    line-height: 1;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  .hero-metric-label {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fg) 52%, transparent);
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-metric {
      transition: none;
    }
  }

  .hero-scroll-buffer::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: clamp(-8rem, -12vh, -5rem);
    height: clamp(5rem, 14vh, 9rem);
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.82) 42%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  #scene {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    pointer-events: none;
    opacity: var(--cube-stage-opacity);
    transform: translate3d(0, var(--cube-stage-y), 0)
      scale(var(--cube-stage-scale));
    will-change: opacity, transform;
  }

  #scene::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(68vw, 48rem);
    height: min(54vw, 38rem);
    translate: -50% -50%;
    z-index: -2;
    pointer-events: none;
    opacity: calc(var(--cube-stage-opacity) * 0.4);
    background: radial-gradient(
      ellipse,
      rgba(31, 127, 191, 0.14) 0%,
      rgba(17, 19, 26, 0.13) 38%,
      rgba(17, 19, 26, 0.055) 58%,
      transparent 78%
    );
    transform: scale(var(--cube-stage-scale));
  }

  #scene::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 68%;
    width: min(45vw, 34rem);
    height: min(14vw, 8rem);
    translate: -50% -50%;
    z-index: -1;
    pointer-events: none;
    opacity: calc(var(--cube-stage-opacity) * 0.68);
    background: radial-gradient(
      ellipse,
      rgba(17, 19, 26, 0.32) 0%,
      rgba(17, 19, 26, 0.18) 34%,
      transparent 72%
    );
    transform: rotateX(68deg);
  }

  #scroll_container {
    position: relative;
    z-index: 4;
  }

  .scroll-unicorn-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100svh;
    min-width: 1px;
    min-height: 1px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #ffffff;
    contain: layout paint size;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0.24s;
  }

  .scroll-unicorn-bg > :is(canvas, iframe, div) {
    width: 100% !important;
    height: 100% !important;
  }

  .strikeless-unicorn-bg > :is(canvas, iframe, div) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: max(100vw, calc(100svh * var(--strikeless-unicorn-aspect, 1.6))) !important;
    height: max(100svh, calc(100vw / var(--strikeless-unicorn-aspect, 1.6))) !important;
    transform: translate(-50%, -50%) !important;
  }

  .strikeless-unicorn-embed > :is(canvas, iframe, div) {
    width: 100% !important;
    height: 100% !important;
  }

  .strikeless-unicorn-bg--light {
    background: #ffffff;
  }

  .strikeless-unicorn-bg--dark {
    background: #000000;
  }

  .scroll-video-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100svh;
    min-width: 1px;
    min-height: 1px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #000000;
    contain: layout paint size;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0.24s;
  }

  .scroll-video-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .scroll-video-bg__media.is-active {
    opacity: 1;
  }

  .carni-video-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.26) 0%,
        rgba(0, 0, 0, 0.08) 45%,
        rgba(0, 0, 0, 0.18) 100%
      );
  }

  .carni-video-bg.is-active {
    opacity: var(--cube-stage-opacity);
    visibility: visible;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0s;
  }

  :root[data-theme="light"] .ed-light-unicorn-bg.is-active {
    opacity: var(--cube-stage-opacity);
    visibility: visible;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0s;
  }

  :root[data-theme="dark"] .ed-light-unicorn-bg {
    display: none;
  }

  :root[data-theme="light"] .strikeless-unicorn-bg--light.is-active,
  :root[data-theme="dark"] .strikeless-unicorn-bg--dark.is-active {
    opacity: var(--cube-stage-opacity);
    visibility: visible;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0s;
  }

  :root[data-theme="light"] .strikeless-unicorn-bg--dark,
  :root[data-theme="dark"] .strikeless-unicorn-bg--light {
    display: none;
  }

  .carni-unicorn-bg > :is(canvas, iframe, div) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: max(100vw, calc(100svh * var(--carni-unicorn-aspect, 1.6))) !important;
    height: max(100svh, calc(100vw / var(--carni-unicorn-aspect, 1.6))) !important;
    transform: translate(-50%, -50%) !important;
  }

  .carni-unicorn-embed > :is(canvas, iframe, div) {
    width: 100% !important;
    height: 100% !important;
  }

  .carni-unicorn-bg--dark {
    background: #000000;
  }

  :root[data-theme="dark"] .carni-unicorn-bg--dark.is-active {
    opacity: var(--cube-stage-opacity);
    visibility: visible;
    transition:
      opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 0s;
  }

  :root[data-theme="light"] .carni-unicorn-bg--dark {
    display: none;
  }

  #cube_ripple_layer {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    opacity: var(--cube-stage-opacity);
    contain: layout paint;
  }

  #cube_unicorn_layer,
  .cube-project-layer {
    position: absolute;
    left: 28.8%;
    top: 15.85%;
    z-index: 4;
    width: 42.4%;
    height: 43.4%;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    visibility: visible;
    background: #050203;
    contain: layout paint size;
    backface-visibility: hidden;
    transform: translateZ(1px);
  }

  #cube_unicorn_layer.is-active,
  .cube-project-layer.is-active {
    pointer-events: auto;
  }

  #cube_unicorn_media,
  .cube-project-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
  }

  .cube-project-media--cover {
    object-fit: cover;
  }

  .cube-project-media--mark {
    inset: 8.6% auto auto 7.7%;
    width: 84.6%;
    height: 82.8%;
    object-fit: contain;
    transform: none;
    transition: opacity 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .cube-project-layer--strikeless {
    background: #ffffff;
    box-shadow:
      inset 0 0 0 1px rgba(13, 18, 24, 0.04),
      inset 0 -0.8rem 1.6rem rgba(13, 18, 24, 0.035);
  }

  .cube-project-layer--strikeless::before {
    content: none;
  }

  #cube_unicorn_scene,
  .cube-project-unicorn-scene,
  .cube-project-hover-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 1px;
    min-height: 1px;
    opacity: 0;
    display: block;
    transition: opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .cube-project-unicorn-scene {
    pointer-events: none;
  }

  .cube-project-hover-canvas {
    pointer-events: none;
  }

  #cube_unicorn_layer.is-active.is-hovering #cube_unicorn_scene,
  .cube-project-layer.is-active.is-hovering .cube-project-hover-canvas {
    opacity: 1;
  }

  #cube_unicorn_scene > :is(canvas, iframe, div),
  .cube-project-unicorn-scene > :is(canvas, iframe, div) {
    width: 100% !important;
    height: 100% !important;
  }

  #scroll_container section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem calc(5rem + var(--ui-inset));
  }

  .portfolio-footer {
    position: relative;
    z-index: 7;
    min-height: 100svh;
    margin-top: -1px;
    padding: clamp(4.5rem, 6vw, 6.75rem)
      clamp(1.5rem, 5.5vw, 6.25rem)
      clamp(2rem, 3.5vw, 3rem);
    color: #f5fbff;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #050606 9rem),
      #050606;
    overflow: hidden;
    isolation: isolate;
  }

  .portfolio-footer__inner {
    min-height: calc(100svh - clamp(6.5rem, 9.5vw, 9.75rem));
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 5.25rem);
  }

  .footer-topline,
  .footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }

  .footer-mini-mark,
  .footer-actions a,
  .footer-block a,
  .footer-bottom a {
    color: inherit;
    text-decoration: none;
  }

  .footer-mini-mark {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    letter-spacing: 0.04em;
    line-height: 0.85;
  }

  .footer-actions {
    display: flex;
    gap: clamp(1.25rem, 3vw, 3rem);
    color: rgba(245, 251, 255, 0.74);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.05fr)
      minmax(16rem, 1.4fr) minmax(11rem, 0.9fr);
    gap: clamp(2rem, 5vw, 5.75rem);
  }

  .footer-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    color: rgba(245, 251, 255, 0.78);
  }

  .footer-block h2 {
    font: inherit;
    color: rgba(245, 251, 255, 0.92);
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .footer-block p,
  .footer-block a,
  .footer-bottom {
    font-size: clamp(0.76rem, 1.1vw, 0.9rem);
    line-height: 1.55;
  }

  .footer-block a {
    text-transform: uppercase;
  }

  .footer-newsletter {
    width: min(100%, 26rem);
    display: grid;
    grid-template-columns: 1fr 3rem;
    gap: 0.5rem;
  }

  .footer-newsletter input,
  .footer-newsletter button,
  .footer-socials a {
    border: var(--hairline) solid rgba(245, 251, 255, 0.16);
    border-radius: 0;
    color: #f5fbff;
    background: rgba(245, 251, 255, 0.08);
  }

  .footer-newsletter input {
    min-width: 0;
    padding: 0.9rem 1rem;
    font: inherit;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    outline: none;
  }

  .footer-newsletter input::placeholder {
    color: rgba(245, 251, 255, 0.48);
  }

  .footer-newsletter button {
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .footer-newsletter svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .footer-socials {
    display: flex;
    gap: 0.7rem;
  }

  .footer-socials a {
    width: 3rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    background: rgba(142, 154, 142, 0.52);
  }

  .footer-wordmark {
    margin-block-start: auto;
    font-family: var(--font-display);
    font-size: clamp(7rem, 23vw, 22rem);
    font-weight: var(--font-display-weight);
    letter-spacing: 0.01em;
    line-height: 0.72;
    text-transform: uppercase;
    white-space: nowrap;
    color: #f5fbff;
  }

  .footer-bottom {
    color: rgba(245, 251, 255, 0.6);
    text-transform: uppercase;
  }

  .footer-bottom nav {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2rem);
    flex-wrap: wrap;
  }

}

@layer cube {
  #cube {
    --s: min(74vw, 74vh, 560px);
    width: var(--s);
    height: var(--s);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(90deg) rotateY(0deg);
    will-change: transform;
  }

  .face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 48px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 48px
      ),
      #000000;

    img {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    img.portrait-inset {
      inset: 15.85% auto auto 28.8%;
      z-index: 2;
      width: 42.4%;
      height: 43.4%;
      object-fit: cover;
      object-position: center center;
    }

    .cube-project-layer--strikeless .cube-project-media--mark {
      inset: 8.6% auto auto 7.7%;
      width: 84.6%;
      height: 82.8%;
      object-fit: contain;
      transform: none;
    }

    .strikeless-inset {
      --strikeless-art-bg: #ffffff;
      position: absolute;
      inset: 15.85% auto auto 28.8%;
      z-index: 3;
      width: 42.4%;
      height: 43.4%;
      display: grid;
      place-items: center;
      background: var(--strikeless-art-bg);
      box-shadow:
        inset 0 0 0 1px rgba(13, 18, 24, 0.04),
        inset 0 -0.8rem 1.6rem rgba(13, 18, 24, 0.035);
    }

    .strikeless-inset::before {
      content: none;
    }

    .strikeless-inset .strikeless-mark {
      position: relative;
      z-index: 1;
      width: 62%;
      height: 62%;
      display: block;
      object-fit: contain;
      transform: translateX(3%);
    }

    .strikeless-inset .strikeless-mark-dark {
      display: none;
    }

    &:has(img) .face-ph {
      display: none;
    }
  }

  .cube-ripple-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 0;
    height: 0;
    display: block;
    opacity: 0;
    mix-blend-mode: normal;
    pointer-events: none;
    backface-visibility: hidden;
    contain: layout paint size;
    transition: opacity 0.36s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, left, top, width, height;
  }

  .cube-ripple-canvas.is-active {
    opacity: 1;
  }

  .face-ph {
    position: absolute;
    bottom: 1.5rem;
    left: 1.75rem;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(2rem, 8vw, 5rem);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    user-select: none;
  }

  .face[data-face="front"] {
    transform: translateZ(calc(var(--s) / 2));
  }
  .face[data-face="back"] {
    transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="right"] {
    transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="left"] {
    transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="top"] {
    transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="bottom"] {
    transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  }
}

@layer ui {
  #hud {
    position: fixed;
    top: var(--ui-inset);
    right: var(--ui-inset);
    z-index: var(--z-ui);
    text-align: right;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--cube-chrome-muted);
    text-transform: uppercase;
    opacity: calc(var(--cube-ui-opacity) * var(--gallery-overlay-opacity));
    transition: opacity 0.2s ease;

    .progress-bar {
      width: 7.5rem;
      height: var(--hairline);
      background: var(--cube-chrome-soft);
      margin-block-start: 0.5rem;
      margin-inline-start: auto;
      position: relative;
      overflow: hidden;
    }

    .progress-fill {
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: 0%;
      background: var(--cube-chrome);
      transition: width 0.1s linear;
    }

    .scene-label {
      font-size: 0.6rem;
      color: var(--cube-chrome);
      margin-block-start: 0.4rem;
    }
  }

  #scene_strip {
    position: fixed;
    left: var(--nav-x);
    top: 50%;
    translate: -50% -50%;
    z-index: var(--z-ui);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: var(--cube-ui-opacity);
    transition: opacity 0.2s ease;
  }

  .scene-dot {
    position: relative;
    display: block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    transition: background 0.3s, scale 0.3s;
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      inset: -0.2rem;
    }

    &.active {
      background: #000000;
      scale: 1.8;
    }
  }

  #theme_toggle {
    position: fixed;
    bottom: var(--ui-inset);
    left: var(--ui-inset);
    translate: 0 0;
    z-index: var(--z-ui);
    width: 2.38rem;
    height: 2.38rem;
    overflow: hidden;
    isolation: isolate;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.72);
    background-color: transparent;
    border-radius: 99em;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      border-color 0.2s ease,
      color 0.2s ease,
      scale 0.2s ease;

    &::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: inherit;
    }

    &::after {
      inset: 0;
      z-index: 0;
      background: none;
      opacity: 0;
      mix-blend-mode: normal;
    }

    &:hover {
      background-color: transparent;
      scale: 1.035;
      box-shadow: none;
    }

    &:active {
      scale: 0.96;
    }

    svg {
      width: 1rem;
      height: 1rem;
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      z-index: 2;
      transition:
        color 0.32s ease,
        opacity 0.32s ease,
        rotate 0.32s ease,
        scale 0.32s ease;
    }

    .icon-sun {
      color: currentColor;
      opacity: 1;
      rotate: 0deg;
      scale: 1;
    }

    .icon-moon {
      color: currentColor;
      opacity: 0;
      rotate: 82deg;
      scale: 0.72;
    }
  }

  #face_caption {
    position: fixed;
    bottom: var(--ui-inset);
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-ui);
    text-align: center;
    pointer-events: none;
    user-select: none;
    opacity: calc(var(--cube-ui-opacity) * var(--gallery-overlay-opacity));
    transition: opacity 0.2s ease;
  }

  #face_caption_num {
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    color: var(--cube-chrome);
    text-transform: uppercase;
    margin-block-end: 0.15rem;
  }

  #face_caption_num:empty {
    display: none;
  }

  #face_caption_name {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    letter-spacing: 0.08em;
    color: var(--cube-chrome);
    opacity: 0.5;
    line-height: 1;
  }

  #credit {
    position: fixed;
    right: var(--ui-inset);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    z-index: var(--z-ui);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: calc(var(--cube-ui-opacity) * var(--gallery-overlay-opacity));
    transition: opacity 0.2s ease;

    a {
      color: var(--cube-chrome-muted);
      text-decoration: none;
    }
  }
}

@layer cards {
  .text-card {
    max-width: clamp(26rem, 31vw, 33rem);
    padding: 2.25rem 2rem;
    background: var(--card-bg);
    border-left: var(--hairline) solid var(--card-border);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;

    &.right {
      margin-inline-start: auto;
      border-left: none;
      border-right: var(--hairline) solid var(--card-border);
      text-align: right;

      .h-line {
        transform-origin: right;
        margin-inline-start: auto;
      }
    }

    &.center {
      margin-inline: auto;
      border-left: none;
      border-top: var(--hairline) solid var(--card-border);
      text-align: center;
      max-width: 28.75rem;

      .h-line {
        transform-origin: center;
        margin-inline: auto;
      }
    }
  }

  .text-card--intro {
    max-width: clamp(30rem, 38vw, 38rem);
  }

  .tag {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cube-chrome);
    margin-block-end: 1.1rem;
  }

  .status-note {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cube-chrome-muted);
    margin-block-start: 0.9rem;
  }

  .project-links {
    display: grid;
    justify-items: start;
    gap: 0.72rem;
    margin-block-start: 1.15rem;
  }

  .text-card.right .project-links {
    justify-items: end;
  }

  .project-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--cube-chrome);
    text-decoration: none;
    transition:
      color 0.2s ease,
      transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .project-link:hover,
  .project-link:focus-visible {
    color: #1f7fbf;
    transform: translateX(0.2rem);
  }

  .project-link--url {
    text-transform: none;
    letter-spacing: 0.08em;
  }

  .project-link svg {
    width: 0.72rem;
    height: 0.72rem;
    flex: none;
  }

  .project-link svg.project-link-apple {
    width: 0.8rem;
    height: 0.8rem;
    margin-block-start: -0.12rem;
  }

  #scroll_container :where(h1, h2) {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    letter-spacing: 0.03em;
    line-height: 0.92;
  }

  #scroll_container h1 {
    font-size: clamp(3rem, 8vw, 6.5rem);
  }
  #scroll_container h2 {
    font-size: clamp(2.2rem, 5vw, 4rem);
  }

  .body-text {
    font-size: 0.78rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--fg) 55%, transparent);
    margin-block-start: 1.25rem;
  }

  .stat-row {
    display: flex;
    gap: 2.5rem;
    margin-block-start: 2rem;
    flex-wrap: wrap;
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .stat-num {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 2.2rem;
    color: var(--cube-chrome);
    line-height: 1;
  }

  .stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cube-chrome-muted);
  }

  .h-line {
    width: 3.125rem;
    height: var(--hairline);
    background: var(--cube-chrome);
    margin-block-end: 1.2rem;
    transform-origin: left;
  }

  .cta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
  }

  .text-card.right .cta-row {
    justify-content: flex-end;
  }

  .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    border: var(--hairline) solid rgba(31, 127, 191, 0.62);
    border-radius: var(--button-radius);
    color: var(--accent-light);
    background:
      radial-gradient(
        circle at 22% 12%,
        rgba(255, 255, 255, 0.56),
        rgba(255, 255, 255, 0.16) 28%,
        transparent 58%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.04) 48%,
        rgba(31, 127, 191, 0.05)
      );
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(31, 127, 191, 0.12),
      inset 1px 0 1.15rem rgba(255, 255, 255, 0.18),
      0 0.55rem 1.5rem rgba(31, 127, 191, 0.08);
    backdrop-filter: blur(2.3rem) saturate(220%) contrast(1.04);
    -webkit-backdrop-filter: blur(2.3rem) saturate(220%) contrast(1.04);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s,
      box-shadow 0.2s;

    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      border-radius: inherit;
    }

    &::before {
      inset: 1px;
      background:
        linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.66) 0%,
        rgba(255, 255, 255, 0.1) 31%,
        rgba(31, 127, 191, 0.06) 68%,
        rgba(255, 255, 255, 0.22) 100%
      );
      opacity: 0.46;
    }

    &::after {
      inset: -42% 42% 34% -34%;
      background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.58),
        transparent 68%
      );
      opacity: 0.42;
      rotate: -14deg;
    }

    &:hover {
      background:
        radial-gradient(
          circle at 28% 18%,
          rgba(255, 255, 255, 0.42),
          rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(
          145deg,
          rgba(77, 178, 234, 0.92),
          var(--accent-light)
        );
      color: #ffffff;
      border-color: rgba(31, 127, 191, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -0.75rem 1.25rem rgba(0, 58, 108, 0.12),
        0 0.95rem 2.4rem rgba(31, 127, 191, 0.28);
    }

    svg {
      width: 0.6875rem;
      height: 0.6875rem;
    }
  }

  .cta-back {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    border: var(--hairline) solid rgba(31, 127, 191, 0.56);
    border-radius: var(--button-radius);
    color: rgba(31, 127, 191, 0.78);
    background:
      radial-gradient(
        circle at 22% 12%,
        rgba(255, 255, 255, 0.48),
        rgba(255, 255, 255, 0.13) 30%,
        transparent 60%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.035) 50%,
        rgba(31, 127, 191, 0.04)
      );
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.64),
      inset 0 -1px 0 rgba(31, 127, 191, 0.1),
      inset 1px 0 1rem rgba(255, 255, 255, 0.16),
      0 0.5rem 1.4rem rgba(31, 127, 191, 0.07);
    backdrop-filter: blur(2.3rem) saturate(220%) contrast(1.04);
    -webkit-backdrop-filter: blur(2.3rem) saturate(220%) contrast(1.04);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s,
      box-shadow 0.2s;

    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      border-radius: inherit;
    }

    &::before {
      inset: 1px;
      background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(255, 255, 255, 0.09) 32%,
        rgba(31, 127, 191, 0.05) 68%,
        rgba(255, 255, 255, 0.18) 100%
      );
      opacity: 0.42;
    }

    &::after {
      inset: -42% 42% 34% -34%;
      background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.52),
        transparent 68%
      );
      opacity: 0.38;
      rotate: -14deg;
    }

    &:hover {
      background:
        radial-gradient(
          circle at 28% 18%,
          rgba(255, 255, 255, 0.36),
          rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.44),
          rgba(224, 246, 255, 0.22)
        );
      border-color: rgba(31, 127, 191, 0.68);
      color: var(--accent-light);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -0.75rem 1.2rem rgba(255, 255, 255, 0.2),
        0 0.9rem 2.25rem rgba(31, 127, 191, 0.16);
    }

    svg {
      width: 0.6875rem;
      height: 0.6875rem;
    }
  }

}

@layer reveal {
  #scroll_container :is(.tag, h1, h2, .body-text, .stat-row, .status-note, .project-links, .cta, .cta-back) {
    opacity: 0;
    translate: 0 var(--reveal-offset);
  }

  .footer-reveal {
    opacity: 0;
    translate: 0 1.25rem;
    transition: opacity 0.65s ease, translate 0.65s ease;
  }

  #scroll_container :is(h1, h2) {
    translate: 0 1.125rem;
    transition: opacity var(--reveal-duration) ease 0.08s,
      translate var(--reveal-duration) ease 0.08s;
  }

  .tag {
    transition: opacity var(--reveal-duration) ease,
      translate var(--reveal-duration) ease;
  }

  .body-text {
    transition: opacity var(--reveal-duration) ease 0.2s,
      translate var(--reveal-duration) ease 0.2s;
  }

  .stat-row {
    transition: opacity var(--reveal-duration) ease 0.3s,
      translate var(--reveal-duration) ease 0.3s;
  }

  .status-note {
    transition: opacity var(--reveal-duration) ease 0.28s,
      translate var(--reveal-duration) ease 0.28s;
  }

  .project-links {
    transition: opacity var(--reveal-duration) ease 0.32s,
      translate var(--reveal-duration) ease 0.32s;
  }

  #scroll_container :is(.cta, .cta-back) {
    transition: opacity var(--reveal-duration) ease 0.35s,
      translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s,
      border-color 0.2s, box-shadow 0.2s;
  }

  .h-line {
    opacity: 0;
    scale: 0 1;
    transition: opacity 0.4s ease, scale 0.4s ease;
  }

  #scroll_container :is(.tag, h1, h2, .body-text, .stat-row, .status-note, .project-links, .cta, .cta-back).visible {
    opacity: 1;
    translate: 0 0;
  }

  .footer-reveal.visible {
    opacity: 1;
    translate: 0 0;
  }

  .h-line.visible {
    opacity: 1;
    scale: 1 1;
  }
}

@layer theme {
  :root[data-theme="dark"] {
    --bg: #000000;
    --fg: var(--dark-fg);
    --muted: var(--dark-muted);
    --accent: var(--accent-dark);
    --cube-chrome: #ffffff;
    --cube-chrome-muted: rgba(255, 255, 255, 0.78);
    --cube-chrome-soft: rgba(255, 255, 255, 0.46);
    --cube-card-border: rgba(255, 255, 255, 0.18);
    --card-bg: rgba(0, 0, 0, 0.72);
    --card-border: var(--cube-card-border);

    #cloud_hero_stage {
      background: #000000;
    }

    #cloud_hero {
      color: #f5fbff;
      background: #000000;
      box-shadow: 0 2rem 4.5rem -2.5rem rgba(0, 0, 0, 0.72);
    }

    #cloud_hero::after {
      height: clamp(18rem, 56vh, 36rem);
      background:
        radial-gradient(
          ellipse 125% 82% at 50% 100%,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.86) 32%,
          rgba(0, 0, 0, 0.48) 58%,
          rgba(0, 0, 0, 0) 100%
        ),
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 1) 100%
        );
    }

    .cloud-hero-tint {
      background:
        radial-gradient(
          ellipse 112% 60% at 50% 100%,
          rgba(0, 0, 0, 0.9) 0%,
          rgba(0, 0, 0, 0.56) 42%,
          rgba(0, 0, 0, 0) 74%
        ),
        linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.86) 0%,
          rgba(0, 0, 0, 0.48) 42%,
          rgba(0, 0, 0, 0.16) 74%,
          rgba(155, 220, 255, 0.06) 100%
        );
    }

    .hero-scroll-buffer {
      background: #000000;
    }

    .hero-scroll-buffer::after {
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 42%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    .face {
      background: repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.025) 0,
          rgba(255, 255, 255, 0.025) 1px,
          transparent 1px,
          transparent 48px
        ),
        repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.025) 0,
          rgba(255, 255, 255, 0.025) 1px,
          transparent 1px,
          transparent 48px
        ),
        #000000;
    }

    .strikeless-inset,
    .cube-project-layer--strikeless {
      --strikeless-art-bg: #04060a;
      background: var(--strikeless-art-bg);
      box-shadow:
        inset 0 0 0 1px rgba(245, 251, 255, 0.42),
        inset 0 -0.8rem 1.6rem rgba(0, 0, 0, 0.28);
    }

    .strikeless-inset .strikeless-mark-light {
      display: none;
    }

    .strikeless-inset .strikeless-mark-dark {
      display: block;
    }

    .cloud-hero-kicker {
      color: #ffffff;
    }

    .cloud-hero-nav a {
      color: rgba(255, 255, 255, 0.78);
    }

    .cloud-hero-nav a:last-child {
      color: rgba(255, 255, 255, 0.78);
    }

    .cloud-hero-nav a:hover {
      color: #ffffff;
    }

    .cloud-hero-nav.is-previewing .cloud-hero-nav-item.is-preview-active {
      color: #ffffff;
    }

    .cloud-hero-nav-preview {
      color: #ffffff;
      background: rgba(0, 0, 0, 0.9);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 1.1rem 3.6rem rgba(0, 0, 0, 0.34);
    }

    .nav-preview-art {
      background: #05070a;
      border-color: rgba(255, 255, 255, 0.16);
    }

    .nav-preview-art--work {
      background: #05070a;
    }

    .nav-preview-slide--strikeless {
      background: #04060a;
      border-color: rgba(255, 255, 255, 0.16);
    }

    .nav-preview-mark-light {
      display: none;
    }

    .nav-preview-mark-dark {
      display: block;
    }

    .nav-preview-art--cal {
      background: #06080c;
    }

    .nav-preview-kicker {
      color: rgba(255, 255, 255, 0.58);
    }

    .tag {
      color: #ffffff;
    }

    .scene-dot {
      background: rgba(255, 255, 255, 0.48);
    }

    .scene-dot.active {
      background: #ffffff;
    }

    #face_caption_num {
      color: rgba(255, 255, 255, 0.72);
    }

    #face_caption_name {
      color: #ffffff;
      opacity: 0.5;
    }

    .cloud-hero-copy h1 {
      color: #ffffff;
      text-shadow:
        0 1.4rem 4rem rgba(0, 0, 0, 0.72),
        0 0 2.8rem rgba(255, 255, 255, 0.1);
    }

    .cloud-hero-copy p {
      color: rgba(255, 255, 255, 0.84);
    }

    .cloud-hero-proof span {
      color: rgba(255, 255, 255, 0.72);
      background: rgba(0, 0, 0, 0.16);
      border-color: rgba(255, 255, 255, 0.24);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0.4rem 1.2rem rgba(0, 0, 0, 0.16);
    }

    .cloud-hero-cta-secondary {
      color: rgba(255, 255, 255, 0.82);
    }

    .hero-logo-mark .hero-logo-dark-mark {
      display: none;
    }

    .hero-logo-mark .hero-logo-light-mark {
      display: block;
    }

    #corner_brand_logo .corner-logo-dark-mark {
      display: none;
    }

    #corner_brand_logo .corner-logo-light-mark {
      display: block;
    }

    #mouse_trail {
      mix-blend-mode: normal;
    }

    .mouse-trail-label {
      color: rgba(245, 251, 255, 0.76);
      text-shadow:
        0 0.08rem 0.28rem rgba(0, 0, 0, 0.78),
        0 0.55rem 1.1rem rgba(155, 220, 255, 0.18);
    }

    #theme_toggle {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.72);
      background-color: transparent;
      box-shadow: none;

      svg {
        color: currentColor;
      }
      .icon-sun {
        color: currentColor;
        opacity: 0;
        rotate: -82deg;
        scale: 0.72;
      }
      .icon-moon {
        color: currentColor;
        opacity: 1;
        rotate: 0deg;
        scale: 1;
      }
    }
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: var(--light-bg);
    --fg: var(--light-fg);
    --muted: var(--light-muted);
    --accent-light: #11131a;
    --accent: var(--accent-light);
    --cube-chrome: #000000;
    --cube-chrome-muted: rgba(0, 0, 0, 0.68);
    --cube-chrome-soft: rgba(0, 0, 0, 0.32);
    --cube-card-border: rgba(0, 0, 0, 0.18);
    --card-bg: rgba(255, 255, 255, 0.18);
    --card-border: var(--cube-card-border);

    .face {
      background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.05) 0,
          rgba(0, 0, 0, 0.05) 1px,
          transparent 1px,
          transparent 48px
        ),
        repeating-linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.05) 0,
          rgba(0, 0, 0, 0.05) 1px,
          transparent 1px,
          transparent 48px
        ),
        #ddd8cf;
    }

    .face-ph {
      color: rgba(0, 0, 0, 0.07);
    }

    #cloud_hero_stage,
    #cloud_hero,
    .hero-scroll-buffer {
      background: #ffffff;
    }

    .hero-scroll-buffer::after {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.86) 42%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    .nav-preview-art--cal {
      background: #ffffff;
    }

    #face_caption_name {
      opacity: 0.35;
    }

    .portfolio-footer {
      color: #11131a;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 9rem),
        #ffffff;
      border-top: var(--hairline) solid rgba(17, 19, 26, 0.12);
    }

    .footer-actions,
    .footer-block,
    .footer-bottom {
      color: rgba(17, 19, 26, 0.66);
    }

    .footer-block h2,
    .footer-wordmark {
      color: #11131a;
    }

    .footer-newsletter input,
    .footer-newsletter button,
    .footer-socials a {
      color: #11131a;
      background: #ffffff;
      border-color: rgba(17, 19, 26, 0.18);
    }

    .footer-newsletter input::placeholder {
      color: rgba(17, 19, 26, 0.45);
    }

    .footer-newsletter button:hover,
    .footer-socials a:hover {
      color: #ffffff;
      background: #11131a;
      border-color: #11131a;
    }

    #theme_toggle,
    #theme_toggle:hover {
      color: #000000;
      border-color: rgba(0, 0, 0, 0.72);
      background-color: transparent;
      box-shadow: none;
      outline: none;
    }

    #theme_toggle:focus-visible {
      outline: 2px solid #11131a;
      outline-offset: 3px;
    }

    #scroll_container :is(.cta, .cta-back),
    #scroll_container .cta-back {
      color: #11131a;
    }

    #scroll_container :is(.cta, .cta-back):hover,
    #scroll_container :is(.cta, .cta-back):focus-visible {
      color: #1f7fbf;
    }
  }

  :root.is-carni-video-light {
    --fg: #ffffff;
    --muted: rgba(255, 255, 255, 0.72);
    --cube-chrome: #ffffff;
    --cube-chrome-muted: rgba(255, 255, 255, 0.78);
    --cube-chrome-soft: rgba(255, 255, 255, 0.5);
    --cube-card-border: rgba(255, 255, 255, 0.34);
    --card-bg: rgba(0, 0, 0, 0.18);
    --card-border: var(--cube-card-border);
  }

  :root.is-carni-video-active #scene::before,
  :root.is-carni-video-active #scene::after {
    opacity: 0;
  }

  :root.is-carni-video-active #cube_unicorn_layer,
  :root.is-carni-video-active .cube-project-layer--carni {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  :root.is-carni-video-active #cube_unicorn_media,
  :root.is-carni-video-active .cube-project-layer--carni .cube-project-media {
    opacity: 1;
  }

  :root.is-carni-video-light .cloud-hero-nav a,
  :root.is-carni-video-light #scroll_container :is(.tag, h1, h2, .body-text, .stat-num, .stat-label, .status-note),
  :root.is-carni-video-light #face_caption_num,
  :root.is-carni-video-light #face_caption_name,
  :root.is-carni-video-light #credit a {
    color: #ffffff;
  }

  :root.is-carni-video-light .body-text {
    color: rgba(255, 255, 255, 0.72);
  }

  :root.is-carni-video-light #scroll_container :is(.cta, .cta-back),
  :root.is-carni-video-light #scroll_container :is(.cta, .cta-back):hover {
    color: #ffffff;
  }

  :root.is-carni-video-light .h-line {
    background: rgba(255, 255, 255, 0.86);
  }

  :root.is-carni-video-light .scene-dot {
    background: rgba(255, 255, 255, 0.52);
  }

  :root.is-carni-video-light .scene-dot.active {
    background: #ffffff;
  }

  :root.is-carni-video-light #theme_toggle {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.78);
  }

  :root.is-carni-video-light #corner_brand_logo .corner-logo-dark-mark {
    display: none;
  }

  :root.is-carni-video-light #corner_brand_logo .corner-logo-light-mark {
    display: block;
  }

  :root.is-carni-video-light #cube .face {
    background:
      repeating-linear-gradient(
        0deg,
        rgba(255, 250, 245, 0.035) 0,
        rgba(255, 250, 245, 0.035) 1px,
        transparent 1px,
        transparent 48px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 250, 245, 0.035) 0,
        rgba(255, 250, 245, 0.035) 1px,
        transparent 1px,
        transparent 48px
      ),
      #2c2723;
  }

  :root.is-carni-video-light #cube .face-ph {
    color: rgba(255, 255, 255, 0.07);
  }

  :root.is-carni-video-light #cube .face > img {
    filter: brightness(var(--carni-tint-b, 0.24)) sepia(0.3) saturate(0.9)
      hue-rotate(-8deg);
    transition: filter 0.7s ease;
  }

  :root.is-carni-video-light #scroll_container .project-link,
  :root.is-carni-video-light #scroll_container .project-link:hover,
  :root.is-carni-video-light #scroll_container .project-link:focus-visible {
    color: #ffffff;
  }

  :is(.cta, .cta-back) {
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -1px 0 rgba(31, 127, 191, 0.16),
      0 0.45rem 1.2rem rgba(0, 28, 48, 0.1);
    backdrop-filter: blur(1.35rem) saturate(170%) contrast(1.03);
    -webkit-backdrop-filter: blur(1.35rem) saturate(170%) contrast(1.03);
  }

  :is(.cta, .cta-back)::before {
    inset: 0;
    z-index: 1;
    background: none;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.42),
      inset -1px -1px 0 rgba(31, 127, 191, 0.16);
    opacity: 1;
  }

  :is(.cta, .cta-back)::after {
    background: none;
    opacity: 0;
  }

  :is(.cta, .cta-back):hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 -1px 0 rgba(31, 127, 191, 0.2),
      0 0.55rem 1.4rem rgba(0, 48, 84, 0.12);
  }

  .cloud-hero-cta {
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cloud-hero-cta::before {
    box-shadow: none;
  }

  .cloud-hero-cta:hover {
    color: var(--accent);
    box-shadow: none;
  }

  #theme_toggle {
    color: #000000;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.72);
    box-shadow: none;
  }

  #theme_toggle::after {
    background: none;
    box-shadow: none;
    opacity: 1;
    mix-blend-mode: normal;
  }

  #theme_toggle:hover {
    background-color: transparent;
    box-shadow: none;
  }

  #scroll_container :is(.cta, .cta-back) {
    isolation: isolate;
    overflow: visible;
    gap: 0.58rem;
    padding: 0.08rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--accent-light);
    line-height: 1;
    transition:
      color 0.2s ease,
      opacity 0.2s ease,
      transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
  }

  #scroll_container .cta-back {
    color: var(--accent-light);
  }

  #scroll_container :is(.cta, .cta-back)::before,
  #scroll_container :is(.cta, .cta-back)::after {
    content: none;
  }

  #scroll_container :is(.cta, .cta-back):hover {
    color: #1f7fbf;
    background: none;
    box-shadow: none;
  }

  :root[data-theme="dark"] #scroll_container :is(.cta, .cta-back):hover {
    color: #ffffff;
  }

  :root[data-theme="dark"] #scroll_container .project-link:hover,
  :root[data-theme="dark"] #scroll_container .project-link:focus-visible {
    color: #ffffff;
  }

  #scroll_container :is(.cta, .cta-back) svg {
    width: 0.68rem;
    height: 0.68rem;
    transition: transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
  }

  #scroll_container .cta:hover,
  #scroll_container .cta:focus-visible {
    transform: translateX(0.2rem);
  }

  #scroll_container .cta-back:hover,
  #scroll_container .cta-back:focus-visible {
    transform: translateX(-0.2rem);
  }

  #scroll_container .cta:hover svg,
  #scroll_container .cta:focus-visible svg {
    transform: translateX(0.18rem);
  }

  #scroll_container .cta-back:hover svg,
  #scroll_container .cta-back:focus-visible svg {
    transform: translateX(-0.18rem);
  }
}

@layer responsive {
  @media (width <= 56.25em) {
    #cloud_hero_stage {
      min-height: 168svh;
    }

    #cloud_hero {
      min-height: 92svh;
      padding: 1.25rem;
    }

    .cloud-hero-tint {
      background:
        radial-gradient(
          ellipse 118% 46% at 50% 100%,
          rgba(255, 255, 255, 0.96) 0%,
          rgba(255, 255, 255, 0.58) 42%,
          rgba(255, 255, 255, 0) 74%
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.28) 0%,
          rgba(255, 255, 255, 0.84) 62%,
          rgba(255, 255, 255, 0.94) 100%
        );
    }

    :root[data-theme="light"] .cloud-hero-video {
      inset: -14% 0 auto 0;
      height: 114%;
      object-position: center 62%;
    }

    :root[data-theme="dark"] .cloud-hero-tint {
      background:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.34) 42%,
          rgba(0, 0, 0, 0.82) 76%,
          rgba(0, 0, 0, 0.98) 100%
        );
    }

    .cloud-hero-copy {
      width: 100%;
      padding-block-end: 0;
    }

    .cloud-hero-nav {
      top: 1rem;
      left: calc(50% + ((100vw - 100%) / 2));
      right: auto;
      width: min(22rem, calc(100vw - 7.25rem));
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.72rem 1rem;
      font-size: 0.58rem;
      letter-spacing: 0.13em;
    }

    .cloud-hero-nav-preview {
      display: none;
    }

    .cloud-hero-title-wrap {
      --hero-title-size: clamp(5.2rem, 27vw, 8rem);
      margin-block-end: 0;
    }

    .cloud-hero-copy h1 {
      font-size: var(--hero-title-size);
    }

    .cloud-hero-copy p {
      max-width: 22rem;
      line-height: 1.6;
    }

    .cloud-hero-proof {
      max-width: 22rem;
      gap: 0.42rem;
      margin-block-start: 1rem;
    }

    .cloud-hero-proof span {
      min-height: 1.72rem;
      padding: 0.36rem 0.52rem;
      font-size: 0.56rem;
      letter-spacing: 0.13em;
    }

    .cloud-hero-actions {
      max-width: 22rem;
      column-gap: 1.05rem;
      row-gap: 0.65rem;
      margin-block-start: 1.15rem;
    }

    .cloud-hero-cta {
      padding: 0.08rem 0;
      font-size: 0.58rem;
      letter-spacing: 0.15em;
    }

    #hud {
      top: 1rem;
      right: 1rem;
    }

    #scene_strip {
      display: none;
    }

    #theme_toggle {
      bottom: 1rem;
      left: 1rem;
      translate: 0 0;
    }

    #corner_brand_logo {
      top: 1rem;
      left: 1rem;
      translate: 0 0;
      width: 2.35rem;
      height: 1.75rem;
    }

    #mouse_trail {
      display: none;
    }

    #face_caption {
      bottom: 1rem;
    }

    #scroll_container section {
      min-height: 150vh;
      align-items: flex-end;
      padding: 0 1.5rem 3.5rem;
    }

    .portfolio-footer {
      padding: 5.5rem 1.5rem 2rem;
    }

    .portfolio-footer__inner {
      min-height: auto;
      gap: 3rem;
    }

    .footer-topline,
    .footer-bottom {
      flex-direction: column;
      gap: 1.25rem;
    }

    .footer-actions {
      width: 100%;
      justify-content: space-between;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .footer-newsletter {
      grid-template-columns: 1fr 3rem;
    }

    .footer-wordmark {
      font-size: clamp(5.2rem, 25vw, 8.5rem);
      white-space: normal;
    }

    :is(.text-card, .text-card.right, .text-card.center) {
      max-width: 100%;
      padding: 1.5rem 1.25rem;
    }

    .body-text {
      line-height: 1.55;
    }

    .stat-row {
      gap: 1.5rem;
      margin-block-start: 1.25rem;
    }

    .cta-row {
      margin-block-start: 1.25rem;
    }
  }
}

/* Hero motion enhancement — 3D pointer tilt + letter entrance (see PROJECT_MEMORY).
   NOTE: never put perspective/transform/filter on #cloud_hero itself — the nav
   is position:fixed inside it and would lose the viewport as containing block
   (the copy/video planes get transformPerspective from GSAP instead). */
.cloud-hero-copy { perspective: 1200px; }
.cloud-hero-title-wrap { transform-style: preserve-3d; }
.hero-title-text .hero-ch { display: inline-block; will-change: transform, opacity, filter; }

/* Tooltips — data-tip attribute system. Unlayered on purpose: must override layered pseudo styles.
   No [data-tip] position rule: every target is already positioned, and an unlayered
   position:relative would break the fixed chrome (#hud, #theme_toggle). */
#theme_toggle[data-tip] {
  overflow: visible;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 90;
  left: 50%;
  right: auto;
  bottom: calc(100% + 0.55rem);
  top: auto;
  width: max-content;
  height: auto;
  padding: 0.36rem 0.62rem;
  border: 0;
  border-radius: 4px;
  background: rgba(17, 19, 26, 0.92);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.35rem 1.1rem rgba(17, 19, 26, 0.22);
  mix-blend-mode: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0.4s, 0.4s, 0.4s;
}

[data-tip][data-tip-pos="right"]::after {
  left: calc(100% + 0.55rem);
  bottom: 50%;
  transform: translate(-0.25rem, 50%);
}

[data-tip][data-tip-pos="right"]:hover::after,
[data-tip][data-tip-pos="right"]:focus-visible::after {
  transform: translate(0, 50%);
}

[data-tip][data-tip-pos="left"]::after {
  left: auto;
  right: calc(100% + 0.55rem);
  bottom: 50%;
  transform: translate(0.25rem, 50%);
}

[data-tip][data-tip-pos="left"]:hover::after,
[data-tip][data-tip-pos="left"]:focus-visible::after {
  transform: translate(0, 50%);
}

:root[data-theme="dark"] [data-tip]::after {
  background: rgba(245, 248, 252, 0.95);
  color: #11131a;
  box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  [data-tip]::after {
    transition: none;
  }
}

/* Hero morph pieces (BERMUX <-> ED BERMU slide reveal). The sizer keeps the
   h1 box at the destination word's size while the pieces move on top; the
   trim rules must match the h1's so piece glyphs sit exactly where flow
   text sits. Unlayered on purpose so they win over the layered hero rules. */
.cloud-hero-copy h1 .hero-ch {
  /* GSAP force-sets inline-block on any span it transforms (entrance),
     which disables kerning/tracking between letters and widens the word.
     Make it explicit so untweened states, the sizer, the morph pieces and
     the measurement pass all render at exactly the same width. */
  display: inline-block;
}
.cloud-hero-copy h1 .hero-sizer {
  visibility: hidden;
}
.cloud-hero-copy h1 .hero-piece {
  position: absolute;
  top: 0;
  left: 50%;
  white-space: pre;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  will-change: transform, clip-path;
}
.cloud-hero-copy h1 .hero-piece-ed { z-index: 1; }
.cloud-hero-copy h1 .hero-piece-x { z-index: 2; }
.cloud-hero-copy h1 .hero-piece-bermu { z-index: 3; }

/* The visible hero word rides centered inside the constant sizer box, so
   the h1 never changes width or height when the word swaps. Same trim
   rules as the pieces so its glyphs sit exactly where flow text sits. */
.cloud-hero-copy h1 .hero-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: pre;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Siobhan cube tile + mark fit. Unlayered on purpose (like the hero morph
   rules above) — inside @layer these lose to the project-frame defaults. */
.cube-project-layer--siobhan {
  background: #fefefe;
  box-shadow:
    inset 0 0 0 1px rgba(1, 39, 84, 0.06),
    inset 0 -0.8rem 1.6rem rgba(1, 39, 84, 0.045);
}

.cube-project-layer--siobhan .cube-project-media--mark {
  /* laid out at 3x and scaled back down: the compositor rasterizes the
     SVG at the layout size, and the cube's 3D projection stretches that
     texture — supersampling keeps the mark crisp on the rotated face */
  inset: 14% auto auto 12%;
  width: 228%;
  height: 216%;
  object-fit: contain;
  transform: scale(0.33333);
  transform-origin: top left;
}

/* Siobhan stop, dark mode: duotone the gallery artwork toward the brand
   navy so the face complements the powder wash instead of sitting on it
   as a black hole (light mode's cream wall already fits). Always on in
   dark — the face must already wear the treatment while the cube is
   turning toward the stop, before the wash window opens. */
#cube .face[data-i="3"] > img {
  transition: filter 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] #cube .face[data-i="3"] > img {
  filter: sepia(1) saturate(1.6) hue-rotate(178deg) brightness(0.84);
}

/* The wall (everything outside the frame) matches the powder wash
   (#d7e9ff): a near-opaque plate with a frame-shaped hole rides above the
   duotoned base, a few percent of the fabric texture showing through. */
#cube .face[data-i="3"]::before {
  content: "";
  position: absolute;
  inset: 0;
  /* above the base artwork (a positioned ::before paints below the img
     in tree order without this), below the tile layer at z 4 */
  z-index: 1;
  background: #d7e9ff;
  clip-path: polygon(
    evenodd,
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 0%,
    24.17% 10.11%,
    24.17% 68.31%,
    75.24% 68.31%,
    75.24% 10.11%,
    24.17% 10.11%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] #cube .face[data-i="3"]::before {
  opacity: 0.96;
}

/* The framed piece keeps its real look: an unfiltered copy of the artwork
   clipped to the frame's full footprint (canvas-measured, pulled 0.15%
   inside the gold's outer edge so the powder plate overlaps it and no
   wall sliver can show as an outline). Gold, its inner shadow, and the
   mat all read natural; the tile layer covers the artwork's center. */
#cube .face[data-i="3"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("https://assets.codepen.io/573855/demo-raw-04-dark.webp")
    center / cover no-repeat;
  clip-path: inset(10.11% 24.76% 31.69% 24.17%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] #cube .face[data-i="3"]::after {
  opacity: 1;
}

/* Carni face: the app icon on a porcelain tile (replaces the old
   Unicorn.studio scene). Same 3x supersample as the Siobhan mark so the
   SVG stays crisp on the rotated face. */
.cube-project-layer--carni {
  background: #fefefe;
  box-shadow:
    inset 0 0 0 1px rgba(13, 18, 24, 0.05),
    inset 0 -0.8rem 1.6rem rgba(13, 18, 24, 0.04);
}

.cube-project-layer--carni .cube-project-media--mark {
  inset: 18% auto auto 18%;
  width: 192%;
  height: 192%;
  object-fit: contain;
  transform: scale(0.33333);
  transform-origin: top left;
}

/* SplitPay face: app icon on a porcelain tile, supersampled like the
   other vector marks. */
.cube-project-layer--splitpay {
  background: #fefefe;
  box-shadow:
    inset 0 0 0 1px rgba(13, 18, 24, 0.05),
    inset 0 -0.8rem 1.6rem rgba(13, 18, 24, 0.04);
}

.cube-project-layer--splitpay .cube-project-media--mark {
  inset: 18% auto auto 18%;
  width: 192%;
  height: 192%;
  object-fit: contain;
  transform: scale(0.33333);
  transform-origin: top left;
}

/* Tree face: the brand piece carries its own sage gradient, so it fills
   the frame edge to edge (the tile bg only shows while the image loads). */
.cube-project-layer--tree {
  background: #747b73;
}

/* Siobhan stop: all three stats stay on one row; the card widens to fit */
#s3 .text-card {
  max-width: clamp(30rem, 46vw, 42rem);
}

#s3 .stat-row {
  flex-wrap: nowrap;
  gap: clamp(1.4rem, 2.6vw, 2.5rem);
}

#s3 .stat-label {
  white-space: nowrap;
}

/* Siobhan background wash — powder blue over the 50–70% progression window */
.siobhan-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100svh;
  min-width: 1px;
  min-height: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #d7e9ff;
  contain: layout paint size;
  transition:
    opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0.24s;
}

.siobhan-bg.is-active {
  opacity: var(--cube-stage-opacity);
  visibility: visible;
  transition:
    opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0s;
}

/* The wash is light, so dark mode flips its chrome to Siobhan navy while
   the window is active (mirror of the is-carni-video-light treatment) */
:root[data-theme="dark"].is-siobhan-bg-active {
  --fg: #012754;
  --muted: rgba(1, 39, 84, 0.72);
  --cube-chrome: #012754;
  --cube-chrome-muted: rgba(1, 39, 84, 0.78);
  --cube-chrome-soft: rgba(1, 39, 84, 0.46);
  --cube-card-border: rgba(1, 39, 84, 0.2);
  --card-bg: rgba(254, 254, 254, 0.55);
  --card-border: rgba(1, 39, 84, 0.2);
}

:root[data-theme="dark"].is-siobhan-bg-active .cloud-hero-nav a,
:root[data-theme="dark"].is-siobhan-bg-active #scroll_container :is(.tag, h1, h2, .body-text, .stat-num, .stat-label, .status-note),
:root[data-theme="dark"].is-siobhan-bg-active #face_caption_num,
:root[data-theme="dark"].is-siobhan-bg-active #face_caption_name,
:root[data-theme="dark"].is-siobhan-bg-active #credit a {
  color: #012754;
}

:root[data-theme="dark"].is-siobhan-bg-active .body-text {
  color: rgba(1, 39, 84, 0.75);
}

:root[data-theme="dark"].is-siobhan-bg-active #scroll_container :is(.cta, .cta-back),
:root[data-theme="dark"].is-siobhan-bg-active #scroll_container :is(.cta, .cta-back):hover {
  color: #012754;
}

:root[data-theme="dark"].is-siobhan-bg-active .h-line {
  background: rgba(1, 39, 84, 0.7);
}

:root[data-theme="dark"].is-siobhan-bg-active .scene-dot {
  background: rgba(1, 39, 84, 0.4);
}

:root[data-theme="dark"].is-siobhan-bg-active .scene-dot.active {
  background: #012754;
}

:root[data-theme="dark"].is-siobhan-bg-active #theme_toggle {
  color: #012754;
  border-color: rgba(1, 39, 84, 0.6);
}

:root[data-theme="dark"].is-siobhan-bg-active #corner_brand_logo .corner-logo-light-mark {
  display: none;
}

:root[data-theme="dark"].is-siobhan-bg-active #corner_brand_logo .corner-logo-dark-mark {
  display: block;
}

:root[data-theme="dark"].is-siobhan-bg-active #scroll_container .project-link,
:root[data-theme="dark"].is-siobhan-bg-active #scroll_container .project-link:hover,
:root[data-theme="dark"].is-siobhan-bg-active #scroll_container .project-link:focus-visible {
  color: #012754;
}