/* ============================================================
   MajsAI Studio — "Lab" homepage experiment
   Premium-but-unhinged animated landing. Isolated from style.css
   so the live homepage is never affected.
   ============================================================ */

html.lab, html.lab body { background: #060708; }

/* Hide the default ambient layers from style.css — the canvas replaces them */
html.lab body::before,
html.lab .hero__ambient { display: none; }

/* ---------------- Living background canvas ---------------- */
#lab-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Vignette + grain on top of the canvas, under the content */
.lab-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(6,7,8,0.85) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 0%, rgba(6,7,8,0.6) 0%, transparent 60%);
}
.lab-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.lab main.hero { position: relative; z-index: 3; isolation: auto; overflow: visible; }

/* ---------------- Entrance choreography ---------------- */
html.lab .hero__topbar,
html.lab .hero__legal { opacity: 0; animation: labFade 0.8s var(--ease) 1.5s forwards; }

html.lab .hero__logo {
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(46,196,198,0));
  transform: scale(0.8);
  animation: labLogoIn 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) 0.1s forwards;
}
@keyframes labLogoIn {
  0%   { opacity: 0; transform: scale(0.8); filter: drop-shadow(0 0 0 rgba(46,196,198,0)) blur(6px); }
  55%  { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 46px rgba(46,196,198,0.75)) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 18px rgba(46,196,198,0.35)) blur(0); }
}

html.lab .hero__claim .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  animation: labWordIn 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
@keyframes labWordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

html.lab .hero__sub {
  opacity: 0;
  transform: translateY(10px);
  animation: labFade 0.9s var(--ease) 0.75s forwards;
}
@keyframes labFade { to { opacity: 1; transform: none; } }

html.lab .tile {
  opacity: 0;
  transform: translateY(40px) rotateX(8deg) scale(0.96);
  animation: labTileIn 0.95s cubic-bezier(0.16,1,0.3,1) forwards;
}
html.lab .tile:nth-child(1) { animation-delay: 0.95s; }
html.lab .tile:nth-child(2) { animation-delay: 1.08s; }
html.lab .tile:nth-child(3) { animation-delay: 1.21s; }
@keyframes labTileIn {
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.lab .hero__topbar, html.lab .hero__legal,
  html.lab .hero__logo, html.lab .hero__claim .word,
  html.lab .hero__sub, html.lab .tile {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ---------------- Magnetic 3D tiles ---------------- */
html.lab .tiles { perspective: 1400px; }
html.lab .tile {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), scale 0.35s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
html.lab .tile:not(.lab-settled) { transition: scale 0.55s cubic-bezier(0.2, 1.4, 0.35, 1) 0.17s; }
html.lab .tile.is-tilting { scale: 1.07; }
html.lab .tile.is-tilting {
  transform: translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.025);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}
/* Energy surge: on pointer-enter the tile takes one jolt of light — the dark veil over
   the photo lifts and a turquoise bloom rises from the floor, then it settles. No lines drawn. */
html.lab .tile__surge {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(110, 255, 232, 0.55), rgba(46, 196, 198, 0.2) 45%, transparent 78%),
    linear-gradient(180deg, rgba(46, 196, 198, 0.12), transparent 60%);
}
html.lab .tile.is-tilting .tile__surge { animation: labSurge 1.5s ease-out 0.17s both; }
html.lab .tile.is-tilting::before { animation: labVeilLift 1.5s ease-out 0.17s both; }
@keyframes labSurge { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes labVeilLift { 0% { opacity: 1; } 22% { opacity: 0.05; } 100% { opacity: 0.75; } }

html.lab .tile__inner { position: relative; z-index: 2; }

html.lab .tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(46, 196, 198, 0.22), transparent 60%);
  mix-blend-mode: screen;
}
html.lab .tile:hover::after { opacity: 1; }

/* Shimmering title sheen */
html.lab .tile__title {
  background: linear-gradient(100deg, var(--fg) 40%, #bdfbfb 50%, var(--fg) 60%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.1s ease;
}
html.lab .tile:hover .tile__title { background-position: -20% 0; }

/* ---------------- Typographic accents (system fonts; self-host real ones before shipping) ---------------- */
html.lab {
  --lab-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --lab-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
html.lab .hero__claim .word--accent { color: var(--accent); }

/* Top strip */
html.lab .hero__topbar {
  left: clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(194, 242, 223, 0.1);
}
html.lab .lab-brandline {
  margin: 0;
  font: 500 10px var(--lab-mono);
  letter-spacing: 0.14em;
  color: rgba(238, 241, 242, 0.5);
}
html.lab .lab-brandline i { color: var(--accent); font-style: normal; margin: 0 6px; }
@media (max-width: 600px) { html.lab .lab-brandline { display: none; } }

/* Tile index label + status dot */
html.lab .tile__meta {
  position: absolute;
  top: 16px; left: 17px; right: 17px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 9px var(--lab-mono);
  letter-spacing: 0.13em;
  color: #b7d6c9;
  pointer-events: none;
}
html.lab .tile__meta b { color: var(--accent); font-size: 11px; transition: filter 0.3s; }
html.lab .tile:hover .tile__meta b { filter: drop-shadow(0 0 9px var(--accent)); }

/* Open arrow */
html.lab .tile__open {
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(86, 249, 217, 0.6);
  border-radius: 50%;
  color: var(--accent);
  font-size: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
html.lab .tile:hover .tile__open,
html.lab .tile:focus-visible .tile__open { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { html.lab .tile__open { opacity: 1; transform: none; } }

/* Formed shapes sit beneath the page content; energy bolts fly above it */
#lab-form {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
#lab-bolts {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html.lab .tile.is-tilting .tile__surge,
  html.lab .tile.is-tilting::before { animation-delay: 0s; }
}