:root {
  --bend-x: 0px;
  --bend-y: 0px;
  --aura-x: 0px;
  --aura-y: 0px;
  --ripple-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: #f8fdff;
  background: #dbeef8;
  font-family: "Segoe UI", Arial, sans-serif;
}

.art-screen {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 20%, rgba(236, 252, 255, .62), transparent 17%),
    linear-gradient(180deg, #a9d7ef 0%, #d9f0fb 42%, #f6fbff 66%, #b6d5e8 100%);
}

.sky,
.porthole,
#triangleCanvas,
.grain {
  position: absolute;
  inset: 0;
}

.sky {
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(128, 193, 226, .98) 0%, rgba(199, 232, 247, .96) 38%, rgba(248, 252, 255, .98) 64%, rgba(178, 211, 229, .96) 100%);
}

.sky::before,
.sky::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 135vw;
  min-width: 1200px;
  transform: translateX(-50%);
  pointer-events: none;
}

.sky::before {
  top: 22vh;
  height: 46vh;
  opacity: .64;
  background:
    radial-gradient(ellipse at 12% 62%, rgba(99, 152, 181, .22) 0 7%, transparent 23%),
    radial-gradient(ellipse at 28% 52%, rgba(255,255,255,.54) 0 11%, transparent 32%),
    radial-gradient(ellipse at 46% 59%, rgba(104, 166, 198, .18) 0 8%, transparent 28%),
    radial-gradient(ellipse at 61% 47%, rgba(255,255,255,.48) 0 13%, transparent 36%),
    radial-gradient(ellipse at 82% 61%, rgba(81, 139, 172, .2) 0 7%, transparent 26%);
}

.sky::after {
  top: 52vh;
  height: 40vh;
  opacity: .78;
  background:
    radial-gradient(ellipse at 18% 38%, rgba(91, 145, 176, .22) 0 8%, transparent 28%),
    radial-gradient(ellipse at 34% 50%, rgba(246,253,255,.62) 0 15%, transparent 38%),
    radial-gradient(ellipse at 58% 42%, rgba(82, 139, 171, .18) 0 7%, transparent 25%),
    radial-gradient(ellipse at 75% 48%, rgba(255,255,255,.58) 0 14%, transparent 36%),
    radial-gradient(ellipse at 92% 34%, rgba(80, 132, 163, .18) 0 8%, transparent 27%);
}

.cloud-field {
  position: absolute;
  left: 50%;
  width: 150vw;
  min-width: 1400px;
  height: 58vh;
  transform: translateX(-50%);
  opacity: .9;
  background-repeat: no-repeat;
  will-change: transform;
}

.cloud-field-a {
  top: -4vh;
  height: 34vh;
  opacity: .78;
  background:
    radial-gradient(ellipse at 8% 42%, rgba(255,255,255,.82) 0 11%, rgba(255,255,255,.38) 23%, transparent 48%),
    radial-gradient(ellipse at 23% 35%, rgba(255,255,255,.92) 0 13%, rgba(236,250,255,.44) 27%, transparent 55%),
    radial-gradient(ellipse at 41% 45%, rgba(255,255,255,.86) 0 12%, rgba(242,252,255,.38) 29%, transparent 58%),
    radial-gradient(ellipse at 62% 32%, rgba(255,255,255,.9) 0 14%, rgba(238,250,255,.4) 31%, transparent 60%),
    radial-gradient(ellipse at 81% 43%, rgba(255,255,255,.82) 0 12%, rgba(245,253,255,.34) 28%, transparent 55%),
    radial-gradient(ellipse at 96% 35%, rgba(255,255,255,.68) 0 10%, rgba(255,255,255,.24) 25%, transparent 50%);
  filter: blur(5px);
  animation: cloudDriftA 88s ease-in-out infinite alternate;
}

