@layer gleam {
/**
 * GLEAM Entrances
 * Entrance animations — elements coming into view.
 */

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Pop — spring scale entrance with multi-stop settle */
@keyframes pop-in {
  0%   { opacity: 0;   transform: scale(var(--scale-start, 0.8)); }
  55%  { opacity: 1;   transform: scale(1.07); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  75%  {               transform: scale(0.97); }
  100% {               transform: scale(1); }
}

/* Reveal clip — directional clip-path with optional depth */
@keyframes reveal-up {
  from { clip-path: inset(100% 0 0 0); transform: translateY(var(--distance)); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes reveal-down {
  from { clip-path: inset(0 0 100% 0); transform: translateY(calc(var(--distance) * -1)); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes reveal-left {
  from { clip-path: inset(0 0 0 100%); transform: translateX(calc(var(--distance) * -1)); }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(0); }
}

@keyframes reveal-right {
  from { clip-path: inset(0 100% 0 0); transform: translateX(var(--distance)); }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(0); }
}

/* Roll — rotation + translate */
@keyframes roll-in {
  from { opacity: 0; transform: translateX(var(--distance)) rotate(var(--rotate-start, 120deg)); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Bounce-in — multi-stage scale with proper animation-timing-function per segment */
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3);       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20%  {             transform: scale3d(1.12, 1.12, 1.12);     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  40%  {             transform: scale3d(0.9, 0.9, 0.9);        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60%  { opacity: 1; transform: scale3d(1.04, 1.04, 1.04);     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  80%  {             transform: scale3d(0.98, 0.98, 0.98); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* Flip — uses --perspective variable (not hardcoded 400px) */
@keyframes flip-in-x {
  from { transform: perspective(var(--perspective)) rotate3d(1, 0, 0, 90deg); opacity: 0; animation-timing-function: ease-in; }
  40%  { transform: perspective(var(--perspective)) rotate3d(1, 0, 0, -18deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(var(--perspective)) rotate3d(1, 0, 0, 8deg);  opacity: 1; }
  80%  { transform: perspective(var(--perspective)) rotate3d(1, 0, 0, -3deg); }
  to   { transform: perspective(var(--perspective)) rotate3d(1, 0, 0, 0deg); }
}

@keyframes flip-in-y {
  from { transform: perspective(var(--perspective)) rotate3d(0, 1, 0, 90deg); opacity: 0; animation-timing-function: ease-in; }
  40%  { transform: perspective(var(--perspective)) rotate3d(0, 1, 0, -18deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(var(--perspective)) rotate3d(0, 1, 0, 8deg);  opacity: 1; }
  80%  { transform: perspective(var(--perspective)) rotate3d(0, 1, 0, -3deg); }
  to   { transform: perspective(var(--perspective)) rotate3d(0, 1, 0, 0deg); }
}

/* Blur in — opacity + blur reduction */
@keyframes blur-in {
  from { opacity: var(--opacity-start); filter: blur(var(--blur-start)); }
  to   { opacity: var(--opacity-end);   filter: blur(0); }
}

/* Blur slide — translate + blur + opacity */
@keyframes blur-slide {
  from { opacity: var(--opacity-start); transform: translateY(var(--distance)); filter: blur(var(--blur-start)); }
  to   { opacity: var(--opacity-end);   transform: translateY(0);               filter: blur(0); }
}

/* Rise — ultra-premium, glass-like: tiny distance, no visible overshoot */
@keyframes rise {
  from { opacity: 0;   transform: translateY(var(--distance)) scale(0.98); }
  60%  { opacity: 1; }
  to   {               transform: translateY(0)                scale(1); }
}

/* Spring up — assertive entrance with obvious spring overshoot */
@keyframes spring-up {
  0%   { opacity: 0;   transform: translateY(var(--distance)); }
  50%  { opacity: 1;   transform: translateY(calc(var(--distance) * -0.2)); }
  70%  {               transform: translateY(calc(var(--distance) * 0.05)); }
  100% {               transform: translateY(0); }
}

/* ============================================================
   ENTRANCE EFFECTS
   ============================================================ */

/* Fades */
.entrance-fade-in    { animation-name: fade; }
.entrance-fade-up    { animation-name: slide-v; --distance: 24px; }
.entrance-fade-down  { animation-name: slide-v; --distance: -24px; }
.entrance-fade-left  { animation-name: slide-h; --distance: 24px; }
.entrance-fade-right { animation-name: slide-h; --distance: -24px; }

/* Slides — full-distance scene transitions */
.entrance-slide-up    { animation-name: slide-v; --distance: 100%; --ease: var(--ease-snap); }
.entrance-slide-down  { animation-name: slide-v; --distance: -100%; --ease: var(--ease-snap); }
.entrance-slide-left  { animation-name: slide-h; --distance: 100%; --ease: var(--ease-snap); }
.entrance-slide-right { animation-name: slide-h; --distance: -100%; --ease: var(--ease-snap); }

/* Zoom */
.entrance-zoom-in      { animation-name: zoom; }
.entrance-pop-in       { animation-name: pop-in; --scale-start: 0.75; --duration: 500ms; }
.entrance-pop-in-soft  { animation-name: pop-in; --scale-start: 0.88; --duration: 450ms; }

/* Premium */
.entrance-rise         { animation-name: rise; --distance: 16px; --ease: var(--ease-out); --duration: 700ms; }
.entrance-spring-up    { animation-name: spring-up; --distance: 40px; --ease: linear; --duration: 600ms; }

/* Clip reveals */
.entrance-reveal-up    { animation-name: reveal-up;    --distance: 8px; }
.entrance-reveal-down  { animation-name: reveal-down;  --distance: 8px; }
.entrance-reveal-left  { animation-name: reveal-left;  --distance: 8px; }
.entrance-reveal-right { animation-name: reveal-right; --distance: 8px; }

/* Rolls */
.entrance-roll-in-left  { animation-name: roll-in; --distance: -100%; --rotate-start: -120deg; }
.entrance-roll-in-right { animation-name: roll-in; --distance: 100%; --rotate-start: 120deg; }

/* Bounce family */
.entrance-bounce-in       { animation-name: bounce-in; --duration: 750ms; }
.entrance-bounce-in-up    { animation-name: slide-v; --distance: 80px; --ease: var(--ease-bounce); }
.entrance-bounce-in-down  { animation-name: slide-v; --distance: -80px; --ease: var(--ease-bounce); }
.entrance-bounce-in-left  { animation-name: slide-h; --distance: 80px; --ease: var(--ease-bounce); }
.entrance-bounce-in-right { animation-name: slide-h; --distance: -80px; --ease: var(--ease-bounce); }

/* Flips */
.entrance-flip-in-x  { animation-name: flip-in-x; backface-visibility: visible; --duration: 700ms; }
.entrance-flip-in-y  { animation-name: flip-in-y; backface-visibility: visible; --duration: 700ms; }
.entrance-unfold-up  { animation-name: flip-in-x; transform-origin: top; --duration: 600ms; }
.entrance-unfold-down { animation-name: flip-in-x; transform-origin: bottom; --duration: 600ms; }

/* Blur */
.entrance-blur-in   { animation-name: blur-in;    --blur-start: 20px; --duration: 700ms; }
.entrance-blur-up   { animation-name: blur-slide;  --distance: 32px;  --blur-start: 12px; --duration: 700ms; }
.entrance-blur-down { animation-name: blur-slide;  --distance: -32px; --blur-start: 12px; --duration: 700ms; }

}