/**
 * ExpoXR Looping Words Selector Effect
 * Version: 1.0.0
 * Adapted from Osmo Design (https://osmo.supply/)
 * 
 * Usage:
 * Add class="looping-words" to container
 * Structure: .looping-words > .looping-words__containers > ul.looping-words__list > li > p
 * 
 * Features:
 * - Vertical looping word carousel with elastic animation
 * - Dynamic selector box that adjusts to word width
 * - Gradient fade effect at top/bottom
 * - GSAP-powered smooth animations
 * - Theme color integration
 */

.looping-words {
  height: 2.7em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  font-family: var(--e-global-typography-98aa623-font-family), Sans-serif;
  font-size: var(--e-global-typography-98aa623-font-size);
  font-weight: var(--e-global-typography-98aa623-font-weight);
  text-transform: var(--e-global-typography-98aa623-text-transform);
  line-height: var(--e-global-typography-98aa623-line-height);
  letter-spacing: var(--e-global-typography-98aa623-letter-spacing);
  word-spacing: var(--e-global-typography-98aa623-word-spacing);
  position: relative;
}

.looping-words__list {
  text-align: center;
  white-space: nowrap;
  flex-flow: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
}

/* Individual list items with theme colors */
.looping-words__list li {
  transition: color 0.5s ease;
}

/* Color cycle through theme colors */
.looping-words__list li:nth-child(6n+1) {
  color: rgb(42, 172, 226); /* Primary Blue */
}

.looping-words__list li:nth-child(6n+2) {
  color: rgb(128, 98, 170); /* Secondary Purple */
}

.looping-words__list li:nth-child(6n+3) {
  color: rgb(69, 85, 165); /* Accent Dark Blue */
}

.looping-words__list li:nth-child(6n+4) {
  color: rgb(26, 140, 184); /* Primary variant */
}

.looping-words__list li:nth-child(6n+5) {
  color: rgb(90, 66, 128); /* Secondary variant */
}

.looping-words__list li:nth-child(6n) {
  color: rgb(45, 57, 117); /* Accent variant */
}

/* Center word (active/selected) is white */
.looping-words__list li.is--center {
  color: #ffffff !important;
}

/* Fade removed per user request */

/* Selector box that highlights current word */
.looping-words__selector {
  pointer-events: none;
  width: 100%;
  height: 0.9em;
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: width 0.5s ease;
}

/* Corner decorations using theme colors */
.looping-words__edge {
  border-top: 0.035em solid rgb(42, 172, 226); /* Primary Blue */
  border-left: 0.035em solid rgb(42, 172, 226);
  width: 0.125em;
  height: 0.125em;
  position: absolute;
  top: 0;
  left: 0;
}

.looping-words__edge.is--2 {
  left: auto;
  right: 0;
  transform: rotate(90deg);
}

.looping-words__edge.is--3 {
  inset: auto 0 0 auto;
  transform: rotate(180deg);
}

.looping-words__edge.is--4 {
  top: auto;
  bottom: 0;
  transform: rotate(270deg);
}

/* Secondary color variant for edges */
.looping-words__selector.is--secondary .looping-words__edge {
  border-top-color: rgb(128, 98, 170); /* Secondary Purple */
  border-left-color: rgb(128, 98, 170);
}

/* Accent color variant for edges */
.looping-words__selector.is--accent .looping-words__edge {
  border-top-color: rgb(69, 85, 165); /* Accent Dark Blue */
  border-left-color: rgb(69, 85, 165);
}

/* Container with overflow hidden */
.looping-words__containers {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Text paragraph styling */
.looping-words__p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Font sizing handled by Elementor global typography */

/* Smooth text rendering */
.looping-words,
.looping-words__p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Loading state */
.looping-words:not(.initialized) {
  opacity: 0;
}

.looping-words.initialized {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Optional: Center container in viewport */
.looping-words-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  width: 100%;
}