@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/pyramid/square-pyramid/SquarePyramidStack.vue

@@ -9,24 +9,23 @@ import {
   type VNode,
 } from 'vue';
 
+import { PYRAMID_DOT_GAP_PX } from '../../../utils/pyramid/shared';
 import {
   DEFAULT_SQUARE_PYRAMID_COLOR,
   DEFAULT_SQUARE_PYRAMID_STACK_COLORS,
   SQUARE_PYRAMID_ROOT_KEY,
   SQUARE_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/square-pyramid';
-import SquarePyramidStackContent from './SquarePyramidStackContent.vue';
-import SquarePyramidStackTitle from './SquarePyramidStackTitle.vue';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'SquarePyramidStack',
+  inheritAttrs: false,
 });
 
 export interface ISquarePyramidStackProps {
   readonly index?: number;
   readonly step?: string | number;
-  readonly title?: string;
-  readonly content?: string;
   readonly color?: string;
   readonly active?: boolean;
   readonly connectorWidth?: number;
@@ -35,8 +34,6 @@ export interface ISquarePyramidStackProps {
 const props = withDefaults(defineProps<ISquarePyramidStackProps>(), {
   index: undefined,
   step: undefined,
-  title: undefined,
-  content: undefined,
   color: undefined,
   active: undefined,
   connectorWidth: undefined,
@@ -55,13 +52,16 @@ interface INamedComponent {
 function hasComponentName(type: unknown, targetName: string): boolean {
   if (typeof type === 'object' && type !== null) {
     const comp = type as INamedComponent['type'];
+
     return comp?.name === targetName || comp?.displayName === targetName;
   }
+
   return false;
 }
 
 function flattenVNodes(nodes: VNode[]): VNode[] {
   const result: VNode[] = [];
+
   for (const node of nodes) {
     if (node.type === Fragment && Array.isArray(node.children)) {
       result.push(...flattenVNodes(node.children as VNode[]));
@@ -69,6 +69,7 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
       result.push(node);
     }
   }
+
   return result;
 }
 
@@ -76,19 +77,20 @@ const defaultNodes = computed(() => {
   if (!slots.default) {
     return [];
   }
+
   return flattenVNodes(slots.default());
 });
 
 const slottedTitle = computed(() => {
-  return defaultNodes.value.find((node) =>
-    hasComponentName(node.type, 'SquarePyramidStackTitle'),
-  );
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'SquarePyramidStackHeading');
+  });
 });
 
 const slottedContent = computed(() => {
-  return defaultNodes.value.find((node) =>
-    hasComponentName(node.type, 'SquarePyramidStackContent'),
-  );
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'SquarePyramidStackContent');
+  });
 });
 
 const stackToken = Symbol();
@@ -107,6 +109,7 @@ const resolvedIndex = computed<number>(() => {
   if (props.index !== undefined) {
     return Number(props.index);
   }
+
   return registration?.index.value ?? 0;
 });
 
@@ -114,9 +117,11 @@ const isActive = computed<boolean>(() => {
   if (props.active !== undefined) {
     return props.active;
   }
+
   if (!rootContext) {
     return false;
   }
+
   return rootContext.activeIndex.value === resolvedIndex.value;
 });
 
@@ -124,6 +129,7 @@ const resolvedStep = computed(() => {
   if (props.step !== undefined) {
     return props.step;
   }
+
   return String(resolvedIndex.value + 1).padStart(2, '0');
 });
 
@@ -131,6 +137,7 @@ const layerGeometry = computed(() => {
   if (!rootContext) {
     return undefined;
   }
+
   return rootContext.geo.value.layers[resolvedIndex.value];
 });
 
@@ -138,7 +145,9 @@ const posY = computed(() => {
   if (!layerGeometry.value) {
     return 0;
   }
+
   const geo = layerGeometry.value;
+
   return (
     geo.slabCenterY ?? Number((geo.cy + (geo.slabHeight ?? 0) / 2).toFixed(2))
   );
@@ -150,8 +159,10 @@ const leftWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    return Math.max(180, Math.round(cx - rx - 40));
+
+    return Math.max(180, Math.round(cx - rx - PYRAMID_DOT_GAP_PX));
   }
+
   return DOT_POSITION_X;
 });
 
@@ -161,27 +172,29 @@ const rightWingWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    const dotRightX = cx + rx + 40;
+    const dotRightX = cx + rx + PYRAMID_DOT_GAP_PX;
     const containerW = 960;
+
     return Math.max(rightWidth.value + 20, Math.round(containerW - dotRightX));
   }
-  return rightWidth.value + 40;
-});
 
