/*
DESIGN INTENT: Aesthera99 Authored World Styles
What:  Styles the film hero and transparent parametric-type overlay, pixel-grid cloud reveal, portfolio worlds, cloud-clipped campaign galleries, direct Work/Contact drawers, review-only scope feeder, deep-blue handoff, fluid Gokhan statement, cursor-lensed stellar whiteout, and Divine Light-backed Nectar launch orbit.
Why:   Keeps the cinematic scroll system and centered artist-led statement legible while a restrained editorial shortcut lets time-conscious visitors review selected work or prepare a project brief without mutating the authored atmospheric journey.
Where: aesthera99/site/styles.css
*/

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

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

@font-face {
  font-family: "Thumpa";
  src:
    url("./.envato-assets/thumpa-bold-sans-serif/Thumpa.woff2") format("woff2"),
    url("./.envato-assets/thumpa-bold-sans-serif/Thumpa.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --signal-yellow: #f5ed2d;
  --post-cloud-blue: #003a7e;
  --fluid-world-pink: #dca5f9;
  /* Jackson selected the gallery's pixel face for WORK / CONTACT as well. */
  --font-topbar-accent: "Aeogo Pixel", monospace;
  --font-editorial-ui: Arial, Helvetica, sans-serif;
  /* The hero transition continues to own its existing square rhythm. */
  --pixel-motif-size: 24px;
  --interactive-cursor: pointer;
  --cloud-splice-scale: 1.425;
  --header-padding: clamp(1rem, 2.1vw, 2.25rem);
  --portfolio-edge-polish:
    drop-shadow(0 0 0.65px rgba(250, 248, 255, 0.82))
    drop-shadow(0 0 1.35px rgba(202, 224, 255, 0.28));
}

* {
  box-sizing: border-box;
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  background: #000;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

body.project-cloud-open,
body.fast-path-open {
  overflow: hidden;
}

a,
button {
  color: inherit;
}

.hero {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  background: #000;
}

.hero__video,
.hero__shade,
.hero__parametric-type {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__video {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #000;
}

.hero__shade {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 23%);
}

.hero__parametric-type {
  z-index: 1;
  display: block;
  pointer-events: none;
  background: transparent;
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: clamp(0.35rem, 0.55vw, 0.65rem);
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--header-padding);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Keep navigation in its own compositor layer above both viewport WebGL
     canvases; otherwise GPU-backed reveal frames can paint over fixed copy. */
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 320ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.project-cloud-open .site-header,
body.is-space-ascending .site-header,
body.is-worlds-offer-intro .site-header {
  opacity: 0;
  pointer-events: none;
}

body.is-space-ascending .site-header,
body.is-worlds-offer-intro .site-header {
  transform: translate3d(0, -1.5rem, 0);
}

.brand-lockup {
  position: relative;
  display: block;
  width: clamp(16rem, 39vw, 37.5rem);
  height: clamp(7rem, 9.2vw, 8.75rem);
  overflow: hidden;
  flex: 0 1 auto;
}

.brand-lockup img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-27%);
}

.brand-lockup__animation {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-27%);
  will-change: opacity;
}

.brand-lockup__animation.is-active {
  opacity: 0.75;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 7vw, 7.5rem);
  padding-top: clamp(2rem, 4.4vw, 4.5rem);
  color: var(--signal-yellow);
  font-family: var(--font-topbar-accent);
  font-size: clamp(1.1rem, 1.9vw, 1.8rem);
  line-height: 1;
  white-space: nowrap;
}

.site-nav__action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: -0.75rem -0.4rem;
  padding: 0.75rem 0.4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none;
}

.site-nav__action:hover,
.site-nav__action:focus-visible,
.site-nav__action[aria-expanded="true"] {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-nav__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.35em;
}

.fast-path {
  position: fixed;
  z-index: 1600;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 560ms;
}

.fast-path.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.fast-path__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 360ms ease;
}

.fast-path.is-open .fast-path__backdrop {
  opacity: 1;
}

.fast-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fffdf8;
  color: #080808;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 5rem rgba(0, 0, 0, 0.34);
  scrollbar-color: var(--signal-yellow) #080808;
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.fast-drawer--work {
  left: 0;
  width: min(92vw, 68rem);
  transform: translate3d(-102%, 0, 0);
}

.fast-drawer--contact {
  right: 0;
  width: min(94vw, 54rem);
  transform: translate3d(102%, 0, 0);
}

.fast-path.is-open[data-active="work"] .fast-drawer--work,
.fast-path.is-open[data-active="contact"] .fast-drawer--contact {
  transform: translate3d(0, 0, 0);
}

.scope-feeder label > span:first-child,
.scope-review__heading p,
.scope-review__heading > span,
.scope-review__summary h4 {
  margin: 0;
  font-family: var(--font-editorial-ui);
  font-size: 0.76rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.fast-drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font-editorial-ui);
  font-size: 0.74rem;
}

.fast-drawer__close span:last-child {
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 0.7;
}

.fast-drawer__close--floating {
  position: absolute;
  z-index: 6;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  background: rgba(255, 253, 248, 0.92);
}

.fast-drawer__close--floating span:first-child {
  display: none;
}

.fast-drawer__close:hover,
.fast-drawer__close:focus-visible {
  background: #080808;
  color: var(--signal-yellow);
}

.fast-drawer__close:focus-visible,
.fast-work__contact:focus-visible,
.scope-feeder__review-button:focus-visible,
.scope-review__actions button:focus-visible,
.worlds-offer__contact button:focus-visible {
  outline: 3px solid var(--signal-yellow);
  outline-offset: 3px;
}

.fast-drawer__body {
  padding: clamp(1.25rem, 3vw, 3rem);
}

.fast-work {
  display: grid;
  gap: clamp(4.5rem, 8vw, 8rem);
}

.fast-work__project {
  display: grid;
  grid-template-columns: minmax(12rem, 0.46fr) minmax(0, 1.54fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(1.4rem, 2vw, 2rem);
  border-top: 1px solid var(--post-cloud-blue);
}

.fast-work__copy {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: grid;
  container-type: inline-size;
  gap: 1rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--post-cloud-blue);
}

.fast-work__copy h3 {
  margin: 0;
  color: inherit;
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-size: min(6rem, 18.5cqi);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.fast-work__summary {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.96rem, 1.3vw, 1.15rem);
  line-height: 1.45;
}

.fast-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, 0.3vw, 5px);
  min-width: 0;
}

.fast-work__media {
  position: relative;
  min-height: 12rem;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #111;
  aspect-ratio: 1 / 1;
}

.fast-work__media--feature,
.fast-work__media--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.fast-work__media--portrait {
  grid-row: span 2;
  aspect-ratio: 4 / 5;
}

.fast-work__media img,
.fast-work__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fast-work__media:hover img,
.fast-work__media:hover video {
  transform: scale(1.025);
}

.fast-work__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid #080808;
  background: var(--signal-yellow);
  color: #080808;
  text-align: center;
}

.fast-work__contact strong {
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 0.9;
}

.fast-work__contact:hover {
  background: #080808;
  color: var(--signal-yellow);
}

