/* curtain.css, the thank-you overlay. Pairs with js/curtain.js.

   Every colour here reads a --ct-* property first and falls back to the host
   site's own token, so a site only has to declare the block below if its
   tokens are named differently:

     :root {
       --ct-ground:   #1A1418;  the dark field the curtain fills
       --ct-text:     #F4EEE6;  type on that field
       --ct-accent:   #FFBC42;  the name, the focus ring, the wash
       --ct-wash:     rgba(255,188,66,.30);
       --ct-strand-1: #218380;  the three rope strands, drawn in this order
       --ct-strand-2: #FFBC42;
       --ct-strand-3: #F07167;
       --ct-btn-bg:   #FFBC42;  the button, kept separate from --ct-accent
       --ct-btn-fg:   #1A1418;  because a brand colour that reads as a button
     }                          is not always legible as type on the ground

   Type is inherited from the page, so the overlay picks up whatever the site
   is set in without loading a font of its own. */

.ct {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--ct-ground, var(--ink, #14100F));
  color: var(--ct-text, var(--on-dark, #F4EEE6));
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 4rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ct-ease, var(--ease, cubic-bezier(.16,1,.3,1)));
  overflow-y: auto;
}
.ct[hidden] { display: none; }
.ct.is-up { opacity: 1; pointer-events: auto; }

/* The accent wash rises behind the rope, so the ground is never a flat black
   field. */
.ct::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 460px at 50% 58%, var(--ct-wash, rgba(255,188,66,.30)), transparent 66%);
  opacity: 0;
  transition: opacity 1.2s var(--ct-ease, var(--ease, cubic-bezier(.16,1,.3,1))) .25s;
}
.ct.is-up::before { opacity: 1; }

.ct-in {
  position: relative;
  width: 100%;
  max-width: 34rem;
  text-align: center;
  padding-block: 2.5rem;
}

/* --------------------------------------------------------------- the rope */

