/* Premium / Minimal / Zen styles */
:root{
  --bg:#f6f7f8;
  --panel: rgba(255,255,255,0.6);
  --accent:#7aa7ff;
  --muted:#8b8f97;
  --quote-bg: rgba(10,14,18,0.28);
  --radius:18px;
  --glass: rgba(255,255,255,0.06);
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-serif: 'Playfair Display', Georgia, serif;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:var(--font-sans);background:var(--bg);color:#0b1220}

/* HERO */
.hero{ max-width:1100px; margin:2rem auto 0; padding:1rem 1.25rem }
.hero-inner{ background:transparent; padding:1.2rem 1.6rem; border-radius:12px; text-align:center }
.hero h1{ margin:0; font-size:clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.6px }
.hero .lead{ margin:.6rem auto 1rem; color:var(--muted); max-width:880px; line-height:1.45 }
.cta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-block; padding:.6rem 1rem; border-radius:10px; text-decoration:none; color:inherit; border:1px solid rgba(11,17,32,0.04) }
.btn.primary{ background:var(--accent); color:white; box-shadow: 0 8px 26px rgba(122,167,255,0.14); border:0 }

.wallpaper{
  position:relative;
  height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
  border-radius:22px;
  margin:1.6rem auto 1.2rem;
  max-width:1100px;
  box-shadow: 0 18px 60px rgba(12,20,30,0.18);
}

/* layered background images */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1) translateY(0);
  transition: opacity 900ms ease, transform 18s ease;
  will-change: opacity, transform;
}
.bg.active{ opacity:1; }

/* gentle Ken Burns (slow scale/translate) - disabled when prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .bg.active{ transform: scale(1.04) translateY(-6px); }
}

.vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0.08), rgba(0,0,0,0.28)); }

.overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; padding:3.2rem; }

.quote{
  max-width:760px;
  width:100%;
  color:#fff;
  font-family:var(--font-serif);
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  padding:2.2rem 2.4rem;
  border-radius:14px;
  pointer-events:auto;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 12px 40px rgba(2,6,23,0.45);
  line-height:1.18;
  position:relative;
}

.quote .mark{ display:inline-block; font-size:3.6rem; line-height:0.8; margin-right:0.4rem; color:rgba(255,255,255,0.92); vertical-align:middle; font-family:var(--font-serif); }

.quote #quoteText{ display:inline-block; vertical-align:middle; font-weight:500; }

/* Floating minimal controls */
.controls.floating{
  position: absolute;
  right:28px;
  bottom:28px;
  display:flex;
  gap:10px;
  background: rgba(255,255,255,0.06);
  padding:8px;
  border-radius:999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
  pointer-events:auto;
}

.controls .icon{
  background:transparent;
  border:0;
  padding:8px 10px;
  color:var(--muted);
  font-size:1.05rem;
  border-radius:999px;
  cursor:pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}
.controls .icon:hover{ transform: translateY(-4px); color:var(--accent); background:rgba(255,255,255,0.04); }
.controls .icon:focus{ outline:2px solid rgba(122,167,255,0.22); outline-offset:3px; }

.footer{ text-align:center; color:var(--muted); margin-bottom:2rem; }

/* responsive */
@media (max-width:720px){
  .wallpaper{ height:64vh; margin:1.4rem 1rem; }
  .quote{ font-size:1.1rem; padding:1.2rem 1.4rem; }
  .controls.floating{ right:18px; bottom:18px; gap:8px; }
}

/* reduced motion: simplify transitions */
@media (prefers-reduced-motion: reduce){
  .bg{ transition:none !important; transform:none !important; }
  .bg.active{ transform:none !important; }
  .controls .icon:hover{ transform:none; }
}

/* anchor spacing so the scroll lands slightly above the fixed controls */
#controls-anchor{ display:block; height:1px; margin-bottom:6vh; }