/* IESYS Labs cinematic boot intro r0.2 — static source, GSAP choreography. */
html.iesys-intro-lock,
html.iesys-intro-lock body { overflow: hidden !important; }

.iesys-intro {
  --image-position-x: 50%;
  --eye-x: 67.2vw;
  --eye-y: 23.6vh;
  --eye-clip-w: clamp(64px, 4.8vw, 94px);
  --eye-clip-h: clamp(25px, 1.95vw, 40px);
  --eye-mask-scale: 0;
  --iris-x: 67.2vw;
  --iris-y: 23.6vh;
  --iris-w: 42px;
  --iris-h: 24px;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: #f5f5f2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.iesys-intro[hidden] { display: none !important; }

.iesys-intro__visual,
.iesys-intro__shade,
.iesys-intro__energy,
.iesys-intro__grain,
.iesys-intro__scanlines,
.iesys-intro__flash,
.iesys-intro__crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.iesys-intro__visual {
  opacity: 0;
  background-color: #000;
  background-image: url('/assets/cinematic/intro/iesys-blue-eye.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--image-position-x) center;
  clip-path: ellipse(
    calc(var(--eye-clip-w) * var(--eye-mask-scale))
    calc(var(--eye-clip-h) * var(--eye-mask-scale))
    at var(--eye-x) var(--eye-y)
  );
  will-change: opacity, clip-path, filter;
}

.iesys-intro__shade {
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .985) 0%, rgba(0, 0, 0, .89) 46%, rgba(0, 0, 0, .42) 70%, rgba(0, 0, 0, .13) 100%);
  will-change: opacity;
}

/* This mask never extends beyond the source iris. It is a restrained white catchlight only. */
.iesys-intro__iris-light {
  position: absolute;
  z-index: 4;
  left: var(--iris-x);
  top: var(--iris-y);
  width: var(--iris-w);
  height: var(--iris-h);
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 38%, rgba(255, 255, 255, .32) 0 7%, rgba(255, 255, 255, .10) 18%, rgba(255, 255, 255, 0) 55%);
  filter: blur(.25px);
  pointer-events: none;
  will-change: opacity, transform;
}

.iesys-intro__energy {
  z-index: 3;
  opacity: 0;
  will-change: opacity;
}

.iesys-intro__energy svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.iesys-intro__energy .crack-live,
.iesys-intro__energy .crack-residue {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.iesys-intro__energy .crack-live {
  stroke-width: 1.15px;
  filter: drop-shadow(0 0 .8px rgba(255, 255, 255, .45));
}

.iesys-intro__energy .crack-live--wide { stroke-width: 1.45px; }
.iesys-intro__energy .crack-live--fine { stroke-width: .62px; }

.iesys-intro__energy .crack-residue {
  stroke-width: .55px;
  opacity: 0;
  filter: drop-shadow(0 0 .45px rgba(255, 255, 255, .16));
}

.iesys-intro__copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 8vw;
  text-align: center;
  pointer-events: none;
}

.iesys-intro__line {
  position: absolute;
  margin: 0;
  color: #f5f5f2;
  font-size: clamp(1.3rem, 3vw, 3.8rem);
  font-weight: 500;
  letter-spacing: .02em;
  text-wrap: balance;
  text-shadow: 0 0 22px rgba(255, 255, 255, .10);
  will-change: opacity, transform;
}

.iesys-intro__line.brand {
  font-size: clamp(2.5rem, 6.4vw, 7.3rem);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.iesys-intro__line.brand::after {
  display: inline-block;
  width: .065em;
  height: .88em;
  margin-left: .08em;
  content: '';
  transform: translateY(.08em);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(255, 255, 255, .34);
}

.iesys-intro__skip {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 22px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 9px 14px;
  color: rgba(255, 255, 255, .80);
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(8px);
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  will-change: opacity;
}

.iesys-intro__skip:hover,
.iesys-intro__skip:focus-visible {
  border-color: rgba(255, 255, 255, .84);
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.iesys-intro__grain {
  z-index: 6;
  opacity: .075;
  background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .4) 0 1px, transparent 1px 3px);
  background-size: 8px 8px;
  mix-blend-mode: soft-light;
  animation: iesys-intro-grain .18s steps(2) infinite;
}

.iesys-intro__scanlines {
  z-index: 7;
  opacity: .065;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, .12) 1px, transparent 1px, transparent 4px);
}

.iesys-intro__flash { z-index: 8; background: #fff; opacity: 0; }

.iesys-intro__crt {
  z-index: 9;
  opacity: 0;
  background: #fff;
  will-change: opacity, transform;
}

@keyframes iesys-intro-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(.5%, 1%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 760px) {
  .iesys-intro {
    --eye-clip-w: clamp(29px, 8.4vw, 42px);
    --eye-clip-h: clamp(13px, 3.3vw, 21px);
  }

  .iesys-intro__line { font-size: clamp(1.2rem, 7vw, 2.4rem); }
  .iesys-intro__line.brand { font-size: clamp(2rem, 12vw, 4.5rem); letter-spacing: .06em; }
  .iesys-intro__skip { top: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .iesys-intro__grain { animation: none !important; }
  .iesys-intro__crt { display: none; }
}