:root {
  --knitling-cashmere: #f5f2f0;
  --knitling-logo-filter: brightness(0) saturate(100%) invert(11%) sepia(37%)
    saturate(1152%) hue-rotate(314deg) brightness(95%) contrast(91%);
}
.grounding {
  --intro-duration: 12s;
  --breath-lead: 2.8s;
  --breath-at: calc(var(--intro-duration) - var(--breath-lead));
  --inhale-duration: 4s;
  --hold-duration: 4s;
  --exhale-duration: 4s;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--knitling-cashmere);
  transition: opacity 1.2s ease;
}

.grounding.is-breathing {
  cursor: pointer;
}

.grounding.is-breathing .grounding__atmosphere {
  opacity: 0;
  visibility: hidden;
  animation: grounding-atmosphere-in 0s linear forwards;
  animation-delay: var(--breath-at);
}

.grounding.is-breathing .grounding__fog {
  animation: fog-drift 18s ease-in-out infinite;
}

.grounding.is-fading {
  opacity: 0;
  pointer-events: none;
}

.grounding::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(68vmin, 22rem);
  height: min(68vmin, 22rem);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.46);
  background: radial-gradient(
    circle,
    rgba(245, 242, 240, 0.2) 0%,
    rgba(206, 178, 165, 0.16) 46%,
    rgba(206, 178, 165, 0.38) 100%
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(61, 37, 29, 0.2),
    0 0 64px rgba(206, 178, 165, 0.42);
}

.grounding.is-breathing::before {
  animation:
    breath-inhale var(--inhale-duration) cubic-bezier(0.45, 0.05, 0.55, 1) forwards,
    breath-hold var(--hold-duration) linear forwards,
    breath-exhale var(--exhale-duration) cubic-bezier(0.45, 0.05, 0.55, 1) forwards;
  animation-delay:
    var(--breath-at),
    calc(var(--breath-at) + var(--inhale-duration)),
    calc(var(--breath-at) + var(--inhale-duration) + var(--hold-duration));
}

@keyframes breath-inhale {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.46);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes breath-hold {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes breath-exhale {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.46);
  }
}

@property --breath-elapsed {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.grounding::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(68vmin, 22rem);
  height: min(68vmin, 22rem);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.46);
  background: conic-gradient(
    from 0deg,
    transparent 0 var(--breath-elapsed),
    rgba(61, 37, 29, 0.42) var(--breath-elapsed) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 11px),
    #000 calc(100% - 7px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 11px),
    #000 calc(100% - 7px)
  );
}

.grounding.is-breathing::after {
  animation:
    breath-inhale var(--inhale-duration) cubic-bezier(0.45, 0.05, 0.55, 1) forwards,
    breath-hold var(--hold-duration) linear forwards,
    breath-exhale var(--exhale-duration) cubic-bezier(0.45, 0.05, 0.55, 1) forwards,
    ring-empty var(--inhale-duration) linear forwards,
    ring-empty var(--hold-duration) linear forwards,
    ring-empty var(--exhale-duration) linear forwards;
  animation-delay:
    var(--breath-at),
    calc(var(--breath-at) + var(--inhale-duration)),
    calc(var(--breath-at) + var(--inhale-duration) + var(--hold-duration)),
    var(--breath-at),
    calc(var(--breath-at) + var(--inhale-duration)),
    calc(var(--breath-at) + var(--inhale-duration) + var(--hold-duration));
}

@keyframes ring-empty {
  from {
    --breath-elapsed: 0deg;
  }

  to {
    --breath-elapsed: 360deg;
  }
}

.grounding__atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.grounding__fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
  animation: fog-drift 14s ease-in-out infinite;
}

.grounding__fog--a {
  width: 90vmax;
  height: 70vmax;
  left: -20%;
  top: -20%;
  background: radial-gradient(
    ellipse at center,
    rgba(206, 178, 165, 0.5) 0%,
    rgba(234, 226, 220, 0.2) 50%,
    transparent 72%
  );
}

