@font-face {
  font-family: "Merienda";
  src: url(/Merienda.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

@font-face {
  font-family: "Belanosima";
  src: url(/Belanosima.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

:root {
  --color-pink: #f55c74;
  --mix: oklab;
  --perspective: 1010px;
  --pad: clamp(5.5px, 4.32vmin, 55px);
  --border-radius: clamp(1.1px, 1vw, 11px);

  --font-size-1: clamp(16px, 5.5vw, 32px);
  --font-size-2: clamp(18px, 9vw, 180px);

  color-scheme: light dark;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-pink);
  font-family: "Belanosima", system-ui;
}

article {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  overflow-x: clip;
}

section {
  position: relative;
}

article,
section,
section > div,
section > div > div {
  transition: height 360ms ease-out;
}

video {
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}

.bg {
  pointer-events: none;
  user-select: none;
}

.outline {
  text-shadow:
    /* Top edge */
    calc(-0.6 * var(--os)) calc(-1 * var(--os)) 0 var(--oc),
    calc(-0.3 * var(--os)) calc(-1 * var(--os)) 0 var(--oc),
    0 calc(-1 * var(--os)) 0 var(--oc),
    calc(0.3 * var(--os)) calc(-1 * var(--os)) 0 var(--oc),
    calc(0.6 * var(--os)) calc(-1 * var(--os)) 0 var(--oc),
    /* Right edge */ calc(1 * var(--os)) calc(-0.6 * var(--os)) 0 var(--oc),
    calc(1 * var(--os)) calc(-0.3 * var(--os)) 0 var(--oc),
    calc(1 * var(--os)) 0 0 var(--oc),
    calc(1 * var(--os)) calc(0.3 * var(--os)) 0 var(--oc),
    calc(1 * var(--os)) calc(0.6 * var(--os)) 0 var(--oc),
    /* Bottom edge */ calc(0.6 * var(--os)) calc(1 * var(--os)) 0 var(--oc),
    calc(0.3 * var(--os)) calc(1 * var(--os)) 0 var(--oc),
    0 calc(1 * var(--os)) 0 var(--oc),
    calc(-0.3 * var(--os)) calc(1 * var(--os)) 0 var(--oc),
    calc(-0.6 * var(--os)) calc(1 * var(--os)) 0 var(--oc),
    /* Left edge */ calc(-1 * var(--os)) calc(0.6 * var(--os)) 0 var(--oc),
    calc(-1 * var(--os)) calc(0.3 * var(--os)) 0 var(--oc),
    calc(-1 * var(--os)) 0 0 var(--oc),
    calc(-1 * var(--os)) calc(-0.3 * var(--os)) 0 var(--oc),
    calc(-1 * var(--os)) calc(-0.6 * var(--os)) 0 var(--oc);
}

@keyframes waveTextColor {
  0%,
  100% {
    transform: rotateY(-3deg) rotateX(2deg);
    color: rgba(255, 255, 255, 0.6);
  }

  50% {
    transform: rotateY(3deg) rotateX(-2deg);
    color: rgba(255, 255, 255, 0.45);
  }
}

@keyframes waveBrightness {
  0%,
  100% {
    filter: brightness(1.1);
  }

  50% {
    filter: brightness(0.9);
  }
}

#intro {
  height: 191vh;

  > div {
    position: sticky;
    top: 0;
    height: 100vh;
    perspective: var(--perspective);
    display: flex;
  }

  .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    background-size: cover;
    background-position: center;
    background-image: var(--image);

    --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format);

    @media (max-width: 2000px) and (max-height: 2000px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=2000);
    }

    @media (max-width: 1600px) and (max-height: 1600px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=1600);
    }

    @media (max-width: 1200px) and (max-height: 1200px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=1200);
    }

    @media (max-width: 1000px) and (max-height: 1000px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=1000);
    }

    @media (max-width: 800px) and (max-height: 800px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=800);
    }

    @media (max-width: 600px) and (max-height: 600px) {
      --image: url(https://k3da1111.imgix.net/k3da-intro-bg2.jpg?auto=format&w=600);
    }
  }

  & .a11,
  & .a12 {
    height: calc(2 * var(--pad));
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    transition: opacity 240ms ease-out;
    opacity: 0;
  }

  & .a11 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  & .a12 {
    margin-top: -100vh;
  }

  & .a11::before,
  & .a11::after,
  & .a12::before,
  & .a12::after {
    content: "";
    width: calc(0.7 * var(--pad));
    height: calc(0.162 * var(--pad));
    margin: 0 var(--pad);
    background-color: var(--color-pink);
    border-radius: 6px;
  }

  &.a10 {
    .a11,
    .a12 {
      opacity: 1;
    }
  }
}

