/* assets/css/text-effects.css */

/* === Base === */
.scrollina-text { will-change: transform, opacity; }

/* === Split containers (letters/words/lines) === */
.scrollina-char, .scrollina-word, .scrollina-line {
  display:inline-block;
  will-change: transform, opacity;
}
.scrollina-space { white-space: pre; }

/* === Typewriter cursor === */
.scrollina-type-cursor {
  display:inline-block;
  width: var(--cursor-width-em, 0.08em);
  height: 1em;
  background: var(--cursor-color, #111827);
  margin-left: 2px;
  transform: translateY(0.15em);
  animation: scrollina-cursor-blink 1s steps(1) infinite;
}
@keyframes scrollina-cursor-blink {
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

/* === Mask Reveal === */
.scrollina-text.mask-reveal {
  display:inline-block;
  overflow:hidden;
  transform: translateZ(0);
}
.scrollina-text.mask-reveal.scrollina-run {
  animation: scrollina-mask-reveal var(--scrollina-duration,.6s)
    var(--scrollina-ease,cubic-bezier(0,0,0.2,1))
    var(--scrollina-delay,0s) both;
}
@keyframes scrollina-mask-reveal {
  0% {
    opacity:.01;
    clip-path: var(--scrollina-mask-from, inset(0 100% 0 0));
  }
  100%{
    opacity:1;
    clip-path: inset(0 0 0 0);
  }
}
.scrollina-text.mask-reveal[style*="--mask-direction:left"]  { --scrollina-mask-from: inset(0 100% 0 0); }
.scrollina-text.mask-reveal[style*="--mask-direction:right"] { --scrollina-mask-from: inset(0 0 0 100%); }
.scrollina-text.mask-reveal[style*="--mask-direction:top"]   { --scrollina-mask-from: inset(100% 0 0 0); }
.scrollina-text.mask-reveal[style*="--mask-direction:bottom"]{ --scrollina-mask-from: inset(0 0 100% 0); }
.scrollina-text.mask-reveal[style*="--mask-direction:radial"]{
  --scrollina-mask-from: circle(0% at 50% 50%);
  animation-name: scrollina-mask-reveal-radial;
}
@keyframes scrollina-mask-reveal-radial {
  0% { opacity:.01; clip-path: circle(0% at 50% 50%); }
  100%{ opacity:1;  clip-path: circle(150% at 50% 50%); }
}
.scrollina-text.mask-reveal[style*="--mask-fill-type:gradient"]{
  background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,0));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* === Gradient Flow === */
.scrollina-text.gradient-flow {
  display:inline-block;
  --gf-speed: 6s;
  background: linear-gradient(90deg, #6ee7f9, #3b82f6, #a855f7, #f472b6, #f59e0b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: scrollina-gradient-move var(--gf-speed) linear infinite;
}
.scrollina-text.gradient-flow[style*="--gf-dir:left"]  {
  background-image: linear-gradient(270deg, #6ee7f9, #3b82f6, #a855f7, #f472b6, #f59e0b);
}
.scrollina-text.gradient-flow[style*="--gf-dir:top"]   {
  background-image: linear-gradient(0deg, #6ee7f9, #3b82f6, #a855f7, #f472b6, #f59e0b);
  background-size: 100% 300%;
}
.scrollina-text.gradient-flow[style*="--gf-dir:bottom"]{
  background-image: linear-gradient(180deg, #6ee7f9, #3b82f6, #a855f7, #f472b6, #f59e0b);
  background-size: 100% 300%;
}
@keyframes scrollina-gradient-move {
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.scrollina-text.gradient-flow[style*="--gf-type:radial"]{
  background: radial-gradient(circle at 30% 50%, #6ee7f9, #a855f7, #f59e0b);
  background-size: 200% 200%;
  animation-name: scrollina-gradient-move-radial;
}
@keyframes scrollina-gradient-move-radial {
  0%{background-position:50% 50%}
  100%{background-position:150% 150%}
}

/* === Color Morph === */
.scrollina-text.color-morph {
  color: var(--cm-from, #111827);
  transition: color var(--cm-speed,2s)
    var(--cm-ease, cubic-bezier(0,0,0.2,1));
}
.scrollina-text.color-morph.scrollina-loop {
  animation: scrollina-color-morph var(--cm-speed,2s)
    var(--cm-ease,cubic-bezier(0,0,0.2,1))
    0s infinite alternate;
}
@keyframes scrollina-color-morph {
  from { color: var(--cm-from,#111827); }
  to   { color: var(--cm-to,#e11d48); }
}

/* === Marquee === */
.scrollina-marquee-wrap { overflow:hidden; white-space:nowrap; }
.scrollina-marquee-track {
  display:inline-flex;
  gap:2rem;
  animation-name: scrollina-marquee;
  animation-duration: var(--scrollina-marquee-duration, 10s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var(--scrollina-marquee-direction, normal);
  will-change: transform;
}
@keyframes scrollina-marquee {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.scrollina-marquee-item { display:inline-block; }

/* === Letter Stretch (px, supports negatives) === */
.scrollina-text.letter-stretch {
  display:inline-block;
  will-change: letter-spacing, opacity;
}
.scrollina-text.letter-stretch.scrollina-ls-once {
  animation: scrollina-letter-stretch var(--ls-speed,.8s)
    var(--scrollina-ease,cubic-bezier(0,0,0.2,1))
    var(--scrollina-delay,0s) both;
}
.scrollina-text.letter-stretch.scrollina-ls-loop {
  animation: scrollina-letter-stretch var(--ls-speed,1.2s)
    var(--scrollina-ease,cubic-bezier(0,0,0.2,1))
    0s infinite alternate both;
}
@keyframes scrollina-letter-stretch {
  from { letter-spacing: var(--ls-from,-2px); opacity:.01; }
  to   { letter-spacing: var(--ls-to,2px); opacity:1; }
}

/* === 3D Tilt === */
.scrollina-text.tilt-3d {
  display:inline-block;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
}

/* === Noise Flicker (Glitch) === */
.scrollina-text.noise-flicker {
  position:relative;
  display:inline-block;
  animation: scrollina-flicker var(--glitch-speed,1.2s) steps(2,end) infinite;
}
@keyframes scrollina-flicker {
  0% { opacity:1; text-shadow: none; transform: translate(0,0); }
  20%{ opacity:.9; text-shadow: 1px 0 rgba(255,0,0,.6), -1px 0 rgba(0,255,255,.6); transform: translate(-0.5px,0.5px); }
  40%{ opacity:1; text-shadow: -1px 0 rgba(255,0,255,.5), 1px 0 rgba(0,255,0,.5); transform: translate(0.6px,-0.4px); }
  60%{ opacity:.85; text-shadow: 2px 0 rgba(0,0,255,.4), -2px 0 rgba(255,255,0,.4); transform: translate(-1px,1px); }
  80%,100%{ opacity:1; text-shadow: none; transform: translate(0,0); }
}
.scrollina-text.noise-flicker.nf-multi::before,
.scrollina-text.noise-flicker.nf-multi::after {
  content: attr(data-original);
  position:absolute;
  inset:0;
  pointer-events:none;
}
.scrollina-text.noise-flicker.nf-multi::before {
  color: rgba(255,0,0,.6);
  mix-blend-mode: screen;
  animation: scrollina-glitch-shift var(--glitch-speed,1.2s)
    steps(var(--glitch-level,5), end) infinite;
}
.scrollina-text.noise-flicker.nf-multi::after {
  color: rgba(0,255,255,.6);
  mix-blend-mode: screen;
  animation: scrollina-glitch-shift var(--glitch-speed,1.2s)
    steps(calc(var(--glitch-level,5) + 1), end) infinite reverse;
}
@keyframes scrollina-glitch-shift {
  0% { transform: translate(0,0); clip-path: inset(0 0 10% 0); }
  25%{ transform: translate(1px,-1px); clip-path: inset(20% 0 0 0); }
  50%{ transform: translate(-1px,1px); clip-path: inset(0 0 30% 0); }
  75%{ transform: translate(1.5px,0); clip-path: inset(10% 0 10% 0); }
  100%{ transform: translate(0,0); clip-path: inset(0 0 0 0); }
}