/* Fixers Guide - custom styles.
   Tailwind utilities load from the Play CDN (configured inline in index.html);
   this file holds the gradient system, keyframes, scroll-reveal, and focus states. */

:root { --grad: linear-gradient(135deg, #6D5EF6 0%, #7C3AED 52%, #9333EA 100%); }
html, body { background: #FCFCFD; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.font-display { font-family: 'Fraunces', Georgia, Cambria, 'Times New Roman', serif; font-optical-sizing: auto; }
.font-grotesk { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }

/* Gradient text with graceful fallback */
.gradient-text {
  color: #7C3AED;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-surface { background: linear-gradient(135deg, #6D5EF6 0%, #7C3AED 55%, #8B5CF6 100%); }
/* Animated premium gradient for primary CTAs */
.grad-animated { background-image: linear-gradient(100deg, #6D5EF6, #A855F7, #7C3AED, #6D5EF6); background-size: 220% 220%; }

/* Shimmer sweep on the primary CTA (hover) */
.cta-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.cta-shimmer::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-18deg);
}
.cta-shimmer:hover::after { animation: shimmer 1.1s ease forwards; }
.cta-shimmer > * { position: relative; z-index: 2; }

/* Animated route path in hero */
.route-path { stroke-dasharray: 420; stroke-dashoffset: 420; }
.in-view .route-path { animation: dash 2.6s ease 0.35s forwards; }

/* Staggered pin pop-in on the generated route */
.pin { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; }
.in-view .pin { animation: pinPop .5s cubic-bezier(.2,1.3,.4,1) forwards; }

/* Scroll reveal — guarded under .js so non-JS/crawler visitors never see blank sections */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Card scene zoom */
.scene-art { transition: transform .6s cubic-bezier(.16,.84,.44,1); transform-origin: 50% 72%; }
.tour-card:hover .scene-art { transform: scale(1.08); }
.tour-card:hover .scene-glow { opacity: .9; }

/* Distinct, accessible error state for the waitlist status region */
.form-success.is-error { color: #E11D48 !important; }
.bg-ink .form-success.is-error { color: #FB7185 !important; }

/* Fancy focus-visible */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid #7C3AED; outline-offset: 3px; border-radius: 10px;
}

.grid-fade {
  background-image: linear-gradient(to right, rgba(15,18,34,0.045) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(15,18,34,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .route-path { stroke-dashoffset: 0 !important; }
  .pin { opacity: 1 !important; transform: none !important; }
  .cta-shimmer:hover::after { animation: none !important; }
}