/* ═══════════════════════════════════════════════════
   ANSIKA INTERIORS — HOME PAGE STYLES
   Homepage-only: carousel drag, hero tweaks
═══════════════════════════════════════════════════ */

/* ─── Keyframe animation for continuous infinite loop ─── */
@keyframes infiniteScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Carousel touch-drag hint ───────────────────── */
.carousel-track {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  animation: infiniteScroll 18s linear infinite;
  display: flex;
  will-change: transform;
}
.carousel-track:hover {
  animation-play-state: paused;
}
.carousel-track:active { cursor: grabbing; }
.proj-card { flex-shrink: 0; }

/* ─── Carousel scroll shadow fade ───────────────── */
.carousel { position: relative; }
.carousel::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1rem;
  width: 3rem;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
  pointer-events: none;
  z-index: 2;
}

/* ─── Hero section minimum height fix ───────────── */
@supports (min-height: 100dvh) {
  .hero { min-height: 100dvh; }
}

/* ─── Mobile: hero padding accounts for dynamic header ─ */
@media (max-width: 1023px) {
  .hero-content { padding-top: calc(62px + 2.5rem) !important; }
}

/* ─── Mobile: remove carousel fade on small screens ─ */
@media (max-width: 480px) {
  .carousel::after { width: 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   HERO ENTRANCE ANIMATIONS
   Word-by-word reveal + shimmer on "Dream Space"
   All elements staggered, page-load only
═══════════════════════════════════════════════════ */

/* ── 1. Word reveal — clip from bottom up ────────── */
@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(60px) skewY(4deg);
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
    filter: blur(0);
  }
}

/* ── 2. Fade + rise for desc / btn / cards ───────── */
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 3. Shimmer sweep across "Dream Space" ────────── */
@keyframes shimmerSweep {
  0%   { transform: translateX(-100%) skewX(-18deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}

/* ── 4. Subtle scale-pulse on "Dream Space" after entry */
@keyframes dreamPulse {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%       { text-shadow: 0 0 28px rgba(0,122,151, 0.55); }
}

/* ── Word spans ──────────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  animation: wordReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* stagger: 0.12s per word index */
  animation-delay: calc(0.1s + var(--hw, 0) * 0.14s);
}

.hero-word--blue {
  color: var(--blue);
}

/* ── "Dream Space" wrapper — relative for shimmer ── */
.hero-dream {
  position: relative;
  display: inline-block;
}

/* ── Shimmer layer ───────────────────────────────── */
.hero-shimmer {
  position: absolute;
  inset: -4px -8px;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 199, 230, 0.55) 50%,
    transparent 70%
  );
  border-radius: 4px;
  pointer-events: none;
  /* fires after both blue words finish revealing (~0.52s) then sweeps */
  animation: shimmerSweep 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.9s;
  opacity: 0;
}

/* ── "Dream Space" glow pulse — loops after intro ── */
.hero-dream .hero-word--blue {
  animation:
    wordReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    dreamPulse 3.5s ease-in-out 2s infinite;
}

/* ── Desc / btn / feat cards ─────────────────────── */
.hero-fade-up {
  opacity: 0;
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* --hd custom prop drives stagger; words end around 0.52s + a buffer */
  animation-delay: calc(0.55s + var(--hd, 0) * 0.13s);
}

/* ── Respect reduced-motion preference ───────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-word,
  .hero-fade-up,
  .hero-shimmer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}