/*
    global.css - Global Variables and Functions Across All biliscraft.co Pages
    Website iteration 1 : "¡Hola Mundo!" | v 0.1.4
	14.06.26 - logo animation fade in;sub-page heading roll-in animation;
    13.06.26 - logo animation - not used;
    31.05.26 - products animation
    22.05.26 - init;water hero
    -Wm
*/

/* WATER HERO IMAGES */
@keyframes water-hero-fade {
    from {
        opacity: 0.2;
        transform: scale(0.96) translateY(15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.scroll-animated-hero {
    animation: water-hero-fade linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 35%;
}

/* PRODUCT GRID */
/* absolute keyframe definitions for seamless rendering across screen widths */
@keyframes product-fly-up {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* UNIVERSAL FADE IN ANIMATION used with header h1 */
@keyframes FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* HEADER ANIMATION IN SUB PAGES: ROLL-IN MARQUEE */
.animation--marquee {
  display: inline-block;
  position: relative;
  overflow: hidden;
  --reveal-duration: 2s;
  --shine-duration: 1s;
  --bg: #fff;            /* match page background */
}

.animation--marquee h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
  position: relative;
  color: #111;
}

/* remove default mark styling */
.animation--marquee mark { background: transparent; padding: 0; }

/* solid mask that slides right to reveal text */
.animation--marquee::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: var(--bg);
  transform: translateX(0%);
  transform-origin: left center;
  z-index: 3;
  pointer-events: none;
  animation: marquee-reveal var(--reveal-duration) cubic-bezier(.22,.9,.25,1) forwards;
}

/* soft leading edge to simulate roll */
.animation--marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8%;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 80%);
  z-index: 4;
  pointer-events: none;
  animation: marquee-edge var(--reveal-duration) cubic-bezier(.22,.9,.25,1) forwards;
}

/* sheen element (add .shine inside .animation--marquee in HTML) */
.animation--marquee .shine {
  position: absolute;
  top: -10%;
  left: -30%;
  height: 120%;
  width: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  filter: blur(6px);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  animation: marquee-shine var(--shine-duration) ease-in-out calc(var(--reveal-duration) * 0.15) forwards;
}

/* small pop on the text after reveal completes */
.animation--marquee h1 {
  transform: translateY(0);
  animation: marquee-pop 300ms cubic-bezier(.2,.9,.2,1) calc(var(--reveal-duration) - 0.12s) both;
}

/* Keyframes */
@keyframes marquee-reveal {
  0%   { transform: translateX(0%); }
  99%  { transform: translateX(100%); }
  100% { transform: translateX(101%); } /* ensure full cleared */
}

@keyframes marquee-edge {
  0%   { transform: translateX(0%); opacity: 1; }
  90%  { transform: translateX(100%); opacity: 1; }
  100% { transform: translateX(102%); opacity: 0; }
}

@keyframes marquee-shine {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  30%  { opacity: 0.9; }
  100% { transform: translateX(140%) skewX(-20deg); opacity: 0; }
}

@keyframes marquee-pop {
  0%   { transform: translateY(6px); opacity: 0.0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}