lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/EditorNode.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="editor-node relative group outline-none transition-all duration-150" :class="nodeClasses"
+        @click.stop="select" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
+
+        <!-- Hover Label (shows on hover before selection) -->
+        <div v-if="isHovered && !isSelected"
+            class="absolute -top-5 left-0 bg-blue-500/80 text-white text-[9px] px-1.5 py-0.5 rounded font-bold uppercase tracking-wider z-20 pointer-events-none whitespace-nowrap">
+            {{ label || 'Element' }}
+        </div>
+
+        <!-- Selection Handle / Label (Top Left) -->
+        <div v-if="isSelected"
+            class="absolute -top-5 left-0 bg-blue-500 text-white text-[10px] px-1.5 py-0.5 rounded-t font-bold uppercase tracking-wider flex items-center gap-1 z-20">
+            <span>{{ label || 'Element' }}</span>
+        </div>
+
+        <!-- Slot for the actual content -->
+        <slot></slot>
+
+        <!-- Resize Handle (Right Edge for width adjustment) -->
+        <div v-if="isSelected && resizable" @mousedown.stop.prevent="startResize"
+            class="absolute top-0 right-0 w-2 h-full cursor-ew-resize bg-blue-500/50 hover:bg-blue-500 transition opacity-0 group-hover:opacity-100"
+            :class="{ 'opacity-100': isResizing }">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+
+const props = withDefaults(defineProps<{
+    path: string;
+    label?: string;
+    resizable?: boolean;
+}>(), {
+    resizable: false
+});
+
+const editor = useEditor();
+
+const isSelected = computed(() => editor.selection.value === props.path);
+const isHovered = ref(false);
+const isResizing = ref(false);
+
+// Dynamic classes for different states
+const nodeClasses = computed(() => {
+    if (isSelected.value) {
+        return 'ring-2 ring-blue-500 ring-offset-1 ring-offset-transparent z-20 bg-blue-500/5';
+    }
+    if (isHovered.value) {
+        return 'ring-2 ring-dashed ring-blue-400/60 z-10 cursor-pointer';
+    }
+    return 'hover:ring-2 hover:ring-dashed hover:ring-blue-400/40';
+});
+
+const select = () => {
+    editor.select(props.path);
+};
+
+const startResize = (event: MouseEvent) => {
+    isResizing.value = true;
+    const startX = event.clientX;
+
+    const onMouseMove = (e: MouseEvent) => {
+        const deltaX = e.clientX - startX;
+    };
+
+    const onMouseUp = () => {
+        isResizing.value = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+};
+</script>
+
+<style scoped>
+.editor-node {
+    min-height: 20px;
+}
+
+/* Dashed ring for hover state */
+.ring-dashed {
+    --tw-ring-offset-shadow: none;
+}
+</style>

package/src/components/studio/FieldEditor.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="space-y-1">
+        <label class="text-white/50 uppercase tracking-wider text-[10px] block">{{ friendlyLabel }}</label>
+
+        <!-- Icon Field - use IconPicker -->
+        <IconPicker v-if="isIconField" :model-value="String(value || '')"
+            @update:model-value="emit('update', fieldKey, $event)" />
+
+        <!-- Enum Select with friendly labels -->
+        <select v-else-if="enumOptions" :value="value"
+            @change="emit('update', fieldKey, ($event.target as HTMLSelectElement).value)"
+            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none">
+            <option v-for="opt in enumOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </select>
+
+        <!-- Boolean Toggle -->
+        <div v-else-if="typeof value === 'boolean'" class="flex items-center justify-between py-1">
+            <button @click="emit('update', fieldKey, !value)" class="w-10 h-5 rounded-full transition-colors relative"
+                :class="value ? 'bg-blue-600' : 'bg-[#333]'">
+                <span class="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform"
+                    :class="value ? 'left-5' : 'left-0.5'"></span>
+            </button>
+        </div>
+
+        <!-- Number Input -->
+        <input v-else-if="typeof value === 'number'" type="number" :value="value"
+            @input="emit('update', fieldKey, parseFloat(($event.target as HTMLInputElement).value))"
+            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
+
+        <!-- Color Input -->
+        <div v-else-if="isColorField" class="flex gap-2">
+            <input type="color" :value="String(value || '#ffffff')"
+                @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+                class="w-10 h-8 rounded border border-[#333] cursor-pointer bg-transparent" />
+            <input type="text" :value="value"
+                @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+                class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white font-mono text-xs focus:border-blue-500 focus:outline-none" />
+        </div>
+
+        <!-- Image URL with Preview -->
+        <div v-else-if="isImageField" class="space-y-2">
+            <input type="url" :value="value"
+                @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+                placeholder="https://example.com/image.jpg"
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
+            <div v-if="value" class="w-full h-16 rounded bg-[#1a1a1a] border border-[#333] overflow-hidden">
+                <img :src="String(value)" alt="Preview" class="w-full h-full object-cover" @error="onImageError" />
+            </div>
+        </div>
+
+        <!-- Long Text (textarea) -->
+        <textarea v-else-if="isLongText" :value="String(value || '')"
+            @input="emit('update', fieldKey, ($event.target as HTMLTextAreaElement).value)"
+            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none resize-none"
+            rows="3"></textarea>
+
+        <!-- Default String Input -->
+        <input v-else type="text" :value="value"
+            @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+            :placeholder="getPlaceholder(fieldKey)"
+            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import IconPicker from './IconPicker.vue';
+import { getFieldLabel, getValueOptions, VALUE_LABELS } from './fieldLabels';
+
+const props = defineProps<{
+    fieldKey: string;
+    value: any;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update', key: string, value: any): void;
+}>();
+
+// Friendly label from mapping
+const friendlyLabel = computed(() => getFieldLabel(props.fieldKey));
+
+// Field type detection
+const isIconField = computed(() => props.fieldKey === 'icon');
+
+const isColorField = computed(() => {
+    const colorFields = ['color', 'primaryColor', 'secondaryColor', 'backgroundColor', 'orbColor'];
+    return colorFields.includes(props.fieldKey);
+});
+
+const isImageField = computed(() => {
+    const imageFields = ['src', 'image', 'poster', 'background'];
+    return imageFields.includes(props.fieldKey) && typeof props.value === 'string';
+});
+
+const isLongText = computed(() => {
+    if (typeof props.value !== 'string') return false;
+    const longFields = ['text', 'description', 'desc', 'notes', 'subtitle', 'html', 'css'];
+    return longFields.includes(props.fieldKey) || props.value.length > 60;
+});
+
+// Enum options with friendly labels
+const enumOptions = computed(() => {
+    const options = getValueOptions(props.fieldKey);
+    if (options) return options;
+
+    // Fallback for legacy unmapped enums
+    const legacyEnums: Record<string, string[]> = {
+        'titleSize': ['lg', 'xl', '2xl', '3xl'],
+    };
+
+    if (legacyEnums[props.fieldKey]) {
+        return legacyEnums[props.fieldKey].map(v => ({ value: v, label: v.toUpperCase() }));
+    }
+
+    return null;
+});
+
+const getPlaceholder = (key: string): string => {
+    const placeholders: Record<string, string> = {
+        'action': 'button-click-action',
+        'href': 'https://example.com',
+        'alt': 'Image description',
+        'tag': 'Category or label',
+        'cta': 'Call to action text',
+    };
+    return placeholders[key] || '';
+};
+
+const onImageError = (e: Event) => {
+    const img = e.target as HTMLImageElement;
+    img.style.display = 'none';
+};
+</script>

package/src/components/studio/IconPicker.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="space-y-2">
+        <label class="text-white/50 uppercase tracking-wider text-[10px] block">{{ label }}</label>
+
+        <!-- Current Selection Display -->
+        <div class="flex items-center gap-2">
+            <div class="w-8 h-8 rounded bg-[#1a1a1a] border border-[#333] flex items-center justify-center text-lg">
+                <i :class="currentIconClass" class="text-white"></i>
+            </div>
+            <button @click="showPicker = !showPicker"
+                class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white text-left hover:border-blue-500 transition text-xs">
+                {{ modelValue || 'Select icon...' }}
+            </button>
+        </div>
+
+        <!-- Icon Picker Modal -->
+        <div v-if="showPicker" class="bg-[#111] border border-[#333] rounded-lg p-3 space-y-2">
+            <!-- Search -->
+            <input v-model="search" type="text" placeholder="Search icons..."
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white text-xs focus:border-blue-500 focus:outline-none" />
+
+            <!-- Icon Grid -->
+            <div class="grid grid-cols-6 gap-1 max-h-48 overflow-y-auto">
+                <button v-for="icon in filteredIcons" :key="icon" @click="selectIcon(icon)"
+                    class="w-8 h-8 rounded flex items-center justify-center hover:bg-blue-600 transition"
+                    :class="modelValue === icon ? 'bg-blue-600' : 'bg-[#1a1a1a]'" :title="icon">
+                    <i :class="`ph-thin ph-${icon}`" class="text-white text-sm"></i>
+                </button>
+            </div>
+
+            <!-- Common categories -->
+            <div class="flex flex-wrap gap-1 pt-2 border-t border-[#333]">
+                <button v-for="cat in categories" :key="cat.name" @click="search = cat.prefix"
+                    class="px-2 py-0.5 rounded text-[10px] bg-[#1a1a1a] text-white/70 hover:bg-[#333] hover:text-white">
+                    {{ cat.name }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+    modelValue: string;
+    label?: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
+
+const showPicker = ref(false);
+const search = ref('');
+
+// Common FontAwesome icons (50+)
+const iconList = [
+    // General
+    'star', 'heart', 'check', 'x', 'plus', 'minus', 'magnifying-glass', 'gear', 'house', 'user',
+    // Arrows
+    'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'caret-right', 'caret-left',
+    // Business
+    'briefcase', 'chart-line', 'chart-bar', 'currency-dollar', 'coins', 'wallet', 'buildings',
+    // Tech
+    'laptop', 'device-mobile', 'desktop', 'code', 'database', 'hard-drive', 'cloud', 'wifi-high',
+    // Communication
+    'envelope', 'phone', 'chat-centered', 'chat-dots', 'bell', 'paper-plane',
+    // Media
+    'image', 'video-camera', 'camera', 'play', 'pause', 'speaker-high', 'music-note',
+    // Objects
+    'lightbulb', 'lightning', 'fire', 'rocket', 'trophy', 'medal', 'flag', 'gift',
+    // Nature
+    'leaf', 'tree', 'sun', 'moon', 'globe', 'mountains',
+    // Security
+    'lock', 'lock-open', 'shield-check', 'key', 'eye', 'eye-slash',
+    // Actions
+    'download-simple', 'upload-simple', 'share', 'link', 'floppy-disk', 'pencil-simple', 'trash', 'copy',
+    // People
+    'users', 'user-plus', 'handshake', 'users-four',
+    // Misc
+    'magic-wand', 'sparkle', 'diamond', 'crown', 'infinity'
+];
+
+const categories = [
+    { name: 'All', prefix: '' },
+    { name: 'Arrows', prefix: 'arrow' },
+    { name: 'Business', prefix: 'chart' },
+    { name: 'Tech', prefix: 'code' },
+    { name: 'People', prefix: 'user' }
+];
+
+const filteredIcons = computed(() => {
+    if (!search.value) return iconList;
+    return iconList.filter(icon => icon.includes(search.value.toLowerCase()));
+});
+
+const currentIconClass = computed(() => {
+    if (!props.modelValue) return 'ph-thin ph-question';
+    if (props.modelValue.startsWith('ph-')) return `ph-thin ${props.modelValue}`;
+    return `ph-thin ph-${props.modelValue}`;
+});
+
+const selectIcon = (icon: string) => {
+    emit('update:modelValue', icon);
+    showPicker.value = false;
+    search.value = '';
+};
+</script>

package/src/components/studio/LayerItem.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="layer-item" :class="{ 'ml-3': depth > 0 }">
+        <!-- Node Header -->
+        <div class="flex items-center gap-1 py-1 px-2 rounded cursor-pointer transition-colors text-xs" :class="[
+            isSelected ? 'bg-blue-600 text-white' : 'text-white/70 hover:bg-white/10 hover:text-white'
+        ]" @click.stop="select">
+
+            <!-- Expand/Collapse (if has children) -->
+            <button v-if="hasChildren" @click.stop="toggleExpand"
+                class="w-4 h-4 flex items-center justify-center text-white/50 hover:text-white">
+                <i :class="expanded ? 'ph-thin ph-caret-down' : 'ph-thin ph-caret-right'" class="text-[8px]"></i>
+            </button>
+            <div v-else class="w-4"></div>
+
+            <!-- Type Icon -->
+            <i :class="typeIcon" class="text-[10px] opacity-70"></i>
+
+            <!-- Label -->
+            <span class="truncate flex-1">{{ label }}</span>
+        </div>
+
+        <!-- Children (Recursive) -->
+        <div v-if="expanded && hasChildren" class="border-l border-white/10 ml-2">
+            <draggable :list="childrenList" item-key="dragKey" :group="{ name: 'layers' }" @change="handleDragChange"
+                class="min-h-[8px]">
+                <template #item="{ element, index }">
+                    <LayerItem :data="element" :path="`${path}.${childrenKey}.${index}`" :depth="depth + 1" />
+                </template>
+            </draggable>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import draggable from 'vuedraggable';
+import { useEditor } from '../../composables/useEditor';
+
+const props = defineProps<{
+    data: any;
+    path: string;
+    depth?: number;
+}>();
+
+const depth = props.depth ?? 0;
+const editor = useEditor();
+
+const expanded = ref(true);
+const isSelected = computed(() => editor.selection.value === props.path);
+
+// Determine the type and label
+const label = computed(() => {
+    if (props.data?.type) return props.data.type;
+    if (props.data?.title) return props.data.title;
+    if (props.data?.text) return props.data.text.substring(0, 20) + '...';
+    return 'Element';
+});
+
+const typeIcon = computed(() => {
+    const iconMap: Record<string, string> = {
+        'title': 'ph-thin ph-text-h',
+        'text': 'ph-thin ph-text-align-left',
+        'image': 'ph-thin ph-image',
+        'video': 'ph-thin ph-video-camera',
+        'content': 'ph-thin ph-square',
+        'bullets': 'ph-thin ph-list-bullets',
+        'ordered': 'ph-thin ph-list-numbers',
+        'button': 'ph-thin ph-rectangle',
+        'flex': 'ph-thin ph-columns',
+        'half': 'ph-thin ph-layout',
+        'statement': 'ph-thin ph-quotes',
+    };
+    return iconMap[props.data?.type] || 'ph-thin ph-cube';
+});
+
+// Children logic
+const childrenKey = computed(() => {
+    if (props.data?.elements) return 'elements';
+    if (props.data?.items) return 'items';
+    if (props.data?.features) return 'features';
+    return null;
+});
+
+const hasChildren = computed(() => {
+    if (!childrenKey.value) return false;
+    const children = props.data[childrenKey.value];
+    return Array.isArray(children) && children.length > 0;
+});
+
+const childrenList = computed(() => {
+    if (!childrenKey.value) return [];
+    return props.data[childrenKey.value] || [];
+});
+
+const toggleExpand = () => {
+    expanded.value = !expanded.value;
+};
+
+const select = () => {
+    editor.select(props.path);
+};
+
+const handleDragChange = (event: any) => {
+    if (event.moved) {
+        const { oldIndex, newIndex } = event.moved;
+        editor.store.moveNode(`${props.path}.${childrenKey.value}`, oldIndex, newIndex);
+        editor.commit();
+    }
+};
+</script>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+    name: 'LayerItem'
+});
+</script>

