/* ---------- Base & Variables ---------- */
:root {
  --overlay: rgba(10, 10, 12, 0.55);
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-stroke: rgba(255, 255, 255, 0.22);
  --text-primary: #ffffff;
  --text-secondary: #d4d4d8; /* zinc-300 */
  --accent: #7dd3fc; /* sky-300 */
  
  /* Iridescence mask variables */
  --mx: 50%; /* cursor X (percentage of viewport) */
  --my: 50%; /* cursor Y (percentage of viewport) */
  --r: clamp(450px, 22vmin, 700px); /* radius */
  --f: clamp(400px, 6vmin, 600px);  /* feather (soft edge) */
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text-primary);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Background: raw image without overlay */
  background: url('./labradorite1-gray.jpg') center / cover no-repeat fixed;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

/* ---------- Iridescence Overlay ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0; /* stays behind content */
  pointer-events: none;
  background: url('./labradorite1-colour.jpg') center / cover no-repeat fixed;
  
  /* Reveal color image only under the radial mask centered at --mx/--my */
  -webkit-mask-image: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 1) calc(var(--r) - var(--f)),
    rgba(0, 0, 0, 0) var(--r),
    rgba(0, 0, 0, 0) 120%
  );
  mask-image: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 1) calc(var(--r) - var(--f)),
    rgba(0, 0, 0, 0) var(--r),
    rgba(0, 0, 0, 0) 120%
  );
  
  /* Slight easing for nicer feel when pointer moves */
  transition: -webkit-mask-position .06s linear, mask-position .06s linear, -webkit-mask-image .06s linear, mask-image .06s linear;
}

/* Ensure content sits above the overlay */
main, .center, .card { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.center {
  width: 100%;
  padding: 24px;
}

.card {
  width: min(720px, 100%);
  margin-inline: auto;
  padding: 28px 28px 24px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* ---------- Typography ---------- */
.title {
  margin: 0 0 8px 0;
  /* font-size: clamp(28px, 5vw, 56px); */
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 61%, #768690 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* color: #ffffff00; */
  color: #ffffff;
  font-family: "Jura", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-transform: uppercase;
  word-wrap: break-word;
}

.subtitle {
  margin: 0 0 20px 0;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--text-secondary);
}

/* ---------- Actions / Buttons ---------- */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  --border: rgba(255, 255, 255, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn:active { transform: translateY(0); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn.primary {
  color: #0b1220;
  background: linear-gradient(340deg, rgb(236 255 198 / 85%), rgb(236 232 255 / 75%));
  border-color: rgb(255 255 255 / 85%);
  box-shadow: 0 8px 28px rgba(125, 211, 252, 0.35);
}

.btn.primary:hover {
  background: linear-gradient(340deg, rgb(236 255 198 / 85%), rgb(255 255 255));
  border-color: rgb(255 255 255 / 85%);
  box-shadow: 0 8px 28px rgba(125, 211, 252, 0.35);
}

/* ---------- Responsiveness & A11y ---------- */
@media (max-width: 420px) {
  .card { padding: 22px 18px; }
  .actions { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}