#logo {
  --h: 100vh;

  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--h);
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(-0.1px);

  & * {
    transition: border-radius 1s ease;
  }

  & > video,
  & > picture {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--h);
  }

  & > video {
    object-fit: cover;
    object-position: center;
  }

  & > picture {
    user-select: none;
    pointer-events: none;

    mix-blend-mode: plus-lighter;
  }

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.a10 #logo * {
  border-radius: calc(3 * var(--border-radius));
}

#organic-forms {
  box-sizing: border-box;
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pad);

  background: linear-gradient(
    182deg in var(--mix),
    var(--color-pink),
    #e4d75b,
    #0e5d61
  );

  .image {
    z-index: 1;
    justify-self: center;

    width: 100%;
    aspect-ratio: 1000 / 562;

    background-size: cover;
    background-position: center;
    background-image: var(--image);
    border-radius: var(--border-radius);

    & > div {
      transform-origin: center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      font-family: "Merienda", sans-serif;
      font-size: var(--font-size-2);
      text-align: center;
      text-wrap: balance;
      color: rgba(255 255 255 / 0.75);

      animation: waveTextColor 11s infinite;
      animation-play-state: running;
      animation-timing-function: ease-in-out;

      mix-blend-mode: screen;
      --oc: var(--color-pink);
      --os: 0.0095em;
    }

    &:has(div) {
      display: grid;
      place-items: center;
      perspective: var(--perspective);
    }

    &[data-plant="L1"],
    &[data-plant="L2"] {
      grid-column: 1 / span 3;
      max-width: 3000px;
    }

    &[data-plant="L1"] {
      grid-row: 1;
      --image: url(https://k3da1111.imgix.net/of1-2.jpg?auto=format&w=3000);
    }

    &[data-plant="L2"] {
      grid-row: 4;
      --image: url(https://k3da1111.imgix.net/of3-2.jpg?auto=format&w=3000);

      & > div {
        --oc: #e4d75b;
      }
    }

    &[data-plant="M1"],
    &[data-plant="M2"] {
      max-width: 2000px;
      aspect-ratio: unset;
      height: 100%;
    }

    &[data-plant="M1"] {
      grid-column: 2 / span 2;
      grid-row: 2 / span 2;
      --image: url(https://k3da1111.imgix.net/of2-1.jpg?auto=format&w=2000);
    }

    &[data-plant="M2"] {
      grid-row: 5 / span 2;
      grid-column: 1 / span 2;
      --image: url(https://k3da1111.imgix.net/of4-1.jpg?auto=format&w=2000);
    }

    &[data-plant="S1"],
    &[data-plant="S2"],
    &[data-plant="S3"],
    &[data-plant="S4"] {
      max-width: 1000px;
    }

    &[data-plant="S1"] {
      grid-row: 2;
      grid-column: 1;
      --image: url(https://k3da1111.imgix.net/of6-1.jpg?auto=format&w=1000);
    }

    &[data-plant="S2"] {
      grid-row: 3;
      grid-column: 1;
      --image: url(https://k3da1111.imgix.net/of7-2.jpg?auto=format&w=1000);
    }

    &[data-plant="S3"] {
      grid-row: 5;
      grid-column: 3;
      --image: url(https://k3da1111.imgix.net/of5-1.jpg?auto=format&w=1000);
    }

    &[data-plant="S4"] {
      grid-row: 6;
      grid-column: 3;
      --image: url(https://k3da1111.imgix.net/of8-1.jpg?auto=format&w=1000);
    }
  }
}

@media (max-width: 1800px) {
  #organic-forms .image {
    &[data-plant="L1"],
    &[data-plant="L2"] {
      max-width: 1800px;
    }

    &[data-plant="L1"] {
      --image: url(https://k3da1111.imgix.net/of1-2.jpg?auto=format&w=1800);
    }

    &[data-plant="L2"] {
      --image: url(https://k3da1111.imgix.net/of3-2.jpg?auto=format&w=1800);
    }

    &[data-plant="M1"],
    &[data-plant="M2"] {
      max-width: 1200px;
    }

    &[data-plant="M1"] {
      --image: url(https://k3da1111.imgix.net/of2-1.jpg?auto=format&w=1200);
    }

    &[data-plant="M2"] {
      --image: url(https://k3da1111.imgix.net/of4-1.jpg?auto=format&w=1200);
    }

    &[data-plant="S1"],
    &[data-plant="S2"],
    &[data-plant="S3"],
    &[data-plant="S4"] {
      max-width: 600px;
    }

    &[data-plant="S1"] {
      --image: url(https://k3da1111.imgix.net/of6-1.jpg?auto=format&w=600);
    }

    &[data-plant="S2"] {
      --image: url(https://k3da1111.imgix.net/of7-2.jpg?auto=format&w=600);
    }

    &[data-plant="S3"] {
      --image: url(https://k3da1111.imgix.net/of5-1.jpg?auto=format&w=600);
    }

    &[data-plant="S4"] {
      --image: url(https://k3da1111.imgix.net/of8-1.jpg?auto=format&w=600);
    }
  }
}

@media (max-width: 1200px) {
  #organic-forms .image {
    &[data-plant="L1"],
    &[data-plant="L2"] {
      max-width: 1200px;
    }

    &[data-plant="L1"] {
      --image: url(https://k3da1111.imgix.net/of1-2.jpg?auto=format&w=1200);
    }

    &[data-plant="L2"] {
      --image: url(https://k3da1111.imgix.net/of3-2.jpg?auto=format&w=1200);
    }

    &[data-plant="M1"],
    &[data-plant="M2"] {
      max-width: 800px;
    }

    &[data-plant="M1"] {
      --image: url(https://k3da1111.imgix.net/of2-1.jpg?auto=format&w=800);
    }

    &[data-plant="M2"] {
      --image: url(https://k3da1111.imgix.net/of4-1.jpg?auto=format&w=800);
    }

    &[data-plant="S1"],
    &[data-plant="S2"],
    &[data-plant="S3"],
    &[data-plant="S4"] {
      max-width: 400px;
    }

    &[data-plant="S1"] {
      --image: url(https://k3da1111.imgix.net/of6-1.jpg?auto=format&w=400);
    }

    &[data-plant="S2"] {
      --image: url(https://k3da1111.imgix.net/of7-2.jpg?auto=format&w=400);
    }

    &[data-plant="S3"] {
      --image: url(https://k3da1111.imgix.net/of5-1.jpg?auto=format&w=400);
    }

    &[data-plant="S4"] {
      --image: url(https://k3da1111.imgix.net/of8-1.jpg?auto=format&w=400);
    }
  }
}

@media (max-width: 1000px) {
  #organic-forms .image {
    &[data-plant="L1"],
    &[data-plant="L2"] {
      max-width: 1000px;
    }

    &[data-plant="L1"] {
      --image: url(https://k3da1111.imgix.net/of1-2.jpg?auto=format&w=1000);
    }

    &[data-plant="L2"] {
      --image: url(https://k3da1111.imgix.net/of3-2.jpg?auto=format&w=1000);
    }

    &[data-plant="M1"],
    &[data-plant="M2"] {
      max-width: 667px;
    }

    &[data-plant="M1"] {
      --image: url(https://k3da1111.imgix.net/of2-1.jpg?auto=format&w=667);
    }

    &[data-plant="M2"] {
      --image: url(https://k3da1111.imgix.net/of4-1.jpg?auto=format&w=667);
    }

    &[data-plant="S1"],
    &[data-plant="S2"],
    &[data-plant="S3"],
    &[data-plant="S4"] {
      max-width: 334px;
    }

    &[data-plant="S1"] {
      --image: url(https://k3da1111.imgix.net/of6-1.jpg?auto=format&w=334);
    }

    &[data-plant="S2"] {
      --image: url(https://k3da1111.imgix.net/of7-2.jpg?auto=format&w=334);
    }

    &[data-plant="S3"] {
      --image: url(https://k3da1111.imgix.net/of5-1.jpg?auto=format&w=334);
    }

    &[data-plant="S4"] {
      --image: url(https://k3da1111.imgix.net/of8-1.jpg?auto=format&w=334);
    }
  }
}

@media (max-width: 600px) {
  #organic-forms .image {
    &[data-plant="L1"],
    &[data-plant="L2"] {
      max-width: 600px;
    }

    &[data-plant="L1"] {
      --image: url(https://k3da1111.imgix.net/of1-2.jpg?auto=format&w=600);
    }

    &[data-plant="L2"] {
      --image: url(https://k3da1111.imgix.net/of3-2.jpg?auto=format&w=600);
    }

    &[data-plant="M1"],
    &[data-plant="M2"] {
      max-width: 400px;
    }

    &[data-plant="M1"] {
      --image: url(https://k3da1111.imgix.net/of2-1.jpg?auto=format&w=400);
    }

    &[data-plant="M2"] {
      --image: url(https://k3da1111.imgix.net/of4-1.jpg?auto=format&w=400);
    }

    &[data-plant="S1"],
    &[data-plant="S2"],
    &[data-plant="S3"],
    &[data-plant="S4"] {
      max-width: 200px;
    }

    &[data-plant="S1"] {
      --image: url(https://k3da1111.imgix.net/of6-1.jpg?auto=format&w=200);
    }

    &[data-plant="S2"] {
      --image: url(https://k3da1111.imgix.net/of7-2.jpg?auto=format&w=200);
    }

    &[data-plant="S3"] {
      --image: url(https://k3da1111.imgix.net/of5-1.jpg?auto=format&w=200);
    }

    &[data-plant="S4"] {
      --image: url(https://k3da1111.imgix.net/of8-1.jpg?auto=format&w=200);
    }
  }
}

#winds-collide {
  display: grid;
  aspect-ratio: 9 / 16;
  padding: var(--pad);

  @media (orientation: portrait) {
    aspect-ratio: 9 / 23;
  }

  .bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: var(--color-pink);
    background-size: cover;
    background-position: bottom;
    background-image: var(--image);
    background-blend-mode: darken;

    --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format);

    @media (max-width: 2000px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=2000);
    }

    @media (max-width: 1600px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=1600);
    }

    @media (max-width: 1200px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=1200);
    }

    @media (max-width: 1000px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=1000);
    }

    @media (max-width: 800px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=800);
    }

    @media (max-width: 600px) {
      --image: url(https://k3da1111.imgix.net/k3da-coast-2026-3k.jpg?auto=format&w=600);
    }
  }

  canvas {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    user-select: none;
  }

  .content {
    z-index: 2;
    justify-self: center;
    align-self: start;
    position: sticky;
    top: 20vh;
    display: grid;
    place-items: center;

    & > div {
      position: absolute;
      width: calc(100% - 2 * var(--pad));
      max-width: 500px;
      font-size: var(--font-size-1);
      text-align: center;
      /* text-wrap: balance; */
      color: var(--color-pink);
      mix-blend-mode: plus-lighter;
      perspective: var(--perspective);
    }

    & * {
      transform-origin: center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
  }
}

#tracing-patterns {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--pad);
  perspective: var(--perspective);

  .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: var(--image);

    --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format);

    @media (max-width: 2000px) and (max-height: 2000px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=2000);
    }

    @media (max-width: 1600px) and (max-height: 1600px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=1600);
    }

    @media (max-width: 1200px) and (max-height: 1200px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=1200);
    }

    @media (max-width: 1000px) and (max-height: 1000px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=1000);
    }

    @media (max-width: 800px) and (max-height: 800px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=800);
    }

    @media (max-width: 600px) and (max-height: 600px) {
      --image: url(https://k3da1111.imgix.net/palmleaf39.jpg?auto=format&w=600);
    }
  }

  .content {
    width: 100%;
    position: sticky;
    top: var(--pad);
    display: grid;
    place-items: center;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;

    & > div {
      position: absolute;
      width: calc(100% - 2 * var(--pad));
      max-width: calc((9 / 16) * 100vh - 3 * var(--pad));
      font-size: var(--font-size-1);
      text-align: center;
      /* text-wrap: balance; */
      color: var(--color-pink);
      mix-blend-mode: plus-lighter;
      perspective: var(--perspective);

      & * {
        transform-origin: center;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
    }
  }

  video {
    height: calc(100vh - 2 * var(--pad));
  }
}

#gallery {
  width: 100%;
  aspect-ratio: 1000 / 563;
  display: grid;
  place-items: center;

  .bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-pink);
    background-blend-mode: darken;
    background-size: cover;
    background-position: center;

    animation: waveBrightness 11s infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;

    background-image: var(--image);

    --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format);

    @media (max-width: 2000px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=2000);
    }

    @media (max-width: 1600px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=1600);
    }

    @media (max-width: 1200px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=1200);
    }

    @media (max-width: 1000px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=1000);
    }

    @media (max-width: 800px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=800);
    }

    @media (max-width: 600px) {
      --image: url(https://k3da1111.imgix.net/k3da-shade-3k-2.jpg?auto=format&w=600);
    }
  }

  a {
    position: absolute;
    z-index: 2;
    top: 73%;
    left: 30%;
    transform: translate(-50%, -50%);

    font-size: var(--font-size-1);

    color: var(--color-pink);
    mix-blend-mode: plus-lighter;

    transition: color 1s ease;

    &:hover {
      color: white;
    }
  }
}