:root {
  --jis-cyan: #00f1ee;
  --jis-ink: #001416;
  --jis-intro-duration: 3.4s;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: #001012;
  color: #f5ffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jis-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(0, 221, 218, .10), transparent 36%),
    linear-gradient(145deg, #001619 0%, #00090a 56%, #001416 100%);
  animation: jis-exit .65s cubic-bezier(.4, 0, .2, 1) calc(var(--jis-intro-duration) - .65s) both;
}

.jis-intro::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: .24;
  background-image:
    linear-gradient(rgba(0, 241, 238, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 241, 238, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, #000 0 28%, transparent 68%);
  animation: jis-grid 3s ease-out both;
}

.jis-intro__ambient {
  position: absolute;
  width: min(74vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 241, 238, .12);
  box-shadow: 0 0 100px rgba(0, 241, 238, .07), inset 0 0 80px rgba(0, 241, 238, .04);
  animation: jis-ambient 2.7s ease-out both;
}

.jis-intro__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(86vw, 720px);
  aspect-ratio: 1;
}

.jis-intro__loader {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(116px, 15vw, 168px);
  aspect-ratio: 1;
  animation: jis-loader-out .55s cubic-bezier(.65, 0, .35, 1) 1.5s both;
}

.jis-intro__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 0 40%, var(--jis-cyan) 57%, transparent 70% 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  filter: drop-shadow(0 0 8px rgba(0, 241, 238, .7));
  animation: jis-spin 1s linear infinite, jis-ring-in .55s ease-out both;
}

.jis-intro__mark {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 11px rgba(0, 241, 238, .24));
  animation: jis-mark-in .75s cubic-bezier(.16, 1, .3, 1) .12s both;
}

.jis-intro__scan {
  position: absolute;
  inset: 10%;
  overflow: hidden;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.jis-intro__scan::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 20%;
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  filter: blur(4px);
  animation: jis-scan .7s ease-in-out .75s both;
}

.jis-intro__reveal {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(18px, 3vw, 34px);
  background: #001113;
  box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 55px rgba(0,241,238,.10);
  opacity: 0;
  transform: scale(.12) rotate(-3deg);
  clip-path: circle(11% at 50% 50%);
  animation: jis-reveal 1.25s cubic-bezier(.16, 1, .3, 1) 1.42s both;
}

.jis-intro__visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  animation: jis-visual 1.25s cubic-bezier(.16, 1, .3, 1) 1.42s both;
}

.jis-intro__label {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(80px, 11vw, 118px));
  transform: translateX(-50%);
  color: rgba(218,255,254,.72);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .34em;
  text-transform: uppercase;
  animation: jis-label 1.9s ease both;
}

.jis-intro.is-complete { display: none; }

.demo-home {
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 8vw;
  background: radial-gradient(circle at 72% 30%, #034146, transparent 36%), #001012;
}

.demo-home__eyebrow { color: var(--jis-cyan); font-size: 12px; letter-spacing: .32em; }
.demo-home h1 { margin: .25em 0; font-size: clamp(42px, 7vw, 100px); line-height: .95; letter-spacing: -.055em; }
.demo-home p { color: #9ab8b8; }
.demo-home button { width: fit-content; margin-top: 22px; padding: 12px 18px; border: 1px solid #168a8c; border-radius: 999px; color: #eaffff; background: #06292c; cursor: pointer; }

@keyframes jis-spin { to { transform: rotate(1turn); } }
@keyframes jis-ring-in { from { opacity: 0; transform: rotate(-90deg) scale(.75); } }
@keyframes jis-mark-in { from { opacity: 0; transform: scale(.55) rotate(-7deg); filter: blur(7px); } to { opacity: 1; transform: none; } }
@keyframes jis-scan { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(720%) skewX(-16deg); } }
@keyframes jis-loader-out { to { opacity: 0; transform: scale(2.2); filter: blur(8px); } }
@keyframes jis-reveal { 0% { opacity: 0; transform: scale(.12) rotate(-3deg); clip-path: circle(11% at 50% 50%); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); clip-path: circle(75% at 50% 50%); } }
@keyframes jis-visual { to { transform: scale(1); } }
@keyframes jis-label { 0%, 15% { opacity: 0; transform: translate(-50%, 5px); } 35%, 65% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes jis-grid { from { transform: scale(1.15) rotate(3deg); opacity: 0; } to { transform: none; opacity: .24; } }
@keyframes jis-ambient { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes jis-exit { 0% { opacity: 1; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

@media (max-width: 640px) {
  .jis-intro__stage { width: 91vw; }
  .jis-intro__reveal { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .jis-intro { display: none; }
}