.grounding__fog--b {
  width: 75vmax;
  height: 55vmax;
  right: -25%;
  top: 10%;
  animation-delay: -5s;
  animation-duration: 18s;
  background: radial-gradient(
    ellipse at center,
    rgba(159, 141, 130, 0.42) 0%,
    rgba(234, 226, 220, 0.15) 55%,
    transparent 75%
  );
}

.grounding__fog--c {
  width: 65vmax;
  height: 50vmax;
  left: 5%;
  bottom: -20%;
  animation-delay: -9s;
  animation-duration: 16s;
  background: radial-gradient(
    ellipse at center,
    rgba(206, 178, 165, 0.32) 0%,
    transparent 70%
  );
}

.grounding__smoke {
  position: absolute;
  inset: 0;
}

.grounding__smoke::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(234, 226, 220, 0.35) 0%,
    transparent 65%
  );
  opacity: 0;
}

.grounding.is-breathing .grounding__smoke::before {
  animation: none;
}

.grounding__wisp {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  display: block;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(159, 141, 130, 0.5) 0%,
    rgba(206, 178, 165, 0.22) 50%,
    transparent 75%
  );
  filter: blur(22px);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  opacity: 0;
}

.grounding.is-breathing .grounding__wisp {
  animation: none;
}

.grounding__wisp:nth-child(1) {
  --x: 22%;
  --y: 30%;
  --size: 7rem;
}

.grounding__wisp:nth-child(2) {
  --x: 78%;
  --y: 25%;
  --size: 5.5rem;
}

.grounding__wisp:nth-child(3) {
  --x: 50%;
  --y: 55%;
  --size: 9rem;
}

.grounding__wisp:nth-child(4) {
  --x: 12%;
  --y: 68%;
  --size: 6rem;
}

.grounding__wisp:nth-child(5) {
  --x: 88%;
  --y: 62%;
  --size: 8rem;
}

.grounding__wisp:nth-child(6) {
  --x: 35%;
  --y: 18%;
  --size: 5rem;
}

.grounding__wisp:nth-child(7) {
  --x: 65%;
  --y: 42%;
  --size: 10rem;
}

.grounding__wisp:nth-child(8) {
  --x: 8%;
  --y: 45%;
  --size: 6.5rem;
}

.grounding__wisp:nth-child(9) {
  --x: 92%;
  --y: 38%;
  --size: 7.5rem;
}

.grounding__wisp:nth-child(10) {
  --x: 42%;
  --y: 75%;
  --size: 8.5rem;
}

.grounding__wisp:nth-child(11) {
  --x: 58%;
  --y: 12%;
  --size: 5.25rem;
}

.grounding__wisp:nth-child(12) {
  --x: 28%;
  --y: 52%;
  --size: 6rem;
}

.grounding__wisp:nth-child(13) {
  --x: 72%;
  --y: 78%;
  --size: 9.5rem;
}

.grounding__wisp:nth-child(14) {
  --x: 18%;
  --y: 82%;
  --size: 7rem;
}

.grounding__wisp:nth-child(15) {
  --x: 82%;
  --y: 15%;
  --size: 6.25rem;
}

.grounding__wisp:nth-child(16) {
  --x: 48%;
  --y: 88%;
  --size: 8rem;
}

@keyframes fog-drift {
  0%,
  100% {
    opacity: 0.35;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    opacity: 0.6;
    transform: translate(5%, -6%) rotate(3deg) scale(1.06);
  }

  66% {
    opacity: 0.45;
    transform: translate(-4%, 5%) rotate(-2deg) scale(1.03);
  }
}

@keyframes grounding-atmosphere-in {
  to {
    opacity: 1;
    visibility: visible;
  }
}

