/* DDAZZL.com - Evolved Minimal / Pastoral Romantic / Celestial */
/* Colors: #4C9A7E #C9A84C #F5F0E8 #2C2824 #FFFDF5 #6B4C9A #EDE7DC */
/* Fonts: Caveat, Libre Baskerville, Space Mono */

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

:root{
--gold:#C9A84C;
--dark:#2C2824;
--cream:#FFFDF5;
--warm-cream:#F5F0E8;
--light-warm:#EDE7DC;
--green:#4C9A7E;
--purple:#6B4C9A;
--font-heading:'Caveat',cursive;
--font-body:'Libre Baskerville',serif;
--font-mono:'Space Mono',monospace;
--baseline:64px;
}

html{
scroll-behavior:smooth;
}

body{
font-family:var(--font-body);
background-color:var(--cream);
color:var(--dark);
overflow-x:hidden;
line-height:1.75;
}

/* Marble Overlay */
#marble-overlay{
position:fixed;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
z-index:0;
opacity:0.08;
background:
  radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.15) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(107,76,154,0.1) 0%, transparent 40%),
  radial-gradient(ellipse at 60% 80%, rgba(76,154,126,0.1) 0%, transparent 45%),
  linear-gradient(135deg, rgba(201,168,76,0.05) 0%, transparent 40%, rgba(237,231,220,0.1) 60%, transparent 100%),
  linear-gradient(45deg, transparent 30%, rgba(201,168,76,0.03) 50%, transparent 70%),
  linear-gradient(225deg, rgba(245,240,232,0.15) 0%, transparent 50%);
background-size:100% 100%, 100% 100%, 100% 100%, 200% 200%, 150% 150%, 100% 100%;
}

/* Scroll Container */
.scroll-container{
position:relative;
z-index:1;
scroll-snap-type:y proximity;
}

/* Sections */
.section{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:calc(var(--baseline) * 2) calc(var(--baseline));
position:relative;
scroll-snap-align:start;
}

/* Annotations */
.annotation{
font-family:var(--font-mono);
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold);
opacity:0.7;
}

/* Body Text */
.body-text{
font-family:var(--font-body);
font-size:18px;
line-height:1.75;
color:var(--dark);
max-width:580px;
margin-bottom:1.5em;
}

/* Section Title */
.section-title{
font-family:var(--font-heading);
font-size:64px;
font-weight:400;
line-height:1.1;
color:var(--dark);
margin-bottom:0.5em;
}

/* HERO */
.section-hero{
background:linear-gradient(180deg, var(--cream) 0%, var(--warm-cream) 100%);
flex-direction:column;
text-align:center;
overflow:hidden;
}

.hero-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
gap:24px;
}

.hero-constellation{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:min(80vw,600px);
height:min(60vh,400px);
opacity:0.4;
z-index:-1;
}

.hero-stars-svg{
width:100%;height:100%;
}

.twinkle-star{
animation:twinkle 3s ease-in-out infinite;
animation-delay:var(--delay);
}

@keyframes twinkle{
0%,100%{opacity:0.4;r:inherit}
50%{opacity:1;transform:scale(1.5)}
}

.hero-coords{
margin-bottom:8px;
}

.hero-title{
font-family:var(--font-heading);
font-size:clamp(72px,12vw,120px);
font-weight:700;
color:var(--dark);
letter-spacing:4px;
line-height:1;
margin:0;
}

.hero-subtitle{
font-family:var(--font-body);
font-size:20px;
font-style:italic;
color:var(--dark);
opacity:0.7;
margin:0;
}

.scroll-indicator{
margin-top:48px;
animation:float 2s ease-in-out infinite;
}

.scroll-dot{
animation:scrollBounce 2s ease-in-out infinite;
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(8px)}
}

@keyframes scrollBounce{
0%,100%{cy:12}
50%{cy:26}
}

/* ABOUT */
.section-about{
background-color:var(--cream);
}

.about-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:32px;
max-width:1200px;
width:100%;
align-items:center;
}

.block-tall{
grid-column:1/5;
display:flex;
align-items:center;
justify-content:center;
min-height:384px;
padding:var(--baseline);
background:linear-gradient(135deg, var(--warm-cream) 0%, var(--light-warm) 100%);
border-radius:4px;
}

.block-tall .section-title{
font-size:56px;
text-align:center;
}

.block-wide{
grid-column:5/13;
padding:var(--baseline);
background:var(--cream);
}

/* MOSAIC */
.section-mosaic{
background-color:var(--warm-cream);
flex-direction:column;
padding-top:calc(var(--baseline) * 1.5);
}

.mosaic-label{
margin-bottom:48px;
display:block;
text-align:center;
}

.mosaic-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:minmax(200px,auto);
gap:24px;
max-width:1200px;
width:100%;
}

.mosaic-block{
border-radius:4px;
overflow:hidden;
position:relative;
}