-const rightOffset = computed(
-  () => rootContext?.contentRightOffsetPx.value ?? 0,
-);
+  return rightWidth.value + PYRAMID_DOT_GAP_PX;
+});
 
 const resolvedColor = computed<string>(() => {
   if (effectiveColor.value) {
     return effectiveColor.value;
   }
+
+  const stackIndex =
+    Math.abs(resolvedIndex.value) % DEFAULT_SQUARE_PYRAMID_STACK_COLORS.length;
+  const stackColor =
+    DEFAULT_SQUARE_PYRAMID_STACK_COLORS[stackIndex] ??
+    DEFAULT_SQUARE_PYRAMID_COLOR;
+
   return (
     rootContext?.getLayerColor(resolvedIndex.value) ??
-    DEFAULT_SQUARE_PYRAMID_STACK_COLORS[
-      Math.abs(resolvedIndex.value) % DEFAULT_SQUARE_PYRAMID_STACK_COLORS.length
-    ] ??
-    DEFAULT_SQUARE_PYRAMID_COLOR
+    `var(--alpha-square-pyramid-stack-${stackIndex + 1}-color, ${stackColor})`
   );
 });
 
@@ -207,6 +220,10 @@ const connectorWidth = computed(() => {
   return Math.max(20, rightWingWidth.value - rightWidth.value);
 });
 
+const stepIndex = computed(() => {
+  return resolvedIndex.value;
+});
+
 provide(SQUARE_PYRAMID_STACK_KEY, {
   index: resolvedIndex,
   isActive,
@@ -217,17 +234,23 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
   connectorWidth,
   setActive: handleStackClick,
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-square-pyramid-stack absolute inset-x-0 pointer-events-none select-none flex items-center justify-between',
+);
 </script>
 
 <template>
   <div
-    class="alpha-square-pyramid-stack absolute inset-x-0 pointer-events-none select-none flex items-center justify-between"
-    :class="[
-      isActive
-        ? 'alpha-square-pyramid-stack--active'
-        : 'alpha-square-pyramid-stack--inactive',
-      `alpha-square-pyramid-stack--${resolvedIndex}`,
-    ]"
+    v-bind="forwardedAttrs()"
+    :class="
+      className([
+        isActive
+          ? 'alpha-square-pyramid-stack--active'
+          : 'alpha-square-pyramid-stack--inactive',
+        `alpha-square-pyramid-stack--${resolvedIndex}`,
+      ])
+    "
     :data-index="resolvedIndex"
     :data-active="isActive"
     :style="{
@@ -236,13 +259,17 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
     }"
   >
     <!-- Left Wing: Title Pill (150px) -->
-    <div
-      class="alpha-square-pyramid-stack__left flex-shrink-0 flex items-center justify-start pointer-events-auto cursor-pointer"
+    <button
+      type="button"
+      class="alpha-square-pyramid-stack__left shrink-0 flex items-center justify-start pointer-events-auto cursor-pointer bg-transparent border-0 p-0 m-0 appearance-none"
+      :disabled="!rootContext?.interactive.value"
+      :aria-label="`Select stage ${resolvedStep}`"
       :class="[
         `alpha-square-pyramid-stack__left--${resolvedIndex}`,
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
         width: `${leftWidth}px`,
         minWidth: `${leftWidth}px`,
         maxWidth: `${leftWidth}px`,
@@ -251,35 +278,28 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
       @click="handleStackClick"
     >
       <component :is="slottedTitle" v-if="slottedTitle" />
-      <SquarePyramidStackTitle
-        v-else
-        :step="resolvedStep"
-        :title="props.title || `Stage ${resolvedStep}`"
-        :connector-width="props.connectorWidth"
-      />
-    </div>
-    <!-- Right Wing: Dot + Connector + Content Card (40px from slab) -->
-    <div
-      class="alpha-square-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
+    </button>
+    <!-- Right Wing: Dot + Connector + Content Card (10px from slab) -->
+    <button
+      type="button"
+      class="alpha-square-pyramid-stack__right shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer bg-transparent border-0 p-0 m-0 appearance-none"
+      :disabled="!rootContext?.interactive.value"
+      :aria-label="`Select stage ${resolvedStep}`"
       :class="[
         `alpha-square-pyramid-stack__right--${resolvedIndex}`,
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
         width: `${rightWingWidth}px`,
         minWidth: `${rightWidth}px`,
         maxWidth: `${rightWingWidth}px`,
-        marginRight: rightOffset ? `${rightOffset}px` : undefined,
         opacity: !hasActiveStack || isActive ? 1 : 0.65,
       }"
       @click="handleStackClick"
     >
       <component :is="slottedContent" v-if="slottedContent" />
