/* Cinematic brand introduction */

body.intro-active { overflow: hidden; }

#brand-intro[open] {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--white);
  opacity: 1;
}

#brand-intro[open]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 35%, rgb(255 255 255 / 78%) 100%);
}

#brand-intro[open].is-leaving {
  animation: intro-curtain-out 650ms cubic-bezier(.55, 0, 1, .45) forwards;
}

.intro-skip {
  position: absolute;
  z-index: 20;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 38px);
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid rgb(18 53 91 / 24%);
  background: transparent;
  color: var(--ink-soft);
  font: 700 10px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.intro-skip:focus-visible,
.intro-replay:focus-visible {
  border-radius: 8px;
  outline: 3px solid #16766e;
  outline-offset: 4px;
}

.intro-scene {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 40px), 1160px);
  height: min(78svh, 720px);
}

.intro-opening {
  position: absolute;
  z-index: 5;
  top: 9%;
  left: 50%;
  width: 100%;
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.025em;
  text-align: center;
  transform: translateX(-50%);
  animation: intro-opening-copy 2.25s ease both;
}

.intro-walkway {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 18%;
  left: 0;
  height: 245px;
}

.intro-cat-runner {
  --cat-half: 105px;
  --cat-start: -19%;
  position: absolute;
  z-index: 4;
  bottom: -5px;
  left: var(--cat-start);
  width: 210px;
  height: 210px;
  animation:
    intro-cat-travel 2.42s linear 180ms both,
    intro-cat-dissolve 360ms ease 2.55s forwards;
}

.intro-cat-sprite {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--pink);
  -webkit-mask-image: url("/assets/cat-walk.png");
  mask-image: url("/assets/cat-walk.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 400% 200%;
  mask-size: 400% 200%;
  filter: drop-shadow(0 11px 18px rgb(18 53 91 / 8%));
  animation: intro-cat-frames 640ms steps(1, end) 180ms 4 both;
}

.intro-footprint {
  position: absolute;
  bottom: 7px;
  width: 23px;
  height: 27px;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 72%, rgb(18 53 91 / 66%) 0 25%, transparent 28%),
    radial-gradient(ellipse at 15% 34%, rgb(18 53 91 / 66%) 0 10%, transparent 13%),
    radial-gradient(ellipse at 39% 18%, rgb(18 53 91 / 66%) 0 10%, transparent 13%),
    radial-gradient(ellipse at 65% 18%, rgb(18 53 91 / 66%) 0 10%, transparent 13%),
    radial-gradient(ellipse at 88% 34%, rgb(18 53 91 / 66%) 0 10%, transparent 13%);
  transform: rotate(84deg) scale(.8);
  animation: intro-footstep 460ms ease both;
}

.intro-footprint:nth-child(even) {
  bottom: 28px;
  transform: rotate(98deg) scale(.8);
}

.intro-footprint--1 { left: 1%; animation-delay: .48s; }
.intro-footprint--2 { left: 7%; animation-delay: .7s; }
.intro-footprint--3 { left: 13%; animation-delay: .92s; }
.intro-footprint--4 { left: 19%; animation-delay: 1.14s; }
.intro-footprint--5 { left: 25%; animation-delay: 1.36s; }
.intro-footprint--6 { left: 31%; animation-delay: 1.58s; }
.intro-footprint--7 { left: 37%; animation-delay: 1.8s; }
.intro-footprint--8 { left: 43%; animation-delay: 2.02s; }
.intro-footprint--9 { left: 48%; animation-delay: 2.24s; }

.intro-butterfly-flight {
  --meeting-offset: 78px;
  --butterfly-travel-x: max(-50vw, -580px);
  --butterfly-travel-y: min(31svh, 260px);
  position: absolute;
  z-index: 8;
  top: 28%;
  left: 100%;
  width: 50px;
  height: 58px;
  opacity: 0;
  animation:
    intro-butterfly-travel 2.62s cubic-bezier(.38, .12, .25, 1) .28s both,
    intro-butterfly-visibility 2.62s linear .28s both;
}

.intro-butterfly-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.intro-butterfly-brand {
  fill: #e96694;
  fill-rule: evenodd;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linejoin: round;
  paint-order: fill stroke;
}

.intro-butterfly-wing-accent {
  fill: none;
  stroke: #2f9b98;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .52;
}

.intro-logo-shell {
  position: absolute;
  z-index: 6;
  top: 49%;
  left: 50%;
  width: min(91vw, calc(68svh * 1.5), 980px);
  aspect-ratio: 3 / 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  animation: intro-logo-presence 360ms cubic-bezier(.22, 1, .36, 1) 2s both;
}