.fast-contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: 8rem;
}

.fast-contact__intro {
  display: grid;
  gap: 1.15rem;
  max-width: 48rem;
  padding-right: 4rem;
}

.fast-contact__intro h2 {
  max-width: 9ch;
  margin: 0;
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(3.5rem, 7.5vw, 7rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.035em;
}

.fast-contact__intro > p:not([class]) {
  max-width: 39rem;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  line-height: 1.35;
}

.scope-feeder {
  display: grid;
  gap: 3.5rem;
}

.scope-feeder__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.scope-feeder[hidden] {
  display: none;
}

.scope-feeder__section {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.scope-feeder__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.scope-feeder__grid--identity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scope-feeder label:not(.scope-feeder__consent) {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
}

.scope-feeder__span-2 {
  grid-column: span 2;
}

.scope-feeder__span-3 {
  grid-column: span 3;
}

.scope-feeder__details {
  border-top: 1px solid #080808;
  border-bottom: 1px solid #080808;
}

.scope-feeder__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.8rem 0;
  font-family: var(--font-editorial-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
}

.scope-feeder__details summary::-webkit-details-marker {
  display: none;
}

.scope-feeder__details summary:focus-visible {
  outline: 3px solid var(--signal-yellow);
  outline-offset: 3px;
}

.scope-feeder__details[open] summary span:last-child {
  font-size: 0;
}

.scope-feeder__details[open] summary span:last-child::after {
  content: "CLOSE −";
  font-size: 0.75rem;
}

.scope-feeder__details .scope-feeder__section {
  padding: 1.5rem 0 2rem;
}

.scope-feeder input,
.scope-feeder select,
.scope-feeder textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #080808;
  border-radius: 0;
  background: transparent;
  color: #080808;
  font: 1rem/1.35 Arial, sans-serif;
}

.scope-feeder input,
.scope-feeder select {
  min-height: 3.2rem;
  padding: 0.8rem;
}

.scope-feeder textarea {
  min-height: 7rem;
  padding: 0.85rem;
  resize: vertical;
}

.scope-feeder input:focus,
.scope-feeder select:focus,
.scope-feeder textarea:focus {
  outline: 3px solid var(--signal-yellow);
  outline-offset: -4px;
}

.scope-feeder input:user-invalid,
.scope-feeder select:user-invalid,
.scope-feeder textarea:user-invalid {
  border-color: #c80040;
}

.scope-feeder__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #080808;
  font-family: Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
}

.scope-feeder__consent input {
  width: 1.25rem;
  min-height: 0;
  height: 1.25rem;
  margin: 0.05rem 0 0;
  padding: 0;
  accent-color: #080808;
}

.scope-feeder__review-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.35rem 1.5rem;
  border: 1px solid #080808;
  background: #080808;
  color: var(--signal-yellow);
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.9;
}

.scope-feeder__review-button:hover {
  background: var(--signal-yellow);
  color: #080808;
}

.scope-review {
  display: grid;
  gap: 2rem;
}

.scope-review[hidden] {
  display: none;
}

.scope-review__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #080808;
}

.scope-review__heading h3 {
  margin: 0.45rem 0 0;
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 400;
  line-height: 0.8;
}

.scope-review__heading > span {
  padding: 0.45rem 0.55rem;
  border: 1px solid #080808;
}

.scope-review__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #080808;
  background: #080808;
}

.scope-review__summary section {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.2rem;
  background: #fffdf8;
}

.scope-review__summary section:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

.scope-review__summary h4 {
  color: #5c5c5c;
}

.scope-review__summary p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}

.scope-review__notice {
  margin: 0;
  padding: 1rem;
  border-left: 0.45rem solid #f04b75;
  background: rgba(240, 75, 117, 0.09);
  font-family: Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
}

.scope-review.is-sent .scope-review__notice {
  border-left-color: #0b9b63;
  background: rgba(11, 155, 99, 0.1);
}

.scope-review.is-error .scope-review__notice {
  border-left-color: #c80040;
  background: rgba(200, 0, 64, 0.08);
}

.scope-review__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.scope-review__actions button {
  min-height: 3.5rem;
  border: 1px solid #080808;
  background: transparent;
  color: #080808;
  font-family: var(--font-editorial-ui);
}

.scope-review__actions button:last-child {
  background: #080808;
  color: var(--signal-yellow);
}

.scope-review__actions button:hover {
  background: var(--signal-yellow);
  color: #080808;
}

.scope-review__actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.scope-review.is-sent [data-scope-submit] {
  cursor: default;
  background: #0b9b63;
  color: #fffdf8;
}

.work-transition {
  position: relative;
  margin-top: 100svh;
  height: 400svh;
  z-index: 1;
  background: transparent;
}

.work-transition__pin {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.work-transition__field,
.work-transition__glitch,
.work-transition__scan {
  position: absolute;
  inset: 0;
}

.work-transition__field {
  z-index: 0;
  background: #dca5f9;
  opacity: 0;
}

.work-transition__field.is-live {
  opacity: 1;
}

.work-transition__glitch {
  /* The same canvas builds the hero grid, then stays above the cloud so
     reversing scroll reconstructs blue cells instead of tinting the scene. */
  z-index: 4;
  display: block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
  contain: strict;
}

.work-transition__glitch.is-complete {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.work-transition__scan {
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 5px,
    rgba(255, 255, 255, 0.09) 6px,
    transparent 7px
  );
}

.work-transition__glitch.is-active + .work-transition__scan {
  /* Scroll already supplies continuous pixel motion. Keeping the scan texture
     static avoids animating and blending a second viewport-sized layer. */
  opacity: 0.18;
}

.work-transition__pin.is-content-live {
  pointer-events: auto;
}

.work-sky {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  background: #dca5f9;
  opacity: var(--sky-opacity, 0);
  pointer-events: none;
  contain: paint;
}

.work-sky.is-live {
  pointer-events: auto;
}

.work-sky__background,
.work-sky__zoom,
.work-sky__zoom-reverse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-sky__background {
  z-index: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #dca5f9;
  transform: scale(var(--cloud-splice-scale));
  transform-origin: center;
}

.work-sky__zoom {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--post-cloud-blue);
  opacity: 0;
  transform: scale(var(--post-cloud-splice-scale, 1.425));
  transform-origin: center;
  transition: opacity 96ms linear;
}

.work-sky__zoom-reverse {
  z-index: 5;
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--post-cloud-blue);
  opacity: 0;
  transform: scale(var(--post-cloud-splice-scale, 1.425));
  transform-origin: center;
  pointer-events: none;
}

/* The work pin already owns a fixed viewport. During the deliberate space
   return it moves above the locked Stellar frame only after that frame has
   reached the exact terminal blue shared by the reversed film. */
body.is-space-cloud-return .work-transition {
  z-index: 12;
}

body.is-space-cloud-return .work-transition__pin {
  z-index: 10;
  pointer-events: none;
}

.work-sky.is-space-cloud-reversing {
  opacity: 1;
  pointer-events: none;
}

.work-sky.is-space-cloud-reversing .work-sky__zoom-reverse {
  opacity: 1;
}

