<template>
	<div class="bloom container flex flex-col align-center">
		<div
			class="title"
			ref="titleRef"
		>
			Bloom Your Creativity
		</div>

		<div
			class="season"
			ref="subtitleRef"
		>
			Theme of 2026
		</div>
		<div
			class="desc"
			ref="textRef"
		>
			Where imagination meets innovation, creativity blooms. This theme celebrates
			AI as a catalyst for fashion design, allowing your vision to flourish beyond
			traditional boundaries. Let your ideas blossom into extraordinary designs that
			merge human artistry with artificial intelligence.
		</div>
	</div>
</template>

<script setup lang="ts">
		import { ref, onMounted } from 'vue'
		import gsap from 'gsap'

		const titleRef = ref<HTMLElement | null>(null)
		const subtitleRef = ref<HTMLElement | null>(null)
		const textRef = ref<HTMLElement | null>(null)


</script>

<style scoped lang="less">
	.bloom {
		padding-top: 12.8rem;
		font-family: 'Poppins';
		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
		background-size: 100% 100%;
		.title {
			font-size: 4rem;
			color: #232323;
			margin-bottom: 2.4rem;
		}
		.logo {
			margin-bottom: 2.2rem;
		}
		.season {
			font-size: 3rem;
			color: #c7342c;
			margin-bottom: 6.6rem;
		}
		.desc {
			font-family: 'Arial';
			font-size: 2.8rem;
			color: #585858;
			text-align: center;
			padding: 0 21.5rem;
			line-height: 4.5rem;
			margin-bottom: 12.3rem;
		}
	}
</style>
