/* ============================================================
   BÀNAY BAKERY + CAFE — Animations CSS
   Custom cursor, transitions, keyframes
   ============================================================ */

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terra);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  transition: 
    width var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  will-change: transform;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(181, 103, 58, 0.6);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: 
    width var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  will-change: transform;
}

/* Hover states */
.cursor-dot.cursor--hover {
  width: 16px;
  height: 16px;
  background: var(--terra);
}

.cursor-ring.cursor--hover {
  width: 50px;
  height: 50px;
  border-color: var(--terra);
}

/* Image hover */
.cursor-dot.cursor--image {
  mix-blend-mode: difference;
  background: var(--white);
}

.cursor-ring.cursor--image {
  mix-blend-mode: difference;
  background: rgba(255,255,255,0.15);
  border-color: transparent;
  width: 50px;
  height: 50px;
}

/* Click state */
.cursor-dot.cursor--click {
  transform: translate(-50%, -50%) scale(0.7);
}

.cursor-ring.cursor--click {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.6;
}

/* Cursor hide on touch */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ============================================================
   FALLBACK: ensure content is visible if GSAP doesn't load
   Uses noscript-compatible approach
   ============================================================ */
.no-js [data-gsap],
.no-js [data-split-text] .split-line-inner,
.no-js .hero__eyebrow,
.no-js .hero__body,
.no-js .hero__cta-group,
.no-js .hero__scroll,
.no-js #marqueeBand,
.no-js .nav-logo,
.no-js .nav-link,
.no-js .nav-cta {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   SCROLL-REVEAL STATES (initial hidden states for GSAP)
   ============================================================ */
[data-gsap="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
}

[data-gsap="fade-in"] {
  opacity: 0;
}

[data-gsap="scale-in"] {
  opacity: 0;
  transform: scale(0.96);
}

[data-gsap="slide-left"] {
  opacity: 0;
  transform: translateX(-30px);
}

[data-gsap="slide-right"] {
  opacity: 0;
  transform: translateX(30px);
}

/* ============================================================
   SPLIT TEXT REVEAL (heading chars)
   ============================================================ */
.split-line {
  overflow: hidden;
  display: block;
}

.split-line .char-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.split-line.in-view .char-inner {
  transform: translateY(0);
}

/* ============================================================
   HOVER TRANSITION UTILITIES
   ============================================================ */

/* Terra underline slide */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--terra);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.underline-hover:hover::after {
  transform: scaleX(1);
}

/* Gold underline */
.underline-hover--gold::after {
  background: var(--gold);
}

/* ============================================================
   IMAGE FADE-IN ON LOAD
   ============================================================ */
img.lazyload,
img.lazyloading {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.lazyloaded {
  opacity: 1;
}

/* ============================================================
   MICRO-INTERACTION: BUTTON SHIMMER
   ============================================================ */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.5s var(--ease-out);
  pointer-events: none;
}

.btn-shimmer:hover::after {
  left: 150%;
}

/* ============================================================
   STAGGER CHILDREN UTILITY
   ============================================================ */
.stagger-children > * {
  opacity: 0;
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--terra);
  pointer-events: none;
  transform-origin: bottom center;
  transform: scaleY(0);
}

/* ============================================================
   FLOATING ENTRANCE ANIMATION
   ============================================================ */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   PULSING DOT ANIMATION (for map pin, etc.)
   ============================================================ */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.15); }
}

/* ============================================================
   GRAIN / NOISE ANIMATION
   ============================================================ */
@keyframes grainMove {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 2%); }
  30%  { transform: translate(-1%, 4%); }
  40%  { transform: translate(2%, -2%); }
  50%  { transform: translate(-3%, 1%); }
  60%  { transform: translate(1%, -4%); }
  70%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(4%, 1%); }
  90%  { transform: translate(-1%, -2%); }
  100% { transform: translate(0, 0); }
}

.noise-overlay {
  animation: grainMove 8s steps(1) infinite;
}

/* ============================================================
   SMOOTH SCROLL OVERRIDE FOR ANCHORS
   ============================================================ */
html {
  scroll-padding-top: 80px; /* offset for fixed nav */
}