.ct-rope { width: 100%; max-width: 320px; margin: 0 auto 1.9rem; display: block; }
.ct-rope path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}
.ct-rope path:nth-child(1) { stroke: var(--ct-strand-1, var(--teal, #218380)); }
.ct-rope path:nth-child(2) { stroke: var(--ct-strand-2, var(--gold, #FFBC42)); }
.ct-rope path:nth-child(3) { stroke: var(--ct-strand-3, var(--coral, #F07167)); }
.ct.is-up .ct-rope path { animation: ct-draw 1.1s cubic-bezier(.32,.24,.24,1) forwards; }
.ct.is-up .ct-rope path:nth-child(2) { animation-delay: .12s; }
.ct.is-up .ct-rope path:nth-child(3) { animation-delay: .24s; }
@keyframes ct-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------- the words */

.ct h2 {
  margin: 0;
  color: var(--ct-text, var(--on-dark, #F4EEE6));
  font-family: inherit;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.ct h2 em { font-style: normal; color: var(--ct-accent, var(--gold, #FFBC42)); }
.ct p {
  margin: 1rem auto 0;
  max-width: 34ch;
  color: var(--ct-text, var(--on-dark, #F4EEE6));
  font-size: 1.05rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------- the way out */

/* Two of them, because a visitor who wants to keep reading and a visitor who
   wants their page back are after different things. */
.ct-cta { margin-top: 1.9rem; }
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .85em 1.6em;
  border: 0;
  border-radius: var(--ct-radius, 999px);
  background: var(--ct-btn-bg, var(--gold, #FFBC42));
  color: var(--ct-btn-fg, var(--ink, #14100F));
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ct-ease, var(--ease, cubic-bezier(.16,1,.3,1))), filter .25s;
}
.ct-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: var(--ct-btn-fg, var(--ink, #14100F)); }
.ct-btn:active { transform: translateY(0); }

.ct-x {
  position: absolute;
  top: clamp(.9rem, 2.5vw, 1.6rem);
  right: clamp(.9rem, 2.5vw, 1.6rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ct-line, rgba(244,238,230,.22));
  border-radius: 50%;
  background: transparent;
  color: var(--ct-text, var(--on-dark, #F4EEE6));
  cursor: pointer;
  opacity: .7;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.ct-x:hover { opacity: 1; border-color: var(--ct-accent, var(--gold, #FFBC42)); transform: rotate(90deg); }
.ct-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ct :focus-visible { outline: 2px solid var(--ct-accent, var(--gold, #FFBC42)); outline-offset: 3px; }

/* --------------------------------------------------------------- motion */

.ct-rise { opacity: 0; transform: translateY(16px); }
.ct.is-up .ct-rise { animation: ct-rise .8s var(--ct-ease, var(--ease, cubic-bezier(.16,1,.3,1))) .85s forwards; }
.ct.is-up .ct-rise-2 { animation-delay: 1.05s; }
.ct.is-up .ct-rise-3 { animation-delay: 1.25s; }
@keyframes ct-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ct, .ct::before { transition: none; }
  .ct-rope path { stroke-dashoffset: 0; }
  .ct.is-up .ct-rope path { animation: none; }
  .ct-rise { opacity: 1; transform: none; }
  .ct.is-up .ct-rise { animation: none; }
  .ct-x:hover { transform: none; }
}

@media (max-width: 620px) {
  .ct-btn { width: 100%; }
  .ct p { font-size: 1rem; }
}

/* ================================================================ variant: waves */

/* The light one, for jesstresidder.com. Her butter band with the gold and
   dashed-pink swirls running edge to edge, the mono label with its colour rule,
   and the drawn marker under the name. Same shell, same timings, same way out.

   Colours come from --ct-w-* here rather than the --ct-* block above, because
   this variant sits on a light ground and every value flips. */

.ct.is-waves {
  background: var(--ct-w-ground, #FFEFC2);
  color: var(--ct-w-text, #1A121C);
}
.ct.is-waves::before {
  /* No dark-field wash to lift on a light ground. A soft white bloom behind
     the type instead, so the middle of the screen is not flat butter. */
  background: radial-gradient(760px 420px at 50% 48%, rgba(255,255,255,.72), transparent 68%);
}
.ct.is-waves h2 { color: var(--ct-w-text, #1A121C); }
.ct.is-waves h2 em { color: var(--ct-w-accent, #E01B5D); }
.ct.is-waves p { color: var(--ct-w-text, #1A121C); }
.ct.is-waves p.ct-label { color: var(--ct-w-label, #A8114A); }

/* Her label: mono, sentence case, with a colour rule in front of it doing the
   work an all-caps eyebrow used to do. */
.ct-label {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ct-w-label, #A8114A);
}
.ct-label::before {
  content: '';
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

/* The drawn underline under the name, the same stroke the homepage headline
   uses under one word. */
.ct-mark { position: relative; display: inline-block; }
.ct-marker {
  position: absolute;
  left: -.03em;
  right: -.03em;
  bottom: -.02em;
  width: calc(100% + .06em);
  height: 12px;
  overflow: visible;
}
.ct-marker path {
  fill: none;
  stroke: var(--ct-w-marker, #E0A100);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ct.is-waves.is-up .ct-marker path { animation: ct-draw .85s var(--ct-ease, cubic-bezier(.16,1,.3,1)) 1.5s forwards; }

/* The two swirl bands. Revealed by a clip running left to right rather than by
   a dash offset, because the pink line is dashed already and a dash offset
   cannot draw a dashed line. */
.ct-swirl {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(80px, 12vw, 150px);
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.ct-swirl svg { width: 100%; height: 100%; display: block; }
.ct-swirl path {
  fill: none;
  stroke: var(--ct-w-swirl, #FFC233);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 1;
}
.ct-swirl .ct-sw2 {
  stroke: var(--ct-w-swirl-2, #E01B5D);
  stroke-width: 4;
  stroke-dasharray: 14 12;
  stroke-linecap: butt;
  opacity: .85;
}
.ct-swirl-top { top: clamp(1rem, 6vh, 4rem); }
/* Flipped, so the two bands curve away from the type rather than parallel to
   each other, and mirrored so the second one does not read as a copy. */
.ct-swirl-foot { bottom: clamp(1rem, 6vh, 4rem); transform: scaleY(-1) scaleX(-1); }

.ct.is-up .ct-swirl { animation: ct-sweep 1.5s cubic-bezier(.32,.24,.24,1) forwards; }
.ct.is-up .ct-swirl-foot { animation-delay: .18s; }
@keyframes ct-sweep { to { clip-path: inset(0 -2% 0 0); } }

/* The X and the focus ring both sit on a light ground here. */
.ct.is-waves .ct-x {
  border-color: var(--ct-w-line, rgba(26,18,28,.18));
  color: var(--ct-w-text, #1A121C);
}
.ct.is-waves .ct-x:hover { border-color: var(--ct-w-accent, #E01B5D); }
.ct.is-waves :focus-visible { outline-color: var(--ct-w-accent, #E01B5D); }

@media (prefers-reduced-motion: reduce) {
  .ct-swirl { clip-path: none; }
  .ct.is-up .ct-swirl { animation: none; }
  .ct-marker path { stroke-dashoffset: 0; }
  .ct.is-waves.is-up .ct-marker path { animation: none; }
}

@media (max-width: 620px) {
  .ct-swirl { height: clamp(60px, 16vw, 96px); }
}