* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
--sakura: #FFB7C5;
--sakura-dark: #FF69B4;
--red: #C73E1D;
--dark: #0A0E27;
--dark-blue: #16213E;
--text: #E8E8E8;
--text-light: #A0A0A0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--dark);
color: var(--text);
}
/* Hero Section - Full Screen */
.hero {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0A0E27 0%, #16213E 50%, #1a2a4e 100%);
}
/* Background Elements */
.hero::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(255, 183, 197, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(199, 62, 29, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 105, 180, 0.08) 0%, transparent 60%);
animation: backgroundMove 20s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 183, 197, 0.03) 2px, rgba(255, 183, 197, 0.03) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 183, 197, 0.03) 2px, rgba(255, 183, 197, 0.03) 4px);
background-size: 80px 80px;
opacity: 0.3;
}
/* Geometric Shapes Background */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at top left, rgba(255, 183, 197, 0.1), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(199, 62, 29, 0.08), transparent 50%),
radial-gradient(circle at 30% 50%, rgba(255, 105, 180, 0.06), transparent 40%);
filter: blur(60px);
}
/* Content */
.content {
max-width: 900px;
text-align: center;
z-index: 10;
position: relative;
padding: 2rem;
}
/* Title */
h1 {
font-size: 6.5rem;
background: linear-gradient(135deg, var(--sakura) 0%, var(--sakura-dark) 50%, var(--red) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 5s ease infinite;
margin-bottom: 1.5rem;
font-weight: 900;
letter-spacing: -3px;
text-shadow: 0 0 80px rgba(255, 183, 197, 0.3);
}
.subtitle {
font-size: 2.2rem;
color: var(--text);
margin-bottom: 1.5rem;
letter-spacing: 4px;
font-weight: 300;
opacity: 0.95;
}
.tagline {
font-size: 1.3rem;
color: var(--text-light);
max-width: 650px;
margin: 0 auto 4rem;
line-height: 1.9;
}
/* Social Links */
.social-links {
display: flex;
gap: 2.5rem;
justify-content: center;
margin-bottom: 4rem;
}
.social-links a {
width: 75px;
height: 75px;
border-radius: 50%;
background: rgba(255, 183, 197, 0.08);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
color: var(--sakura);
font-size: 1.8rem;
border: 2px solid rgba(255, 183, 197, 0.25);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
overflow: hidden;
}
.social-links a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--sakura), var(--sakura-dark));
opacity: 0;
transition: opacity 0.4s ease;
}
.social-links a:hover::before {
opacity: 1;
}
.social-links a:hover {
transform: translateY(-12px) rotate(360deg) scale(1.1);
border-color: var(--sakura);
box-shadow: 0 15px 45px rgba(255, 183, 197, 0.5);
}
.social-links a i {
position: relative;
z-index: 1;
transition: color 0.3s ease;
}
.social-links a:hover i {
color: var(--dark);
}
/* Contact Info */
.contact-info {
display: flex;
gap: 4rem;
justify-content: center;
flex-wrap: wrap;
padding-top: 2rem;
border-top: 1px solid rgba(255, 183, 197, 0.15);
}
.contact-info a,
.contact-info span {
color: var(--text-light);
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1.5rem;
border-radius: 50px;
background: rgba(255, 183, 197, 0.05);
border: 1px solid rgba(255, 183, 197, 0.1);
}
.contact-info a:hover {
color: var(--sakura);
background: rgba(255, 183, 197, 0.1);
border-color: var(--sakura);
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(255, 183, 197, 0.2);
}
.contact-info i {
color: var(--sakura);
font-size: 1.2rem;
}
/* Decorative Elements */
.hero .content::before {
content: '旅';
position: absolute;
font-size: 35rem;
color: rgba(255, 183, 197, 0.03);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
font-weight: 900;
animation: rotate 60s linear infinite;
}
/* Floating Circles in Background */
.hero::after {
content: '';
position: absolute;
top: 10%;
right: 15%;
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid rgba(255, 183, 197, 0.08);
animation: float 25s ease-in-out infinite;
}
/* Animations */
@keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes backgroundMove {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(5deg);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-40px) rotate(5deg);
}
66% {
transform: translateY(20px) rotate(-5deg);
}
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 4rem;
letter-spacing: -2px;
}
.subtitle {
    font-size: 1.6rem;
    letter-spacing: 2px;
}

.tagline {
    font-size: 1.1rem;
}

.social-links {
    gap: 2rem;
}

.social-links a {
    width: 65px;
    height: 65px;
    font-size: 1.5rem;
}

.contact-info {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.content::before {
    font-size: 20rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 3rem;
}
.subtitle {
    font-size: 1.3rem;
}

.social-links {
    gap: 1.5rem;
}

.social-links a {
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
}

.content {
    padding: 1.5rem;
}

.content::before {
    font-size: 15rem;
    opacity: 0.5;
}
}
@media (min-width: 1600px) {
h1 {
font-size: 8rem;
}
.subtitle {
    font-size: 2.5rem;
}
}