/*
Theme Name:   Twenty Twenty Child
Description:  Custom Child Theme with for Animations and custom functionality.
Author:       Saif Khawaja
Template:     twentytwenty
Version:      1.0.0
*/


.text-sp{
    color:#FFFFFF80;
}

/* =========================================
   TEXT STYLING & DICE ROTATING ANIMATION
   ========================================= */

.massive-text {
  font-family: 'Matter', Helvetica, sans-serif;
  font-weight: 600;
  text-align: left;
  font-size: 85px;
  line-height: 0.85; 
  text-transform: uppercase;
  color: #ffffff;
  margin-top: -5px; 
}

.highlight-orange { color: #d93d1a; }

/* Main Roller Container */
.text-roller {
  display: inline-block;
  height: 0.9em; 
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  perspective: 1000px; 
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* =========================================
   3D DRUM ROLL TEXT ANIMATION (Genuine Roll)
   ========================================= */

.text-roller {
  display: inline-flex;
  height: 0.9em; 
  overflow: hidden;
  vertical-align: bottom;
}

.roller-wrapper {
  display: flex;
  flex-direction: column;
  /* Custom Bezier jo ek mechanical wheel jaisi friction create karta hai */
  animation: strictSnapRoll 6s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

.roll-word {
  height: 0.9em; 
  line-height: 0.9;
  display: block;
  /* Text ko bilkul solid rakhne ke liye */
  backface-visibility: hidden; 
  -webkit-font-smoothing: antialiased;
}

/* Timing Fix: 
  Text ek jagah proper ruka rahega (e.g. 0% se 20% tak), 
  aur phir bohot tezi se (20% se 25% ke darmiyan) roll ho kar snap karega.
*/
@keyframes strictSnapRoll {
  0%, 20%   { transform: translateY(0); }
  25%, 53%  { transform: translateY(-0.9em); }
  58%, 86%  { transform: translateY(-1.8em); }
  91%, 100% { transform: translateY(-2.7em); }
}