-      <SquarePyramidStackContent
-        v-else
-        :content="props.content || 'Layer details and operational description.'"
-      />
-    </div>
+    </button>
   </div>
 </template>
 
@@ -291,37 +311,24 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
 
 .alpha-square-pyramid-stack__left,
 .alpha-square-pyramid-stack__right {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--0 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 100ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--1 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 180ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--2 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 260ms) both;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--3 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 340ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--4 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 420ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--5 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 500ms) both;
+.alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__left {
+  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(
+      --wing-delay,
+      calc(var(--alpha-square-pyramid-start-delay, 0ms) + 460ms)
+    )
+    both;
 }
 
 @keyframes alpha-pyramid-left-in {
   0% {
     opacity: 0;
-    transform: translateX(-12px);
+    transform: translateX(-10px);
   }
   100% {
     opacity: 1;
@@ -329,34 +336,19 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
   }
 }
 
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--0 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 120ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--1 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 200ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--2 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 280ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--3 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 360ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--4 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 440ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--5 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 520ms) both;
+.alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__right {
+  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(
+      --wing-delay,
+      calc(var(--alpha-square-pyramid-start-delay, 0ms) + 470ms)
+    )
+    both;
 }
 
 @keyframes alpha-pyramid-right-in {
   0% {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(10px);
   }
   100% {
     opacity: 1;

package/components/pyramid/square-pyramid/SquarePyramidStackContent.vue

@@ -6,19 +6,19 @@ import {
   SQUARE_PYRAMID_ROOT_KEY,
   SQUARE_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/square-pyramid';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'SquarePyramidStackContent',
+  inheritAttrs: false,
 });
 
 export interface ISquarePyramidStackContentProps {
-  readonly content?: string;
   readonly color?: string;
   readonly connectorWidth?: number;
 }
 
 const props = withDefaults(defineProps<ISquarePyramidStackContentProps>(), {
-  content: undefined,
   color: undefined,
   connectorWidth: undefined,
 });
@@ -53,13 +53,23 @@ const isActive = computed(() => {
   return stackContext?.isActive.value ?? false;
 });
 
+const isAnimated = computed(() => {
+  return rootContext?.animation.value ?? false;
+});
+
+const stepIndex = computed(() => {
+  return stackContext?.index.value ?? 0;
+});
+
 const contentWidth = computed(() => rootContext?.contentWidthPx.value ?? 240);
 
 const deltaY = computed(() => {
   if (stackContext?.deltaY?.value !== undefined) {
     return stackContext.deltaY.value;
   }
+
   const idx = stackContext?.index.value ?? 0;
+
   return rootContext?.getCardDeltaY?.(idx) ?? 0;
 });
 
@@ -69,9 +79,11 @@ const connectorWidth = computed(() => {
   if (props.connectorWidth !== undefined) {
     return props.connectorWidth;
   }
+
   if (stackContext?.connectorWidth?.value !== undefined) {
     return stackContext.connectorWidth.value;
   }
+
   return measuredConnectorWidth.value || 40;
 });
 
@@ -90,9 +102,16 @@ const svgTop = computed(() => {
 
 const connectorPath = computed(() => {
   const w = connectorWidth.value;
+
   return createPyramidConnectorPath(
-    { x: 0, y: 0 },
-    { x: w, y: effectiveDeltaY.value },
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: w,
+      y: effectiveDeltaY.value,
+    },
   );
 });
 
@@ -101,31 +120,49 @@ const stackColor = computed(() => {
     props.color ??
     stackContext?.color?.value ??
     rootContext?.color.value ??
-    '#3b82f6'
+    'var(--alpha-square-pyramid-stack-content-accent)'
   );
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'alpha-square-pyramid-stack-content rounded-xl p-2 px-2.5 text-[10px] leading-snug transition-all duration-300 border select-none box-border shrink-0',
+  isActive.value
+    ? 'alpha-square-pyramid-stack-content--active bg-(--alpha-square-pyramid-stack-content-border-active) text-(--alpha-square-pyramid-stack-content-active)'
+    : 'alpha-square-pyramid-stack-content--default bg-(--alpha-square-pyramid-stack-content-border) text-(--alpha-square-pyramid-stack-content)',
+]);
 </script>
 
 <template>
-  <div class="alpha-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible">
+  <div
+    class="alpha-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible"
+    :style="{
+      '--content-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+    }"
+  >
     <!-- Scalable Line between Dot and Content Card (always at least 20px) -->
     <div
       ref="connectorRef"
-      class="alpha-square-pyramid-stack-content__connector flex-1 flex items-center min-w-[20px] pointer-events-none relative overflow-visible h-0"
+      class="alpha-square-pyramid-stack-content__connector flex-1 flex items-center min-w-5 pointer-events-none relative overflow-visible h-0"
     >
       <div
-        class="alpha-square-pyramid-stack-content__dot absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 pointer-events-auto"
+        class="alpha-square-pyramid-stack-content__dot absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full shrink-0 transition-all duration-300 pointer-events-auto"
+        :class="{
+          'alpha-square-pyramid-stack-content__dot--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
             ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
+            : `0 0 2px color-mix(in srgb, ${stackColor} 50%, transparent)`,
         }"
       />
       <!-- Straight horizontal line when deltaY is 0 -->
       <div
         v-if="!effectiveDeltaY"