.cloud-field-b {
  top: 38vh;
  opacity: .92;
  background:
    radial-gradient(ellipse at 4% 55%, rgba(255,255,255,.7) 0 9%, transparent 26%),
    radial-gradient(ellipse at 22% 43%, rgba(240,250,255,.92) 0 13%, transparent 33%),
    radial-gradient(ellipse at 42% 60%, rgba(255,255,255,.9) 0 14%, transparent 34%),
    radial-gradient(ellipse at 64% 45%, rgba(236,248,255,.86) 0 13%, transparent 34%),
    radial-gradient(ellipse at 84% 62%, rgba(255,255,255,.76) 0 11%, transparent 30%);
  animation: cloudDriftB 68s ease-in-out infinite alternate;
}

.cloud-field-c {
  top: 64vh;
  height: 43vh;
  opacity: .72;
  background:
    radial-gradient(ellipse at 18% 46%, rgba(250,253,255,.95) 0 16%, transparent 39%),
    radial-gradient(ellipse at 43% 38%, rgba(255,255,255,.9) 0 14%, transparent 36%),
    radial-gradient(ellipse at 68% 45%, rgba(238,248,255,.92) 0 15%, transparent 38%),
    radial-gradient(ellipse at 90% 40%, rgba(255,255,255,.82) 0 13%, transparent 34%);
  animation: cloudDriftC 76s ease-in-out infinite alternate;
}

.sun-veil {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 55% 28%, rgba(224, 250, 255, .62), transparent 16%),
    radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.28), transparent 45%);
  mix-blend-mode: screen;
}

.porthole {
  z-index: 2;
  pointer-events: none;
}

.porthole-shadow,
.porthole-glass,
.porthole-rim,
.porthole-highlight {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  transform: translate(-50%, -50%);
}

.porthole-shadow {
  box-shadow:
    inset 0 0 95px rgba(31, 66, 88, .2),
    inset 0 0 190px rgba(14, 43, 62, .12);
}

.porthole-rim {
  border: 0;
  box-shadow:
    inset 22px 0 32px rgba(231, 246, 252, .24),
    inset -22px 0 32px rgba(33, 77, 104, .12);
}

.porthole-glass {
  background:
    radial-gradient(ellipse at 32% 14%, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(116deg, transparent 0 38%, rgba(255,255,255,.11) 42%, transparent 52% 100%);
  mix-blend-mode: screen;
}

.porthole-highlight {
  display: none;
}

.brand-stage {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 59%;
  width: min(104vw, 1440px);
  transform: translate(-50%, -49%);
  pointer-events: none;
  isolation: isolate;
}

.brand-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 34%;
  width: min(136vw, 1580px);
  height: clamp(224px, 27vw, 396px);
  transform: translate(calc(-50% + var(--bend-x) * .08), calc(-50% + var(--bend-y) * .06 + 50px));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(22, 93, 139, .42) 0 26%, rgba(42, 130, 176, .29) 42%, rgba(118, 194, 222, .13) 63%, transparent 82%),
    linear-gradient(90deg, transparent 0%, rgba(43, 130, 176, .12) 16%, rgba(13, 78, 124, .2) 50%, rgba(63, 153, 193, .11) 84%, transparent 100%);
  filter: blur(18px);
  opacity: .82;
}

.brand-cloud {
  display: none;
}

.matter-aura {
  display: none;
}

.rainbow-svg {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -3%;
  width: min(125.9vw, 1560.54px);
  height: min(52vw, 500px);
  transform: translate(-50%, calc(-35% + 20px));
  overflow: visible;
  opacity: .98;
  isolation: isolate;
}

.rainbow-arc {
  fill: none;
  stroke-width: 28px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform;
}

