/* sora.day - Frutiger Aero Daily Timeline */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Sora (headings), Inter (body) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
}

html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--warm-white);
color:var(--deep-base);
line-height:1.6;
overflow-x:hidden;
}

/* Skeleton Loading Shimmer */
@keyframes shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.skeleton-loading{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(74,144,217,0.06) 25%,rgba(232,184,75,0.1) 50%,rgba(74,144,217,0.06) 75%);
background-size:800px 100%;
animation:shimmer 2s ease-in-out infinite;
border-radius:inherit;
z-index:2;
pointer-events:none;
}
.skeleton-loading.loaded{opacity:0;transition:opacity 0.6s ease}

/* Sky Decoration */
.sky-decoration{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
overflow:hidden;
}
@keyframes floatCloud1{
0%,100%{transform:translate(0,0)}
50%{transform:translate(30px,-15px)}
}
@keyframes floatCloud2{
0%,100%{transform:translate(0,0)}
50%{transform:translate(-20px,10px)}
}
@keyframes floatCloud3{
0%,100%{transform:translate(0,0)}
50%{transform:translate(15px,-8px)}
}

/* Glassmorphism base */
.glass-card{
position:relative;
background:rgba(245,240,232,0.7);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(74,144,217,0.15);
border-radius:16px;
overflow:hidden;
transition:transform 0.4s ease,box-shadow 0.4s ease;
}
.glass-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(74,144,217,0.15);
}