.intro-logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.intro-logo-emblem {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.intro-emblem-outline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: var(--emblem-length) var(--emblem-length);
  stroke-dashoffset: var(--emblem-length);
  animation:
    intro-emblem-draw var(--emblem-duration) cubic-bezier(.45, 0, .2, 1) var(--emblem-delay) both,
    intro-emblem-outline-away 300ms ease var(--emblem-away) forwards;
}

.intro-emblem-outline--cat {
  --emblem-length: 5790;
  --emblem-duration: 1.65s;
  --emblem-delay: 2.46s;
  --emblem-away: 4.36s;
  stroke: #e76c8f;
}

.intro-emblem-outline--butterfly {
  --emblem-length: 1160;
  --emblem-duration: .86s;
  --emblem-delay: 2.62s;
  --emblem-away: 3.72s;
  stroke: #e76c8f;
}

.intro-emblem-outline--flask {
  --emblem-length: 986;
  --emblem-duration: .88s;
  --emblem-delay: 3.18s;
  --emblem-away: 4.31s;
  stroke: #2f9b98;
}

.intro-emblem-outline--tail {
  --emblem-length: 1446;
  --emblem-duration: 1.02s;
  --emblem-delay: 3.36s;
  --emblem-away: 4.63s;
  stroke: #2f9b98;
}

.intro-emblem-fill {
  opacity: 0;
  animation: intro-emblem-fill-in 380ms cubic-bezier(.22, 1, .36, 1) var(--fill-delay) both;
}

.intro-emblem-fill--cat {
  --fill-delay: 4.12s;
  fill: #e76c8f;
}

.intro-emblem-fill--butterfly {
  --fill-delay: 3.49s;
  fill: #e76c8f;
}

.intro-emblem-fill--butterfly-detail {
  --fill-delay: 3.58s;
  fill: #e76c8f;
}

.intro-emblem-fill--eye {
  --fill-delay: 4.18s;
  fill: #e76c8f;
}

.intro-emblem-fill--flask {
  --fill-delay: 4.07s;
  fill: #2f9b98;
}

.intro-emblem-fill--liquid {
  --fill-delay: 4.36s;
  fill: #e76c8f;
}

.intro-emblem-fill--liquid-detail {
  --fill-delay: 4.46s;
  fill: #e76c8f;
}

.intro-emblem-fill--tail {
  --fill-delay: 4.39s;
  fill: #2f9b98;
}

.intro-emblem-crossing {
  --fill-delay: 4.39s;
  fill: none;
}

.intro-emblem-crossing path {
  fill: none;
  stroke: #2f9b98;
  stroke-linejoin: round;
}

.intro-emblem-crossing__upper {
  stroke-width: 16;
  stroke-linecap: butt;
}

.intro-emblem-crossing__lower {
  stroke-width: 16;
  stroke-linecap: butt;
}

.intro-logo--name,
.intro-logo--subbrand,
.intro-logo--tagline {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  animation: intro-logo-layer-in 420ms cubic-bezier(.22, 1, .36, 1) both;
}

.intro-logo--name {
  clip-path: inset(27% 2% 46% 43%);
  animation-delay: 5.02s;
}

.intro-logo--subbrand {
  clip-path: inset(53% 2% 31% 47%);
  animation-delay: 5.44s;
}

.intro-logo--tagline {
  clip-path: inset(67% 2% 20% 47%);
  animation-delay: 5.86s;
}

.intro-closing {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 4%;
  left: 0;
  margin: 0;
  color: #16766e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  animation: intro-closing-copy 1.1s ease 6.35s both;
}

.intro-closing i { color: var(--pink); font-style: normal; }

.intro-glow {
  position: absolute;
  z-index: 1;
  width: 48vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
}

.intro-glow--pink {
  top: -24%;
  left: -16%;
  background: radial-gradient(circle, rgb(244 167 195 / 17%), transparent 70%);
}

.intro-glow--teal {
  right: -19%;
  bottom: -30%;
  background: radial-gradient(circle, rgb(61 183 167 / 14%), transparent 70%);
}

.intro-replay {
  position: absolute;
  z-index: 8;
  bottom: 1.5%;
  left: 50%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 750 9px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: translateX(-50%);
  cursor: pointer;
}

.intro-replay span {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid rgb(61 183 167 / 66%);
  border-left-color: transparent;
  border-radius: 50%;
}

