:root{
  --bg-deep: #05070f;
  --bg-navy: #0b1226;
  --blue-bright: #5aa9ff;
  --blue-soft: #7fb8ff;
  --lavender: #b8c9ff;
  --ink: #eaf0ff;
  --glow: rgba(90,169,255,0.35);
}

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

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(ellipse at 20% 10%, #101d3d 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, #0d1836 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-navy) 45%, var(--bg-deep) 100%);
  color:var(--ink);
  font-family:'Quicksand', sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

#stars{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}

/* ---------- Floating polaroid decorations ---------- */
.floaters{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.polaroid{
  position:absolute;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(180,205,255,0.3);
  border-radius:14px;
  padding:10px 10px 22px 10px;
  box-shadow:0 25px 60px rgba(0,0,0,0.6), 0 0 45px var(--glow);
  backdrop-filter:blur(1px);
  opacity:0.85;
  animation:drift 14s ease-in-out infinite;
}

.polaroid img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:6px;
  filter:saturate(0.9) brightness(0.95);
}

.p1{ width:400px; height:430px; top:2%;  left:-6%;  transform:rotate(-9deg);  animation-delay:0s; }
.p2{ width:360px; height:390px; top:58%; left:-8%;  transform:rotate(7deg);   animation-delay:2s; }
.p3{ width:410px; height:440px; top:4%;  left:58%; transform:rotate(10deg);  animation-delay:4s; }
.p4{ width:370px; height:400px; top:46%; left:62%; transform:rotate(-8deg); animation-delay:1s; }
.p5{ width:380px; height:410px; top:74%; left:40%; transform:rotate(5deg);  animation-delay:3s; }
.p6{ width:350px; height:375px; top:70%; left:0%; transform:rotate(-6deg); animation-delay:5s; }

@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-18px) rotate(var(--r,0deg)); }
}

@media (max-width:700px){
  .polaroid{ opacity:0.7; transform:scale(0.5); }
  .p1{left:-22%; top:0%;} .p2{left:-26%; top:56%;} .p3{left:48%; top:2%;}
  .p4{left:52%; top:44%;} .p5{left:30%; top:74%;} .p6{left:-12%; top:70%;}
}

/* ---------- Layout ---------- */
main{
  position:relative;
  z-index:2;
}

section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
}

.eyebrow{
  letter-spacing:0.25em;
  text-transform:uppercase;
  font-size:0.75rem;
  color:var(--blue-soft);
  opacity:0;
  animation:fadeUp 1s ease forwards 0.2s;
}

.name{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(2.4rem, 8vw, 5rem);
  line-height:1.05;
  margin-top:14px;
  color:var(--ink);
  opacity:0;
  animation:fadeUp 1.1s ease forwards 0.5s;
}

.name span{
  display:block;
  font-style:italic;
  font-weight:600;
  font-size:clamp(2.2rem, 10vw, 7rem);
  overflow-wrap:break-word;
  word-break:break-word;
  background:linear-gradient(90deg, var(--blue-bright), var(--lavender), var(--blue-bright));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 5s linear infinite;
  margin-top:6px;
}

.subtitle{
  margin-top:22px;
  font-size:1rem;
  color:var(--lavender);
  opacity:0;
  animation:fadeUp 1s ease forwards 0.9s;
}

.description{
  margin-top:34px;
  max-width:520px;
  font-size:1.05rem;
  line-height:1.8;
  color:var(--ink);
  opacity:0;
  animation:fadeUp 1s ease forwards 1.2s;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes shine{
  to{ background-position:200% center; }
}