/* Header */
.site-header{
position:sticky;
top:0;
z-index:100;
}
.header-glass{
background:rgba(245,240,232,0.85);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid rgba(74,144,217,0.1);
}
.header-content{
max-width:1200px;
margin:0 auto;
padding:16px 32px;
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.logo-group{
display:flex;
align-items:center;
gap:12px;
}
.logo-icon{width:40px;height:40px}
.site-title{
font-family:'Sora',sans-serif;
font-size:1.5rem;
font-weight:700;
color:var(--deep-base);
letter-spacing:-0.02em;
}
.site-tagline{
font-size:0.875rem;
color:var(--muted-gray);
flex:1;
}
.current-time{
font-family:'Sora',sans-serif;
font-size:1.1rem;
font-weight:600;
color:var(--primary-blue);
background:rgba(74,144,217,0.08);
padding:6px 16px;
border-radius:20px;
}

/* Hero */
.hero{
position:relative;
z-index:1;
padding:60px 32px 80px;
}
.hero-glass{
max-width:900px;
margin:0 auto;
position:relative;
background:linear-gradient(135deg,rgba(74,144,217,0.08),rgba(232,184,75,0.06));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(74,144,217,0.12);
border-radius:24px;
padding:60px 48px;
overflow:hidden;
}
.hero-content{position:relative;z-index:2;text-align:center}
.hero-heading{
font-family:'Sora',sans-serif;
font-size:3rem;
font-weight:700;
color:var(--deep-base);
line-height:1.15;
margin-bottom:16px;
letter-spacing:-0.03em;
}
.hero-subtext{
font-size:1.15rem;
color:var(--muted-gray);
max-width:540px;
margin:0 auto 24px;
line-height:1.7;
}
.hero-date{
font-family:'Sora',sans-serif;
font-size:1rem;
font-weight:600;
color:var(--primary-blue);
background:rgba(74,144,217,0.1);
display:inline-block;
padding:8px 24px;
border-radius:24px;
}
.hero-gradient-orb{
position:absolute;
right:-60px;top:-60px;
width:260px;height:260px;
background:radial-gradient(circle,rgba(232,184,75,0.2),rgba(74,144,217,0.1),transparent);
border-radius:50%;
z-index:1;
animation:orbPulse 6s ease-in-out infinite;
}
@keyframes orbPulse{
0%,100%{transform:scale(1);opacity:0.7}
50%{transform:scale(1.15);opacity:1}
}

/* Section Headers */
.section-header{
text-align:center;
margin-bottom:48px;
}
.section-title{
font-family:'Sora',sans-serif;
font-size:2rem;
font-weight:700;
color:var(--deep-base);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.section-subtitle{
font-size:1rem;
color:var(--muted-gray);
}

/* Timeline */
.timeline-section{
position:relative;
z-index:1;
padding:40px 32px 80px;
}
.timeline{
max-width:800px;
margin:0 auto;
position:relative;
padding-left:60px;
}
.timeline-line{
position:absolute;
left:24px;top:0;bottom:0;
width:2px;
background:linear-gradient(to bottom,rgba(74,144,217,0.1),var(--primary-blue),rgba(232,184,75,0.3),var(--deep-base));
}
.timeline-entry{
position:relative;
margin-bottom:48px;
opacity:0;
transform:translateY(30px);
transition:opacity 0.7s ease,transform 0.7s ease;
}
.timeline-entry.visible{
opacity:1;
transform:translateY(0);
}
.timeline-marker{
position:absolute;
left:-60px;top:20px;
display:flex;
align-items:center;
gap:12px;
}
.marker-dot{
width:16px;height:16px;
background:var(--primary-blue);
border-radius:50%;
border:3px solid var(--warm-white);
box-shadow:0 0 0 2px var(--primary-blue);
position:relative;
z-index:2;
}
.marker-glow{
position:absolute;
left:-8px;top:-8px;
width:32px;height:32px;
background:radial-gradient(circle,rgba(74,144,217,0.3),transparent);
border-radius:50%;
animation:markerPulse 3s ease-in-out infinite;
}
@keyframes markerPulse{
0%,100%{transform:scale(1);opacity:0.5}
50%{transform:scale(1.5);opacity:0}
}
.marker-time{
font-family:'Sora',sans-serif;
font-size:0.8rem;
font-weight:600;
color:var(--primary-blue);
white-space:nowrap;
position:absolute;
left:24px;
}
.timeline-card{padding:0}
.card-content{padding:28px 32px}
.card-label{
display:inline-block;
font-family:'Sora',sans-serif;
font-size:0.75rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--primary-blue);
background:rgba(74,144,217,0.08);
padding:4px 12px;
border-radius:12px;
margin-bottom:12px;
}
.card-title{
font-family:'Sora',sans-serif;
font-size:1.4rem;
font-weight:700;
color:var(--deep-base);
margin-bottom:8px;
letter-spacing:-0.01em;
}
.card-text{
font-size:0.95rem;
color:var(--muted-gray);
line-height:1.7;
margin-bottom:16px;
}

/* Duotone Image Scenes */
.card-duotone-image{
width:100%;
height:140px;
border-radius:10px;
overflow:hidden;
position:relative;
}
.dawn-scene{
background:linear-gradient(135deg,rgba(232,184,75,0.35),rgba(74,144,217,0.25));
}
.morning-scene{
background:linear-gradient(135deg,rgba(74,144,217,0.3),rgba(232,184,75,0.2));
}
.midday-scene{
background:linear-gradient(180deg,rgba(74,144,217,0.35),rgba(245,240,232,0.25));
}
.afternoon-scene{
background:linear-gradient(225deg,rgba(232,184,75,0.35),rgba(74,144,217,0.15));
}
.sunset-scene{
background:linear-gradient(180deg,rgba(74,144,217,0.3),rgba(232,184,75,0.4),rgba(26,26,46,0.2));
}
.evening-scene{
background:linear-gradient(180deg,rgba(26,26,46,0.4),rgba(74,144,217,0.15));
}

/* Active phase highlighting */
.timeline-entry.active-phase .marker-dot{
background:var(--accent-gold);
box-shadow:0 0 0 2px var(--accent-gold),0 0 20px rgba(232,184,75,0.4);
}
.timeline-entry.active-phase .card-label{
background:rgba(232,184,75,0.15);
color:var(--accent-gold);
}

/* Featured Section */
.featured-section{
position:relative;
z-index:1;
padding:40px 32px 80px;
background:linear-gradient(180deg,transparent,rgba(74,144,217,0.03));
}
.featured-grid{
max-width:1000px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.featured-card{padding:0}
.featured-card .card-content{
padding:32px 24px;
text-align:center;
}
.featured-icon{
width:64px;height:64px;
margin:0 auto 20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.icon-sun{
background:radial-gradient(circle,rgba(232,184,75,0.2),rgba(232,184,75,0.05));
box-shadow:0 0 30px rgba(232,184,75,0.15);
}
.icon-sun::before{
content:'';
width:28px;height:28px;
background:var(--accent-gold);
border-radius:50%;
display:block;
box-shadow:0 0 15px rgba(232,184,75,0.4);
}
.icon-star{
background:radial-gradient(circle,rgba(74,144,217,0.2),rgba(74,144,217,0.05));
}
.icon-star::before{
content:'';
width:24px;height:24px;
background:var(--primary-blue);
clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
display:block;
}
.icon-wave{
background:radial-gradient(circle,rgba(108,117,125,0.15),rgba(108,117,125,0.03));
}
.icon-wave::before{
content:'~';
font-size:2rem;
color:var(--muted-gray);
font-weight:700;
display:block;
}
.featured-title{
font-family:'Sora',sans-serif;
font-size:1.15rem;
font-weight:600;
color:var(--deep-base);
margin-bottom:8px;
}
.featured-text{
font-size:0.9rem;
color:var(--muted-gray);
line-height:1.65;
}

/* Footer */
.site-footer{
position:relative;
z-index:1;
}
.footer-glass{
background:rgba(26,26,46,0.95);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.footer-content{
max-width:800px;
margin:0 auto;
padding:48px 32px;
text-align:center;
}
.footer-brand{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:16px;
}
.footer-name{
font-family:'Sora',sans-serif;
font-size:1.2rem;
font-weight:600;
color:var(--warm-white);
}
.footer-text{
font-size:0.9rem;
color:rgba(245,240,232,0.5);
margin-bottom:20px;
}
.footer-divider{
width:60px;height:2px;
background:linear-gradient(90deg,var(--primary-blue),var(--accent-gold));
margin:0 auto 20px;
border-radius:1px;
}
.footer-copyright{
font-size:0.8rem;
color:rgba(245,240,232,0.35);
}

/* Responsive */
@media(max-width:768px){
.header-content{
padding:12px 20px;
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.site-tagline{display:none}
.hero{padding:32px 20px 48px}
.hero-glass{padding:36px 24px}
.hero-heading{font-size:2rem}
.hero-subtext{font-size:1rem}
.timeline-section{padding:24px 16px 48px}
.timeline{padding-left:48px}
.timeline-marker{left:-48px}
.card-content{padding:20px}
.featured-grid{grid-template-columns:1fr;gap:16px}
.featured-section{padding:24px 20px 48px}
.section-title{font-size:1.5rem}
}