/* Hyrax Studio site kit: motion and surfaces shared by every page.
   Values follow motion-primitives (text effect, in view, border trail, text shimmer,
   spotlight) and cult-ui (neumorph eyebrow, texture card, minimal card, gradient
   heading). Pages set the colours through the --kit-* variables. Without JavaScript
   everything shows in its final state; prefers-reduced-motion turns motion off. */
:root {
  --kit-ink: #36322f;
  --kit-ink-soft: #6b625c;
  --kit-accent: #cf3d61;
  --kit-accent-soft: #e06f8b;
  --kit-trail: #ffffff;
  --kit-spot: rgba(255, 255, 255, 0.10);
  --kit-shimmer-base: currentColor;
  --kit-shimmer-hi: #ffffff;
  --kit-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* Text effect, "fade-in-blur" per word: motion.js wraps the words of [data-kit-words]. */
.kit-w { display: inline-block; white-space: pre; }
.kit-js .kit-w {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(12px);
  animation: kit-fade-in-blur 0.7s var(--kit-ease) forwards;
  animation-delay: calc(var(--kit-i, 0) * 0.05s + var(--kit-delay, 0s));
}
@keyframes kit-fade-in-blur { to { opacity: 1; transform: none; filter: blur(0); } }

/* In view: a block fades up once it enters the viewport. */
.kit-js [data-kit-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--kit-ease), transform 0.7s var(--kit-ease);
  transition-delay: var(--kit-delay, 0s);
}
.kit-js [data-kit-reveal].kit-in { opacity: 1; transform: none; }

/* Border trail: a short light runs round the edge (60px-ish, 5 s, linear). */
@property --kit-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.kit-trail { position: relative; isolation: isolate; }
.kit-trail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--kit-angle), transparent 0deg 318deg, var(--kit-trail) 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: kit-spin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes kit-spin { to { --kit-angle: 360deg; } }

/* Text shimmer: a highlight sweeps across the letters every 2 s. */
.kit-shimmer {
  background-image: linear-gradient(90deg, var(--kit-shimmer-base) 0 38%, var(--kit-shimmer-hi) 50%, var(--kit-shimmer-base) 62% 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kit-shimmer 2s linear infinite;
}
@keyframes kit-shimmer { to { background-position: -160% 0; } }

/* Spotlight: a 200px glow follows the pointer inside the card (motion.js sets --kit-x/y). */
.kit-spot { position: relative; overflow: hidden; }
.kit-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--kit-x, 50%) var(--kit-y, 50%), var(--kit-spot), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .kit-spot:hover::after { opacity: 1; } }

/* Eyebrow pill (cult-ui neumorph eyebrow). */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 6px;
  border: 0.75px solid #e9e3dd;
  background: #fbfaf9;
  color: var(--kit-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 -2.1px 0 0 #f4f1ee, 0 1.2px 6.3px 0 #f4f1ee;
  text-decoration: none;
}
a.kit-eyebrow:hover { border-color: #d8cec5; }
.kit-dark .kit-eyebrow {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e9e9ee;
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.04);
}
.kit-dark a.kit-eyebrow:hover { border-color: rgba(255, 255, 255, 0.24); }

/* Texture card (cult-ui): nested hairlines give a pressed, tactile edge. */
.kit-texture {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #ffffff, #fbf7f4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 0 2px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(40, 20, 10, 0.05), 0 8px 24px -12px rgba(120, 60, 40, 0.18);
}
.kit-dark .kit-texture {
  border-color: rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, #1d1d22, #17171b);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}

/* Minimal card shadow stack (cult-ui). */
.kit-minimal {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 1px 0 rgba(255, 252, 240, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px 0 rgba(28, 27, 26, 0.5);
}

/* Gradient heading: ink fading slightly toward the baseline; .kit-accent words keep the accent. */
.kit-grad, .kit-grad .kit-w, .kit-grad .kit-accent {
  background-image: linear-gradient(180deg, var(--kit-ink) 35%, var(--kit-ink-soft) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kit-grad .kit-accent, .kit-grad .kit-accent .kit-w {
  background-image: linear-gradient(180deg, var(--kit-accent) 30%, var(--kit-accent-soft) 120%);
}

/* iPhone frame for real screenshots. */
.kit-phone {
  position: relative;
  border-radius: 44px;
  padding: 9px;
  background: linear-gradient(145deg, #2b2826, #141211);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 30px 60px -20px rgba(70, 30, 30, 0.45);
}
.kit-phone img { display: block; width: 100%; height: auto; border-radius: 35px; }
.kit-phone::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 30%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0a0a;
}

@media (prefers-reduced-motion: reduce) {
  .kit-js .kit-w { opacity: 1; transform: none; filter: none; animation: none; }
  .kit-js [data-kit-reveal] { opacity: 1; transform: none; transition: none; }
  .kit-trail::before { animation: none; }
  .kit-shimmer { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}