.rainbow-band {
  fill: none;
  opacity: .74;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation-name: rainbowArcAssemble, rainbowPrismBreath;
  animation-duration: 3.1s, 17s;
  animation-timing-function: cubic-bezier(.36, 0, .12, 1), ease-in-out;
  animation-delay: var(--arc-delay), calc(var(--arc-delay) + 3.1s);
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.rainbow-red {
  --arc-delay: .08s;
  stroke: #e53935;
  animation: rainbowSwimA 23s ease-in-out infinite;
}

.rainbow-orange {
  --arc-delay: .22s;
  stroke: #fb8c00;
  animation: rainbowSwimB 27s ease-in-out infinite;
  animation-delay: -4s;
}

.rainbow-yellow {
  --arc-delay: .38s;
  stroke: #fdd835;
  animation: rainbowSwimC 25s ease-in-out infinite;
  animation-delay: -9s;
}

.rainbow-green {
  --arc-delay: .56s;
  stroke: #43a047;
  animation: rainbowSwimA 31s ease-in-out infinite;
  animation-delay: -14s;
}

.rainbow-blue {
  --arc-delay: .74s;
  stroke: #1e88e5;
  animation: rainbowSwimB 29s ease-in-out infinite;
  animation-delay: -7s;
}

.rainbow-indigo {
  --arc-delay: .93s;
  stroke: #3949ab;
  animation: rainbowSwimC 33s ease-in-out infinite;
  animation-delay: -18s;
}

.rainbow-violet {
  --arc-delay: 1.12s;
  stroke: #8e24aa;
  animation: rainbowSwimA 35s ease-in-out infinite;
  animation-delay: -22s;
}


.cloud-logo {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(11px, 1.38vw, 28px);
  width: min(104vw, 1390px);
  transform: translate(calc(-50% + var(--bend-x)), calc(-50% + var(--bend-y) + 50px));
  color: rgba(249,254,255,.96);
  font-family: "Cooper Black", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(58px, 8.45vw, 132px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: .015em;
  opacity: .98;
  filter: none;
}

.cloud-logo span {
  --pull-y: 0px;
  --pull-scale-y: 1.04;
  position: relative;
  display: inline-block;
  min-width: .66em;
  text-align: center;
  transform: translate3d(0, var(--pull-y), 0) scaleX(1.14) scaleY(var(--pull-scale-y));
  animation:
    letterFloat 8.5s ease-in-out infinite alternate,
    letterCloudVolume 13.5s ease-in-out infinite;
  isolation: isolate;
  color: rgba(250,254,255,.99);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: rgba(250,254,255,.99);
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
  filter: none;
}

.cloud-logo span::before,
.cloud-logo span::after {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  text-align: center;
  line-height: .9;
  -webkit-text-fill-color: initial;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.cloud-logo span::before {
  display: none;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  filter: none;
  transform: scale(1.028, 1.018);
  opacity: .9;
}

.cloud-logo span::after {
  display: none;
  color: rgba(255,255,255,.16);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  filter: none;
  transform: scale(.952, .93) translateY(.026em);
  opacity: .34;
  mix-blend-mode: screen;
}

.cloud-logo .dot {
  --pull-y: 55px;
  --pull-scale-y: 1.2;
  min-width: .34em;
  transform: translate3d(0, var(--pull-y), 0) scale(.82, var(--pull-scale-y));
  filter: none;
}

.cloud-logo span:nth-child(1),
.cloud-logo span:nth-child(13) {
  --pull-y: 5px;
  --pull-scale-y: 1.05;
}

.cloud-logo span:nth-child(2),
.cloud-logo span:nth-child(12) {
  --pull-y: 12px;
  --pull-scale-y: 1.07;
}

.cloud-logo span:nth-child(3),
.cloud-logo span:nth-child(11) {
  --pull-y: 22px;
  --pull-scale-y: 1.1;
}

.cloud-logo span:nth-child(4),
.cloud-logo span:nth-child(10) {
  --pull-y: 33px;
  --pull-scale-y: 1.13;
}

.cloud-logo span:nth-child(5),
.cloud-logo span:nth-child(9) {
  --pull-y: 42px;
  --pull-scale-y: 1.15;
}

.cloud-logo span:nth-child(6),
.cloud-logo span:nth-child(8) {
  --pull-y: 50px;
  --pull-scale-y: 1.17;
}

.cloud-logo span:nth-child(2n) {
  animation-duration: 9.7s;
}

.cloud-logo span:nth-child(2n)::before {
  transform: scale(1.022, 1.036);
}

.cloud-logo span:nth-child(3n) {
  animation-duration: 7.8s;
  animation-delay: -1.6s;
}

.cloud-logo span:nth-child(3n)::before {
  transform: scale(1.034, 1.01);
}

.cloud-logo span:nth-child(4n) {
  animation-delay: -3s;
}

.cloud-logo span:nth-child(4n)::after {
  transform: scale(.968, .986) translateY(.018em);
}

.cloud-logo span:nth-child(5n) {
  animation-duration: 10.4s;
  animation-delay: -4.4s;
}

.cloud-logo span:nth-child(5n)::before {
  transform: scale(1.018, 1.042);
}

.brand-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translateY(50px);
}

.brand-matter {
  display: none;
  transform: translate(var(--bend-x), var(--bend-y));
  transform-box: fill-box;
  transform-origin: 50% 45%;
  transition: transform .12s ease-out;
}

.brand,
.clip-text {
  font-family: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  font-size: 126px;
  font-weight: 900;
  letter-spacing: 7px;
  transform: scaleX(1.06);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.brand-shadow {
  display: none;
}

.brand-halo {
  fill: none;
  stroke: rgba(235,252,255,.74);
  stroke-width: 10px;
  opacity: .76;
  filter: url(#smallGlow);
}

.brand-stroke {
  fill: rgba(203, 239, 252, .78);
  stroke: rgba(6, 77, 111, .95);
  stroke-width: 5.4px;
}

.brand-fill {
  fill: url(#brandMist);
  stroke: rgba(245,253,255,.98);
  stroke-width: 2px;
}

.brand-sheen {
  fill: rgba(236,252,255,.24);
  stroke: rgba(90,202,236,.5);
  stroke-width: .75px;
}

.brand-glass {
  fill: rgba(255,255,255,.05);
  stroke: rgba(255,255,255,.82);
  stroke-width: .9px;
}

.water-inside {
  opacity: .82;
}

.water-band {
  fill: url(#waterLine);
  opacity: .58;
  animation: waterFlow 18s ease-in-out infinite alternate;
}

.band-b {
  animation-duration: 23s;
  animation-delay: -4s;
}

.band-c {
  animation-duration: 29s;
  animation-delay: -7s;
}

.mist-line {
  fill: none;
  stroke: rgba(255,255,255,.64);
  stroke-width: 2.2px;
  stroke-linecap: round;
  opacity: .7;
  animation: lineBreathe 16s ease-in-out infinite alternate;
}

.line-b {
  animation-delay: -5s;
}

.line-c {
  animation-delay: -9s;
}

.subtitle {
  font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 31px;
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 400;
  letter-spacing: 0;
  fill: rgba(235, 251, 255, .96);
  stroke: rgba(28, 101, 139, .72);
  stroke-width: 1.15px;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.42))
    drop-shadow(0 0 4px rgba(91,190,222,.18))
    drop-shadow(0 5px 8px rgba(7,63,98,.16));
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: subtitleInflate 2.8s cubic-bezier(.42, 0, .14, 1) forwards;
}

.subtitle-halo {
  fill: none;
  stroke: rgba(223,250,255,.46);
  stroke-width: 4.8px;
  opacity: .58;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.16))
    drop-shadow(0 0 10px rgba(74,181,216,.16));
  animation: subtitleHaloInflate 2.8s cubic-bezier(.42, 0, .14, 1) forwards;
}

.contact {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 31px;
  font-weight: 600;
  letter-spacing: .08em;
  fill: rgba(82, 202, 238, .92);
  stroke: rgba(246, 253, 255, .78);
  stroke-width: 1.15px;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.76))
    drop-shadow(0 0 10px rgba(247,253,255,.5))
    drop-shadow(0 0 16px rgba(221,247,255,.28));
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: contactMonitor 3.1s cubic-bezier(.42, 0, .14, 1) forwards;
}