.work-sky.is-space-cloud-reversing .work-sky__portfolios {
  opacity: 0;
  pointer-events: none;
}

.work-sky__deep-blue {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: var(--post-cloud-blue);
  opacity: 0;
  transition: opacity 1s linear;
}

.work-sky.is-zooming .work-sky__zoom {
  opacity: 1;
}

.work-sky.is-zoom-complete .work-sky__deep-blue {
  opacity: 1;
}

.work-sky__portfolios {
  --portfolio-composition-width: min(165vw, 152svh, 120rem);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--portfolio-composition-width);
  aspect-ratio: 1.52 / 1;
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  transition: opacity 440ms ease, transform 620ms ease;
}

.work-sky__portfolios-video {
  --portfolio-source-mask: linear-gradient(#000 0 0);
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: var(--portfolio-source-mask);
  mask-image: var(--portfolio-source-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Let the two unselected figures recede across most of the 940ms portal zoom;
     the former 360ms fade vanished before the spatial handoff could register. */
  transition: opacity 820ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The atlas is one continuous decoder. Cut the selected alpha island only once
   its aligned edge-repaired replacement is ready; the other two keep the slow fade. */
.work-sky__portfolios:has(.work-portfolio--heart.is-project-source.is-project-ready) .work-sky__portfolios-video {
  --portfolio-source-mask: radial-gradient(ellipse 11.5% 16.5% at 30.5% 33.6%, transparent 0 88%, #000 100%);
}

.work-sky__portfolios:has(.work-portfolio--angel.is-project-source.is-project-ready) .work-sky__portfolios-video {
  --portfolio-source-mask: radial-gradient(ellipse 14% 19.5% at 66.6% 36.4%, transparent 0 88%, #000 100%);
}

.work-sky__portfolios:has(.work-portfolio--butterfly.is-project-source.is-project-ready) .work-sky__portfolios-video {
  --portfolio-source-mask: radial-gradient(ellipse 12% 15% at 42.1% 68.8%, transparent 0 88%, #000 100%);
}

.work-sky.is-project-open .work-sky__portfolios-video {
  opacity: 0;
}

.work-sky.is-project-handoff .work-sky__portfolios-video {
  /* The continuously running atlas replaces the receded duplicate on the same
     phase; suppressing the ordinary open/close fade prevents a visible refresh. */
  transition: none;
}

.work-sky.is-live .work-sky__zoom,
.work-sky.is-splice-pending .work-sky__zoom,
.work-sky.is-zooming .work-sky__zoom,
.work-sky.is-zoom-complete .work-sky__deep-blue,
.work-sky.is-splice-pending .work-sky__portfolios,
.work-sky.is-zooming .work-sky__portfolios {
  will-change: opacity, transform;
}

.work-sky.is-splice-pending .work-sky__portfolios,
.work-sky.is-zooming .work-sky__portfolios {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(1.045);
}

.work-portfolio {
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 50%;
  outline: none;
  animation: work-float 6.5s ease-in-out infinite alternate;
  transition: opacity 360ms ease;
  will-change: transform;
}

.work-portfolio.is-project-handoff {
  transition: none;
}

.work-portfolio__source {
  display: none;
}

.work-transition__pin.is-pixel-masked .work-portfolio {
  /* Preserve each figure's current float pose while most of it is occluded;
     resuming the same animation avoids a visual jump as pixels clear. */
  animation-play-state: paused;
}

.work-portfolio--heart {
  top: 12.5%;
  left: 6.5%;
  width: 48%;
  animation-duration: 7.2s;
}

.work-portfolio--angel {
  top: 18.5%;
  left: 45.5%;
  width: 43%;
  animation-delay: -2.4s;
  animation-duration: 8s;
}

.work-portfolio--butterfly {
  top: 53.5%;
  left: 23.5%;
  width: 38%;
  animation-delay: -4.1s;
  animation-duration: 6.8s;
}

.work-sky.is-project-open .work-sky__portfolios {
  pointer-events: none;
}

.work-portfolio.is-project-source,
.work-portfolio.is-project-muted {
  opacity: 0;
}

.project-cloud[hidden] {
  display: none;
}

.project-cloud {
  --project-accent: #b8a3d2;
  --project-accent-deep: #3e294f;
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  color: #11100f;
  isolation: isolate;
}

.project-cloud.is-open,
.project-cloud.is-closing {
  visibility: visible;
}

.project-cloud.is-open {
  pointer-events: auto;
}

.project-cloud.is-closing {
  pointer-events: none;
}

.project-cloud__figure {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--project-figure-edge, -18vw);
  display: grid;
  place-items: center;
  width: var(--project-figure-width, 90vw);
  height: auto;
  aspect-ratio: 16 / 9;
  margin-block: auto;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.project-cloud.is-open .project-cloud__figure,
.project-cloud.is-closing .project-cloud__figure {
  opacity: 1;
}

.project-cloud__figure video {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}

.project-cloud__figure canvas {
  grid-area: 1 / 1;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.project-cloud__figure[data-alpha-edge-active] video {
  visibility: hidden;
}

.project-cloud__figure[data-alpha-edge-active] canvas {
  display: block;
}

.project-cloud__sheet {
  position: absolute;
  z-index: 2;
  top: 2.5svh;
  bottom: 2.5svh;
  left: 18%;
  width: 80%;
  min-width: 0;
  overflow: hidden;
  background: var(--project-accent-deep);
  -webkit-clip-path: url("#project-cloud-gallery-clip");
  clip-path: url("#project-cloud-gallery-clip");
  transform: translate3d(116%, 0, 0);
  /* Match the cloud's departure curve so arrival no longer front-loads
     most of its lateral travel ahead of the figure approach. */
  transition: transform 940ms cubic-bezier(0.84, 0, 0.8, 0.28);
  will-change: transform;
}

.project-cloud.is-open .project-cloud__sheet {
  transform: translate3d(0, 0, 0);
}

.project-cloud.is-closing .project-cloud__sheet {
  transition-timing-function: cubic-bezier(0.84, 0, 0.8, 0.28);
}

.project-cloud__sheet::before {
  content: "";
  display: none;
}

.project-cloud__silhouette {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.project-cloud__silhouette ellipse {
  transform-box: fill-box;
  transform-origin: center;
}

.project-cloud__body {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.project-cloud__close {
  position: absolute;
  z-index: 4;
  top: clamp(1.2rem, 2.8vw, 3rem);
  right: auto;
  left: clamp(1.2rem, 2.8vw, 3rem);
  width: clamp(2.45rem, 3.25vw, 3.55rem);
  height: clamp(2.8rem, 3.7vw, 4.05rem);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  transition: opacity 180ms ease, transform 180ms ease;
}

.project-cloud__close:hover,
.project-cloud__close:focus-visible {
  transform: scale(1.04);
}

.project-cloud__close:focus-visible {
  outline: none;
}

.project-cloud__close img {
  display: block;
  width: 33%;
  height: 33%;
  object-fit: contain;
  filter: none;
}

.project-cloud__close:focus-visible img {
  filter: none;
}

.project-cloud.is-closing .project-cloud__close {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.84, 0, 0.8, 0.28);
}

.project-cloud__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 44%;
  display: flex;
  flex-direction: column;
  width: clamp(21rem, 26vw, 28rem);
  max-width: 44%;
  min-width: 0;
  padding: clamp(1.5rem, 2vw, 2.35rem);
  overflow: hidden;
  background: #090909;
  color: #fffafe;
  box-shadow: 0 0 0 1px rgba(255, 250, 254, 0.12), 0 1.5rem 4rem rgba(17, 16, 15, 0.22);
  opacity: 0;
  transform: translate3d(1.5rem, -50%, 0);
  transition: opacity 420ms ease 430ms, transform 620ms cubic-bezier(0.2, 0.72, 0.16, 1) 390ms;
}

.project-cloud.is-open .project-cloud__copy,
.project-cloud.is-open.is-media-ready .project-cloud__media {
  opacity: 1;
}

.project-cloud.is-open .project-cloud__copy {
  transform: translate3d(0, -50%, 0);
}

.project-cloud.is-open.is-media-ready .project-cloud__media {
  transform: translate3d(0, 0, 0) scale(1);
}

.project-cloud.is-media-ready .project-cloud__media {
  /* The board decoder now starts after the figure zoom; once its aligned frame
     is ready, reveal immediately instead of replaying the old load-time delay. */
  transition-delay: 0ms;
}

.project-cloud.is-closing .project-cloud__copy {
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.84, 0, 0.8, 0.28);
}

.project-cloud.is-closing .project-cloud__media {
  transition: opacity 360ms ease, transform 560ms cubic-bezier(0.84, 0, 0.8, 0.28);
}

.project-cloud__copy h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-editorial-ui);
  font-size: clamp(2.25rem, 2.65vw, 4.3rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.76;
  overflow-wrap: normal;
}

.project-cloud__copy h2.is-cloud-puff-long {
  font-size: clamp(1.9rem, 2vw, 3.2rem);
}

.cloud-puff-heading {
  display: flex;
  align-items: flex-end;
  width: max-content;
  max-width: 100%;
  height: 1em;
  gap: 0.015em;
  line-height: 1;
}

.cloud-puff-heading__glyph {
  display: block;
  flex: 0 0 var(--cloud-puff-width);
  width: var(--cloud-puff-width);
  height: 1em;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(0) invert(1);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 74%;
  animation: cloud-puff-glyph-idle var(--cloud-puff-duration) ease-in-out infinite;
  animation-delay: var(--cloud-puff-delay);
  animation-play-state: paused;
  will-change: transform;
}

.project-cloud.is-open .cloud-puff-heading__glyph {
  animation-play-state: running;
}

.project-cloud__summary {
  max-width: 32rem;
  margin: clamp(1rem, 1.8svh, 1.4rem) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 0.86vw, 1.08rem);
  font-style: normal;
  line-height: 1.42;
}

.project-cloud__media {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* This element is reused by every project. Disable browser scroll anchoring so
     newly loaded grid media cannot resurrect the previous project's offset. */
  overflow-anchor: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  opacity: 0;
  scrollbar-width: none;
  transform: translate3d(1.2rem, 0, 0) scale(1.015);
  transition: opacity 420ms ease 520ms, transform 680ms cubic-bezier(0.2, 0.72, 0.16, 1) 470ms;
}

.project-cloud__media::-webkit-scrollbar {
  display: none;
}

.project-cloud__media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: clamp(9rem, 19svh, 14rem);
  gap: clamp(2px, 0.22vw, 5px);
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--project-accent) 58%, var(--project-accent-deep));
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="film"] {
  /* The moving campaign becomes the uninterrupted header; the heart and copy
     cross only its edges rather than forcing another still into a hidden cell. */
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] {
  grid-auto-rows: clamp(12rem, 22.2svh, 17.5rem);
  /* The four tracks equal the sheet's 95svh height: a 44.4svh film header,
     then a compact 27svh packaging window and 23.6svh liquid window. */
  grid-template-rows: 22.2svh 22.2svh 27svh 23.6svh;
  gap: 0;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="liquid"] {
  grid-column: 1 / span 2;
  grid-row: 4;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="packaging"] {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="print"] {
  /* The poster and packaging form a continuous lower spread with no empty
     cells exposed as the cloud scrolls. Size containment prevents the tall
     poster artwork from stretching the two compact left-column rows. */
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
  contain: size;
}

.project-cloud__media-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  grid-row: span 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--project-accent) 68%, white);
  color: inherit;
  cursor: var(--interactive-cursor);
  appearance: none;
}

