/* ============================================================
   SharkOps Animation Layer
   Conventions:
   - Add `data-anim` to elements to opt-in to scroll reveals.
     Values: "fade", "fade-up", "fade-down", "fade-left", "fade-right",
             "zoom", "blur", "slide-up", "stagger" (children fade-up).
   - Add `data-anim-delay="0.15"` (seconds) for per-element delay.
   - Add `data-anim-once="false"` to re-trigger on every entry.
   - Add `data-count` on a number element to count up when visible.
   - Add `data-tilt` to any card to enable 3D tilt on hover.
   - Add `data-text-reveal` to a heading to reveal letters with stagger.
   - Add `data-marquee` to a wrapper for infinite horizontal marquee
     (children duplicate themselves automatically).
   ============================================================ */

/* Base hidden state — JS removes once reveal fires */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition: none;
}

[data-anim="fade"]       { /* opacity only */ }
[data-anim="fade-up"]    { transform: translate3d(0, 36px, 0); }
[data-anim="fade-down"]  { transform: translate3d(0, -28px, 0); }
[data-anim="fade-left"]  { transform: translate3d(40px, 0, 0); }
[data-anim="fade-right"] { transform: translate3d(-40px, 0, 0); }
[data-anim="zoom"]       { transform: scale(0.88); }
[data-anim="blur"]       { filter: blur(14px); }
[data-anim="slide-up"]   { transform: translate3d(0, 60px, 0); }

/* Stagger container — JS finds its children */
[data-anim="stagger"] { opacity: 1; }
[data-anim="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
}

/* Reveal target — JS resets transform/filter via gsap */
[data-anim].is-revealed { opacity: 1; transform: none; filter: none; }
[data-anim="stagger"].is-revealed > * { opacity: 1; transform: none; }

/* Text reveal — letters/words wrapped by JS */
.sk-word, .sk-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.6em, 0) rotate(2deg);
  will-change: opacity, transform;
}

/* Tilt cards */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
  will-change: transform;
}

[data-tilt] .tilt-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.10) 0%,
    transparent 35%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
[data-tilt]:hover .tilt-shine { opacity: 1; }

/* Counter — initial render is the target value; JS resets it to 0 then animates */
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Marquee track */
.sk-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.sk-marquee__track {
  display: flex;
  gap: 48px;
  animation: sk-marquee 32s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.sk-marquee:hover .sk-marquee__track { animation-play-state: paused; }
@keyframes sk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Gradient text shimmer */
.sk-shimmer {
  background: linear-gradient(
    90deg,
    #ffe100 0%,
    #ffe100 50%,
    #01ff78 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sk-shimmer 4.5s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Floating animation */
.sk-float { animation: sk-float 6s ease-in-out infinite; }
@keyframes sk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Pulse glow */
.sk-pulse-glow {
  position: relative;
}
.sk-pulse-glow::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(215, 192, 27, 0.55);
  animation: sk-pulse-glow 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes sk-pulse-glow {
  0%   { box-shadow: 0 0 0 0  rgba(215, 192, 27, 0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(215, 192, 27, 0); }
  100% { box-shadow: 0 0 0 0  rgba(215, 192, 27, 0); }
}

/* Magnetic button base */
.sk-magnetic {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Section divider */
.sk-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(215, 192, 27, 0.4),
    transparent
  );
  margin: 0 auto;
}

/* ---------- Pencil-stroke underlines ----------------------- */

/* Used on hero titles — JS injects an SVG path and GSAP draws it
   in on scroll-into-view. Old ::after gradient bar is suppressed. */
.accent-underline {
  position: relative;
  display: inline-block;
}
.accent-underline::after { display: none !important; }

/* On-hover pencil draw: invisible by default, GSAP draws on hover */
.sk-pencil-hover {
  position: relative;
  display: inline-block;
}

/* Pencil-stroke underline element — a gradient bar that GSAP draws
   left-to-right via scaleX. Simple, performant, renders cleanly. */
.sk-pencil-uline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d7c01b 0%, #2aa5df 100%);
  box-shadow: 0 2px 10px rgba(215, 192, 27, 0.25);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Bigger heading -> thicker stroke + a little more breathing room */
h1 .sk-pencil-uline,
.text-4xl .sk-pencil-uline, .text-5xl .sk-pencil-uline,
.text-6xl .sk-pencil-uline, .text-7xl .sk-pencil-uline {
  bottom: -10px;
  height: 4px;
}

/* Reduced motion: render the line in its drawn state */
@media (prefers-reduced-motion: reduce) {
  .sk-pencil-uline { transform: scaleX(1) !important; }
}

/* Glassmorphism utility */
.sk-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sk-glass-dark {
  background: rgba(15, 27, 45, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim="stagger"] > *,
  .sk-word, .sk-char { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sk-marquee__track { animation: none; }
  .sk-shimmer { animation: none; }
  .sk-float { animation: none; }
  .sk-pulse-glow::after { animation: none; }
}