.grounding__intro {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  width: min(26rem, calc(100vw - 3rem));
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.grounding__line {
  margin: 0;
  max-width: 22rem;
  font-weight: 300;
  font-size: clamp(1.0625rem, 2.8vw + 0.45rem, 1.3125rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: var(--color-text, #3d251d);
  opacity: 0;
}

.grounding__line--together {
  max-width: 16rem;
  color: var(--color-text-secondary, #8b6c5c);
}

.grounding__breath {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(16rem, calc(100vw - 4rem));
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.grounding__breath-word {
  display: block;
  font-weight: 300;
  font-size: clamp(0.95rem, 2.6vw, 1.125rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: lowercase;
  color: var(--color-text, #3d251d);
  opacity: 0;
  transition: opacity 0.85s ease;
}

.grounding__enter {
  position: absolute;
  z-index: 3;
  top: max(1.15rem, env(safe-area-inset-top, 0px));
  left: 50%;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 0;
  background: none;
  transform: translateX(-50%);
  font-family: inherit;
  font-weight: 300;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9f8d82);
  opacity: 0.46;
  cursor: pointer;
}

.grounding__enter:hover,
.grounding__enter:focus-visible {
  color: var(--color-text, #3d251d);
  opacity: 0.72;
}

.grounding__enter:focus-visible {
  outline: 1px solid rgba(61, 37, 29, 0.28);
  outline-offset: 4px;
}

.grounding__brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.grounding__logo {
  display: block;
  width: min(42vw, 7.5rem);
  height: auto;
  filter: var(--knitling-logo-filter);
  opacity: 0;
}

.grounding.is-breathing .grounding__logo {
  animation: grounding-logo-in var(--intro-duration) ease-in-out forwards;
}

.grounding.is-breathing .grounding__enter {
  animation: grounding-enter-in 2.2s ease both;
}

@keyframes grounding-enter-in {
  from {
    opacity: 0;
  }
}

@keyframes grounding-logo-in {
  0%,
  8% {
    opacity: 0;
    transform: translateY(6px);
  }

  18%,
  100% {
    opacity: 0.38;
    transform: translateY(0);
  }
}

.grounding.is-breathing .grounding__line--invite {
  animation: cue-invite var(--intro-duration) ease-in-out forwards;
}

.grounding.is-breathing .grounding__line--moment {
  animation: cue-pause var(--intro-duration) ease-in-out forwards;
}

.grounding.is-breathing .grounding__line--together {
  animation: cue-together var(--intro-duration) ease-in-out forwards;
}

@keyframes cue-invite {
  0%,
  2% {
    opacity: 0;
  }

  12%,
  68% {
    opacity: 1;
  }

  78%,
  100% {
    opacity: 0;
  }
}

@keyframes cue-pause {
  0%,
  14% {
    opacity: 0;
  }

  26%,
  68% {
    opacity: 1;
  }

  78%,
  100% {
    opacity: 0;
  }
}

@keyframes cue-together {
  0%,
  32% {
    opacity: 0;
  }

  44%,
  68% {
    opacity: 1;
  }

  78%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 40rem) {
  .grounding__intro {
    top: 44%;
    gap: 1.15rem;
    width: min(22rem, calc(100vw - 2.75rem));
  }

  .grounding__line {
    font-size: clamp(1rem, 4.5vw, 1.125rem);
    line-height: 1.5;
  }

  .grounding::before,
  .grounding::after {
    width: min(72vmin, 18.5rem);
    height: min(72vmin, 18.5rem);
  }
}

.grounding-replay {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border-fondant);
  border-radius: 999px;
  background: color-mix(in srgb, var(--knitling-cashmere) 92%, transparent);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.grounding-replay:hover {
  background: var(--color-surface-elevated);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .grounding__wisp,
  .grounding__fog,
  .grounding__smoke::before,
  .grounding__line,
  .grounding__breath-word,
  .grounding__enter,
  .grounding__logo,
  .grounding::before,
  .grounding::after {
    animation: none;
  }

  .grounding__logo {
    opacity: 0.38;
    transform: none;
  }

  .grounding__enter {
    opacity: 0.46;
    transform: translateX(-50%);
  }

  .grounding.is-breathing .grounding__line {
    opacity: 1;
  }

  .preview-main.is-visible {
    transition: none;
  }

  .grounding.is-fading {
    transition: none;
  }
}