package/src/components/studio/LuminaStudio.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="flex flex-col w-full h-screen bg-black text-white font-sans overflow-hidden">
+        <StudioToolbar />
+        <div class="flex flex-1 overflow-hidden relative">
+            <StudioSidebar />
+            <EditorCanvas />
+            <div class="w-72 bg-[#111] border-l border-[#333] flex flex-col">
+                <StudioInspector />
+            </div>
+
+            <!-- Floating Slide Navigator -->
+            <SlideNavigator />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+import { createEditor, EditorKey } from '../../composables/useEditor';
+import StudioToolbar from './StudioToolbar.vue';
+import StudioSidebar from './StudioSidebar.vue';
+import StudioInspector from './StudioInspector.vue';
+import EditorCanvas from './EditorCanvas.vue';
+import SlideNavigator from './SlideNavigator.vue';
+
+// Initialize Editor State
+const editor = createEditor();
+provide(EditorKey, editor);
+
+</script>

package/src/components/studio/SaveSuccessModal.vue

@@ -0,0 +1,138 @@
+<template>
+    <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" @click="$emit('close')"></div>
+
+        <!-- Modal -->
+        <div
+            class="relative w-full max-w-md bg-[#1a1a1a] border border-[#333] rounded-xl shadow-2xl p-6 transform transition-all animate-in fade-in zoom-in-95 duration-200">
+
+            <!-- Close Button -->
+            <button @click="$emit('close')"
+                class="absolute top-4 right-4 text-white/40 hover:text-white transition-colors">
+                <i class="ph-thin ph-x text-lg"></i>
+            </button>
+
+            <!-- Content -->
+            <div class="text-center mb-6">
+                <div
+                    class="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-green-500/20">
+                    <i class="ph-thin ph-check text-green-500 text-2xl"></i>
+                </div>
+                <h2 class="text-xl font-bold text-white mb-2">
+                    {{ isUpdate ? 'Presentation Updated!' : 'Presentation Saved!' }}
+                </h2>
+                <p class="text-white/60 text-sm">
+                    {{ isUpdate
+                        ? 'Your changes have been successfully synced to the cloud.'
+                        : 'Your presentation has been securely saved to the cloud.'
+                    }}
+                </p>
+            </div>
+
+            <!-- IDs & Links -->
+            <div class="space-y-4">
+                <!-- Deck ID -->
+                <div class="space-y-1.5">
+                    <label class="text-xs text-white/40 font-semibold uppercase tracking-wider">Presentation ID</label>
+                    <div class="flex gap-2">
+                        <code
+                            class="flex-1 bg-[#222] border border-[#333] rounded-lg px-3 py-2 text-sm text-white/80 font-mono truncate select-all">
+              {{ deckId }}
+            </code>
+                        <button @click="copyToClipboard(deckId, 'id')"
+                            class="px-3 py-2 bg-[#333] hover:bg-[#444] border border-[#444] rounded-lg text-white/80 transition-all active:scale-95 flex items-center justify-center min-w-[40px]"
+                            :title="copiedId ? 'Copied!' : 'Copy ID'">
+                            <i :class="copiedId ? 'ph-thin ph-check text-green-500' : 'ph-thin ph-copy'"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- View Link -->
+                <div class="space-y-1.5">
+                    <label class="text-xs text-white/40 font-semibold uppercase tracking-wider">Share Link</label>
+                    <div class="flex gap-2">
+                        <code
+                            class="flex-1 bg-[#222] border border-[#333] rounded-lg px-3 py-2 text-sm text-blue-400/80 font-mono truncate select-all">
+              {{ shareUrl }}
+            </code>
+                        <button @click="copyToClipboard(shareUrl, 'link')"
+                            class="px-3 py-2 bg-[#333] hover:bg-[#444] border border-[#444] rounded-lg text-white/80 transition-all active:scale-95 flex items-center justify-center min-w-[40px]"
+                            :title="copiedLink ? 'Copied!' : 'Copy Link'">
+                            <i :class="copiedLink ? 'ph-thin ph-check text-green-500' : 'ph-thin ph-copy'"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="mt-8 flex items-center gap-3">
+                <a :href="shareUrl" target="_blank"
+                    class="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-medium py-2 px-4 rounded-lg text-sm text-center transition-colors flex items-center justify-center gap-2">
+                    <i class="ph-thin ph-arrow-square-out"></i> Open Presentation
+                </a>
+                <button @click="$emit('close')"
+                    class="px-4 py-2 bg-[#222] hover:bg-[#333] border border-[#333] text-white/80 rounded-lg text-sm font-medium transition-colors">
+                    Done
+                </button>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+    isOpen: boolean;
+    deckId: string;
+    isUpdate?: boolean;
+}>();
+
+defineEmits(['close']);
+
+const copiedId = ref(false);
+const copiedLink = ref(false);
+
+const shareUrl = computed(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('deckId', props.deckId);
+    url.searchParams.delete('mode');
+    return url.toString();
+});
+
+const copyToClipboard = async (text: string, type: 'id' | 'link') => {
+    try {
+        await navigator.clipboard.writeText(text);
+        if (type === 'id') {
+            copiedId.value = true;
+            setTimeout(() => copiedId.value = false, 2000);
+        } else {
+            copiedLink.value = true;
+            setTimeout(() => copiedLink.value = false, 2000);
+        }
+    } catch (err) {
+        console.error('Failed to copy:', err);
+    }
+};
+</script>
+
+<style scoped>
+/* Simple enter animation */
+.animate-in {
+    animation: enter 0.2s ease-out;
+}
+
+@keyframes enter {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+</style>