/* Opening splash: the dome mark draws itself, a scan line sweeps it, the check lands, then the
   splash opens in a circle onto the app. Pure CSS/SVG; no network, no inline styles (CSP). */
@property --sp-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

#splash {
  /* Always dark, whatever the phone's theme: the mark and the green check read best on it. */
  --sp-bg: radial-gradient(circle at 50% 42%, #18201c 0%, #0b0f0d 62%); --sp-ink: #f2f4f1; --sp-muted: #8e9a92; --sp-go: #4cc47e;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: #0b0f0d; background: var(--sp-bg); color: var(--sp-ink); color-scheme: dark;
  font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-mask: radial-gradient(circle at 50% 45%, transparent var(--sp-r), #000 calc(var(--sp-r) + 1px));
  mask: radial-gradient(circle at 50% 45%, transparent var(--sp-r), #000 calc(var(--sp-r) + 1px));
}
#splash.skip { display: none; }

.sp-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.sp-mark svg { width: 100%; height: 100%; overflow: visible; }
.sp-ping { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--sp-go); opacity: 0; }
.sp-fill { fill: currentColor; opacity: 0; }
.sp-line, .sp-check { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-line { stroke: currentColor; stroke-width: 2.2; }
.sp-check { stroke: var(--sp-go); stroke-width: 2.6; }
.sp-scan { position: absolute; left: -10%; right: -10%; top: 18%; height: 2px; border-radius: 2px; background: var(--sp-go); opacity: 0;
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--sp-go) 55%, transparent); }
.sp-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; opacity: 0; }
.sp-sub { margin-top: -12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); opacity: 0; }
.sp-wait { min-height: 18px; font-size: 13px; font-weight: 500; color: var(--sp-muted); opacity: 0; transition: opacity .3s ease; }
#splash.waiting .sp-wait { opacity: 1; }
.sp-wait::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: sp-dots 1.2s steps(4) infinite; }

#splash.run .sp-ping { animation: sp-ping 1.6s cubic-bezier(.2,.7,.3,1) .05s 2; }
#splash.run .sp-line { animation: sp-draw .85s cubic-bezier(.65,0,.35,1) .1s forwards; }
#splash.run .sp-fill { animation: sp-in .5s ease .7s forwards; }
#splash.run .sp-scan { animation: sp-scan .7s cubic-bezier(.45,0,.55,1) .85s forwards; }
#splash.run .sp-check { animation: sp-draw .42s cubic-bezier(.3,.7,.3,1) 1.4s forwards; }
#splash.run .sp-name { animation: sp-up .5s cubic-bezier(.2,.8,.2,1) 1.55s forwards; }
#splash.run .sp-sub { animation: sp-up .5s cubic-bezier(.2,.8,.2,1) 1.7s forwards; }

/* The reveal: a circle opens from the mark onto the app (opacity is the fallback where
   @property can't animate the mask). */
#splash.open { --sp-r: 150vmax; opacity: 0; pointer-events: none;
  transition: --sp-r .8s cubic-bezier(.7,0,.2,1), opacity .35s ease .5s; }
#splash.open .sp-mark { transform: scale(1.18); transition: transform .8s cubic-bezier(.7,0,.2,1); }

