/* ==========================================================================
   Creator easter egg
   --------------------------------------------------------------------------
   Fires when the person filling in a name field is the person who built the
   site. Nobody else ever sees it, so it costs a real visitor one small CSS
   file and a listener that does nothing.

   The markup is built by creator-egg.js on first trigger — there is no reason
   for an overlay a customer never opens to sit in the page source of a legal
   agreement.
   ========================================================================== */

.egg {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  opacity: 0;
  padding: var(--sp-4);
  pointer-events: none;
  position: fixed;
  visibility: hidden;
  z-index: 200;
}

.egg[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.egg__scrim {
  background:
    radial-gradient(70% 60% at 50% 42%, rgb(8 109 106 / 55%) 0%, transparent 70%),
    rgb(0 18 18 / 88%);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 400ms var(--ease, ease-out);
}

.egg[data-open="true"] .egg__scrim {
  opacity: 1;
}

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

/* the perspective lives on the parent so the card itself can keep its own
   transform for the entrance */
.egg__frame {
  perspective: 900px;
  position: relative;
}

.egg__card {
  background:
    linear-gradient(150deg, rgb(255 255 255 / 6%), transparent 55%),
    linear-gradient(180deg, #0d3634, #06211f);
  border: 1px solid rgb(240 180 88 / 34%);
  border-radius: 4px;
  box-shadow: 0 40px 90px rgb(0 0 0 / 55%);
  max-inline-size: 38rem;
  opacity: 0;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3.4rem);
  text-align: center;
  transform: translateY(26px) scale(0.965);
  transition: opacity 700ms cubic-bezier(0.2, 0, 0, 1), transform 700ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.egg[data-open="true"] .egg__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.egg__seal {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid rgb(240 180 88 / 45%);
  border-radius: 50%;
  color: #f0b458;
  display: flex;
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  inline-size: 3.4rem;
  justify-content: center;
  letter-spacing: 0.04em;
  margin: 0 auto var(--sp-5);
}

.egg__eyebrow {
  color: #f0b458;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
}

.egg__title {
  color: var(--white);
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 6.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  position: relative;
  text-wrap: balance;
}

/* one word per span so each can carry its own delay */
.egg__title .egg__w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 500ms ease-out,
    transform 500ms cubic-bezier(0.2, 0, 0, 1);
  transition-delay: calc(var(--i) * 70ms + 260ms);
}

.egg[data-open="true"] .egg__title .egg__w {
  opacity: 1;
  transform: translateY(0);
}

/* a single pass of gold across the title, never a loop */
.egg[data-open="true"] .egg__title::after {
  animation: egg-sweep 1400ms ease-out 600ms 1 both;
  background: linear-gradient(100deg, transparent 42%, rgb(240 180 88 / 55%) 50%, transparent 58%);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
}

@keyframes egg-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

.egg__body {
  color: #9fb5b3;
  margin: 0 auto var(--sp-5);
  max-inline-size: 40ch;
  opacity: 0;
  transition: opacity 600ms ease-out 620ms;
}

.egg[data-open="true"] .egg__body {
  opacity: 1;
}

.egg__sign {
  color: var(--sage);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin: 0 0 var(--sp-5);
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 600ms ease-out 760ms;
}

.egg[data-open="true"] .egg__sign {
  opacity: 1;
}

.egg__close {
  background: var(--amber);
  border: 0;
  border-radius: var(--r-pill);
  color: #241200;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 0;
  padding: 0.72em 1.7em;
  transition: opacity 500ms ease-out 880ms, filter 140ms ease;
}

.egg[data-open="true"] .egg__close {
  opacity: 1;
}

.egg__close:hover {
  filter: brightness(1.08);
}

.egg__close:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* Exit is deliberately plainer than the entrance: it happens when the person
   is done looking, so it gets out of the way rather than performing again. */
.egg[data-closing="true"] {
  transition: opacity 220ms ease-in;
}

.egg[data-closing="true"] .egg__card {
  transition: opacity 220ms ease-in;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .egg__card,
  .egg__title .egg__w,
  .egg__body,
  .egg__sign,
  .egg__close {
    transition: opacity 200ms ease-out 0ms;
    transform: none;
  }

  .egg[data-open="true"] .egg__title::after {
    animation: none;
  }
}