.mosaic-block-1{grid-column:1/5;grid-row:1/3}
.mosaic-block-2{grid-column:5/9;grid-row:1/2}
.mosaic-block-3{grid-column:9/13;grid-row:1/3}
.mosaic-block-4{grid-column:5/7;grid-row:2/3}
.mosaic-block-5{grid-column:7/9;grid-row:2/3}
.mosaic-block-6{grid-column:1/9;grid-row:3/4}

.marble-surface{
width:100%;height:100%;
min-height:200px;
display:flex;
align-items:center;
justify-content:center;
padding:32px;
background:linear-gradient(135deg,var(--cream) 0%,var(--light-warm) 40%,var(--warm-cream) 100%);
position:relative;
}

.marble-surface::after{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
opacity:0.2;
background:
  radial-gradient(ellipse at 30% 20%, rgba(201,168,76,0.12) 0%, transparent 50%),
  radial-gradient(ellipse at 70% 80%, rgba(107,76,154,0.08) 0%, transparent 40%),
  linear-gradient(120deg, transparent 30%, rgba(201,168,76,0.05) 50%, transparent 70%);
pointer-events:none;
}

.marble-surface.dark{
background:linear-gradient(135deg,var(--dark) 0%,#3a3430 50%,var(--dark) 100%);
}

.marble-surface.dark .mosaic-phrase{
color:var(--cream);
}

.marble-surface.accent{
background:linear-gradient(135deg,var(--gold) 0%,#d4b65e 100%);
}

.mosaic-constellation{
width:80%;height:80%;
opacity:0.7;
transition:opacity 0.6s ease;
}

.mosaic-block:hover .mosaic-constellation{
opacity:1;
}

.mosaic-phrase{
font-family:var(--font-heading);
font-size:42px;
font-weight:400;
line-height:1.2;
text-align:center;
position:relative;
z-index:1;
}

.mosaic-phrase.small{
font-size:28px;
}

.mosaic-number{
font-family:var(--font-mono);
font-size:48px;
color:var(--cream);
font-weight:700;
position:relative;
z-index:1;
}

.block-label{
position:absolute;
bottom:16px;
left:16px;
font-family:var(--font-mono);
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold);
opacity:0.6;
}

/* PHILOSOPHY */
.section-philosophy{
background-color:var(--cream);
}

.philosophy-content{
max-width:1100px;
width:100%;
text-align:center;
}

.divider-constellation{
margin-bottom:48px;
}

.philosophy-title{
font-size:72px;
margin-bottom:64px;
}

.philosophy-columns{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:64px;
text-align:left;
}

.philosophy-heading{
font-family:var(--font-heading);
font-size:36px;
font-weight:400;
color:var(--gold);
margin-bottom:16px;
}

/* CELESTIAL */
.section-celestial{
background:linear-gradient(180deg,var(--dark) 0%,#1a1714 100%);
position:relative;
overflow:hidden;
}

.celestial-canvas{
position:relative;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

#starfield-canvas{
position:absolute;
top:0;left:0;
width:100%;height:100%;
}

.celestial-text{
position:relative;
z-index:2;
text-align:center;
max-width:600px;
}

.celestial-title{
color:var(--cream);
font-size:72px;
}

.celestial-body{
color:var(--light-warm);
opacity:0.8;
}

.section-celestial .annotation{
color:var(--gold);
}

/* LETTER */
.section-letter{
background:linear-gradient(180deg,var(--warm-cream) 0%,var(--cream) 100%);
min-height:100vh;
position:relative;
}

.letter-content{
position:relative;
width:100%;
max-width:700px;
z-index:2;
}

.letter-paper{
background:var(--cream);
padding:calc(var(--baseline) * 1.5);
border-radius:4px;
box-shadow:0 4px 40px rgba(44,40,36,0.08);
position:relative;
}

.letter-paper::before{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
border-radius:4px;
opacity:0.15;
background:
  radial-gradient(ellipse at 25% 25%, rgba(201,168,76,0.1) 0%, transparent 50%),
  linear-gradient(135deg, transparent 40%, rgba(201,168,76,0.04) 60%, transparent 80%);
pointer-events:none;
}

.letter-date{
display:block;
margin-bottom:32px;
}

.typewriter-text{
font-family:var(--font-heading);
font-size:36px;
line-height:1.5;
color:var(--dark);
min-height:200px;
position:relative;
}

.typewriter-cursor{
display:inline-block;
width:2px;
height:1em;
background:var(--gold);
margin-left:2px;
animation:blink 0.8s step-end infinite;
vertical-align:text-bottom;
}

@keyframes blink{
0%,100%{opacity:1}
50%{opacity:0}
}

.letter-signature{
margin-top:48px;
opacity:0;
transition:opacity 1s ease 0.5s;
}

.letter-signature.visible{
opacity:1;
}

.signature-dash{
display:block;
font-family:var(--font-heading);
font-size:24px;
color:var(--gold);
margin-bottom:8px;
}

.signature-name{
font-family:var(--font-heading);
font-size:42px;
color:var(--dark);
}

/* Fireflies */
.firefly-container{
position:absolute;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
overflow:hidden;
}

.firefly{
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:var(--gold);
box-shadow:0 0 8px var(--gold), 0 0 16px rgba(201,168,76,0.3);
animation:fireflyFloat var(--duration) ease-in-out infinite;
animation-delay:var(--delay);
opacity:0;
}

@keyframes fireflyFloat{
0%{opacity:0;transform:translate(0,0)}
10%{opacity:0.8}
50%{opacity:0.4;transform:translate(var(--dx),var(--dy))}
90%{opacity:0.8}
100%{opacity:0;transform:translate(calc(var(--dx) * 2),calc(var(--dy) * 2))}
}

/* CONSTELLATION NAV */
.constellation-nav{
position:fixed;
top:32px;right:32px;
z-index:100;
}

.nav-toggle{
background:rgba(255,253,245,0.9);
border:1px solid rgba(201,168,76,0.3);
border-radius:50%;
width:56px;height:56px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
backdrop-filter:blur(8px);
}

.nav-toggle:hover{
transform:scale(1.1);
border-color:var(--gold);
box-shadow:0 0 20px rgba(201,168,76,0.2);
}

.nav-stars{
position:absolute;
top:28px;right:28px;
width:0;height:0;
opacity:0;
pointer-events:none;
transition:opacity 0.4s ease;
}

.nav-stars.active{
opacity:1;
pointer-events:auto;
}

.star-link{
position:absolute;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
text-decoration:none;
transform:translate(
  calc(cos(var(--angle)) * var(--distance)),
  calc(sin(var(--angle)) * var(--distance))
);
transition:transform 0.3s ease;
}

.star-link:hover{
transform:translate(
  calc(cos(var(--angle)) * var(--distance)),
  calc(sin(var(--angle)) * var(--distance))
) scale(1.2);
}

.star-dot{
display:block;
width:10px;height:10px;
border-radius:50%;
background:var(--gold);
box-shadow:0 0 8px rgba(201,168,76,0.5);
transition:all 0.3s ease;
}

.star-link:hover .star-dot{
box-shadow:0 0 16px rgba(201,168,76,0.8);
transform:scale(1.3);
}

.star-label{
font-family:var(--font-mono);
font-size:10px;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--dark);
opacity:0.7;
white-space:nowrap;
}

.constellation-lines{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}

/* FOOTER */
.site-footer{
text-align:center;
padding:calc(var(--baseline)) calc(var(--baseline));
background:var(--cream);
}

.footer-constellation{
margin-bottom:16px;
}

.footer-text{
font-family:var(--font-mono);
font-size:12px;
letter-spacing:2px;
color:var(--dark);
opacity:0.5;
margin-bottom:8px;
}

.footer-coords{
display:block;
}

/* Scroll Reveal */
.reveal{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible{
opacity:1;
transform:translateY(0);
}

/* Responsive */
@media (max-width:768px){
.section{
  padding:calc(var(--baseline)) 24px;
}

.about-grid{
  grid-template-columns:1fr;
}

.block-tall{
  grid-column:1/-1;
  min-height:200px;
}

.block-wide{
  grid-column:1/-1;
}

.mosaic-grid{
  grid-template-columns:repeat(6,1fr);
}

.mosaic-block-1{grid-column:1/4;grid-row:1/2}
.mosaic-block-2{grid-column:4/7;grid-row:1/2}
.mosaic-block-3{grid-column:1/4;grid-row:2/3}
.mosaic-block-4{grid-column:4/5;grid-row:2/3}
.mosaic-block-5{grid-column:5/7;grid-row:2/3}
.mosaic-block-6{grid-column:1/7;grid-row:3/4}

.philosophy-columns{
  grid-template-columns:1fr;
  gap:48px;
}

.section-title{
  font-size:48px;
}

.hero-title{
  font-size:64px;
}

.philosophy-title{
  font-size:56px;
}

.celestial-title{
  font-size:48px;
}

.typewriter-text{
  font-size:28px;
}

.letter-paper{
  padding:32px;
}

.constellation-nav{
  top:16px;right:16px;
}

.nav-toggle{
  width:44px;height:44px;
}
}

@media (max-width:480px){
.mosaic-grid{
  grid-template-columns:1fr 1fr;
}

.mosaic-block-1{grid-column:1/3}
.mosaic-block-2{grid-column:1/2}
.mosaic-block-3{grid-column:2/3}
.mosaic-block-4{grid-column:1/2}
.mosaic-block-5{grid-column:2/3}
.mosaic-block-6{grid-column:1/3}
}