.intro-replay span::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--teal-deep);
  border-left: 1px solid var(--teal-deep);
  transform: rotate(-24deg);
}

@keyframes intro-curtain-out {
  0%, 58% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes intro-opening-copy {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  18%, 65% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}

@keyframes intro-cat-travel {
  from { left: var(--cat-start); }
  to { left: calc(50% - var(--cat-half)); }
}

@keyframes intro-cat-dissolve {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(5px); }
}

@keyframes intro-cat-frames {
  0%, 24.99% { -webkit-mask-position: 0 0; mask-position: 0 0; }
  25%, 49.99% { -webkit-mask-position: 33.333% 0; mask-position: 33.333% 0; }
  50%, 74.99% { -webkit-mask-position: 66.666% 0; mask-position: 66.666% 0; }
  75%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes intro-footstep {
  0% { opacity: 0; filter: blur(2px); scale: .72; }
  100% { opacity: .24; filter: blur(0); scale: 1; }
}

@keyframes intro-butterfly-travel {
  from { transform: translate(-50%, -50%); }
  to {
    transform: translate(
      calc(-50% + var(--butterfly-travel-x) + var(--meeting-offset)),
      calc(-50% + var(--butterfly-travel-y))
    );
  }
}

@keyframes intro-butterfly-visibility {
  0% { opacity: 0; }
  8%, 91% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes intro-logo-presence {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes intro-emblem-draw {
  from {
    opacity: 1;
    stroke-dashoffset: var(--emblem-length);
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes intro-emblem-outline-away {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes intro-emblem-fill-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-logo-layer-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-closing-copy {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .intro-scene { width: calc(100% - 24px); height: 79svh; }
  .intro-opening { top: 8%; font-size: clamp(1.55rem, 8vw, 2.25rem); }
  .intro-walkway { bottom: 21%; height: 195px; }
  .intro-cat-runner { --cat-half: 82.5px; --cat-start: -43%; width: 165px; height: 165px; }
  .intro-butterfly-flight {
    --meeting-offset: 62px;
    --butterfly-travel-x: -50vw;
    --butterfly-travel-y: min(31svh, 260px);
    width: 45px;
    height: 53px;
  }
  .intro-footprint { width: 19px; height: 22px; }
  .intro-footprint--1 { left: 1%; }
  .intro-footprint--2 { left: 7%; }
  .intro-footprint--3 { left: 13%; }
  .intro-footprint--4 { left: 19%; }
  .intro-footprint--5 { left: 25%; }
  .intro-footprint--6 { left: 31%; }
  .intro-footprint--7 { left: 37%; }
  .intro-footprint--8 { left: 43%; }
  .intro-footprint--9 { left: 48%; }
  .intro-logo-shell { top: 48%; width: min(104vw, calc(70svh * 1.5)); }
  .intro-closing { bottom: 7%; padding: 0 18px; font-size: 9px; letter-spacing: .16em; }
  .intro-glow { width: 88vw; }
  .intro-replay { bottom: -2%; }
}

@media (max-height: 650px) and (min-width: 701px) {
  .intro-scene { height: 86svh; }
  .intro-opening { top: 4%; }
  .intro-walkway { bottom: 12%; }
  .intro-logo-shell { width: min(82vw, 800px); }
  .intro-closing { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #brand-intro[open],
  .intro-replay { display: none !important; }
}


#brand-intro{--white:#fbfcfb;--ink-soft:#163d39;--ink-deep:#163d39;--sans:Arial,sans-serif;--display:Georgia,serif;border:0;padding:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;color:#163d39}#brand-intro::backdrop{background:#fbfcfb}.intro-skip{font-size:13px}.intro-final-logo{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:intro-emblem-fill-in .5s 6.2s both}.intro-butterfly-svg{animation:butterfly-flutter .62s ease-in-out 5 alternate}@keyframes butterfly-flutter{from{transform:scaleX(1) rotate(-8deg)}to{transform:scaleX(.72) rotate(7deg)}}.welcome-replay{background:none;border:0;color:white;border-bottom:1px solid #ffffff80;font-size:12px;padding:5px 0;position:absolute;bottom:0;left:0}.reduced .welcome-replay{display:none}body.intro-active .cat-playing *{animation-play-state:paused!important}#brand-intro .intro-logo-shell{pointer-events:none}@media(max-width:760px){.welcome-brand{width:270px;max-width:85vw}.welcome-replay,.cat-replay{font-size:11px}}