/* Luke Studio intro overlay: the homepage hero shown as exploded build layers
   (grid, wireframe, surfaces, type, interaction) that collapse into the finished hero,
   then fade to reveal the real page. Shown once per session; skipped for reduced motion
   and deep links. Everything is scoped to #li-intro and li- classes. */
html.li-lock, html.li-lock body { overflow: hidden; }
#li-intro {
  /* Intro palette, deliberately apart from the site's navy: plum night, coral, gold */
  --bg: #12091c;
  --bg-2: #1b0f2a;
  --surface: #231337;
  --control: #2d1a45;
  --line: #3a2352;
  --line-2: #5a3578;
  --text: #fff4ec;
  --text-2: #ead6dd;
  --muted: #b89cbc;
  --accent: #ff5e7e;
  --gold: #ffc65c;
  --accent-deep: #8a2be2;
  --accent-a: rgba(255, 94, 126, 0.6);
  --accent-b: rgba(255, 94, 126, 0.22);
  --accent-c: rgba(255, 94, 126, 0.07);
  --light: #ff5e7e;
  --on-light: #12091c;
  --shade: rgba(6, 1, 12, 0.9);
  color-scheme: dark;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
#li-intro { transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
#li-intro.li-leaving { opacity: 0; visibility: hidden; }
#li-intro *, #li-intro *::before, #li-intro *::after { box-sizing: border-box; }
#li-intro a { color: inherit; text-decoration: none; }
#li-intro button { font: inherit; color: inherit; cursor: pointer; }
#li-intro :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
#li-intro p, #li-intro h1, #li-intro dl, #li-intro dd { margin: 0; padding: 0; }
.li-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Frame ---------- */
.li-intro {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}
.li-atmos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.li-atmos::before {
  content: "";
  position: absolute;
  inset: -10% -10% 30% -10%;
  background: radial-gradient(45% 50% at 30% 65%, rgba(255, 94, 126, 0.22), transparent 70%),
    radial-gradient(40% 45% at 75% 35%, rgba(138, 43, 226, 0.28), transparent 70%),
    radial-gradient(30% 30% at 55% 55%, rgba(255, 198, 92, 0.12), transparent 70%);
}
.li-floor {
  position: absolute;
  left: -50%; right: -50%; bottom: -30%;
  height: 90%;
  background-image:
    linear-gradient(var(--accent-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-c) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(72deg);
  transform-origin: 50% 0;
  -webkit-mask-image: radial-gradient(50% 60% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(50% 60% at 50% 0%, #000 20%, transparent 75%);
}

.li-bar-top, .li-bar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  padding-block: 20px;
  position: relative;
  z-index: 5;
}
.li-mark { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.li-mark svg { width: 22px; height: 22px; }
.li-ghost-btn {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease);
}
.li-ghost-btn:hover { border-color: var(--accent); color: var(--text); }
.li-ghost-btn:active { transform: scale(0.96); }

.li-status { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.li-status b { color: var(--text); font-weight: 600; min-width: 7.5em; }
.li-track { width: 140px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.li-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); }
.li-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 3D stage ---------- */
.li-viewport { display: grid; place-items: center; min-height: 0; }
.li-stage {
  container-type: inline-size;
  width: min(1120px, 90vw, 128vh);
  aspect-ratio: 16 / 10;
  max-width: 100%;
  perspective: 2200px;
  perspective-origin: 50% 40%;
  position: relative;
}
.li-tilt, .li-stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.li-layer { position: absolute; inset: 0; border-radius: 1.2cqw; pointer-events: none; }
.li-shadow {
  position: absolute; inset: 4% 2%;
  border-radius: 3cqw;
  background: radial-gradient(closest-side, var(--shade), transparent);
  transform: translateZ(-160px);
}
.li-tag {
  color: var(--gold) !important;
  position: absolute;
  left: 0;
  top: calc(100% + 1.4cqw);
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  font-size: 1.5cqw;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.li-tag small { color: var(--muted); font-weight: 500; font-size: 1.1cqw; font-variant-numeric: tabular-nums; }
.li-tag::before { content: ""; width: 3cqw; height: 1px; background: var(--accent-a); align-self: center; }

/* Shared geometry: every layer draws the same boxes, so they line up when the stack collapses */
.li-b { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.li-b-nav    { --x: 4%;  --y: 3.5%; --w: 92%;  --h: 8%; }
.li-b-logo   { --x: 4%;  --y: 3.5%; --w: 20%;  --h: 8%; }
.li-b-links  { --x: 42%; --y: 3.5%; --w: 36%;  --h: 8%; }
.li-b-navcta { --x: 80.5%; --y: 5.2%; --w: 15.5%; --h: 4.6%; }
.li-b-h1     { --x: 4%;  --y: 19%;  --w: 49%;  --h: 31%; }
.li-b-sub    { --x: 4%;  --y: 51%;  --w: 41%;  --h: 11%; }
.li-b-btn1   { --x: 4%;  --y: 65%;  --w: 15.5%; --h: 7.4%; }
.li-b-btn2   { --x: 21%; --y: 65%;  --w: 14.5%; --h: 7.4%; }
.li-b-browser{ --x: 55%; --y: 18%;  --w: 41%;  --h: 48%; }
.li-b-phone  { --x: 85.5%; --y: 34%; --w: 11.5%; --h: 42%; }
.li-b-stats  { --x: 4%;  --y: 81%;  --w: 92%;  --h: 13%; }

/* Layer: grid */
.li-L-grid {
  background: var(--accent-c);
  border: 1px dashed var(--accent-b);
}
.li-cols { position: absolute; inset: 0 4%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.6%; }
.li-cols span { background: rgba(255, 94, 126, 0.07); border-inline: 1px solid rgba(255, 94, 126, 0.12); }
.li-rows {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 94, 126, 0.07) 0 1px, transparent 1px 2.5%);
}

/* Layer: wireframe */
.li-L-wire { border: 1px solid var(--accent-b); background: rgba(255, 94, 126, 0.025); }
.li-L-wire .li-b { border: 1px solid var(--accent-a); border-radius: 0.6cqw; }
.li-L-wire .li-x {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--accent-b) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--accent-b) 50%, transparent calc(50% + 0.5px));
}
.li-L-wire .li-b-phone { border-radius: 1.6cqw; }
.li-dim {
  position: absolute; top: -1.9cqw; left: 0;
  font-size: 0.95cqw; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Layer: surfaces */
.li-L-surf {
  background:
    radial-gradient(70% 90% at 80% 20%, rgba(255, 94, 126, 0.09), transparent 60%),
    var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 4cqw 8cqw -3cqw rgba(6, 1, 12, 0.8);
  overflow: hidden;
}
.li-L-surf .li-b-nav { border-bottom: 1px solid var(--line); }
.li-L-surf .li-b-navcta, .li-L-surf .li-b-btn1 { background: var(--light); border-radius: 0.55cqw; }
.li-L-surf .li-b-btn2 { border: 1px solid var(--line-2); border-radius: 0.55cqw; background: var(--control); }
.li-L-surf .li-b-stats { border-top: 1px solid var(--line); }
.li-mock {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 0.8cqw;
  overflow: hidden;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(6, 1, 12, 0.8);
  display: flex; flex-direction: column;
}
.li-mock-bar { height: 7%; min-height: 8px; display: flex; align-items: center; gap: 0.45cqw; padding-inline: 1.1cqw; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.li-mock-bar span { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: var(--line-2); }
.li-mock-bar em { margin-left: 1cqw; height: 40%; width: 38%; border-radius: 1cqw; background: var(--control); }
.li-mock-body { flex: 1; padding: 5% 6%; display: grid; grid-template-rows: auto 1fr auto; gap: 7%; }
.li-mini-nav { display: flex; justify-content: space-between; align-items: center; }
.li-mini-nav i { display: block; height: 0.55cqw; border-radius: 1cqw; background: var(--line-2); }
.li-mini-nav i:first-child { width: 18%; background: var(--text-2); }
.li-mini-nav i:last-child { width: 30%; }
.li-hero-art {
  border-radius: 0.6cqw;
  background:
    radial-gradient(60% 80% at 75% 30%, rgba(255, 198, 92, 0.6), transparent 60%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 55%, var(--control) 100%);
  position: relative;
}
.li-hero-art::after {
  content: ""; position: absolute; left: 8%; bottom: 14%; width: 46%; height: 9%;
  border-radius: 1cqw; background: rgba(18, 9, 28, 0.55);
  box-shadow: 0 -1.4cqw 0 rgba(18, 9, 28, 0.35);
}
.li-mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; height: 3.4cqw; }
.li-mini-cards i { border-radius: 0.4cqw; background: var(--control); border: 1px solid var(--line); }
.li-L-surf .li-b-phone { border-radius: 1.6cqw; padding: 0.55cqw; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 2.5cqw 4cqw -1cqw rgba(6, 1, 12, 0.9); }
.li-phone-screen { height: 100%; border-radius: 1.1cqw; overflow: hidden; background: var(--surface); display: grid; grid-template-rows: 9% 42% 1fr; gap: 5%; padding-bottom: 8%; }
.li-phone-screen .li-notch { justify-self: center; width: 34%; height: 50%; margin-top: 9%; border-radius: 1cqw; background: var(--bg); }
.li-phone-screen .li-hero-art { margin-inline: 8%; }
.li-phone-lines { padding-inline: 10%; display: grid; gap: 0.7cqw; align-content: start; }
.li-phone-lines i { display: block; height: 0.55cqw; border-radius: 1cqw; background: var(--line-2); }
.li-phone-lines i:nth-child(1) { width: 85%; background: var(--text-2); }
.li-phone-lines i:nth-child(2) { width: 60%; }
.li-phone-lines i:nth-child(3) { width: 70%; }

/* Layer: type */
.li-L-type .li-b { display: flex; align-items: center; }
.li-t-logo { font-weight: 700; font-size: 1.7cqw; letter-spacing: -0.01em; gap: 0.8cqw; }
.li-t-logo svg { width: 2cqw; height: 2cqw; }
.li-t-links { justify-content: flex-end; gap: 2.6cqw; font-size: 1.3cqw; color: var(--text-2); font-weight: 500; }
.li-t-navcta, .li-t-btn1 { justify-content: center; color: var(--on-light); font-weight: 600; font-size: 1.3cqw; }
.li-t-btn2 { justify-content: center; color: var(--text); font-weight: 600; font-size: 1.3cqw; }
.li-L-type .li-b-h1 { align-items: flex-start; }
.li-t-h1 {
  margin: 0;
  font-size: 6.3cqw;
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-wrap: balance;
}
.li-t-h1 .li-w { display: inline-block; }
.li-t-sub { margin: 0; font-size: 1.62cqw; line-height: 1.5; color: var(--text-2); text-wrap: pretty; align-self: flex-start; }
.li-t-stats { display: grid !important; grid-template-columns: repeat(4, 1fr); align-items: end !important; padding-bottom: 0.4cqw; margin: 0; }
.li-t-stats div { display: grid; gap: 0.3cqw; }
.li-t-stats dt { font-size: 1.1cqw; color: var(--muted); }
.li-t-stats dd { margin: 0; font-size: 2.5cqw; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Layer: interaction */
.li-L-int a.b { border-radius: 0.55cqw; pointer-events: none; }
.li-intro.done .li-L-int a.b { pointer-events: auto; }
.li-halo {
  border-radius: 0.9cqw;
  box-shadow: 0 0 0 0.35cqw rgba(255, 94, 126, 0.45), 0 0 3cqw 0.4cqw rgba(255, 94, 126, 0.35);
  --x: 3.6%; --y: 64.4%; --w: 16.3%; --h: 8.6%;
}
.li-cursor { position: absolute; left: 70%; top: 92%; width: 2.2cqw; height: auto; filter: drop-shadow(0 0.4cqw 0.6cqw rgba(6, 1, 12, 0.7)); }
.li-ripple {
  position: absolute; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw;
  border-radius: 50%; border: 2px solid var(--accent); opacity: 0;
  left: 11.5%; top: 68.7%;
}

.li-intro.static .li-tag, .li-intro.static .li-L-grid, .li-intro.static .li-L-wire, .li-intro.static .li-shadow, .li-intro.static .li-cursor { display: none; }
.li-replay { opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
.li-intro.done .li-replay { opacity: 1; pointer-events: auto; }
.li-intro.done #li-skip { opacity: 0; pointer-events: none; }
#li-skip { transition: opacity 300ms var(--ease); }

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .li-stage { aspect-ratio: 10 / 17; width: min(88vw, 46vh); }
  .li-b-nav    { --x: 6%;  --y: 2.5%; --w: 88%; --h: 6%; }
  .li-b-logo   { --x: 6%;  --y: 2.5%; --w: 50%; --h: 6%; }
  .li-layer .li-b-links { display: none; }
  .li-b-navcta { --x: 63%; --y: 3.4%; --w: 31%; --h: 4.2%; }
  .li-b-h1     { --x: 6%;  --y: 12%;  --w: 88%; --h: 22%; }
  .li-b-sub    { --x: 6%;  --y: 33%;  --w: 86%; --h: 10%; }
  .li-b-btn1   { --x: 6%;  --y: 44.5%; --w: 42%; --h: 5.4%; }
  .li-b-btn2   { --x: 51%; --y: 44.5%; --w: 40%; --h: 5.4%; }
  .li-b-browser{ --x: 6%;  --y: 55%;  --w: 70%; --h: 25%; }
  .li-b-phone  { --x: 68%; --y: 60%;  --w: 26%; --h: 26%; }
  .li-b-stats  { --x: 6%;  --y: 89%;  --w: 88%; --h: 8.5%; }
  .li-halo { --x: 5.3%; --y: 44.1%; --w: 43.4%; --h: 6.2%; }
  .li-ripple { left: 27%; top: 47.2%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; }
  .li-t-logo { font-size: 4.2cqw; gap: 2cqw; } .li-t-logo svg { width: 4.6cqw; height: 4.6cqw; }
  .li-t-navcta, .li-t-btn1, .li-t-btn2 { font-size: 3.4cqw; }
  .li-t-h1 { font-size: 11.6cqw; }
  .li-t-sub { font-size: 3.7cqw; }
  .li-t-stats { grid-template-columns: repeat(2, 1fr); }
  .li-t-stats div:nth-child(n+3) { display: none; }
  .li-t-stats dt { font-size: 2.8cqw; } .li-t-stats dd { font-size: 5.6cqw; }
  .li-tag { font-size: 3.6cqw; top: calc(100% + 2.4cqw); } .li-tag small { font-size: 2.8cqw; }
  .li-dim { display: none; }
  .li-cursor { width: 5cqw; }
  .li-mini-cards { height: 6cqw; }
  .li-track { width: 72px; }
  .li-bar-top, .li-bar-bottom { padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .li-ghost-btn, .li-replay, #li-skip { transition: none; }
}