/* Colour and autonomous movement extend the approved composition. */
:root {
  --accent: #9de7d9;
}
.theme-design {
  --discipline: #f6ac97;
  --light-colour: #ff816b;
  --light-secondary: #d194ee;
}
.theme-development {
  --discipline: #8be4d7;
  --light-colour: #45dcca;
  --light-secondary: #729bf4;
}
.theme-media {
  --discipline: #d5b7f4;
  --light-colour: #b38afa;
  --light-secondary: #efb889;
}
.header,
.opening,
.inner-opening,
.discipline,
.story-stage,
.story-chapter,
.together,
.path-section,
.contact,
.footer {
  --motion-play: paused;
}
.is-awake {
  --motion-play: running;
}
.opening > .silk {
  animation: none;
}
.silk-shape {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.silk-current {
  stroke-dasharray: 32 968;
  stroke-dashoffset: 80;
  opacity: 0;
}
.opening::before,
.opening::after,
.inner-opening::before,
.discipline-art::before,
.together::before,
.contact::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.opening::before {
  inset: 0 -15%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 36% 75%, #39b8b529 0%, transparent 42%),
    radial-gradient(ellipse at 76% 48%, #7768d626 0%, transparent 38%);
}
.opening::after {
  inset: 0 -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 78% 83%, #d7907e1c, transparent 35%),
    radial-gradient(ellipse at 53% 65%, #84d6cf12, transparent 48%);
}
.opening::before,
.opening::after {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 65%,
    transparent 98%
  );
}
.opening > .silk {
  z-index: 1;
}
.inner-opening::before {
  inset: 10% -12% -15%;
  background:
    radial-gradient(
      ellipse at 77% 47%,
      color-mix(in srgb, var(--light-colour, #6edfd0), transparent 89%),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 66% 68%,
      color-mix(in srgb, var(--light-secondary, #9396ed), transparent 94%),
      transparent 40%
    );
}
.discipline-art {
  isolation: isolate;
}
.discipline-art::before {
  inset: -12%;
  background:
    radial-gradient(
      ellipse at 39% 49%,
      color-mix(in srgb, var(--light-colour), transparent 86%),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 65% 60%,
      color-mix(in srgb, var(--light-secondary), transparent 91%),
      transparent 41%
    );
}
.together::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 30%, #56b7b217, transparent 48%),
    radial-gradient(ellipse at 88% 80%, #9b8adf13, transparent 45%);
}
.contact::before {
  inset: -60px -5% -60px;
  background:
    radial-gradient(ellipse at 20% 45%, #5eceba12, transparent 42%),
    radial-gradient(ellipse at 70% 80%, #ad91e80c, transparent 40%);
}
.opening h1 span {
  color: #a3e8e0;
  background: linear-gradient(
    105deg,
    #a3efdc 4%,
    #86e1e5 32%,
    #a8b9f3 61%,
    #d2bdec 82%,
    #a3efdc 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.discipline-art .art-word,
.inner-art .art-word {
  background: linear-gradient(
    115deg,
    var(--discipline) 10%,
    color-mix(in srgb, var(--discipline), white 30%) 45%,
    var(--light-secondary) 85%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opening-copy .button {
  box-shadow: 0 0 34px #90e9dd0d;
}
@media (prefers-reduced-motion: no-preference) {
  /* The periods are intentionally offset, so the whole page never moves in unison. */
  .silk-shape {
    animation: silk-breathe 12s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .silk-design .silk-shape {
    animation-name: silk-fold;
    animation-duration: 14s;
    animation-delay: -3s;
  }
  .silk-development .silk-shape {
    animation-duration: 11s;
    animation-delay: -6s;
  }
  .silk-media .silk-shape {
    animation-name: silk-fold;
    animation-duration: 16s;
    animation-delay: -7s;
  }
  .silk-unity .silk-shape {
    animation-duration: 15s;
  }
  .silk-current {
    opacity: 0.8;
    animation: silk-current 18s linear infinite;
    animation-play-state: var(--motion-play);
  }
  .silk-current.current-1 {
    animation-delay: -9s;
    opacity: 0.45;
    stroke-width: 0.8;
  }
  .opening::before,
  .inner-opening::before,
  .discipline-art::before,
  .together::before,
  .contact::before {
    animation: light-breathe 14s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .opening::after {
    animation: light-drift 19s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .discipline-art::before {
    animation-delay: -4s;
    animation-duration: 17s;
  }
  .together::before {
    animation-delay: -9s;
  }
  .opening h1 span {
    animation: colour-flow 16s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .opening-copy .button {
    animation: invitation-breathe 6s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .discipline-art .art-word,
  .inner-art .art-word {
    animation: word-float 10s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .theme-development .art-word {
    animation-delay: -3s;
  }
  .theme-media .art-word {
    animation-delay: -6s;
  }
  .opening-foot > a > span {
    animation: continue-story 3.5s ease-in-out infinite;
    animation-play-state: var(--motion-play);
  }
  .opening-caption {
    animation: scene-arrival 0.85s 0.05s both;
  }
  .opening h1 {
    animation: scene-arrival 1s 0.12s both;
  }
  .opening-copy {
    animation: scene-arrival 1s 0.25s both;
  }
  .is-entering {
    animation: scene-arrival 0.9s var(--reveal-delay, 0ms) both;
  }
  @keyframes silk-breathe {
    0%,
    100% {
      transform: translate(-8px, 8px) rotate(-1.2deg) scale(1, 0.98);
    }
    50% {
      transform: translate(9px, -12px) rotate(1.2deg) scale(1.025, 1.045);
    }
  }
  @keyframes silk-fold {
    0%,
    100% {
      transform: translate(3px, 9px) rotate(-2deg) scale(0.98, 1.025);
    }
    50% {
      transform: translate(-7px, -9px) rotate(2deg) scale(1.025, 0.98);
    }
  }
  @keyframes silk-current {
    to {
      stroke-dashoffset: -920;
    }
  }
  @keyframes light-breathe {
    0%,
    100% {
      transform: translate(-1.5%, 1%) scale(0.98);
      opacity: 0.6;
    }
    50% {
      transform: translate(2%, -1%) scale(1.05);
      opacity: 1;
    }
  }
  @keyframes light-drift {
    0%,
    100% {
      transform: translate(3%, 0) scale(1);
      opacity: 0.5;
    }
    50% {
      transform: translate(-3%, -2%) scale(1.08);
      opacity: 1;
    }
  }
  @keyframes colour-flow {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  @keyframes invitation-breathe {
    0%,
    100% {
      box-shadow: 0 0 18px #90e9dd0a;
    }
    50% {
      box-shadow:
        0 0 35px #90e9dd21,
        0 0 70px #958fe90e;
    }
  }
  @keyframes word-float {
    0%,
    100% {
      transform: translateY(3px);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  @keyframes continue-story {
    0%,
    100% {
      transform: translateY(-2px);
      opacity: 0.7;
    }
    50% {
      transform: translateY(5px);
      opacity: 1;
    }
  }
  @keyframes scene-arrival {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
html[data-motion-paused] .public-page *,
html[data-motion-paused] .public-page *::before,
html[data-motion-paused] .public-page *::after {
  animation-play-state: paused !important;
}
html[data-motion-static] .is-entering,
html[data-motion-static] .opening-caption,
html[data-motion-static] .opening h1,
html[data-motion-static] .opening-copy {
  animation: none !important;
}
@media (max-width: 600px) {
  .header-actions {
    gap: 13px;
  }
  .opening::before {
    inset: 30% -20% 0;
  }
  .opening::after {
    inset: 48% -20% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .silk-current {
    opacity: 0;
  }
}
.discipline-art .silk,
.inner-art .silk {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 13%,
    black 84%,
    transparent
  );
}
html[data-motion-static] .discipline-art .silk {
  transform: none;
  transition: none;
}

@media (forced-colors: active) {
  .opening h1 span,
  .discipline-art .art-word,
  .inner-art .art-word {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}