/* Goal Mark Projects — small custom styles that complement Tailwind.
   Kept minimal on purpose; Tailwind utilities do most of the work. */

/* Scroll-reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
[data-reveal].reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children when a container carries multiple delays */
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* Accordion panel animates its max-height (set via JS) */
[data-accordion-panel] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* ============================================================
   Decorative animated hero / page-title bands
   ============================================================ */

/* Light/dark aware title band (inner pages) */
.gm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 50% -8rem, rgba(6, 182, 212, 0.12), transparent 70%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
html.dark .gm-hero {
  background:
    radial-gradient(60rem 30rem at 50% -8rem, rgba(59, 130, 246, 0.20), transparent 70%),
    linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

/* Animated grid overlay */
.gm-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 25%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 25%, #000 35%, transparent 78%);
  animation: gm-grid-pan 22s linear infinite;
}
html.dark .gm-hero-grid,
.gm-hero-dark .gm-hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
@keyframes gm-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 44px 44px; }
}

/* Floating aurora glows */
.gm-hero-blob {
  position: absolute;
  z-index: 0;
  width: 38rem;
  height: 38rem;
  border-radius: 9999px;
  filter: blur(72px);
  opacity: 0.55;
  pointer-events: none;
}
.gm-hero-blob--a {
  top: -16rem;
  left: -8rem;
  background: radial-gradient(circle at center, rgba(29, 78, 216, 0.42), transparent 68%);
  animation: gm-float-a 15s ease-in-out infinite;
}
.gm-hero-blob--b {
  bottom: -18rem;
  right: -10rem;
  background: radial-gradient(circle at center, rgba(6, 182, 212, 0.38), transparent 68%);
  animation: gm-float-b 19s ease-in-out infinite;
}
@keyframes gm-float-a {
  50% { transform: translate(4rem, 3rem) scale(1.15); }
}
@keyframes gm-float-b {
  50% { transform: translate(-4rem, -2rem) scale(1.12); }
}

/* Always-dark product banner */
.gm-hero-dark {
  position: relative;
  isolation: isolate;
}

/* Hero text entrance animations.
   Progressive enhancement: the text is visible by default (critical for the
   H1 / LCP and for robustness if animations don't run), and only starts
   hidden + animates in when the visitor has motion enabled. */
.gm-word { display: inline-block; }

@keyframes gm-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gm-word-in {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .gm-fade {
    opacity: 0;
    animation: gm-fade-in 0.5s ease forwards;
    animation-delay: var(--d, 0s);
  }
  .gm-word {
    opacity: 0;
    animation: gm-word-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
  }
}

/* Animated gradient text (shimmer) */
.text-shimmer {
  background-image: linear-gradient(100deg, #1d4ed8, #06b6d4, #1d4ed8);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gm-shimmer 6s linear infinite;
}
html.dark .text-shimmer {
  background-image: linear-gradient(100deg, #3b82f6, #22d3ee, #3b82f6);
}
@keyframes gm-shimmer {
  to { background-position: 200% 0; }
}

/* Extra scroll-reveal directions (opt-in via data-reveal="left|right|zoom") */
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="left"].reveal-in,
[data-reveal="right"].reveal-in,
[data-reveal="zoom"].reveal-in { transform: none; }

/* ============================================================
   Branded loader — favicon spinning inside a gradient ring.
   Used on initial page load and while forms submit.
   ============================================================ */
#gm-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(28rem 28rem at 50% 45%, rgba(6, 182, 212, 0.10), transparent 70%),
    #ffffff;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
html.dark #gm-loader {
  background:
    radial-gradient(28rem 28rem at 50% 45%, rgba(59, 130, 246, 0.16), transparent 70%),
    #020617;
}
#gm-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gm-loader-ring {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
/* Spinning gradient ring (a masked conic gradient = a hollow ring). */
.gm-loader-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0 15%, #06b6d4 45%, #1d4ed8 80%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 0 calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent 0 calc(100% - 4px), #000 calc(100% - 4px));
  animation: gm-spin 0.9s linear infinite;
}
html.dark .gm-loader-ring::before {
  background: conic-gradient(from 90deg, transparent 0 15%, #22d3ee 45%, #3b82f6 80%, transparent 100%);
}
/* Soft pulsing halo behind the favicon. */
.gm-loader-ring::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 78, 216, 0.18), transparent 70%);
  animation: gm-loader-halo 1.6s ease-in-out infinite;
}
.gm-loader-logo {
  position: relative;
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: gm-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }
@keyframes gm-loader-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.88); }
}
@keyframes gm-loader-halo {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 0.9; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .gm-hero-grid, .gm-hero-blob { animation: none; }
  .gm-fade, .gm-word { animation: none; opacity: 1; transform: none; }
  .text-shimmer { animation: none; }
  .gm-loader-ring::before,
  .gm-loader-ring::after,
  .gm-loader-logo { animation-duration: 1.4s; }
  .gm-loader-ring::before { animation-name: gm-spin; } /* keep a gentle spin so it still reads as "loading" */
}