.project-cloud__media-card--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.project-cloud__media-card--feature {
  grid-column: span 3;
  grid-row: span 2;
  background: color-mix(in srgb, var(--project-accent-deep) 88%, #071c1a);
}

.project-cloud__media-card--banner {
  grid-column: span 2;
  grid-row: span 1;
}

.project-cloud__media-card--macro {
  grid-column: span 1;
  grid-row: span 1;
}

.project-cloud__media-card--portrait {
  /* Portrait originals crop in the scan grid so mixed aspect ratios never
     leave blank cells; the click-through gallery preserves the complete frame. */
  grid-row: span 2;
}

.project-cloud__media-card--triptych {
  /* The three-view source is rebuilt horizontally so all three product angles
     read as one intentional strip instead of a cropped portrait with a dead cell. */
  grid-column: span 4;
  grid-row: span 1;
  background: color-mix(in srgb, var(--project-accent) 84%, white);
}

.project-cloud__media-card--triptych img {
  object-fit: contain;
}

.project-cloud__media-card--poster {
  /* Preserve each campaign poster as one composition in the scan grid;
     the full gallery still opens the complete source at maximum detail. */
  grid-column: span 2;
  grid-row: span 3;
  background: color-mix(in srgb, var(--project-accent-deep) 84%, #111);
}

.project-cloud__media-card.project-cloud__media-card--poster img {
  /* The extra card-class specificity keeps this fit from being replaced by
     the shared cover rule declared below for standard media tiles. */
  object-fit: contain;
}

.project-cloud__media-card img,
.project-cloud__media-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.project-cloud__media-card img {
  transform: scale(1.001);
  transition: filter 180ms ease, transform 280ms cubic-bezier(0.2, 0.72, 0.16, 1);
}

.project-cloud__media-card:hover img,
.project-cloud__media-card:focus-visible img {
  filter: brightness(1.06);
  transform: scale(1.018);
}

/* Keep decoded previews out of a transformed/filter layer. Chromium can
   advance the video clock while painting only the card fallback in that layer. */
.project-cloud__media-card video {
  transform: none;
  transition: none;
}

.project-cloud__media-card.project-cloud__media-card--feature video {
  /* The feature slot is nearly 16:9 at desktop size. Cover removes the teal
     pillarbox seams while retaining the moving bottle at useful scale. */
  object-fit: cover;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"]
  > [data-project-media-slot="packaging"] img {
  /* A compact cover crop removes the source's green breathing room in the
     cloud; the click-through gallery still opens the complete 3:2 artwork. */
  object-fit: cover;
  background: #d9ffd0;
}

.project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"]
  > [data-project-media-slot="print"] img {
  /* The slot already matches the poster closely; a bottom-anchored cover cuts
     only a narrow strip of sky and removes the dark containment rails. */
  object-fit: cover;
  object-position: center bottom;
}

.project-cloud__media-card:focus-visible {
  z-index: 1;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.project-cloud__media-placeholder {
  grid-column: 1 / -1;
  grid-row: span 4;
  min-height: clamp(20rem, 54svh, 34rem);
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.92), transparent 18%),
    repeating-radial-gradient(circle at 48% 130%, transparent 0 7%, rgba(255, 255, 255, 0.25) 7.5% 9%, transparent 9.5% 15%),
    linear-gradient(145deg, color-mix(in srgb, var(--project-accent) 78%, white), var(--project-accent-deep));
}

.project-gallery[hidden] {
  display: none;
}

.project-gallery {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(3.5rem, 6svh, 5rem) clamp(0.5rem, 1.2vw, 1.2rem) clamp(0.5rem, 1.2vw, 1rem);
  background: rgba(3, 3, 4, 0.965);
  color: white;
  pointer-events: auto;
}

.project-cloud.is-gallery-open .project-cloud__close {
  visibility: hidden;
}

.project-gallery__viewport {
  display: grid;
  grid-template-columns: clamp(2.5rem, 4vw, 4.5rem) minmax(0, 1fr) clamp(2.5rem, 4vw, 4.5rem);
  min-width: 0;
  min-height: 0;
  align-items: center;
}

.project-gallery__stage {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.project-gallery__stage img,
.project-gallery__stage video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.project-gallery__stage video {
  width: min(100%, 96rem);
  height: 100%;
}

.project-gallery__close,
.project-gallery__arrow,
.project-gallery__thumbnail {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: white;
  cursor: var(--interactive-cursor);
  appearance: none;
}

.project-gallery__close {
  position: absolute;
  z-index: 3;
  top: clamp(0.65rem, 1.4vw, 1.25rem);
  right: clamp(0.75rem, 1.6vw, 1.5rem);
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 3.5vw, 3.4rem);
  height: clamp(2.5rem, 3.5vw, 3.4rem);
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 200;
  line-height: 1;
}

.project-gallery__arrow {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(4rem, 8svh, 6rem);
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.2rem, 6vw, 6rem);
  font-weight: 200;
  line-height: 0.75;
}

.project-gallery__arrow--previous {
  grid-column: 1;
}

.project-gallery__arrow--next {
  grid-column: 3;
}

.project-gallery__arrow:disabled {
  opacity: 0.18;
  cursor: default;
}

.project-gallery__close:hover,
.project-gallery__close:focus-visible,
.project-gallery__arrow:not(:disabled):hover,
.project-gallery__arrow:not(:disabled):focus-visible {
  color: var(--project-accent);
  outline: none;
}

.project-gallery__strip {
  display: flex;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding-top: clamp(0.45rem, 1svh, 0.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.52) transparent;
  scrollbar-width: thin;
}

.project-gallery__thumbnail {
  position: relative;
  flex: 0 0 clamp(5.5rem, 9vw, 9rem);
  height: clamp(3.6rem, 6vw, 6rem);
  overflow: hidden;
  background: #151515;
  opacity: 0.48;
}

.project-gallery__thumbnail img,
.project-gallery__thumbnail video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.project-gallery__thumbnail--video::after {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  background: rgba(0, 0, 0, 0.58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.project-gallery__thumbnail:hover,
.project-gallery__thumbnail:focus-visible,
.project-gallery__thumbnail.is-current {
  z-index: 1;
  opacity: 1;
  outline: 2px solid white;
  outline-offset: -2px;
}

.project-cloud__swatches {
  display: grid;
  grid-template-columns: 1fr 1fr 0.62fr;
  gap: 2px;
  padding: 2px 0;
  background: #fffefa;
}

.project-cloud__swatch {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.project-cloud__swatch--liquid {
  background:
    linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.75) 22%, transparent 28%),
    repeating-radial-gradient(ellipse at 50% 120%, var(--project-accent-deep) 0 8%, var(--project-accent) 9% 18%, #eee7f5 19% 25%);
}

.project-cloud__swatch--signal {
  background:
    radial-gradient(circle at 70% 35%, white 0 3%, transparent 3.5%),
    linear-gradient(120deg, var(--project-accent-deep), var(--project-accent) 56%, #fff6ed);
}

.project-cloud__swatch--detail {
  background:
    repeating-linear-gradient(42deg, transparent 0 0.55rem, rgba(255, 255, 255, 0.22) 0.6rem 0.68rem),
    var(--project-accent-deep);
}

.project-cloud__story {
  display: grid;
  grid-template-rows: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 2px;
  min-height: 0;
}

.project-cloud__story-frame {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 36% 112%, #fff 0 27%, transparent 27.5%),
    radial-gradient(ellipse at 72% 108%, rgba(255, 255, 255, 0.83) 0 22%, transparent 22.5%),
    linear-gradient(162deg, color-mix(in srgb, var(--project-accent) 52%, #80baff), #1688d2 72%, #dff6ff);
}

.project-cloud__story-frame::after {
  content: "";
  position: absolute;
  inset: -22% -12%;
  background: radial-gradient(ellipse at center, transparent 0 32%, rgba(255, 255, 255, 0.35) 33% 36%, transparent 37%);
  transform: rotate(-11deg);
}

.project-cloud__story-frame span {
  position: absolute;
  z-index: 1;
  bottom: 0.75rem;
  left: 0.85rem;
}

.project-cloud__story blockquote {
  display: flex;
  align-items: center;
  margin: 0;
  padding: clamp(0.75rem, 1.4vw, 1.4rem);
  background: var(--project-accent-deep);
  color: white;
  font-family: var(--font-editorial-ui);
  font-size: clamp(1rem, 1.25vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.project-cloud.is-reversed .project-cloud__figure {
  right: var(--project-figure-edge, -18vw);
  left: auto;
}

.project-cloud.is-reversed .project-cloud__sheet {
  right: 18%;
  left: auto;
  transform: translate3d(-116%, 0, 0);
}

.project-cloud.is-reversed.is-open .project-cloud__sheet {
  transform: translate3d(0, 0, 0);
}

.project-cloud.is-reversed.is-closing .project-cloud__sheet {
  transition-timing-function: cubic-bezier(0.84, 0, 0.8, 0.28);
}

.project-cloud.is-reversed .project-cloud__silhouette {
  right: -25vw;
  left: auto;
  transform: translateY(-50%) scaleX(-1);
}

.project-cloud.is-reversed .project-cloud__body {
  padding: 0;
}

.project-cloud.is-reversed .project-cloud__copy {
  right: 44%;
  left: auto;
  transform: translate3d(-1.5rem, -50%, 0);
}

.project-cloud.is-reversed .project-cloud__media {
  transform: translate3d(-1.2rem, 0, 0) scale(1.015);
}

.project-cloud.is-reversed.is-open .project-cloud__copy {
  transform: translate3d(0, -50%, 0);
}

.project-cloud.is-reversed.is-open .project-cloud__media {
  transform: translate3d(0, 0, 0) scale(1);
}

.project-cloud.is-reversed .project-cloud__close {
  right: clamp(1.2rem, 2.8vw, 3rem);
  left: auto;
}

.deep-blue-section {
  position: relative;
  z-index: 2;
  display: block;
  height: 220svh;
  min-height: 220svh;
  /* Hold one full space tableau, then give the exit enough native scroll for
     the stars and four GLBs to pass the viewer before white takes over. */
  overflow: clip;
  background: var(--post-cloud-blue);
}

/* The time-based sky film completes while the document is still inside the
   pinned cloud runway. Temporarily presenting the next section as a viewport
   overlay lets its statement fade into that exact blue frame; after the fade,
   the controller aligns the identical in-flow section without a visible jump. */
.deep-blue-section.is-handoff-overlay {
  position: fixed;
  z-index: 6;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 760ms cubic-bezier(0.22, 0.72, 0.2, 1) 360ms;
  will-change: opacity;
}

.deep-blue-section.is-handoff-overlay.is-handoff-preparing {
  opacity: 0;
  transition: none;
}

.deep-blue-section.is-handoff-overlay.is-entered {
  opacity: 1;
  pointer-events: auto;
}

/* Preserve the section's scroll extent while its real surface is temporarily
   fixed over the completed film; this makes the one-time in-flow alignment land
   exactly instead of clamping one viewport early. */
body.is-deep-blue-handoff::after {
  content: "";
  display: block;
  height: 220svh;
  background: var(--post-cloud-blue);
}

.fluid-world {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  background: var(--post-cloud-blue);
  isolation: isolate;
}

/* A reverse handoff may begin while the in-flow sticky figure is already past
   its containing block. Borrow the viewport until the tableau has been fully
   restored so the header and offer can never push the stars down mid-warp. */
.fluid-world.is-stellar-reversing,
.fluid-world.is-cloud-returning {
  position: fixed;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100svh;
  margin: 0;
}

.fluid-world__frame {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--post-cloud-blue);
  cursor: default;
  touch-action: pan-y;
}

.fluid-world__fallback,
.fluid-world__stellar-warp,
.fluid-world__effect,
.fluid-world__canvas,
.fluid-world__whiteout,
.fluid-world__cloud-return {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fluid-world__stellar-warp {
  z-index: 0;
  display: block;
  inset: 25%;
  width: 50%;
  height: 50%;
  border: 0;
  background: #05050a;
  transform: scale(2);
  transform-origin: 50% 50%;
  will-change: transform;
  /* WHY: this iframe is Aesthera99's authored interaction, not a decorative
     texture. Real pointer and wheel input must reach its canvas unchanged. */
  pointer-events: auto;
}

/* The untouched canvas keeps wheel ownership through its complete reverse.
   Once it has visibly returned to idle space, wheel input belongs to the page;
   fluid-world.js separately mirrors pointer movement so the cursor singularity
   remains alive without recreating the scroll trap. */
.fluid-world.is-stellar-reverse-complete .fluid-world__stellar-warp {
  pointer-events: none;
}

.fluid-world__fallback {
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem);
  color: var(--fluid-world-pink);
  font-family: "Gokhan", Impact, sans-serif;
  font-size: clamp(3rem, 8.4vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--space-exit-scale, 1));
  transform-origin: 50% 50%;
  transition: opacity 160ms linear;
  will-change: opacity, transform;
}

.fluid-world__fallback span {
  display: block;
}

.fluid-world__effect {
  z-index: 2;
  display: block;
  border: 0;
  opacity: 0;
  transform: scale(var(--space-exit-scale, 1));
  transform-origin: 50% 50%;
  transition: opacity 160ms linear;
  will-change: opacity, transform;
  /* The visible lettering remains above the stars, but must not replace the
     Stellar Warp canvas as the interaction surface. */
  pointer-events: none;
}

.fluid-world__canvas {
  z-index: 3;
  display: block;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.12);
  transform-origin: 50% 50%;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1900ms cubic-bezier(0.22, 0.58, 0.34, 1);
  will-change: opacity, transform;
  contain: strict;
  pointer-events: none;
}

.fluid-world.is-models-entered .fluid-world__canvas {
  opacity: var(--space-model-opacity, 1);
  transform: translate3d(0, 0, 0) scale(1);
}

.fluid-world.is-models-settled .fluid-world__canvas {
  will-change: auto;
}

/* Once the untouched stellar export receives its native wheel, the retained
   lettering and GLBs complete their fly-past before leaving the compositor.
   Their last live pixels remain untouched until this authored exit finishes. */
.fluid-world.is-stellar-warping .fluid-world__effect,
.fluid-world.is-stellar-warping .fluid-world__fallback {
  opacity: 0;
  transform: scale(4.6);
  transition:
    opacity 460ms ease-in,
    transform 720ms cubic-bezier(0.5, 0, 1, 0.42);
}

.fluid-world.is-stellar-warping .fluid-world__canvas {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(7.5);
  transition:
    opacity 560ms ease-in,
    transform 720ms cubic-bezier(0.5, 0, 1, 0.42);
}

.fluid-world.is-stellar-overlays-culled :is(
  .fluid-world__effect,
  .fluid-world__fallback,
  .fluid-world__canvas
) {
  visibility: hidden;
}

.fluid-world.is-effect-ready.is-entrance-requested .fluid-world__effect {
  opacity: var(--space-copy-opacity, 1);
}

.fluid-world.is-effect-ready .fluid-world__fallback {
  opacity: 0;
}

/* Loading is not reveal authority. The fallback and live fluid typography stay
   transparent until the completed cloud film dispatches the same entrance gate
   that starts the four-model approach and the authored paint interaction. */
.fluid-world.is-entrance-requested:not(.is-effect-ready) .fluid-world__fallback {
  opacity: var(--space-copy-opacity, 1);
}

.fluid-world__whiteout {
  z-index: 4;
  background: #fff;
  opacity: var(--space-whiteout-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

.fluid-world__cloud-return {
  z-index: 5;
  background: var(--post-cloud-blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms linear;
  will-change: opacity;
}

.fluid-world.is-cloud-returning .fluid-world__cloud-return {
  opacity: 1;
}

.worlds-offer {
  position: relative;
  z-index: 8;
  /* The space scene turns fully white one viewport before its oversized sticky
     runway ends. Pull the offer into that terminal frame so the white landing
     belongs to the gallery instead of becoming an empty spacer. */
  margin-top: -100svh;
  overflow: clip;
  color: var(--post-cloud-blue);
  background: #fff;
  isolation: isolate;
}

html.has-space-exit-js .worlds-offer {
  opacity: var(--worlds-offer-reveal, 0);
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

html.has-space-exit-js .worlds-offer.is-transition-interactive {
  pointer-events: auto;
}

html.has-space-exit-js .worlds-offer[data-direct-entry="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* The offer remains in document flow to preserve the coda's height, but its
   visible surfaces borrow the viewport during the space-to-white crossfade.
   Releasing this class only when the in-flow offer reaches top: 0 makes the
   fixed-to-normal handoff visually identical instead of sliding upward. */
.worlds-offer.is-transition-overlay {
  overflow: visible;
}

.worlds-offer.is-transition-overlay .worlds-offer__intro {
  position: fixed;
  inset: 0 0 auto;
}

.worlds-offer.is-transition-overlay .worlds-offer__gallery-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
}

.worlds-offer__intro {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: grid;
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: clamp(5.75rem, 10svh, 8rem) var(--header-padding) 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.worlds-offer.is-gallery-expanded .worlds-offer__intro {
  opacity: 0;
}

.worlds-offer__title-lockup {
  width: 100%;
}

.worlds-offer__title {
  max-width: none;
  margin: 0;
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(3.4rem, 6.2vw, 7rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-align: center;
  white-space: nowrap;
}

.worlds-offer__title-line {
  display: block;
  transform-origin: center;
}

html.has-worlds-offer-js .worlds-offer__title-line {
  opacity: 0;
  transform: translate3d(-12vw, 0, 0);
}

html.has-worlds-offer-js:not(.has-space-exit-js) .worlds-offer__intro.is-visible .worlds-offer__title-line,
html.has-worlds-offer-js .worlds-offer.is-transition-interactive .worlds-offer__intro.is-visible .worlds-offer__title-line,
html.has-worlds-offer-js .worlds-offer[data-direct-entry="true"] .worlds-offer__intro.is-visible .worlds-offer__title-line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 620ms ease,
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.has-worlds-offer-js:not(.has-space-exit-js) .worlds-offer__intro.is-visible .worlds-offer__title-line,
html.has-worlds-offer-js .worlds-offer.is-transition-interactive .worlds-offer__intro.is-visible .worlds-offer__title-line,
html.has-worlds-offer-js .worlds-offer[data-direct-entry="true"] .worlds-offer__intro.is-visible .worlds-offer__title-line {
  transition-delay: 90ms;
}

.worlds-offer__gallery {
  position: relative;
  min-height: 100svh;
  background: #fff;
}

.worlds-offer__gallery-stage {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  background: #fff;
}

.worlds-offer__divine-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  pointer-events: none;
}

.worlds-offer__helix-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.worlds-offer__helix {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.worlds-offer.is-gallery-expanded .worlds-offer__contact {
  opacity: 0;
  pointer-events: none;
}

.worlds-offer__contact {
  position: absolute;
  z-index: 3;
  bottom: clamp(1rem, 3svh, 2.25rem);
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100% - 2rem);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--post-cloud-blue);
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity 220ms ease;
}

.worlds-offer__contact button {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  padding: clamp(0.62rem, 1.1vw, 0.85rem) clamp(1rem, 1.8vw, 1.35rem);
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: "Thumpa", "Gokhan", Impact, sans-serif;
  font-size: clamp(2rem, 2.8vw, 2.85rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  transition:
    color 220ms ease,
    background 220ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.worlds-offer__contact button span {
  display: block;
  transform: translateY(0.12em);
}

.worlds-offer__contact button:hover {
  background: var(--post-cloud-blue);
  color: #fff;
  transform: translateY(-0.18rem);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    a[href],
    button:not([disabled]),
    input:not([disabled]):not([type="hidden"]),
    select:not([disabled]),
    textarea:not([disabled]),
    summary,
    label[for],
    [role="button"]:not([aria-disabled="true"]),
    [role="link"]:not([aria-disabled="true"])
  ) {
    /* The browser owns cursor hit-testing and scroll updates; the custom
       property falls back to its ordinary pointer until the glove is decoded. */
    cursor: var(--interactive-cursor);
  }
}

@keyframes work-float {
  0% { transform: translate3d(-0.35rem, -0.4rem, 0) rotate(-0.35deg); }
  100% { transform: translate3d(0.45rem, 0.55rem, 0) rotate(0.45deg); }
}

@keyframes cloud-puff-glyph-idle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.12deg) scale(1);
  }

  28% {
    transform: translate3d(0.012em, -0.055em, 0) rotate(0.28deg) scale(1.012, 1.035);
  }

  58% {
    transform: translate3d(-0.01em, 0.028em, 0) rotate(-0.22deg) scale(0.992, 0.982);
  }

  82% {
    transform: translate3d(0.006em, -0.018em, 0) rotate(0.12deg) scale(1.006, 1.018);
  }
}

@media (max-width: 1200px) {
  .fast-work__project {
    grid-template-columns: minmax(13.5rem, 0.62fr) minmax(0, 1.38fr);
  }

  .scope-feeder__grid--identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-feeder__grid--identity label:last-child {
    grid-column: span 2;
  }

  .project-cloud__sheet {
    left: 10%;
    width: 88%;
  }

  .project-cloud__body {
    padding: 0;
  }

  .project-cloud.is-reversed .project-cloud__sheet {
    right: 10%;
  }

  .project-cloud.is-reversed .project-cloud__body {
    padding: 0;
  }

  .project-cloud__copy h2 {
    font-size: clamp(2.35rem, 3vw, 3.8rem);
  }
}

@media (max-width: 700px) {
  .site-header {
    align-items: flex-start;
  }

  .brand-lockup {
    width: clamp(13rem, 52vw, 19rem);
    height: 6.5rem;
  }

  .site-nav {
    gap: clamp(1rem, 5vw, 2.25rem);
    padding-top: 1.8rem;
    font-size: clamp(0.72rem, 3.2vw, 1rem);
  }

  .fast-drawer--work,
  .fast-drawer--contact {
    width: 100%;
  }

  .fast-drawer__close span:first-child {
    display: none;
  }

  .fast-drawer__close {
    width: 2.6rem;
    height: 2.6rem;
    justify-content: center;
    padding: 0;
  }

  .fast-drawer__body {
    padding: 1rem;
  }

  .fast-work {
    gap: 4.5rem;
  }

  .fast-work__project {
    grid-template-columns: 1fr;
  }

  .fast-work__copy {
    position: relative;
    top: auto;
  }

  .fast-work__media {
    min-height: 8rem;
  }

  .fast-work__contact {
    align-items: center;
  }

  .fast-contact {
    gap: 3rem;
    min-width: 0;
    padding-bottom: 5rem;
  }

  .fast-contact > *,
  .fast-contact__intro {
    min-width: 0;
  }

  .fast-contact__intro {
    padding-right: 0;
  }

  .scope-feeder__grid,
  .scope-feeder__grid--identity,
  .scope-review__summary {
    grid-template-columns: 1fr;
  }

  .scope-feeder__span-2,
  .scope-feeder__span-3,
  .scope-feeder__grid--identity label:last-child {
    grid-column: auto;
  }

  .scope-review__heading,
  .scope-review__actions {
    grid-template-columns: 1fr;
  }

  .scope-review__heading {
    display: grid;
  }

  .scope-review__heading > span {
    width: fit-content;
  }

  .project-cloud__figure,
  .project-cloud.is-reversed .project-cloud__figure {
    top: 0;
    right: auto;
    left: 0;
    align-items: start;
    justify-items: start;
    width: 100%;
    height: 35svh;
    aspect-ratio: auto;
    margin-block: 0;
    padding: 0 39vw 0 0;
    transform-origin: center;
  }

  .project-cloud__figure video {
    transform: scale(1);
  }

  .project-cloud.is-reversed .project-cloud__figure {
    justify-items: end;
    padding: 0 0 0 39vw;
  }

  .project-cloud__sheet,
  .project-cloud.is-reversed .project-cloud__sheet {
    top: 31svh;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    background: #fffafe;
    -webkit-clip-path: none;
    clip-path: none;
    transform: translate3d(108%, 0, 0);
  }

  .project-cloud.is-reversed .project-cloud__sheet {
    transform: translate3d(-108%, 0, 0);
  }

  .project-cloud.is-open .project-cloud__sheet,
  .project-cloud.is-reversed.is-open .project-cloud__sheet {
    transform: translate3d(0, 0, 0);
  }

  .project-cloud__sheet::before {
    position: absolute;
    top: -2.1rem;
    right: 0;
    left: 0;
    display: block;
    height: 2.2rem;
    background: radial-gradient(circle at 2.1rem 2.1rem, #fffefa 0 2.08rem, transparent 2.12rem) 0 0 / 4.2rem 4.2rem repeat-x;
  }

  .project-cloud__silhouette {
    display: none;
  }

  .project-cloud__body,
  .project-cloud.is-reversed .project-cloud__body {
    display: block;
    overflow-y: auto;
    padding: 3.7rem 1.2rem 2rem;
  }

  .project-cloud__copy,
  .project-cloud.is-reversed .project-cloud__copy {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    padding: 1.35rem;
    overflow: visible;
    background: #090909;
    color: #fffafe;
    box-shadow: 0 0 0 1px rgba(255, 250, 254, 0.12);
    transform: translate3d(0, 1rem, 0);
  }

  .project-cloud.is-open .project-cloud__copy,
  .project-cloud.is-reversed.is-open .project-cloud__copy {
    transform: translate3d(0, 0, 0);
  }

  .project-cloud__copy h2 {
    max-width: 12ch;
    font-size: clamp(3rem, 12vw, 5.4rem);
  }

  .project-cloud__copy h2.is-cloud-puff-long {
    font-size: clamp(2.2rem, 8.3vw, 4.2rem);
  }

  .project-cloud__summary {
    max-width: 35rem;
    font-size: 0.96rem;
  }

  .project-cloud__media,
  .project-cloud.is-reversed .project-cloud__media {
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible;
    margin-top: 2.5rem;
    padding-right: 0;
    transform: translate3d(0, 1rem, 0);
  }

  .project-cloud.is-open.is-media-ready .project-cloud__media,
  .project-cloud.is-reversed.is-open .project-cloud__media {
    transform: translate3d(0, 0, 0);
  }

  .project-cloud__media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(4.5rem, 18vw, 7rem);
  }

  .project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="film"] {
    grid-column: span 2;
    grid-row: span 2;
  }

  .project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] {
    grid-template-rows: none;
    grid-auto-rows: clamp(4.5rem, 18vw, 7rem);
    gap: 0;
  }

  .project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="liquid"] {
    grid-column: span 2;
    grid-row: span 1;
  }

  .project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="packaging"] {
    grid-column: span 2;
    grid-row: span 3;
  }

  .project-cloud__media-grid[data-project-media-layout="editorial-asymmetry"] > [data-project-media-slot="print"] {
    grid-column: span 2;
    grid-row: span 8;
  }

  .project-cloud__media-card--wide {
    grid-column: span 2;
  }

  .project-cloud__media-card--feature {
    grid-column: span 2;
    grid-row: span 2;
  }

  .project-cloud__media-card--banner {
    grid-column: span 2;
  }

  .project-cloud__media-card--triptych {
    grid-column: span 2;
  }

  .project-cloud__media-card--poster {
    grid-row: span 8;
  }

  .project-gallery {
    padding: 3.5rem 0.25rem 0.35rem;
  }

  .project-gallery__viewport {
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem;
  }

  .project-gallery__arrow {
    height: 4rem;
    font-size: 3.5rem;
  }

  .project-gallery__thumbnail {
    flex-basis: 5.25rem;
    height: 3.5rem;
  }

  .project-cloud__close,
  .project-cloud.is-reversed .project-cloud__close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    width: 2.45rem;
    height: 2.8rem;
  }

  .fluid-world__fallback {
    font-size: clamp(2.8rem, 14.5vw, 5.25rem);
  }

  .worlds-offer__intro {
    min-height: 0;
    padding: clamp(5.5rem, 12svh, 7rem) var(--header-padding) 0;
  }

  .worlds-offer__title {
    max-width: none;
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    line-height: 0.84;
    white-space: normal;
  }

  .worlds-offer__gallery {
    min-height: 100svh;
  }

  .worlds-offer__gallery-stage {
    position: sticky;
    display: block;
    height: 100svh;
    min-height: 32rem;
    overflow: hidden;
  }

  .worlds-offer__helix-frame,
  .worlds-offer__helix {
    height: 100%;
    min-height: 0;
  }

  .worlds-offer__contact {
    bottom: 0.75rem;
    width: max-content;
    max-width: calc(100% - 1.5rem);
  }

}

@media (max-width: 480px) {
  .fast-work__grid {
    grid-template-columns: 1fr;
  }

  .fast-work__media,
  .fast-work__media--feature,
  .fast-work__media--wide,
  .fast-work__media--portrait {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (hover: none), (pointer: coarse) {
  .fluid-world__frame {
    cursor: default;
  }

  .fluid-world__effect {
    /* Touch painting cannot hand its gesture to the parent document, so coarse
       pointers prioritize native page travel into the new closing section. */
    pointer-events: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .fast-path,
  .fast-path__backdrop,
  .fast-drawer,
  .fast-work__media img,
  .fast-work__media video,
  .worlds-offer__contact button {
    transition: none;
  }

  html.has-space-exit-js .worlds-offer {
    transition: none;
  }

  .hero__video {
    visibility: hidden;
  }

  .work-transition__field {
    opacity: 1;
  }

  .work-transition__glitch,
  .work-transition__scan {
    display: none;
  }

  .work-portfolio {
    animation: none;
  }

  .site-header,
  .project-cloud__sheet,
  .project-cloud__copy,
  .project-cloud__media,
  .project-cloud__close {
    transition: none;
  }

  html.has-worlds-offer-js .worlds-offer__title-line,
  html.has-worlds-offer-js:not(.has-space-exit-js) .worlds-offer__intro.is-visible .worlds-offer__title-line,
  html.has-worlds-offer-js .worlds-offer.is-transition-interactive .worlds-offer__intro.is-visible .worlds-offer__title-line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cloud-puff-heading__glyph {
    animation: none;
  }

  .work-sky__zoom {
    visibility: hidden;
  }

  .work-sky__deep-blue {
    opacity: 1;
    transition: none;
  }

  .fluid-world__fallback,
  .fluid-world__effect,
  .fluid-world__canvas {
    transition: none;
  }
}