/* ========================================
   SHARED UTILITIES — Studio Labs Templates
   Animations, reveals, and reusable classes
   ======================================== */

/* ── Custom Cursors ────────────────────────────────────────────────────────
   Default: ON (cursor shows on first paint — no flash).
   Users opt OUT via the cursor-toggle button, which sets html.cursor-off. */
body {
  cursor: url('../cursors/beaker.png') 12 12, default;
}
a,
button,
[role="button"],
label[for],
select,
input[type="submit"] {
  cursor: url('../cursors/beaker-pointer.png') 12 12, pointer;
}
html.cursor-off body { cursor: auto !important; }
html.cursor-off a,
html.cursor-off button,
html.cursor-off [role="button"],
html.cursor-off label[for],
html.cursor-off select,
html.cursor-off input[type="submit"] { cursor: pointer !important; }

/* ── Cursor Toggle Button (ecosystem-wide pattern) ─────────────────────── */
.cursor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: rgba(0,214,111,0.08);
  border: 1px solid rgba(0,214,111,0.35);
  color: var(--text, #e4e4e7);
  border-radius: 99px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  user-select: none;
  white-space: nowrap;
}
.cursor-toggle:hover { background: rgba(0,214,111,0.18); border-color: #00d66f; transform: translateY(-1px); }
.cursor-toggle:focus-visible { outline: 2px solid #00d66f; outline-offset: 2px; }
.cursor-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.cursor-toggle-state {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 0.62rem;
  font-weight: 800;
  transition: background 0.2s, color 0.2s;
}
/* State pill: green when cursor ON (default), muted when opted off. */
.cursor-toggle-state { background: #00d66f; color: #0a0a0a; }
html.cursor-off .cursor-toggle-state { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for children */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-reveal.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-reveal.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-reveal.visible > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.stagger-reveal.visible > *:nth-child(4) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-reveal.visible > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.stagger-reveal.visible > *:nth-child(6) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Utility: screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Utility: smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Utility: image cover */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}