/* scroll-animations.css */

.scroll-anim {
  --scroll-duration: 0.7s;
  --scroll-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --scroll-delay: 0s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
}

.scroll-anim__block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
}

.scroll-anim__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.scroll-anim__text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Fade Up --- */
.scroll-anim-fade-up {
  animation: scroll-fade-up var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* --- Fade Left --- */
.scroll-anim-fade-left {
  animation: scroll-fade-left var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-fade-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: none; }
}

/* --- Fade Right --- */
.scroll-anim-fade-right {
  animation: scroll-fade-right var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-fade-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

/* --- Scale In --- */
.scroll-anim-scale-in {
  animation: scroll-scale-in var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Clip Reveal --- */
.scroll-anim-clip-reveal {
  animation: scroll-clip-reveal var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* --- Blur In --- */
.scroll-anim-blur-in {
  animation: scroll-blur-in var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-blur-in {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0px); }
}

/* --- Flip In --- */
.scroll-anim-flip-in {
  animation: scroll-flip-in var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
  perspective: 600px;
}

@keyframes scroll-flip-in {
  from { opacity: 0; transform: perspective(600px) rotateX(-20deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

/* --- Rise Up --- */
.scroll-anim-rise-up {
  animation: scroll-rise-up var(--scroll-duration) cubic-bezier(0.34, 1.56, 0.64, 1) var(--scroll-delay) both;
}

@keyframes scroll-rise-up {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- Zoom Fade --- */
.scroll-anim-zoom-fade {
  animation: scroll-zoom-fade var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-zoom-fade {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Rotate In --- */
.scroll-anim-rotate-in {
  animation: scroll-rotate-in var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-rotate-in {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* --- Fade Down --- */
.scroll-anim-fade-down {
  animation: scroll-fade-down var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-fade-down {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: none; }
}

/* --- Skew In --- */
.scroll-anim-skew-in {
  animation: scroll-skew-in var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-skew-in {
  from { opacity: 0; transform: skewX(-10deg) translateX(-20px); }
  to { opacity: 1; transform: skewX(0) translateX(0); }
}

/* --- Elastic Rise --- */
.scroll-anim-elastic-rise {
  animation: scroll-elastic-rise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--scroll-delay) both;
}

@keyframes scroll-elastic-rise {
  from { opacity: 0; transform: translateY(50px) scaleY(0.8); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* --- Split Reveal --- */
.scroll-anim-split-reveal {
  animation: scroll-split-reveal var(--scroll-duration) var(--scroll-ease) var(--scroll-delay) both;
}

@keyframes scroll-split-reveal {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); }
  to { opacity: 1; clip-path: inset(0 0% 0 0%); }
}

/* --- Drop Bounce --- */
.scroll-anim-drop-bounce {
  animation: scroll-drop-bounce 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--scroll-delay) both;
}

@keyframes scroll-drop-bounce {
  0%   { opacity: 0; transform: translateY(-60px); }
  60%  { opacity: 1; transform: translateY(8px); }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* --- Curtain Open --- */
.scroll-anim-curtain-open {
  overflow: hidden;
}
.scroll-anim-curtain-open::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(0%);
  z-index: 2;
  transition: transform 0s;
}
.scroll-anim-curtain-open.is-visible::before {
  animation: scroll-curtain-open 0.8s cubic-bezier(0.77, 0, 0.175, 1) var(--scroll-delay) both;
}
.scroll-anim-curtain-open {
  animation: scroll-curtain-open-content 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--scroll-delay) + 0.1s) both;
}

@keyframes scroll-curtain-open {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(102%); }
}
@keyframes scroll-curtain-open-content {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Letter Wave --- */
.scroll-anim-letter-wave {
  animation: none;
}
.scroll-anim-letter-wave .scroll-anim__text {
  display: flex;
  gap: 0.12em;
  flex-wrap: wrap;
}
.scroll-anim-letter-wave .scroll-anim__text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  animation: scroll-letter-wave 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(1)  { animation-delay: calc(var(--scroll-delay) + 0.00s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(2)  { animation-delay: calc(var(--scroll-delay) + 0.05s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(3)  { animation-delay: calc(var(--scroll-delay) + 0.10s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(4)  { animation-delay: calc(var(--scroll-delay) + 0.15s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(5)  { animation-delay: calc(var(--scroll-delay) + 0.20s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(6)  { animation-delay: calc(var(--scroll-delay) + 0.25s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(7)  { animation-delay: calc(var(--scroll-delay) + 0.30s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(8)  { animation-delay: calc(var(--scroll-delay) + 0.35s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(9)  { animation-delay: calc(var(--scroll-delay) + 0.40s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(10) { animation-delay: calc(var(--scroll-delay) + 0.45s); }
.scroll-anim-letter-wave .scroll-anim__text span:nth-child(n+11) { animation-delay: calc(var(--scroll-delay) + 0.50s); }

@keyframes scroll-letter-wave {
  0%   { opacity: 0; transform: translateY(1em) rotate(6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* --- 3D Tilt In --- */
.scroll-anim-3d-tilt-in {
  perspective: 900px;
  animation: scroll-3d-tilt-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) both;
}

@keyframes scroll-3d-tilt-in {
  0%   { opacity: 0; transform: perspective(900px) rotateX(30deg) translateY(30px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0px); }
}

/* --- Stagger Lines --- */
.scroll-anim-stagger-lines {
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}
.scroll-anim-stagger-lines .scroll-anim__block {
  opacity: 0;
  transform: translateX(-40px);
  animation: scroll-stagger-line 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scroll-anim-stagger-lines .scroll-anim__block:nth-child(1) { animation-delay: calc(var(--scroll-delay) + 0.00s); }
.scroll-anim-stagger-lines .scroll-anim__block:nth-child(2) { animation-delay: calc(var(--scroll-delay) + 0.10s); }
.scroll-anim-stagger-lines .scroll-anim__block:nth-child(3) { animation-delay: calc(var(--scroll-delay) + 0.20s); }
.scroll-anim-stagger-lines .scroll-anim__block:nth-child(4) { animation-delay: calc(var(--scroll-delay) + 0.30s); }
.scroll-anim-stagger-lines .scroll-anim__block:nth-child(n+5) { animation-delay: calc(var(--scroll-delay) + 0.40s); }

@keyframes scroll-stagger-line {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- Reveal Clip Left --- */
.scroll-anim-reveal-clip-left {
  animation: scroll-reveal-clip-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) both;
}

@keyframes scroll-reveal-clip-left {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* --- Word by Word --- */
.scroll-anim-word-by-word .scroll-anim__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0;
}
.scroll-anim-word-by-word .scroll-anim__text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: scroll-word-appear 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(1)  { animation-delay: calc(var(--scroll-delay) + 0.00s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(2)  { animation-delay: calc(var(--scroll-delay) + 0.08s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(3)  { animation-delay: calc(var(--scroll-delay) + 0.16s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(4)  { animation-delay: calc(var(--scroll-delay) + 0.24s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(5)  { animation-delay: calc(var(--scroll-delay) + 0.32s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(6)  { animation-delay: calc(var(--scroll-delay) + 0.40s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(7)  { animation-delay: calc(var(--scroll-delay) + 0.48s); }
.scroll-anim-word-by-word .scroll-anim__text span:nth-child(n+8){ animation-delay: calc(var(--scroll-delay) + 0.56s); }

@keyframes scroll-word-appear {
  0%   { opacity: 0; transform: translateY(0.6em); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Mask Wipe Up --- */
.scroll-anim-mask-wipe-up {
  animation: scroll-mask-wipe-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) both;
}

@keyframes scroll-mask-wipe-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

/* --- Horizontal Line --- */
.scroll-anim-horizontal-line {
  flex-direction: column;
  gap: 0.75rem;
}
.scroll-anim-horizontal-line::before {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  animation: scroll-hline-expand 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) both;
}
.scroll-anim-horizontal-line .scroll-anim__block {
  opacity: 0;
  transform: translateY(16px);
  animation: scroll-hline-content 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--scroll-delay) + 0.3s) both;
}

@keyframes scroll-hline-expand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes scroll-hline-content {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Counter Up --- */
.scroll-anim-counter-up .scroll-anim__counter-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  overflow: hidden;
}
.scroll-anim-counter-up .scroll-anim__number {
  display: inline-block;
  animation: scroll-counter-up 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) both;
}
.scroll-anim-counter-up .scroll-anim__suffix {
  font-size: 1.5rem;
  opacity: 0;
  animation: scroll-counter-suffix 0.4s ease var(--scroll-delay) both;
}

@keyframes scroll-counter-up {
  0%   { transform: translateY(60px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes scroll-counter-suffix {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Slide In Word --- */
.scroll-anim-slide-in-word .scroll-anim__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
}
.scroll-anim-slide-in-word .scroll-anim__text span {
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
}
.scroll-anim-slide-in-word .scroll-anim__text span::after {
  content: attr(data-word);
  display: block;
  animation: scroll-slide-word 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(1)  { }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(1)::after  { animation-delay: calc(var(--scroll-delay) + 0.00s); }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(2)::after  { animation-delay: calc(var(--scroll-delay) + 0.10s); }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(3)::after  { animation-delay: calc(var(--scroll-delay) + 0.20s); }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(4)::after  { animation-delay: calc(var(--scroll-delay) + 0.30s); }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(5)::after  { animation-delay: calc(var(--scroll-delay) + 0.40s); }
.scroll-anim-slide-in-word .scroll-anim__text span:nth-child(n+6)::after{ animation-delay: calc(var(--scroll-delay) + 0.50s); }

@keyframes scroll-slide-word {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* --- Typewriter --- */
.scroll-anim-typewriter .scroll-anim__typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  width: 0;
  max-width: 100%;
}
.scroll-anim-typewriter.is-visible .scroll-anim__typewriter {
  animation: scroll-typewriter-width 1.8s steps(12, end) var(--scroll-delay) forwards,
             scroll-typewriter-caret 0.6s step-end var(--scroll-delay) 5;
}
@keyframes scroll-typewriter-width {
  from { width: 0; }
  to   { width: 12ch; }
}
@keyframes scroll-typewriter-caret {
  from { border-color: var(--accent); }
  50%  { border-color: transparent; }
  to   { border-color: var(--accent); }
}

/* --- Wave Stagger --- */
.scroll-anim-wave-stagger .scroll-anim__wave-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
}
.scroll-anim-wave-stagger .scroll-anim__wave-item {
  flex: 1;
  background: var(--accent);
  border-radius: 4px;
  height: 60px;
  transform: translateY(60px);
  opacity: 0;
}
.scroll-anim-wave-stagger.is-visible .scroll-anim__wave-item:nth-child(1) { animation: scroll-wave-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--scroll-delay) + 0.00s) forwards; }
.scroll-anim-wave-stagger.is-visible .scroll-anim__wave-item:nth-child(2) { animation: scroll-wave-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--scroll-delay) + 0.12s) forwards; }
.scroll-anim-wave-stagger.is-visible .scroll-anim__wave-item:nth-child(3) { animation: scroll-wave-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--scroll-delay) + 0.22s) forwards; }
.scroll-anim-wave-stagger.is-visible .scroll-anim__wave-item:nth-child(4) { animation: scroll-wave-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--scroll-delay) + 0.30s) forwards; }
.scroll-anim-wave-stagger.is-visible .scroll-anim__wave-item:nth-child(5) { animation: scroll-wave-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--scroll-delay) + 0.36s) forwards; }
@keyframes scroll-wave-rise {
  to { transform: translateY(0); opacity: 1; }
}

/* --- Perspective Zoom --- */
.scroll-anim-perspective-zoom {
  perspective: 800px;
}
.scroll-anim-perspective-zoom .scroll-anim__block {
  transform: scale(0.3) translateZ(-400px);
  opacity: 0;
  filter: blur(12px);
}
.scroll-anim-perspective-zoom.is-visible .scroll-anim__block {
  animation: scroll-perspective-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) forwards;
}
@keyframes scroll-perspective-zoom {
  to { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); }
}

/* --- Slide Clip Bottom --- */
.scroll-anim-slide-clip-bottom .scroll-anim__block {
  clip-path: inset(0 0 100% 0);
}
.scroll-anim-slide-clip-bottom.is-visible .scroll-anim__block {
  animation: scroll-clip-bottom 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) forwards;
}
@keyframes scroll-clip-bottom {
  to { clip-path: inset(0 0 0% 0); }
}

/* --- Color Block --- */
.scroll-anim-color-block .scroll-anim__color-block-wrap {
  position: relative;
  overflow: hidden;
}
.scroll-anim-color-block .scroll-anim__text {
  opacity: 0;
}
.scroll-anim-color-block .scroll-anim__color-block-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  z-index: 1;
}
.scroll-anim-color-block.is-visible .scroll-anim__color-block-wrap::before {
  animation: scroll-color-block-sweep 1s cubic-bezier(0.77, 0, 0.18, 1) var(--scroll-delay) forwards;
}
.scroll-anim-color-block.is-visible .scroll-anim__text {
  animation: scroll-color-block-reveal 0s linear calc(var(--scroll-delay) + 0.5s) forwards;
  opacity: 0;
}
@keyframes scroll-color-block-sweep {
  0%   { transform: translateX(-101%); }
  45%  { transform: translateX(0%); }
  55%  { transform: translateX(0%); }
  100% { transform: translateX(101%); }
}
@keyframes scroll-color-block-reveal {
  to { opacity: 1; }
}

/* --- Fade Blur Up --- */
.scroll-anim-fade-blur-up .scroll-anim__block {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
}
.scroll-anim-fade-blur-up.is-visible .scroll-anim__block {
  animation: scroll-fade-blur-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) forwards;
}
@keyframes scroll-fade-blur-up {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- Line Draw In --- */
.scroll-anim-line-draw-in .scroll-anim__line-wrap {
  position: relative;
  padding-top: 1.2em;
}
.scroll-anim-line-draw-in .scroll-anim__line-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.scroll-anim-line-draw-in .scroll-anim__text {
  opacity: 0;
  transform: translateY(12px);
}
.scroll-anim-line-draw-in.is-visible .scroll-anim__line-wrap::before {
  animation: scroll-line-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) forwards;
}
.scroll-anim-line-draw-in.is-visible .scroll-anim__text {
  animation: scroll-line-text 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--scroll-delay) + 0.45s) forwards;
}
@keyframes scroll-line-draw {
  to { transform: scaleX(1); }
}
@keyframes scroll-line-text {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Char by Char --- */
.scroll-anim-char-by-char .scroll-anim__text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}
.scroll-anim-char-by-char.is-visible .scroll-anim__text span {
  animation: scroll-char-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(1)  { animation-delay: calc(var(--scroll-delay) + 0.00s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(2)  { animation-delay: calc(var(--scroll-delay) + 0.06s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(3)  { animation-delay: calc(var(--scroll-delay) + 0.12s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(4)  { animation-delay: calc(var(--scroll-delay) + 0.18s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(5)  { animation-delay: calc(var(--scroll-delay) + 0.24s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(6)  { animation-delay: calc(var(--scroll-delay) + 0.30s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(7)  { animation-delay: calc(var(--scroll-delay) + 0.36s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(8)  { animation-delay: calc(var(--scroll-delay) + 0.42s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(9)  { animation-delay: calc(var(--scroll-delay) + 0.48s); }
.scroll-anim-char-by-char.is-visible .scroll-anim__text span:nth-child(n+10) { animation-delay: calc(var(--scroll-delay) + 0.54s); }
@keyframes scroll-char-in {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Split Horizontal Reveal --- */
.scroll-anim-split-h-reveal .scroll-anim__split-h-wrap {
  position: relative;
  overflow: hidden;
}
.scroll-anim-split-h-reveal .scroll-anim__split-h-wrap::before,
.scroll-anim-split-h-reveal .scroll-anim__split-h-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--accent);
  z-index: 2;
  transition: none;
}
.scroll-anim-split-h-reveal .scroll-anim__split-h-wrap::before {
  top: 0;
  transform: translateY(0);
}
.scroll-anim-split-h-reveal .scroll-anim__split-h-wrap::after {
  bottom: 0;
  transform: translateY(0);
}
.scroll-anim-split-h-reveal .scroll-anim__dot,
.scroll-anim-split-h-reveal .scroll-anim__text {
  opacity: 0;
}
.scroll-anim-split-h-reveal.is-visible .scroll-anim__split-h-wrap::before {
  animation: scroll-split-h-top 0.8s cubic-bezier(0.77, 0, 0.18, 1) var(--scroll-delay) forwards;
}
.scroll-anim-split-h-reveal.is-visible .scroll-anim__split-h-wrap::after {
  animation: scroll-split-h-bottom 0.8s cubic-bezier(0.77, 0, 0.18, 1) var(--scroll-delay) forwards;
}
.scroll-anim-split-h-reveal.is-visible .scroll-anim__dot,
.scroll-anim-split-h-reveal.is-visible .scroll-anim__text {
  animation: scroll-split-h-content 0s linear calc(var(--scroll-delay) + 0.4s) forwards;
  opacity: 0;
}
@keyframes scroll-split-h-top {
  to { transform: translateY(-101%); }
}
@keyframes scroll-split-h-bottom {
  to { transform: translateY(101%); }
}
@keyframes scroll-split-h-content {
  to { opacity: 1; }
}

/* --- Zoom In Soft --- */
.scroll-anim-zoom-in-soft .scroll-anim__block {
  opacity: 0;
  transform: scale(1.05);
}
.scroll-anim-zoom-in-soft.is-visible .scroll-anim__block {
  animation: scroll-zoom-in-soft 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--scroll-delay) forwards;
}
@keyframes scroll-zoom-in-soft {
  to { opacity: 1; transform: scale(1); }
}

/* --- glitch-in --- */
.scroll-anim-glitch-in {
  animation: scroll-glitch 0.6s steps(1) both;
}
@keyframes scroll-glitch {
  0%   { opacity: 0; filter: blur(6px); clip-path: inset(40% 0 40% 0); }
  20%  { opacity: 1; clip-path: inset(5% 0 70% 0); transform: translateX(-5px); filter: blur(0); }
  40%  { clip-path: inset(60% 0 5% 0);  transform: translateX(5px); }
  60%  { clip-path: inset(15% 0 55% 0); transform: translateX(-2px); }
  80%  { clip-path: inset(0); transform: none; }
  100% { opacity: 1; clip-path: none; }
}

/* --- paint-wipe --- */
.scroll-anim-paint-wipe {
  position: relative;
  overflow: hidden;
  animation: scroll-paint-content 0.5s 0.35s both;
}
.scroll-anim-paint-wipe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: inherit;
  animation: scroll-paint-wipe 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-paint-wipe {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes scroll-paint-content {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- flip-up-block --- */
.scroll-anim-flip-up-block {
  perspective: 600px;
  animation: scroll-flip-up 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-flip-up {
  from { opacity: 0; transform: rotateX(-60deg) translateY(20px); }
  to   { opacity: 1; transform: rotateX(0deg) translateY(0); }
}

/* --- gradient-reveal --- */
.scroll-anim-gradient-reveal {
  position: relative;
  overflow: hidden;
}
.scroll-anim-gradient-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
  animation: scroll-gradient-reveal 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-gradient-reveal {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* --- slide-and-fade --- */
.scroll-anim-slide-and-fade {
  animation: scroll-slide-fade 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-slide-fade {
  from { opacity: 0; transform: translateX(-30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --- spring-pop --- */
.scroll-anim-spring-pop {
  animation: scroll-spring-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes scroll-spring-pop {
  from { opacity: 0; transform: scale(0.6) translateY(30px); }
  60%  { transform: scale(1.06) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- text-mask-reveal --- */
.scroll-anim-text-mask-reveal {
  overflow: hidden;
}
.scroll-anim-text-mask-reveal .scroll-anim__block {
  animation: scroll-mask-reveal 0.7s cubic-bezier(0.22,1,0.36,1) both;
  clip-path: inset(0 100% 0 0);
}
@keyframes scroll-mask-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* --- warp-in --- */
.scroll-anim-warp-in {
  animation: scroll-warp 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-warp {
  0%   { opacity: 0; transform: scaleX(0.2) scaleY(2) translateY(10px); filter: blur(4px); }
  50%  { transform: scaleX(1.05) scaleY(0.95); filter: none; }
  100% { opacity: 1; transform: scale(1); }
}

/* --- curtain-sides --- */
.scroll-anim-curtain-sides {
  position: relative;
  overflow: hidden;
}
.scroll-anim-curtain-sides .scroll-anim__block {
  animation: scroll-curtain-reveal 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.scroll-anim-curtain-sides::before,
.scroll-anim-curtain-sides::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--accent);
  animation: scroll-curtain-split 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.scroll-anim-curtain-sides::before { left: 0; transform-origin: left; }
.scroll-anim-curtain-sides::after  { right: 0; transform-origin: right; }
@keyframes scroll-curtain-split {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes scroll-curtain-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- stack-depth --- */
.scroll-anim-stack-depth {
  animation: scroll-stack-depth 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-stack-depth {
  0%  { opacity: 0; transform: scale(0.85) translateZ(-100px) translateY(30px); filter: blur(4px); }
  60% { transform: scale(1.02) translateZ(0); filter: none; }
  100%{ opacity: 1; transform: scale(1); }
}

/* --- velocity-skew ---
   Inspired by Locomotive Scroll / Lenis momentum sites on Awwwards:
   Elements enter with a velocity-style skew as if "catching up" to the
   viewport, then snap back to baseline — mimicking the feeling of fast
   scroll inertia. In production, bind skewY to live scroll delta via JS.
   In this gallery the entrance keyframe recreates the feeling. */
.scroll-anim-velocity-skew {
  animation: scroll-vel-skew 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left center;
}
@keyframes scroll-vel-skew {
  0%   { opacity: 0; transform: translateY(50px) skewY(8deg) scaleX(0.94); }
  40%  { opacity: 1; transform: translateY(-4px) skewY(-2deg) scaleX(1.02); }
  65%  { transform: translateY(2px) skewY(0.5deg) scaleX(1); }
  100% { opacity: 1; transform: translateY(0) skewY(0) scaleX(1); }
}

/* --- velocity-skew ---
   Inspired by Locomotive Scroll / Lenis momentum sites on Awwwards:
   Elements enter with a velocity-style skew as if "catching up" to the
   viewport, then snap back to baseline — mimicking the feeling of fast
   scroll inertia. In production, bind skewY to live scroll delta via JS.
   In this gallery the entrance keyframe recreates the feeling. */
.scroll-anim-velocity-skew {
  animation: scroll-vel-skew 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left center;
}
@keyframes scroll-vel-skew {
  0%   { opacity: 0; transform: translateY(50px) skewY(8deg) scaleX(0.94); }
  40%  { opacity: 1; transform: translateY(-4px) skewY(-2deg) scaleX(1.02); }
  65%  { transform: translateY(2px) skewY(0.5deg) scaleX(1); }
  100% { opacity: 1; transform: translateY(0) skewY(0) scaleX(1); }
}

/* --- overshoot-rise --- */
.scroll-anim-overshoot-rise {
  animation: scroll-overshoot 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-overshoot {
  0%   { opacity: 0; transform: translateY(60px); }
  45%  { opacity: 1; transform: translateY(-20px); }
  65%  { transform: translateY(5px); }
  82%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- diagonal-slide --- */
.scroll-anim-diagonal-slide {
  animation: scroll-diagonal 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-diagonal {
  from { opacity: 0; transform: translateX(-40px) translateY(40px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* --- zoom-blur-in --- */
.scroll-anim-zoom-blur-in {
  animation: scroll-zoom-blur 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-zoom-blur {
  from { opacity: 0; transform: scale(0.3); filter: blur(16px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0px); }
}

/* --- stagger-children --- */
.scroll-anim-stagger-children .scroll-anim__block {
  opacity: 0;
  animation: scroll-stagger-fade-up 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.scroll-anim-stagger-children .scroll-anim__block:nth-child(1) { animation-delay: 0s; }
.scroll-anim-stagger-children .scroll-anim__block:nth-child(2) { animation-delay: 0.1s; }
.scroll-anim-stagger-children .scroll-anim__block:nth-child(3) { animation-delay: 0.2s; }
.scroll-anim-stagger-children .scroll-anim__block:nth-child(4) { animation-delay: 0.3s; }
.scroll-anim-stagger-children .scroll-anim__block:nth-child(5) { animation-delay: 0.4s; }
@keyframes scroll-stagger-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- flip-panel --- */
.scroll-anim-flip-panel {
  animation: scroll-flip-panel 0.65s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: top center;
}
@keyframes scroll-flip-panel {
  from { opacity: 0; transform: perspective(800px) rotateX(-90deg); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0deg); }
}

/* --- blur-focus --- */
.scroll-anim-blur-focus {
  animation: scroll-blur-focus 0.8s ease-out both;
}
@keyframes scroll-blur-focus {
  from {
    opacity: 0;
    filter: blur(12px) saturate(0) scale(1.02);
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    filter: blur(0px) saturate(1) scale(1);
    transform: scale(1);
  }
}

/* --- bounce-rotate --- */
.scroll-anim-bounce-rotate {
  animation: scroll-bounce-rotate 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-bounce-rotate {
  0%   { opacity: 0; transform: translateY(50px) rotate(-6deg); }
  50%  { opacity: 1; transform: translateY(-8px) rotate(2deg); }
  75%  { transform: translateY(4px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* --- venetian-open --- */
.scroll-anim-venetian-open {
  animation: scroll-venetian 0.8s ease-out both;
  overflow: hidden;
}
@keyframes scroll-venetian {
  0%   {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  15%  { clip-path: inset(0 0 83% 0); opacity: 1; }
  30%  { clip-path: inset(0 0 66% 0); }
  45%  { clip-path: inset(0 0 50% 0); }
  60%  { clip-path: inset(0 0 33% 0); }
  75%  { clip-path: inset(0 0 16% 0); }
  100% { clip-path: inset(0 0 0% 0); opacity: 1; }
}

/* --- circle-expand --- */
.scroll-anim-circle-expand {
  animation: scroll-circle-expand 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-circle-expand {
  from { clip-path: circle(0% at 50% 50%); opacity: 0; }
  to   { clip-path: circle(150% at 50% 50%); opacity: 1; }
}

/* --- tilt-enter --- */
.scroll-anim-tilt-enter {
  animation: scroll-tilt-enter 0.65s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: center bottom;
}
@keyframes scroll-tilt-enter {
  0%   { opacity: 0; transform: perspective(600px) rotateX(35deg) translateY(30px) scale(0.9); }
  60%  { opacity: 1; transform: perspective(600px) rotateX(-4deg) translateY(-3px) scale(1); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0) scale(1); }
}

/* --- zoom-out-enter --- */
.scroll-anim-zoom-out-enter {
  animation: scroll-zoom-out-enter 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-zoom-out-enter {
  from { opacity:0; transform: scale(1.35) translateY(-10px); filter:blur(2px); }
  70%  { transform: scale(0.99); filter:blur(0); }
  to   { opacity:1; transform: scale(1); }
}

/* --- rotateY-enter --- */
.scroll-anim-rotateY-enter {
  animation: scroll-rotY 0.65s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: left center;
}
@keyframes scroll-rotY {
  from { opacity:0; transform: perspective(600px) rotateY(-65deg) translateX(-20px); }
  60%  { transform: perspective(600px) rotateY(5deg); }
  to   { opacity:1; transform: perspective(600px) rotateY(0); }
}

/* --- magnetic-fall --- */
.scroll-anim-magnetic-fall {
  animation: scroll-mag-fall 0.8s cubic-bezier(0.7,0,0.3,1) both;
}
@keyframes scroll-mag-fall {
  0%   { opacity:0; transform: translateY(-60px) scaleY(0.8); }
  60%  { opacity:1; transform: translateY(4px) scaleY(1.02); }
  80%  { transform: translateY(-2px) scaleY(0.99); }
  100% { transform: none; }
}

/* --- split-words-mask --- */
.scroll-anim-split-words-mask .scroll-anim__block {
  overflow: hidden;
  padding: 0;
}
.scroll-anim-split-words-mask .scroll-anim__block > * {
  animation: scroll-split-mask 0.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: calc(var(--scroll-delay) + 0.1s);
}
@keyframes scroll-split-mask {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* --- accordion-open --- */
.scroll-anim-accordion-open {
  animation: scroll-accordion 0.6s cubic-bezier(0.22,1,0.36,1) both;
  overflow:hidden;
}
@keyframes scroll-accordion {
  from { max-height:0; opacity:0; transform:scaleY(0.2); transform-origin:top; }
  to   { max-height:200px; opacity:1; transform:scaleY(1); }
}

/* --- spiral-in --- */
.scroll-anim-spiral-in {
  animation: scroll-spiral-in 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-spiral-in {
  0%   { opacity:0; transform: translate(40px,40px) rotate(180deg) scale(0.2); }
  50%  { opacity:1; transform: translate(-5px,-5px) rotate(-10deg) scale(1.05); }
  75%  { transform: translate(2px,2px) rotate(3deg); }
  100% { transform: none; }
}

/* --- rubber-band-enter --- */
.scroll-anim-rubber-band-enter {
  animation: scroll-rubber-band-enter 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes scroll-rubber-band-enter {
  0%   { opacity:0; transform: scale(0.3) translateY(60px); }
  40%  { opacity:1; transform: scale(1.15) translateY(-12px); }
  60%  { transform: scale(0.92) translateY(4px); }
  80%  { transform: scale(1.04) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* --- 3d-barrel --- */
.scroll-anim-3d-barrel {
  animation: scroll-3d-barrel 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scroll-3d-barrel {
  from { opacity:0; transform: perspective(500px) rotateZ(-90deg) translateX(-40px) scale(0.6); }
  60%  { transform: perspective(500px) rotateZ(8deg) translateX(3px); }
  to   { opacity:1; transform: perspective(500px) rotateZ(0) translateX(0) scale(1); }
}

/* --- fade-up-nth --- */
.scroll-anim-fade-up-nth {
  animation: scroll-fade-up-nth 0.5s ease both;
}
.scroll-anim-fade-up-nth .scroll-anim__block:nth-child(1) { animation: scroll-nth-item 0.5s ease 0.0s both; }
.scroll-anim-fade-up-nth .scroll-anim__block:nth-child(2) { animation: scroll-nth-item 0.5s ease 0.1s both; }
.scroll-anim-fade-up-nth .scroll-anim__block:nth-child(3) { animation: scroll-nth-item 0.5s ease 0.2s both; }
@keyframes scroll-fade-up-nth { from { opacity:0; } to { opacity:1; } }
@keyframes scroll-nth-item {
  from { opacity:0; transform: translateY(24px); }
  to   { opacity:1; transform: none; }
}

/* --- pop-burst --- */
.scroll-anim-pop-burst {
  animation: scroll-pop-burst 0.6s cubic-bezier(0.34,2,0.64,1) both;
}
@keyframes scroll-pop-burst {
  0%   { opacity:0; transform: scale(0); }
  50%  { opacity:1; transform: scale(1.25); }
  70%  { transform: scale(0.93); }
  85%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ============================================================
   21st.dev インスパイア Scroll 新着 (2026-06)
   ============================================================ */

/* --- parallax-layers ---
   Multi-layer parallax cards enter at staggered depths. */
.scroll-anim-parallax-layers .scroll-anim__block:nth-child(1) {
  animation: scroll-parallax-1 0.7s cubic-bezier(0.22,1,0.36,1) var(--anim-delay, 0s) both;
}
.scroll-anim-parallax-layers .scroll-anim__block:nth-child(2) {
  animation: scroll-parallax-2 0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--anim-delay,0s) + 0.1s) both;
  opacity: 0.7; transform-origin: left center;
}
.scroll-anim-parallax-layers .scroll-anim__block:nth-child(3) {
  animation: scroll-parallax-3 0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--anim-delay,0s) + 0.2s) both;
  opacity: 0.4;
}
@keyframes scroll-parallax-1 {
  from { opacity:0; transform: translateY(40px) scale(1.05); }
  to   { opacity:1; transform: none; }
}
@keyframes scroll-parallax-2 {
  from { opacity:0; transform: translateY(60px) scale(0.97); }
  to   { opacity:0.7; transform: none; }
}
@keyframes scroll-parallax-3 {
  from { opacity:0; transform: translateY(80px) scale(0.92); }
  to   { opacity:0.4; transform: none; }
}

/* --- blur-to-clear ---
   Content enters from blur and opacity 0. */
.scroll-anim-blur-to-clear .scroll-anim__block {
  animation: scroll-blur-clear 0.9s cubic-bezier(0.22,1,0.36,1) var(--anim-delay, 0s) both;
}
@keyframes scroll-blur-clear {
  0%   { opacity:0; filter: blur(16px) saturate(0); transform: scale(1.04); }
  60%  { filter: blur(2px) saturate(0.5); }
  100% { opacity:1; filter: blur(0) saturate(1); transform: none; }
}

/* --- timeline-enter ---
   Timeline dot draws line and dot pops in. */
.scroll-anim-timeline-enter .scroll-anim__block {
  position: relative; padding-left: 20px;
  animation: scroll-tl-in 0.5s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay, 0s) both;
}
.scroll-anim-timeline-enter .scroll-anim__dot {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(124,108,255,0.7);
  animation: scroll-tl-dot 0.5s cubic-bezier(0.34,1.56,0.64,1) calc(var(--anim-delay,0s) + 0.15s) both;
}
.scroll-anim-timeline-enter .scroll-anim__dot::before {
  content: '';
  position: absolute; top: 100%; left: 50%; margin-left: -1px;
  width: 2px; height: 0;
  background: rgba(124,108,255,0.3);
  animation: scroll-tl-line 0.4s ease calc(var(--anim-delay,0s) + 0.3s) both;
}
@keyframes scroll-tl-in {
  from { opacity:0; transform: translateX(-20px); }
  to   { opacity:1; transform: none; }
}
@keyframes scroll-tl-dot {
  from { transform: translateY(-50%) scale(0); }
  to   { transform: translateY(-50%) scale(1); }
}
@keyframes scroll-tl-line {
  to { height: 16px; }
}

/* --- letterbox-reveal ---
   Cinema letterbox bars slide away to reveal content. */
.scroll-anim-letterbox-reveal {
  position: relative; overflow: hidden;
}
.scroll-anim-letterbox-reveal::before,
.scroll-anim-letterbox-reveal::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 35%;
  background: #000; z-index: 2;
  animation: scroll-lbox-bars 0.8s cubic-bezier(0.22,1,0.36,1) var(--anim-delay, 0s) forwards;
}
.scroll-anim-letterbox-reveal::before { top: 0; transform-origin: top; }
.scroll-anim-letterbox-reveal::after  { bottom: 0; transform-origin: bottom; }
.scroll-anim-letterbox-reveal .scroll-anim__block {
  animation: scroll-lbox-content 0.6s ease calc(var(--anim-delay,0s) + 0.3s) both;
}
@keyframes scroll-lbox-bars {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes scroll-lbox-content {
  from { opacity:0; filter: brightness(0.4); }
  to   { opacity:1; filter: brightness(1); }
}

/* --- morph-enter ---
   Element morphs from a small circle/pill into its natural shape. */
.scroll-anim-morph-enter .scroll-anim__block {
  animation: scroll-morph-in 0.7s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay, 0s) both;
}
@keyframes scroll-morph-in {
  0%   { opacity:0; border-radius: 50%; transform: scale(0.3) rotate(-10deg); }
  50%  { border-radius: 20px; transform: scale(1.05) rotate(2deg); }
  100% { opacity:1; border-radius: 8px; transform: none; }
}