/* cma-anim06e2.css — Fixed version of cma-anim06e.css for proper fade-left stagger animation
   包含: 06c(レイアウト中立/非varフォールバック) + 06d(方向ハードニング) + inline-block fix
   依存なし。これ1枚で完結。JSは既存の cma-anim06e.js のままで可。
*/

:root {
  --cma-duration: 1.6s;
  --cma-ease: cubic-bezier(.25, .8, .25, 1);
  --cma-tx: 0px;
  --cma-ty: 0px;
  --cma-scale: 1;
  --cma-rot: 0deg;
  --cma-filter: none;
  --cma-delay: 0s;
}

/* Base: Use inline-block to ensure transforms work on inline elements like span */
.cma {
  display: inline-block; /* Changed from initial to inline-block for spans */
  opacity: 0;
  transform: translate(0, 64px) scale(1) rotate(0deg);
  transition: opacity 1.6s, transform 1.6s;
  transition-delay: var(--cma-delay, 0s);
}
@supports (--cma-ty: 0px) {
  .cma {
    display: inline-block; /* Changed from initial to inline-block */
    opacity: 0;
    transform: translate(var(--cma-tx), var(--cma-ty)) scale(var(--cma-scale)) rotate(var(--cma-rot));
    filter: var(--cma-filter);
    transition-property: opacity, transform, filter;
    transition-duration: var(--cma-duration);
    transition-timing-function: var(--cma-ease);
    transition-delay: var(--cma-delay);
    will-change: opacity, transform, filter;
  }
}

/* Prevent unintended inline layout for headings, center images */
h1.cma, h2.cma, h3.cma, h4.cma, h5.cma, h6.cma { display: block; }
img.cma { display: block; margin-left: auto; margin-right: auto; }

.cma.cma-active {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
  filter: none;
}

/* Direction presets (variable path) */
.cma.fade-left  { --cma-tx: 64px !important; }
.cma.fade-right { --cma-tx: -64px !important; }
.cma.fade-up    { --cma-ty: 64px !important; }
.cma.fade-down  { --cma-ty: -64px !important; }

/* Ensure initial offset for non-active elements */
@supports (--cma-ty: 0px) {
  .cma.fade-left:not(.cma-active) {
    transform: translateX(64px) translateY(var(--cma-ty, 0)) scale(var(--cma-scale, 1)) rotate(var(--cma-rot, 0)) !important;
  }
  .cma.fade-right:not(.cma-active) {
    transform: translateX(-64px) translateY(var(--cma-ty, 0)) scale(var(--cma-scale, 1)) rotate(var(--cma-rot, 0)) !important;
  }
  .cma.fade-up:not(.cma-active) {
    transform: translateX(var(--cma-tx, 0)) translateY(64px) scale(var(--cma-scale, 1)) rotate(var(--cma-rot, 0)) !important;
  }
  .cma.fade-down:not(.cma-active) {
    transform: translateX(var(--cma-tx, 0)) translateY(-64px) scale(var(--cma-scale, 1)) rotate(var(--cma-rot, 0)) !important;
  }
}

/* Fallback for environments without CSS variables */
@supports not (--cma-ty: 0px) {
  .cma.fade-right:not(.cma-active) { transform: translate(-64px, 0) !important; }
  .cma.fade-left:not(.cma-active) { transform: translate(64px, 0) !important; }
  .cma.fade-up:not(.cma-active) { transform: translate(0, 64px) !important; }
  .cma.fade-down:not(.cma-active) { transform: translate(0, -64px) !important; }
}

/* Other presets (02 compatible) */
.cma.fade-in { --cma-tx: 0; --cma-ty: 0 }
.cma.zoom-in { --cma-scale: .9 }
.cma.zoom-out { --cma-scale: 1.1 }
.cma.tilt-left { --cma-rot: -6deg }
.cma.tilt-right { --cma-rot: 6deg }

.cma-di-0 { --cma-ty: 0px }
.cma-di-1 { --cma-ty: 64px }
.cma-di-2 { --cma-ty: 128px }
.cma-di-3 { --cma-ty: 256px }

.cma-ea-soft { --cma-ease: cubic-bezier(.25, .8, .25, 1) }
.cma-ea-natural { --cma-ease: cubic-bezier(.2, .6, .2, 1) }
.cma-ea-snappy { --cma-ease: cubic-bezier(.15, .85, .35, 1.25) }

.cma-de0 { --cma-delay: 0ms }
.cma-de1 { --cma-delay: 120ms }
.cma-de2 { --cma-delay: 240ms }
.cma-de3 { --cma-delay: 360ms }
.cma-de4 { --cma-delay: 480ms }
.cma-de5 { --cma-delay: 600ms }
.cma-de6 { --cma-delay: 720ms }
.cma-de7 { --cma-delay: 840ms }
.cma-de8 { --cma-delay: 960ms }
.cma-de9 { --cma-delay: 1080ms }

.cma-bl { --cma-filter: blur(5px) }
.cma-gs { --cma-filter: grayscale(100%) }

@media (prefers-reduced-motion: reduce) {
  .cma {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}