/* Original Wordloop opening: a pendulum lamp reveals the study space. */
.site-splash {
  --splash-ink: #040506;
  --splash-light: #f6f8ef;
  background:
    radial-gradient(circle at 50% 42%, rgba(120, 149, 113, .12), transparent 27rem),
    var(--splash-ink);
  color: var(--splash-light);
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
}

.site-splash::before {
  background-image: radial-gradient(rgba(255, 255, 255, .16) .45px, transparent .55px);
  background-size: 5px 5px;
  content: '';
  inset: 0;
  opacity: .06;
  pointer-events: none;
  position: absolute;
}

.site-splash-stage {
  --splash-light-x: 50%;
  --splash-light-y: 50%;
  height: 100%;
  margin: 0 auto;
  max-width: 120rem;
  overflow: hidden;
  position: relative;
}

.site-splash-floor {
  background: radial-gradient(ellipse at center, rgba(235, 242, 226, .2), transparent 63%);
  bottom: -24vh;
  filter: blur(10px);
  height: 48vh;
  left: 20%;
  opacity: 0;
  position: absolute;
  transform: scaleX(.5);
  width: 60%;
  transition: opacity .55s ease, transform .55s ease;
}

.site-splash-word {
  background:
    radial-gradient(circle 10rem at var(--splash-light-x) var(--splash-light-y), #ffffff 0, #d9e3d5 8%, #718071 24%, #2b332e 44%, #131614 67%),
    #111412;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 10.8vw, 12rem);
  font-weight: 700;
  left: 50%;
  letter-spacing: -.075em;
  line-height: .9;
  position: absolute;
  text-align: center;
  text-shadow: 0 1.6rem 2.8rem rgba(0, 0, 0, .76);
  top: 50%;
  transform: translate(-50%, -54%) scale(.62);
  transform-origin: 50% 58%;
  white-space: nowrap;
  z-index: 2;
  transition: filter .55s ease;
}

.site-splash-word::after {
  background:
    radial-gradient(ellipse 9rem 3.6rem at var(--splash-light-x) 95%, rgba(252, 255, 247, .9) 0%, rgba(197, 217, 188, .58) 28%, rgba(102, 125, 98, .18) 58%, transparent 82%),
    linear-gradient(to bottom, transparent 0%, rgba(111, 128, 108, .12) 52%, rgba(211, 222, 207, .3) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  content: attr(data-word);
  filter: blur(3.2px) brightness(.9);
  font: inherit;
  left: 0;
  letter-spacing: inherit;
  line-height: inherit;
  opacity: .62;
  position: absolute;
  top: calc(100% + .015em);
  transform: translateY(36%) scaleY(-.36);
  transform-origin: top;
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, rgba(0, 0, 0, .3) 57%, rgba(0, 0, 0, .82) 100%);
  mask-image: linear-gradient(to bottom, transparent 8%, rgba(0, 0, 0, .3) 57%, rgba(0, 0, 0, .82) 100%);
  transition: filter .65s cubic-bezier(.4,0,.2,1), opacity .65s cubic-bezier(.4,0,.2,1);
}

.site-splash-stage.is-settled .site-splash-word {
  background: linear-gradient(105deg, #8f9a8d 0%, #b9c3b7 38%, #ffffff 45%, #eaffdf 50%, #ffffff 55%, #bdc7bb 62%, #8b9789 100%);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 280% 100%;
  animation:
    splash-word-advance 2.9s cubic-bezier(.4,.42,.6,.58) both,
    splash-word-sheen .78s cubic-bezier(.35,0,.3,1) 2.12s both;
  filter: none;
}

.site-splash-stage.is-settled .site-splash-word::after {
  filter: blur(2.8px) brightness(1.7);
  opacity: .74;
}
.site-splash-stage.is-settled .site-splash-floor { opacity: .68; transform: scaleX(1); }
.site-splash-stage.is-settled .site-splash-pendulum {
  filter: blur(3px);
  opacity: 0;
}

.site-splash-pendulum {
  height: min(55vw, 53vh);
  left: 50%;
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
  filter: blur(0);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), filter .65s cubic-bezier(.4,0,.2,1);
  width: 1px;
  z-index: 3;
  animation: splash-swing 3.05s cubic-bezier(.38, 0, .2, 1) .18s both;
}

.site-splash-cord {
  background: linear-gradient(to right, rgba(255,255,255,.2), #fbfff6 48%, rgba(255,255,255,.24));
  box-shadow: 0 0 8px rgba(246, 255, 239, .34);
  display: block;
  height: 100%;
  left: -1px;
  position: absolute;
  top: 0;
  width: 2px;
}

.site-splash-lamp {
  background: #f9fff1;
  border-radius: 50%;
  bottom: -1.1rem;
  box-shadow: 0 0 0 .32rem rgba(244, 255, 231, .1), 0 0 1.5rem .6rem rgba(230, 255, 206, .52), 0 0 5.5rem 2.1rem rgba(139, 172, 126, .3);
  display: block;
  height: 2.25rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 2.25rem;
  z-index: 0;
}

.site-splash-lamp::after {
  background: radial-gradient(circle, rgba(248, 255, 239, .5) 0, rgba(188, 215, 174, .18) 22%, rgba(126, 163, 114, .06) 46%, transparent 71%);
  border-radius: 50%;
  content: '';
  height: min(42vw, 34rem);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(42vw, 34rem);
  z-index: -1;
}

.site-splash-beam {
  background: radial-gradient(circle, rgba(252, 255, 247, .96) 0, rgba(229, 247, 219, .5) 5%, rgba(161, 197, 145, .16) 18%, transparent 57%);
  border-radius: 50%;
  height: min(78vw, 66rem);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.04);
  width: min(78vw, 66rem);
  z-index: 1;
}

.site-splash-stage.is-settled .site-splash-beam {
  animation: splash-center-burst 1.25s cubic-bezier(.16,.84,.2,1) both;
}

.site-splash-skip {
  background: transparent;
  border: 1px solid rgba(242, 248, 237, .25);
  border-radius: 999px;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  color: rgba(240, 246, 235, .74);
  cursor: pointer;
  font: 500 .76rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
  opacity: 0;
  padding: .68rem 1rem;
  position: absolute;
  right: max(1.5rem, env(safe-area-inset-right));
  text-indent: .12em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  animation: splash-skip-in .45s ease 1.15s forwards;
}

.site-splash-skip:hover,
.site-splash-skip:focus-visible {
  background: rgba(245, 250, 239, .12);
  border-color: rgba(242, 248, 237, .7);
  color: #fff;
  outline: none;
}

.site-splash.is-leaving {
  animation: splash-leave .48s ease-in forwards;
  pointer-events: none;
}

@keyframes splash-swing {
  0% { transform: rotate(-51deg); }
  30% { transform: rotate(42deg); }
  52% { transform: rotate(-25deg); }
  71% { transform: rotate(13deg); }
  87% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes splash-center-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.04); }
  22% { opacity: .95; transform: translate(-50%, -50%) scale(.31); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes splash-word-advance {
  0% { transform: translate(-50%, -54%) scale(.62); }
  100% { transform: translate(-50%, -54%) scale(1); }
}

@keyframes splash-word-sheen {
  0% { background-position: 112% 0; text-shadow: 0 1.6rem 2.8rem rgba(0, 0, 0, .76); }
  50% { text-shadow: 0 0 1.35rem rgba(222, 255, 207, .68), 0 1.6rem 2.8rem rgba(0, 0, 0, .76); }
  100% { background-position: -12% 0; text-shadow: 0 1.6rem 2.8rem rgba(0, 0, 0, .76); }
}

@keyframes splash-skip-in { to { opacity: 1; } }
@keyframes splash-leave { to { opacity: 0; visibility: hidden; } }

@media (max-width: 600px) {
  .site-splash {
    height: 100dvh;
    min-height: 100svh;
  }

  .site-splash-stage {
    height: 100dvh;
    min-height: 100svh;
  }

  .site-splash-pendulum {
    animation-name: splash-swing-mobile;
    height: 46dvh;
    max-height: 28rem;
  }

  .site-splash-lamp {
    bottom: -.85rem;
    height: 1.7rem;
    width: 1.7rem;
  }

  .site-splash-lamp::after {
    height: min(78vw, 20rem);
    width: min(78vw, 20rem);
  }

  .site-splash-beam {
    height: min(130vw, 32rem);
    top: 50%;
    width: min(130vw, 32rem);
  }

  .site-splash-word {
    font-size: clamp(3.35rem, 17.2vw, 5rem);
    letter-spacing: -.082em;
    max-width: calc(100vw - 2rem);
  }

  .site-splash-word::after {
    filter: blur(2.6px) brightness(.94);
  }

  .site-splash-stage.is-settled .site-splash-word::after {
    filter: blur(2.4px) brightness(1.7);
  }

  .site-splash-skip {
    align-items: center;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    min-height: 2.75rem;
    padding: .72rem 1.05rem;
    right: max(1rem, env(safe-area-inset-right));
  }
}

@keyframes splash-swing-mobile {
  0% { transform: rotate(-27deg); }
  30% { transform: rotate(24deg); }
  52% { transform: rotate(-15deg); }
  71% { transform: rotate(9deg); }
  87% { transform: rotate(-3.5deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-splash,
  .site-splash *,
  .site-splash::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .site-splash { display: none; }
}