/*
 * site.css — the few styles that aren't Tailwind utilities in app.css.
 * app.css is the compiled Tailwind build of the original site; it already
 * contains every class the templates use. Put new custom styles here.
 */

/* Toast messages (form errors). */
.site-toaster {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.site-toast {
  min-width: 260px;
  max-width: 356px;
  padding: 14px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  font-size: 13px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.site-toast.is-in {
  opacity: 1;
  transform: none;
}
.site-toast-error {
  border-color: hsl(0 70% 45% / 0.5);
}

/* display: contents wrapper (not in the compiled Tailwind build). */
.contents {
  display: contents;
}

/* Used by the "How I build" step titles (not in the compiled app.css). */
.pr-6 { padding-right: calc(var(--spacing) * 6); }

/* "How I build" on short phones (e.g. 360x640): tighten the six steps so the
   whole slide fits on one screen. */
@media (max-width: 639px) and (max-height: 760px) {
  #how-i-build ol > li { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  #how-i-build ol > li h3 { font-size: 1rem; }
  #how-i-build ol > li p { margin-top: 0.125rem; font-size: 11px; line-height: 1.45; }
}

/* Looping gold shine across a line of text (Roles: Product Builder note). */
.text-shine {
  background: linear-gradient(100deg, hsl(var(--primary) / 0.75) 0%, hsl(var(--primary) / 0.75) 40%, #fff8e1 50%, hsl(var(--primary) / 0.75) 60%, hsl(var(--primary) / 0.75) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3.5s linear infinite;
}
@keyframes text-shine {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .text-shine { animation: none; color: hsl(var(--primary)); background: none; }
}

/* Cards grow on hover so they're easier to read. Applies to every glass card
   (.glass-hover) plus the bordered cards marked .card-pop. Uses the separate
   `scale` property so it never fights the inline transforms motion.js sets.
   Mouse/trackpad only — touch devices keep the cards still. */
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
  .glass-hover,
  .card-pop {
    position: relative;
    transition-property: color, background-color, border-color, box-shadow, transform, scale;
    transition-duration: 0.5s;
    transition-timing-function: var(--ease-luxury);
  }
  .glass-hover:hover,
  .card-pop:hover {
    scale: 1.05;
    z-index: 20;
  }
  .card-pop:hover {
    border-color: hsl(var(--primary) / 0.45);
    box-shadow: var(--shadow-gold), var(--shadow-glass);
    background-color: hsl(var(--background));
  }
  /* Disabled screenshot buttons (image missing) stay still. */
  .glass-hover:disabled:hover { scale: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-hover:hover, .card-pop:hover { scale: none; }
}

/* Mobile polish for case study pages. */
.text-balance { text-wrap: balance; }
@media (max-width: 767px) {
  /* Small text links get a taller tap area without moving anything. */
  .tap-target { padding-block: 0.75rem; margin-block: -0.75rem; }
  /* "Runs locally · …" / "Private client project" pill: tighter letter
     spacing so it fits, and a softer radius if it still wraps. */
  .pill-label { letter-spacing: 0.15em; line-height: 1.5; border-radius: 1.25rem; }
}

/* Animated header logo (walk-in wordmark, 15s loop). The file is cream on
   black; `screen` blending drops the black so only the logo shows. */
.logo-anim-wrap { mix-blend-mode: screen; top: 8px; }
.logo-anim { height: 60px; width: auto; }
@media (min-width: 768px) { .logo-anim { height: 78px; } }