-        class="alpha-square-pyramid-stack-content__line absolute left-0 top-0 w-full h-[1px] -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        class="alpha-square-pyramid-stack-content__line absolute left-0 top-0 w-full h-px -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        :class="{
+          'alpha-square-pyramid-stack-content__line--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           opacity: isActive ? 1 : 0.65,
@@ -133,6 +170,7 @@ const stackColor = computed(() => {
       />
       <!-- Zigzag SVG connector when deltaY !== 0 -->
       <svg
+        aria-hidden="true"
         v-else
         class="alpha-square-pyramid-stack-content__line-svg absolute left-0 pointer-events-none overflow-visible"
         :width="connectorWidth"
@@ -146,12 +184,16 @@ const stackColor = computed(() => {
       >
         <path
           class="alpha-square-pyramid-stack-content__line transition-all duration-300"
+          :class="{
+            'alpha-square-pyramid-stack-content__line--svg-animated': isAnimated,
+          }"
           :d="connectorPath"
           fill="none"
           :stroke="stackColor"
           stroke-width="1.25"
           stroke-linecap="round"
           stroke-linejoin="round"
+          pathLength="1"
           :style="{
             opacity: isActive ? 1 : 0.65,
           }"
@@ -160,35 +202,30 @@ const stackColor = computed(() => {
     </div>
     <!-- Content Card -->
     <div
-      class="alpha-square-pyramid-stack-content rounded-xl p-2 px-2.5 transition-all duration-300 border select-none box-border flex-shrink-0"
-      :class="[
-        isActive
-          ? 'alpha-square-pyramid-stack-content--active'
-          : 'alpha-square-pyramid-stack-content--default',
-      ]"
+      v-bind="forwardedAttrs()"
+      :class="
+        className({
+          'alpha-square-pyramid-stack-content--animated': isAnimated,
+        })
+      "
       :style="{
         width: `${contentWidth}px`,
         minWidth: `${contentWidth}px`,
         maxWidth: `${contentWidth}px`,
         boxSizing: 'border-box',
         borderColor: stackColor,
-        backgroundColor: isActive
-          ? 'rgba(255, 255, 255, 0.95)'
-          : 'rgba(255, 255, 255, 0.85)',
         boxShadow: isActive
-          ? `0 4px 14px ${stackColor}26`
+          ? `0 4px 14px color-mix(in srgb, ${stackColor} 15%, transparent)`
           : 'none',
+        '--card-transform': deltaY ? `translateY(${deltaY}px)` : 'none',
         transform: deltaY ? `translateY(${deltaY}px)` : undefined,
       }"
     >
-      <div
-        class="text-[10px] leading-snug transition-colors duration-300 break-words line-clamp-3"
-        :style="{
-          color: isActive ? '#0f172a' : '#475569',
-        }"
+      <p
+        class="text-[10px] transition-colors duration-300 wrap-break-word line-clamp-3"
       >
-        <slot>{{ props.content }}</slot>
-      </div>
+        <slot />
+      </p>
     </div>
   </div>
 </template>
@@ -201,4 +238,78 @@ const stackColor = computed(() => {
 .alpha-square-pyramid-stack-content--active {
   backdrop-filter: blur(8px);
 }
+
+.alpha-square-pyramid-stack-content__dot--animated {
+  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--content-delay) both;
+}
+
+@keyframes alpha-pyramid-dot-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.alpha-square-pyramid-stack-content__line--animated {
+  transform-origin: left center;
+  animation: alpha-pyramid-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1)
+    calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-line-draw {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(1);
+  }
+}
+
+.alpha-square-pyramid-stack-content__line--svg-animated {
+  stroke-dasharray: 1;
+  animation: alpha-pyramid-svg-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1)
+    calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-svg-line-draw {
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  2% {
+    opacity: 1;
+    stroke-dashoffset: 1;
+  }
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+.alpha-square-pyramid-stack-content--animated {
+  animation: alpha-pyramid-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--content-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-card-in {
+  0% {
+    opacity: 0;
+    transform: var(--card-transform, none) translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: var(--card-transform, none) translateX(0);
+  }
+}
 </style>