/* ── Scintilla Blocks — Entrance Animations ────────────────────────────────── */

.sctb-animated.sctb-anim-pending {
	opacity: 0;
}
.sctb-animated.is-animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FADING
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sctb-fadeInDown {
	from { opacity: 0; transform: var(--sctb-transform, ) translateY(-40px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-fadeInUp {
	from { opacity: 0; transform: var(--sctb-transform, ) translateY(40px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-fadeInLeft {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(-40px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}
@keyframes sctb-fadeInRight {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(40px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ZOOMING
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-zoomIn {
	from { opacity: 0; transform: var(--sctb-transform, ) scale(0.5); }
	to   { opacity: 1; transform: var(--sctb-transform, ) scale(1); }
}
@keyframes sctb-zoomInDown {
	from { opacity: 0; transform: var(--sctb-transform, ) scale(0.3) translateY(-60px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) scale(1.05) translateY(10px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) scale(1) translateY(0); }
}
@keyframes sctb-zoomInUp {
	from { opacity: 0; transform: var(--sctb-transform, ) scale(0.3) translateY(60px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) scale(1.05) translateY(-10px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) scale(1) translateY(0); }
}
@keyframes sctb-zoomInLeft {
	from { opacity: 0; transform: var(--sctb-transform, ) scale(0.3) translateX(-60px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) scale(1.05) translateX(10px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) scale(1) translateX(0); }
}
@keyframes sctb-zoomInRight {
	from { opacity: 0; transform: var(--sctb-transform, ) scale(0.3) translateX(60px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) scale(1.05) translateX(-10px); }
	to   { opacity: 1; transform: var(--sctb-transform, ) scale(1) translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOUNCING
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-bounceIn {
	0%   { opacity: 0; transform: var(--sctb-transform, ) scale(0.3); }
	50%  { opacity: 1; transform: var(--sctb-transform, ) scale(1.08); }
	70%  { transform: var(--sctb-transform, ) scale(0.95); }
	100% { opacity: 1; transform: var(--sctb-transform, ) scale(1); }
}
@keyframes sctb-bounceInDown {
	0%   { opacity: 0; transform: var(--sctb-transform, ) translateY(-80px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) translateY(20px); }
	80%  { transform: var(--sctb-transform, ) translateY(-10px); }
	100% { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-bounceInUp {
	0%   { opacity: 0; transform: var(--sctb-transform, ) translateY(80px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) translateY(-20px); }
	80%  { transform: var(--sctb-transform, ) translateY(10px); }
	100% { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-bounceInLeft {
	0%   { opacity: 0; transform: var(--sctb-transform, ) translateX(-80px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) translateX(20px); }
	80%  { transform: var(--sctb-transform, ) translateX(-10px); }
	100% { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}
@keyframes sctb-bounceInRight {
	0%   { opacity: 0; transform: var(--sctb-transform, ) translateX(80px); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) translateX(-20px); }
	80%  { transform: var(--sctb-transform, ) translateX(10px); }
	100% { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SLIDING
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-slideInDown {
	from { opacity: 0; transform: var(--sctb-transform, ) translateY(-100%); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-slideInUp {
	from { opacity: 0; transform: var(--sctb-transform, ) translateY(100%); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateY(0); }
}
@keyframes sctb-slideInLeft {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(-100%); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}
@keyframes sctb-slideInRight {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(100%); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ROTATING
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-rotateIn {
	from { opacity: 0; transform: var(--sctb-transform, ) rotate(-200deg); }
	to   { opacity: 1; transform: var(--sctb-transform, ) rotate(0); }
}
@keyframes sctb-rotateInDownLeft {
	from { opacity: 0; transform-origin: left bottom; transform: var(--sctb-transform, ) rotate(-45deg); }
	to   { opacity: 1; transform-origin: left bottom; transform: var(--sctb-transform, ) rotate(0); }
}
@keyframes sctb-rotateInDownRight {
	from { opacity: 0; transform-origin: right bottom; transform: var(--sctb-transform, ) rotate(45deg); }
	to   { opacity: 1; transform-origin: right bottom; transform: var(--sctb-transform, ) rotate(0); }
}
@keyframes sctb-rotateInUpLeft {
	from { opacity: 0; transform-origin: left bottom; transform: var(--sctb-transform, ) rotate(45deg); }
	to   { opacity: 1; transform-origin: left bottom; transform: var(--sctb-transform, ) rotate(0); }
}
@keyframes sctb-rotateInUpRight {
	from { opacity: 0; transform-origin: right bottom; transform: var(--sctb-transform, ) rotate(-90deg); }
	to   { opacity: 1; transform-origin: right bottom; transform: var(--sctb-transform, ) rotate(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ATTENTION SEEKERS  (element starts visible — opacity:1 in first keyframe)
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-bounce {
	0%, 100% { opacity: 1; transform: var(--sctb-transform, ) translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	40%       { transform: var(--sctb-transform, ) translateY(-30px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
	70%       { transform: var(--sctb-transform, ) translateY(-15px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
	90%       { transform: var(--sctb-transform, ) translateY(-4px); }
}
@keyframes sctb-flash {
	0%, 50%, 100% { opacity: 1; }
	25%, 75%      { opacity: 0; }
}
@keyframes sctb-pulse {
	0%   { opacity: 1; transform: var(--sctb-transform, ) scale(1); }
	50%  { transform: var(--sctb-transform, ) scale(1.06); }
	100% { opacity: 1; transform: var(--sctb-transform, ) scale(1); }
}
@keyframes sctb-rubberBand {
	0%   { opacity: 1; transform: var(--sctb-transform, ) scale3d(1, 1, 1); }
	30%  { transform: var(--sctb-transform, ) scale3d(1.25, 0.75, 1); }
	40%  { transform: var(--sctb-transform, ) scale3d(0.75, 1.25, 1); }
	50%  { transform: var(--sctb-transform, ) scale3d(1.15, 0.85, 1); }
	65%  { transform: var(--sctb-transform, ) scale3d(0.95, 1.05, 1); }
	75%  { transform: var(--sctb-transform, ) scale3d(1.05, 0.95, 1); }
	100% { transform: var(--sctb-transform, ) scale3d(1, 1, 1); }
}
@keyframes sctb-shake {
	0%, 100%                        { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
	10%, 30%, 50%, 70%, 90%         { transform: var(--sctb-transform, ) translateX(-8px); }
	20%, 40%, 60%, 80%              { transform: var(--sctb-transform, ) translateX(8px); }
}
@keyframes sctb-headShake {
	0%    { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
	6.5%  { transform: var(--sctb-transform, ) translateX(-6px) rotateY(-9deg); }
	18.5% { transform: var(--sctb-transform, ) translateX(5px) rotateY(7deg); }
	31.5% { transform: var(--sctb-transform, ) translateX(-3px) rotateY(-5deg); }
	43.5% { transform: var(--sctb-transform, ) translateX(2px) rotateY(3deg); }
	50%   { transform: var(--sctb-transform, ) translateX(0); }
}
@keyframes sctb-swing {
	0%   { opacity: 1; transform-origin: top center; }
	20%  { transform: var(--sctb-transform, ) rotate(15deg); }
	40%  { transform: var(--sctb-transform, ) rotate(-10deg); }
	60%  { transform: var(--sctb-transform, ) rotate(5deg); }
	80%  { transform: var(--sctb-transform, ) rotate(-5deg); }
	100% { transform: var(--sctb-transform, ) rotate(0); }
}
@keyframes sctb-tada {
	0%         { opacity: 1; transform: var(--sctb-transform, ) scale3d(1, 1, 1); }
	10%, 20%   { transform: var(--sctb-transform, ) scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: var(--sctb-transform, ) scale3d(1.1, 1.1, 1.1) rotate(3deg); }
	40%, 60%, 80%      { transform: var(--sctb-transform, ) scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
	100%       { transform: var(--sctb-transform, ) scale3d(1, 1, 1) rotate(0); }
}
@keyframes sctb-wobble {
	0%   { opacity: 1; transform: var(--sctb-transform, ) translateX(0); }
	15%  { transform: var(--sctb-transform, ) translateX(-25%) rotate(-5deg); }
	30%  { transform: var(--sctb-transform, ) translateX(20%) rotate(3deg); }
	45%  { transform: var(--sctb-transform, ) translateX(-15%) rotate(-3deg); }
	60%  { transform: var(--sctb-transform, ) translateX(10%) rotate(2deg); }
	75%  { transform: var(--sctb-transform, ) translateX(-5%) rotate(-1deg); }
	100% { transform: var(--sctb-transform, ) translateX(0); }
}
@keyframes sctb-jello {
	0%, 11.1%, 100% { opacity: 1; transform: var(--sctb-transform, none); }
	22.2% { transform: var(--sctb-transform, ) skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: var(--sctb-transform, ) skewX(6.25deg)  skewY(6.25deg); }
	44.4% { transform: var(--sctb-transform, ) skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: var(--sctb-transform, ) skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: var(--sctb-transform, ) skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: var(--sctb-transform, ) skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: var(--sctb-transform, ) skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT SPEED
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-lightSpeedIn {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(100%) skewX(-30deg); }
	60%  { opacity: 1; transform: var(--sctb-transform, ) skewX(20deg); }
	80%  { opacity: 1; transform: var(--sctb-transform, ) skewX(-5deg); }
	100% { opacity: 1; transform: var(--sctb-transform, none); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPECIALS
══════════════════════════════════════════════════════════════════════════════ */

@keyframes sctb-rollIn {
	from { opacity: 0; transform: var(--sctb-transform, ) translateX(-100%) rotate(-120deg); }
	to   { opacity: 1; transform: var(--sctb-transform, ) translateX(0) rotate(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION NAME BINDINGS  (only when .is-animated is present)
══════════════════════════════════════════════════════════════════════════════ */

/* Fading */
.sctb-animated.is-animated.sctb-anim-fadeIn       { animation-name: sctb-fadeIn;       }
.sctb-animated.is-animated.sctb-anim-fadeInDown   { animation-name: sctb-fadeInDown;   }
.sctb-animated.is-animated.sctb-anim-fadeInUp     { animation-name: sctb-fadeInUp;     }
.sctb-animated.is-animated.sctb-anim-fadeInLeft   { animation-name: sctb-fadeInLeft;   }
.sctb-animated.is-animated.sctb-anim-fadeInRight  { animation-name: sctb-fadeInRight;  }
/* Zooming */
.sctb-animated.is-animated.sctb-anim-zoomIn       { animation-name: sctb-zoomIn;       }
.sctb-animated.is-animated.sctb-anim-zoomInDown   { animation-name: sctb-zoomInDown;   }
.sctb-animated.is-animated.sctb-anim-zoomInUp     { animation-name: sctb-zoomInUp;     }
.sctb-animated.is-animated.sctb-anim-zoomInLeft   { animation-name: sctb-zoomInLeft;   }
.sctb-animated.is-animated.sctb-anim-zoomInRight  { animation-name: sctb-zoomInRight;  }
/* Bouncing */
.sctb-animated.is-animated.sctb-anim-bounceIn      { animation-name: sctb-bounceIn;      }
.sctb-animated.is-animated.sctb-anim-bounceInDown  { animation-name: sctb-bounceInDown;  }
.sctb-animated.is-animated.sctb-anim-bounceInUp    { animation-name: sctb-bounceInUp;    }
.sctb-animated.is-animated.sctb-anim-bounceInLeft  { animation-name: sctb-bounceInLeft;  }
.sctb-animated.is-animated.sctb-anim-bounceInRight { animation-name: sctb-bounceInRight; }
/* Sliding */
.sctb-animated.is-animated.sctb-anim-slideInDown  { animation-name: sctb-slideInDown;  }
.sctb-animated.is-animated.sctb-anim-slideInUp    { animation-name: sctb-slideInUp;    }
.sctb-animated.is-animated.sctb-anim-slideInLeft  { animation-name: sctb-slideInLeft;  }
.sctb-animated.is-animated.sctb-anim-slideInRight { animation-name: sctb-slideInRight; }
/* Rotating */
.sctb-animated.is-animated.sctb-anim-rotateIn           { animation-name: sctb-rotateIn;           }
.sctb-animated.is-animated.sctb-anim-rotateInDownLeft   { animation-name: sctb-rotateInDownLeft;   }
.sctb-animated.is-animated.sctb-anim-rotateInDownRight  { animation-name: sctb-rotateInDownRight;  }
.sctb-animated.is-animated.sctb-anim-rotateInUpLeft     { animation-name: sctb-rotateInUpLeft;     }
.sctb-animated.is-animated.sctb-anim-rotateInUpRight    { animation-name: sctb-rotateInUpRight;    }
/* Attention Seekers */
.sctb-animated.is-animated.sctb-anim-bounce      { animation-name: sctb-bounce;      }
.sctb-animated.is-animated.sctb-anim-flash       { animation-name: sctb-flash;       }
.sctb-animated.is-animated.sctb-anim-pulse       { animation-name: sctb-pulse;       }
.sctb-animated.is-animated.sctb-anim-rubberBand  { animation-name: sctb-rubberBand;  }
.sctb-animated.is-animated.sctb-anim-shake       { animation-name: sctb-shake;       }
.sctb-animated.is-animated.sctb-anim-headShake   { animation-name: sctb-headShake;   }
.sctb-animated.is-animated.sctb-anim-swing       { animation-name: sctb-swing;       }
.sctb-animated.is-animated.sctb-anim-tada        { animation-name: sctb-tada;        }
.sctb-animated.is-animated.sctb-anim-wobble      { animation-name: sctb-wobble;      }
.sctb-animated.is-animated.sctb-anim-jello       { animation-name: sctb-jello;       }
/* Light Speed */
.sctb-animated.is-animated.sctb-anim-lightSpeedIn { animation-name: sctb-lightSpeedIn; animation-timing-function: ease-out; }
/* Specials */
.sctb-animated.is-animated.sctb-anim-rollIn { animation-name: sctb-rollIn; }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.sctb-animated.sctb-anim-pending,
	.sctb-animated.is-animated {
		animation: none !important;
		opacity: 1 !important;
		transform: var(--sctb-transform, none) !important;
	}
}