.contact-halo {
  fill: none;
  stroke: rgba(255,255,255,.68);
  stroke-width: 6.4px;
  opacity: .66;
  animation: contactMonitorHalo 3.1s cubic-bezier(.42, 0, .14, 1) forwards;
}

.contact-signal {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: contactSlideSignal 3.1s cubic-bezier(.38, 0, .2, 1) forwards;
}

.contact-underline {
  fill: none;
  stroke: rgba(255, 255, 255, .98);
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-dasharray: 78;
  stroke-dashoffset: 78;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.76))
    drop-shadow(0 0 11px rgba(95,216,248,.58))
    drop-shadow(0 0 18px rgba(45,166,216,.3));
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: contactUnderlineSignal 3.1s cubic-bezier(.38, 0, .2, 1) forwards;
}

.contact-underline-glow {
  stroke: rgba(109, 224, 252, .72);
  stroke-width: 7.2px;
  opacity: 0;
  filter: blur(2px);
}

#triangleCanvas {
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.grain {
  display: none;
}

@keyframes cloudDriftA {
  from { transform: translateX(-52%) translateY(0); }
  to { transform: translateX(-47.5%) translateY(8px); }
}

@keyframes cloudDriftB {
  from { transform: translateX(-48%) translateY(0); }
  to { transform: translateX(-51%) translateY(-12px); }
}

