/* The conch, on the pages site.css draws: pricing and download.
   ---------------------------------------------------------------------------
   The landing page sounds the mark (landing.css, "the shell, sounded"); this
   is the same motion carried onto the light-or-dark pages, and nowhere else --
   it is linked from those two pages only, so the docs and the blog, which are
   read rather than looked at, stay still.

   Everything is in var(--accent) and var(--text), so the figure is right in
   either theme without a second copy. And the same promise as landing.css:
   nothing starts unfinished unless prefers-reduced-motion is no-preference, so
   a still reader, a printer and a browser without animations get the whole
   figure. */

/* --- the sigil: the whorl and the shell, beside the hero ------------------ */
.sigil {
  position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: max(var(--s5), calc((100vw - var(--wrap)) / 2 + var(--s5)));
  width: clamp(280px, calc(100vw - 1100px), 340px); aspect-ratio: 1; translate: 0 -50%;
  margin: 0; color: var(--accent);
}
.sigil svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sigil .ln, .sigil .ln-t { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .4; }
.sigil .ln-t { opacity: .55; }
.sigil .ln-s { fill: none; stroke: var(--text); stroke-width: .8; opacity: .12; stroke-dasharray: .004 .012; }
.sigil .ln-r { fill: none; stroke: var(--text); stroke-width: .8; opacity: .14; }
.sigil .ln-p { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; stroke-linecap: round; }
.sigil .whorl__wheel { transform-box: fill-box; transform-origin: center; }
.sigil .whorl__call circle { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; }
.sigil .conch path { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.sigil .conch .conch__glint { stroke: var(--bg); stroke-width: 16; stroke-dasharray: .03 .97; opacity: 0; }
.sigil .conch { transform-origin: 50% 50%; }
/* The hero's words keep the left: the lead runs to about 780px, so below
   this width the figure would sit under them. */
@media (max-width: 1180px) { .sigil { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .fine, .hero .pick { animation: c-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
  .hero .eyebrow { animation-delay: .05s; }
  .hero h1 { animation-delay: .14s; }
  .hero .lead { animation-delay: .28s; }
  .hero .fine, .hero .pick { animation-delay: .42s; }
  @keyframes c-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .sigil .ln-s { animation: c-fade .8s ease .2s both; }
  .sigil .ln-r { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c-line 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  .sigil .ln-r:nth-of-type(5) { animation-delay: .3s; }
  .sigil .ln-r:nth-of-type(4) { animation-delay: .42s; }
  .sigil .ln-r:nth-of-type(3) { animation-delay: .54s; }
  .sigil .ln-r:nth-of-type(2) { animation-delay: .66s; }
  .sigil .ln-r:nth-of-type(1) { animation-delay: .78s; }
  .sigil .ln-p { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c-line 3.2s cubic-bezier(.45, 0, .2, 1) .4s both; }
  .sigil .conch path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c-line 2.8s cubic-bezier(.16, 1, .3, 1) .15s both; }
  .sigil .conch { animation: c-spin 210s linear infinite; }
  .sigil .whorl__wheel { animation: c-fade 1.2s ease both, c-spin 160s linear infinite reverse; }
  .sigil .whorl__call circle { animation: c-call 7.2s cubic-bezier(.2, .6, .3, 1) infinite; }
  .sigil .whorl__call circle:nth-child(1) { animation-delay: 3.4s; }
  .sigil .whorl__call circle:nth-child(2) { animation-delay: 5.8s; }
  .sigil .whorl__call circle:nth-child(3) { animation-delay: 8.2s; }
  .sigil .conch .conch__glint { stroke-dasharray: .03 .97; animation: c-glint 11s linear 3.2s infinite; }

  @keyframes c-line { to { stroke-dashoffset: 0; } }
  @keyframes c-fade { from { opacity: 0; } }
  @keyframes c-spin { to { transform: rotate(360deg); } }
  @keyframes c-call {
    0% { opacity: 0; transform: scale(.14); }
    12% { opacity: .5; }
    100% { opacity: 0; transform: scale(1.18); }
  }
  @keyframes c-glint {
    0% { stroke-dashoffset: 1; opacity: 0; }
    6%, 70% { opacity: .9; }
    80%, 100% { stroke-dashoffset: -.2; opacity: 0; }
  }
}

/* --- the spiral as a seal ------------------------------------------------- */
/* Before every eyebrow, small and inline; above every section head, as its
   seal. Both turn into place as they arrive. */
.eyebrow::before, .sec-head::before {
  content: ""; background: var(--accent);
  -webkit-mask: url("/assets/spiral.svg") center / contain no-repeat;
  mask: url("/assets/spiral.svg") center / contain no-repeat;
}
.eyebrow::before { display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; }
.sec-head::before { display: block; width: 30px; height: 30px; margin-bottom: var(--s4); }
.sec-head.center::before { margin-inline: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .eyebrow::before, .sec-head::before {
      animation: c-seal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes c-seal {
      from { opacity: 0; transform: rotate(-240deg) scale(.3); }
      to { opacity: 1; transform: none; }
    }
    /* And the head itself rises in, as the landing page's do. */
    .sec-head, .split > div, .pgrid > *, .cards > * {
      animation: c-up linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
    @keyframes c-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* --- things that answer a hand --------------------------------------------- */
.brand img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.brand:hover img { transform: rotate(-28deg) scale(1.06); }

.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--text)), var(--accent));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::after { animation: c-read linear both; animation-timeline: scroll(root); }
    @keyframes c-read { to { transform: scaleX(1); } }
  }
}

/* Cards and plans lift, and an accent rule draws across their top edge. */
.card, .pcard { position: relative; transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .2s ease; }
.card { overflow: hidden; }
.card::before, .pcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pcard::before { left: var(--r-lg); right: var(--r-lg); top: -1px; }
.card:hover, .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover::before, .pcard:hover::before { transform: scaleX(1); }
.pcard__mark svg { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pcard:hover .pcard__mark svg { transform: rotate(-20deg); }

/* A file row: its name slides toward you and a rule draws under it. */
.file { position: relative; transition: background-color .2s ease; }
.file::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.file:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.file:hover::after { transform: scaleX(1); }
.file a { display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.file:hover a { transform: translateX(4px); }

/* The install command answers before it is pressed. */
.cmd { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; }
.cmd:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }

/* The primary button: a band of light crosses it once on hover. */
.btn--primary, .pick__btn { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn--primary:hover::after { transform: translateX(120%); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }

/* --- the closing band ------------------------------------------------------ */
.closing { position: relative; overflow: hidden; isolation: isolate; }
.closing::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(820px, 140vw); aspect-ratio: 1; translate: -50% -50%;
  background: var(--accent); opacity: .06;
  -webkit-mask: url("/assets/spiral.svg") center / contain no-repeat;
  mask: url("/assets/spiral.svg") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .closing::before { animation: c-spin 240s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .pcard, .file, .file a, .cmd, .brand img { transition: none; }
  .card:hover, .pcard:hover, .cmd:hover { transform: none; }
}