/* 1. Base Setup with CSS Variables */
.reveal-init {
  opacity: 0;
  will-change: opacity, transform, filter;
  perspective: 1000px;
  
  /* Use the inline variables provided by JS, or fallback to default speed if blank */
  transition-delay: var(--reveal-delay, 0ms);
  transition-duration: var(--reveal-duration, 600ms);
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Hidden States (Before reveal-active) */
.reveal-init[data-reveal="fade-up"]:not(.reveal-active)        { transform: translateY(50px); }
.reveal-init[data-reveal="fade-down"]:not(.reveal-active)      { transform: translateY(-50px); }
.reveal-init[data-reveal="fade-left"]:not(.reveal-active)      { transform: translateX(50px); }
.reveal-init[data-reveal="fade-right"]:not(.reveal-active)     { transform: translateX(-50px); }
.reveal-init[data-reveal="fade-up-large"]:not(.reveal-active)  { transform: translateY(120px); }
.reveal-init[data-reveal="zoom-in"]:not(.reveal-active)        { transform: scale(0.85); }
.reveal-init[data-reveal="blur-in"]:not(.reveal-active)        { filter: blur(15px); }
.reveal-init[data-reveal="flip-up"]:not(.reveal-active)        { transform: rotateX(-70deg); transform-origin: top; }

/* 3. Revealed State */
.reveal-init.reveal-active {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0);
  filter: blur(0px);
}

/* Container to keep words flowing inline naturally */
.word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
}

/* Base style for the split word element */
.word {
  display: inline-block;
}

/* Hidden State specifically for masking the text slip */
.word.reveal-init[data-reveal="fade-up"]:not(.reveal-active) {
  transform: translateY(110%); /* Pushes text fully outside its hidden mask box */
  opacity: 0;
}

/* Hero fade-left: establish hidden state before JS runs */
.pg-hro [data-reveal="fade-left"]:not(.reveal-active) {
    opacity: 0;
    transform: translateX(50px);
}

/* Prevent animation while establishing the initial state */
.reveal-init:not(.reveal-ready):not(.word) {
    transition: none !important;
}

/* Rocket starting position */
.reveal-init[data-reveal="rocket-launch"]:not(.reveal-active) {
    opacity: 0;
    transform: translateY(180px) scale(0.9);
}

/* Rocket animation */
.reveal-init[data-reveal="rocket-launch"] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
Example usage
<div class="row">
  <!-- First Card: Fades up instantly -->
  <div data-reveal="fade-up" data-reveal-delay="0" data-reveal-duration="600">Card 1</div>
  
  <!-- Second Card: Waits 200ms, takes 600ms to finish -->
  <div data-reveal="fade-up" data-reveal-delay="200" data-reveal-duration="600">Card 2</div>
  
  <!-- Third Card: Waits 400ms, takes 600ms to finish -->
  <div data-reveal="fade-up" data-reveal-delay="400" data-reveal-duration="600">Card 3</div>
</div>

<h1 data-reveal-text="fade-up">We bring clarity to <br/>how businesses <span class="txt-pc3">think!</span></h1>

*/