@keyframes cloudDriftC {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-47.5%) translateY(-8px); }
}

@keyframes waterFlow {
  from { transform: translateX(-18px) translateY(0); }
  to { transform: translateX(22px) translateY(7px); }
}

@keyframes lineBreathe {
  from { opacity: .38; transform: translateX(-10px); }
  to { opacity: .82; transform: translateX(12px); }
}

@keyframes rainbowRevealSettle {
  0% {
    opacity: 0;
    transform: translateY(-3px) scale(.992);
  }
  100% {
    opacity: .95;
    transform: translateY(0) scale(1);
  }
}

@keyframes rainbowArcAssemble {
  0% {
    opacity: .08;
    stroke-dashoffset: 100;
  }
  42% {
    opacity: .64;
  }
  76% {
    opacity: .86;
    stroke-dashoffset: 8;
  }
  100% {
    opacity: .74;
    stroke-dashoffset: 0;
  }
}

@keyframes rainbowSwimA {
  0%, 100% {
    transform: translate3d(0, -2px, 0) rotate(-.08deg) scaleY(1);
  }
  34% {
    transform: translate3d(-5px, 3px, 0) rotate(.18deg) scaleY(1.018);
  }
  68% {
    transform: translate3d(4px, -1px, 0) rotate(-.14deg) scaleY(.994);
  }
}

@keyframes rainbowSwimB {
  0%, 100% {
    transform: translate3d(2px, 1px, 0) rotate(.12deg) scaleY(1.006);
  }
  42% {
    transform: translate3d(-3px, -3px, 0) rotate(-.18deg) scaleY(.99);
  }
  74% {
    transform: translate3d(5px, 4px, 0) rotate(.08deg) scaleY(1.02);
  }
}

@keyframes rainbowSwimC {
  0%, 100% {
    transform: translate3d(-1px, 2px, 0) rotate(-.1deg) scaleY(1.01);
  }
  36% {
    transform: translate3d(4px, -2px, 0) rotate(.16deg) scaleY(.996);
  }
  72% {
    transform: translate3d(-5px, 3px, 0) rotate(-.05deg) scaleY(1.018);
  }
}

