/* =========================================================
   NURA — animations.css
   Hero effects, scroll animations, micro-interactions
   ========================================================= */

/* ===== HERO GRAIN TEXTURE ===== */
.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ===== BLOB / MORPHING SHAPES ===== */
.blob {
  position: absolute;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  animation: morph 10s ease-in-out infinite;
  filter: blur(1px);
}
.blob-1 {
  background: radial-gradient(circle, var(--pistacho) 0%, transparent 70%);
  animation-duration: 12s;
}
.blob-2 {
  background: radial-gradient(circle, var(--orchid) 0%, transparent 70%);
  animation-duration: 15s;
  animation-delay: -4s;
}
.blob-3 {
  background: radial-gradient(circle, var(--azure) 0%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -8s;
}
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  25%       { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
  50%       { border-radius: 50% 50% 60% 40% / 40% 70% 30% 60%; }
  75%       { border-radius: 70% 30% 50% 50% / 30% 50% 60% 40%; }
}

/* ===== FLOATING / LEVITATE ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-16px) rotate(1deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-24px); }
}
.float       { animation: float      6s ease-in-out infinite; }
.float-slow  { animation: float-slow 9s ease-in-out infinite; }
.float-delay { animation-delay: -3s; }

/* ===== HERO TEXT REVEAL ===== */
.hero-reveal {
  overflow: hidden;
}
.hero-reveal-inner {
  transform: translateY(100%);
  opacity: 0;
  animation: heroReveal 1s var(--ease-out) forwards;
}
@keyframes heroReveal {
  to { transform: translateY(0); opacity: 1; }
}
.hero-reveal:nth-child(1) .hero-reveal-inner { animation-delay: 0.1s; }
.hero-reveal:nth-child(2) .hero-reveal-inner { animation-delay: 0.25s; }
.hero-reveal:nth-child(3) .hero-reveal-inner { animation-delay: 0.4s; }
.hero-reveal:nth-child(4) .hero-reveal-inner { animation-delay: 0.55s; }

/* ===== MARQUEE / TICKER ===== */
.marquee-wrap { overflow: hidden; position: relative; }
.marquee-inner {
  display: flex;
  gap: var(--space-8);
  animation: marquee 25s linear infinite;
  width: max-content;
}
.marquee-inner.reverse { animation-direction: reverse; animation-duration: 30s; }
.marquee-wrap:hover .marquee-inner { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== COUNTER ANIMATION ===== */
.counter-num { transition: all 0.5s var(--ease-out); }

/* ===== PARALLAX HINT ===== */
.parallax-el {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== IMAGE REVEAL ===== */
.img-reveal {
  overflow: hidden;
  position: relative;
}
.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
.img-reveal.revealed::after { transform: scaleX(0); transform-origin: right; }

/* ===== STAGGER CHILDREN ===== */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 0.10s; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 0.20s; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 0.30s; }
.stagger-children.revealed > * { opacity: 1; transform: translateY(0); }

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--matcha), var(--orchid), var(--indigo));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ===== CURSOR ===== */
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--indigo);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.05s, opacity 0.3s;
}
.cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1.5px solid var(--indigo);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              border-color 0.3s, opacity 0.3s, background 0.3s;
  opacity: 0.5;
}
.cursor-ring.hovered {
  width: 52px; height: 52px;
  opacity: 0.2;
  background: var(--matcha);
  border-color: var(--matcha);
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ===== PAGE TRANSITION ===== */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--indigo);
  z-index: 9997;
  transform: scaleY(0);
  transform-origin: bottom;
}
.page-transition.enter {
  animation: pageIn 0.4s var(--ease-out) forwards;
}
.page-transition.exit {
  animation: pageOut 0.4s var(--ease-out) forwards;
  transform-origin: top;
}
@keyframes pageIn {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes pageOut {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ===== SKELETON LOADER ===== */
.skeleton {
  background: linear-gradient(90deg, var(--azure-lt) 25%, var(--azure) 50%, var(--azure-lt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ===== PILL HOVER ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  cursor: default;
}
.pill-azure    { background: var(--azure-lt);  color: var(--indigo);    border-color: var(--azure); }
.pill-pistacho { background: #e6f4e3;          color: var(--matcha-dk); border-color: var(--pistacho); }
.pill-orchid   { background: #fde8ef;          color: #8b2a4a;          border-color: var(--orchid); }
.pill-peach    { background: #fef3ea;          color: #7a4010;          border-color: var(--peach); }

/* ===== RATING STARS ===== */
.stars {
  display: inline-flex;
  gap: 2px;
  color: #f4c542;
  font-size: 0.9rem;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rating-count { font-size: var(--text-xs); color: var(--ink-muted); }

/* ===== ACCORDION ===== */
.accordion-item {
  border-bottom: 1px solid var(--azure-lt);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast);
}
.accordion-trigger:hover { color: var(--matcha-dk); }
.accordion-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
}
.accordion-content-inner {
  padding-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.7;
}
.accordion-item.open .accordion-content { max-height: 600px; }

/* ===== TABS ===== */
.tabs-nav {
  display: flex;
  gap: var(--space-1);
  background: var(--azure-lt);
  padding: 4px;
  border-radius: var(--r-full);
  width: fit-content;
}
.tab-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  color: var(--ink-muted);
}
.tab-btn.active {
  background: var(--white);
  color: var(--indigo);
  box-shadow: var(--shadow-sm);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== TOOLTIP ===== */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--white);
  font-size: var(--text-xs);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 50;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== FOCUS VISIBLE ===== */
:focus-visible {
  outline: 2px solid var(--matcha);
  outline-offset: 3px;
  border-radius: 4px;
}