@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-in { to { opacity: .16; } }
@keyframes sp-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-ping { 0% { opacity: .55; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sp-scan { 0% { opacity: 0; top: 18%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 82%; } }
@keyframes sp-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (prefers-reduced-motion: reduce) {
  #splash.run .sp-ping, #splash.run .sp-scan { animation: none; }
  #splash.run .sp-line, #splash.run .sp-check { animation: none; stroke-dashoffset: 0; }
  #splash.run .sp-fill { animation: none; opacity: .2; }
  #splash.run .sp-name, #splash.run .sp-sub { animation: none; opacity: 1; }
  #splash.open { transition: opacity .3s ease; }
  #splash.open .sp-mark { transform: none; }
}

/* A business's own logo in place of the dome mark (e.g. a shield logo). The outline is
   reversed to white for the dark splash; the orange fills from the bottom like a pint being poured. */
.sp-has-logo { width: 104px; height: 124px; }
.sp-has-logo .sp-ping { inset: -6px -16px; }
.lg-fill { fill: #f4762d; clip-path: inset(100% 0 0 0); }
.lg-glassfill { fill: #ffffff; opacity: 0; }
.lg-glass, .lg-foam, .lg-outline { fill: none; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lg-glass { stroke: #151515; stroke-width: 9; }
.lg-foam { stroke: #151515; stroke-width: 8; }
.lg-outline { stroke: var(--sp-ink); stroke-width: 12; }
#splash.run .lg-outline { animation: sp-draw .8s cubic-bezier(.65,0,.35,1) .1s forwards; }
#splash.run .lg-fill { animation: lg-pour .75s cubic-bezier(.45,0,.2,1) .6s forwards; }
#splash.run .lg-glassfill { animation: sp-up-op .3s ease 1.05s forwards; }
#splash.run .lg-glass { animation: sp-draw .5s cubic-bezier(.65,0,.35,1) 1.05s forwards; }
#splash.run .lg-foam { animation: sp-draw .25s ease-out 1.5s forwards; }
#splash.run .sp-has-logo ~ .sp-name { animation-delay: 1.65s; }
#splash.run .sp-has-logo ~ .sp-sub { animation-delay: 1.8s; }
.sp-by { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--sp-muted); opacity: 0; }
.sp-by svg { width: 15px; height: 15px; }
#splash.run .sp-by { animation: sp-up .5s cubic-bezier(.2,.8,.2,1) 1.95s forwards; }
@keyframes lg-pour { to { clip-path: inset(0 0 0 0); } }
@keyframes sp-up-op { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #splash.run .lg-outline, #splash.run .lg-glass, #splash.run .lg-foam { animation: none; stroke-dashoffset: 0; }
  #splash.run .lg-fill { animation: none; clip-path: none; }
  #splash.run .lg-glassfill, #splash.run .sp-by { animation: none; opacity: 1; }
}

/* A wordmark in place of a logo (home app: "the-JTE / the JASPER TAN experience"), set in Times. A green scan bar
   reads the first line left to right and each letter lands as it passes. */
.sp-word { position: relative; display: grid; justify-items: center; gap: 12px; padding: 6px 4px; font-family: "Times New Roman", Times, "Liberation Serif", serif; }
.jte-1 { position: relative; display: flex; align-items: baseline; font-size: clamp(50px, 15vw, 70px); line-height: 1; letter-spacing: -0.01em; }
.jte-1 span { font-weight: 400; color: var(--sp-muted); }
.jte-1 .jte-dash { margin: 0 .04em; }
.jte-1 b { font-weight: 700; color: var(--sp-ink); }
.jte-1 span, .jte-1 b { opacity: 0; transform: translateY(12px); filter: blur(6px); }
.jte-line { position: absolute; right: 0; bottom: -6px; height: 3px; width: 47%; border-radius: 2px; background: var(--sp-go); transform: scaleX(0); transform-origin: left; }
.jte-2 { font-size: clamp(12px, 3.7vw, 15px); font-weight: 400; font-style: normal; letter-spacing: .22em; max-width: calc(100vw - 32px); text-transform: none; color: var(--sp-muted); opacity: 0; white-space: nowrap; }
.jte-scan { position: absolute; top: -8px; bottom: -4px; left: 0; width: 2px; border-radius: 2px; background: var(--sp-go); opacity: 0;
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--sp-go) 55%, transparent); }
#splash.run .jte-scan { animation: jte-scan .95s cubic-bezier(.45,0,.55,1) .2s forwards; }
#splash.run .jte-1 > :nth-child(1) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .3s forwards; }
#splash.run .jte-1 > :nth-child(2) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .4s forwards; }
#splash.run .jte-1 > :nth-child(3) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .5s forwards; }
#splash.run .jte-1 > :nth-child(4) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .58s forwards; }
#splash.run .jte-1 > :nth-child(5) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .7s forwards; }
#splash.run .jte-1 > :nth-child(6) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .84s forwards; }
#splash.run .jte-1 > :nth-child(7) { animation: jte-in .5s cubic-bezier(.2,.8,.2,1) .98s forwards; }
#splash.run .jte-line { animation: jte-line .45s cubic-bezier(.3,.7,.3,1) 1.25s forwards; }
#splash.run .jte-2 { animation: jte-track .9s cubic-bezier(.2,.8,.2,1) 1.35s forwards; }
@keyframes jte-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes jte-line { to { transform: scaleX(1); } }
@keyframes jte-track { from { opacity: 0; letter-spacing: .22em; } to { opacity: 1; letter-spacing: .04em; } }
@keyframes jte-scan { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  #splash.run .jte-scan { animation: none; }
  #splash.run .jte-1 > *, #splash.run .jte-2, #splash.run .jte-line { animation: none; opacity: 1; transform: none; filter: none; letter-spacing: .04em; }
  #splash.run .jte-1 > * { letter-spacing: -0.01em; }
}