@keyframes rainbowPrismBreath {
  0%, 100% {
    opacity: .68;
  }
  45% {
    opacity: .82;
  }
  72% {
    opacity: .74;
  }
}

@keyframes subtitleInflate {
  0% {
    transform: translateY(0) scale(1, 1);
    opacity: .9;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    letter-spacing: 0;
    fill: rgba(228, 248, 254, .9);
    stroke: rgba(27, 101, 139, .56);
    stroke-width: .9px;
    filter:
      drop-shadow(0 1px 0 rgba(255,255,255,.28))
      drop-shadow(0 0 3px rgba(91,190,222,.12))
      drop-shadow(0 4px 7px rgba(7,63,98,.12));
  }
  18% {
    font-weight: 500;
    font-variation-settings: "wght" 500;
    stroke-width: 1.15px;
    fill: rgba(235, 251, 255, .94);
  }
  34% {
    font-weight: 600;
    font-variation-settings: "wght" 600;
    stroke-width: 1.45px;
    fill: rgba(240, 253, 255, .97);
    stroke: rgba(66, 166, 200, .68);
    filter:
      drop-shadow(0 -1px 0 rgba(255,255,255,.46))
      drop-shadow(0 0 6px rgba(147,225,246,.34))
      drop-shadow(0 7px 10px rgba(6,62,96,.2));
  }
  48% {
    font-weight: 700;
    font-variation-settings: "wght" 700;
    stroke-width: 1.8px;
    fill: rgba(245, 253, 255, .99);
    stroke: rgba(86, 188, 219, .76);
  }
  60% {
    font-weight: 800;
    font-variation-settings: "wght" 800;
    stroke-width: 2.25px;
    fill: rgba(248, 254, 255, 1);
    stroke: rgba(107, 205, 234, .84);
  }
  72%, 100% {
    transform: translateY(-1px) scale(1.022, 1.078);
    opacity: 1;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    letter-spacing: .018em;
    fill: rgba(250, 254, 255, 1);
    stroke: rgba(128, 217, 241, .92);
    stroke-width: 2.65px;
    filter:
      drop-shadow(0 -1px 0 rgba(255,255,255,.64))
      drop-shadow(0 0 9px rgba(162,234,250,.46))
      drop-shadow(0 9px 13px rgba(5,66,101,.25));
  }
}

@keyframes subtitleHaloInflate {
  0% {
    transform: scale(1, 1);
    opacity: .38;
    stroke-width: 3.4px;
    stroke: rgba(219, 248, 255, .3);
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.1))
      drop-shadow(0 0 7px rgba(74,181,216,.12));
  }
  34% {
    opacity: .5;
    stroke-width: 5.8px;
  }
  60% {
    opacity: .68;
    stroke-width: 7.4px;
  }
  72%, 100% {
    transform: scale(1.024, 1.1);
    opacity: .82;
    stroke-width: 9.5px;
    stroke: rgba(237, 253, 255, .66);
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.28))
      drop-shadow(0 0 18px rgba(103,204,234,.28));
  }
}

@keyframes contactMonitor {
  0% {
    opacity: .82;
    transform: scale(1);
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.66))
      drop-shadow(0 0 10px rgba(247,253,255,.42))
      drop-shadow(0 0 15px rgba(221,247,255,.24));
  }
  18% {
    opacity: .84;
    transform: scale(1);
  }
  35%, 60%, 100% {
    opacity: .98;
    transform: scale(1.006, 1.02);
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.82))
      drop-shadow(0 0 14px rgba(250,254,255,.58))
      drop-shadow(0 0 22px rgba(232,250,255,.34));
  }
}

@keyframes contactMonitorHalo {
  0% {
    opacity: .5;
  }
  35%, 60%, 100% {
    opacity: .78;
  }
}

@keyframes contactSlideSignal {
  0%, 18% {
    transform: translateX(0);
  }
  35%, 60%, 100% {
    transform: translateX(50px);
  }
}

@keyframes contactUnderlineSignal {
  0%, 17% {
    opacity: 0;
    stroke-dashoffset: 78;
  }
  24% {
    opacity: .86;
    stroke-dashoffset: 13;
  }
  35%, 60%, 100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes letterCloudVolume {
  0%, 100% {
    opacity: .96;
  }
  48% {
    opacity: 1;
  }
}

@keyframes letterFloat {
  0% {
    transform: translate3d(0, calc(var(--pull-y) - 4px), 0) rotate(-.5deg) scaleX(1.13) scaleY(calc(var(--pull-scale-y) + .04));
  }
  45% {
    transform: translate3d(0, calc(var(--pull-y) + 5px), 0) rotate(.35deg) scaleX(1.2) scaleY(calc(var(--pull-scale-y) - .01));
  }
  100% {
    transform: translate3d(0, calc(var(--pull-y) - 1px), 0) rotate(.65deg) scaleX(1.12) scaleY(calc(var(--pull-scale-y) + .06));
  }
}

@media (max-width: 760px) {
  .art-screen {
    min-height: 560px;
  }

  .brand-stage {
    width: 100vw;
    transform: translate(-50%, -47%);
  }

  .brand-stage::before {
    top: 34%;
    width: 132vw;
    height: 172px;
    transform: translate(calc(-50% + var(--bend-x) * .05), calc(-50% + var(--bend-y) * .04 + 38px));
    filter: blur(12px);
    opacity: .78;
  }

  .cloud-logo {
    top: 32%;
    gap: clamp(2px, .45vw, 5px);
    font-size: clamp(29px, 8.4vw, 48px);
    width: 96vw;
  }

  .rainbow-svg {
    top: 7%;
    width: 136.54vw;
    height: 248px;
    transform: translate(-50%, calc(-40% - 2px));
    opacity: .84;
  }

  .rainbow-arc {
    stroke-width: 18px;
  }

  .cloud-logo span {
    min-width: .54em;
    transform: translate3d(0, var(--pull-y), 0) scaleX(1.05) scaleY(var(--pull-scale-y));
  }

  .cloud-logo span:nth-child(1),
  .cloud-logo span:nth-child(13) {
    --pull-y: 4px;
  }

  .cloud-logo span:nth-child(2),
  .cloud-logo span:nth-child(12) {
    --pull-y: 8px;
  }

  .cloud-logo span:nth-child(3),
  .cloud-logo span:nth-child(11) {
    --pull-y: 14px;
  }

  .cloud-logo span:nth-child(4),
  .cloud-logo span:nth-child(10) {
    --pull-y: 20px;
  }

  .cloud-logo span:nth-child(5),
  .cloud-logo span:nth-child(9) {
    --pull-y: 26px;
  }

  .cloud-logo span:nth-child(6),
  .cloud-logo span:nth-child(8) {
    --pull-y: 31px;
  }

  .cloud-logo .dot {
    --pull-y: 34px;
    min-width: .26em;
    transform: translate3d(0, var(--pull-y), 0) scale(.82, var(--pull-scale-y));
  }

  .brand,
  .clip-text {
    font-size: 82px;
    letter-spacing: 3px;
    transform: scaleX(1.01);
  }

  .subtitle {
    font-size: 48px;
    stroke-width: 1.35px;
  }

  .contact {
    font-size: 48px;
    letter-spacing: .035em;
    stroke-width: 1.35px;
  }

  .subtitle-halo {
    stroke-width: 7px;
  }

  .contact-halo {
    stroke-width: 7px;
  }

  .cloud-field {
    min-width: 900px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-field,
  .water-band,
  .mist-line,
  .contact,
  .contact-halo,
  .contact-signal,
  .contact-underline,
  .rainbow-arc,
  .rainbow-band {
    animation: none;
  }

  .rainbow-band {
    opacity: .74;
    stroke-dashoffset: 0;
  }

  .brand-matter {
    transition: none;
  }
}