/* Fonts (Google Fonts example) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@500;700&display=swap');

/* Theme Colors */
:root{
  --sky-mist:#E8F0F7;
  --moon-glow:#F7F4EC;
  --breeze:#A7C7E7;
  --fog:#D9D9D9;
  --ink:#1B1B1D;

  --text:#F7F4EC;
  --glass: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.15);
}

/* Base */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body.page{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--ink);
}

/* Gradients */
.gradient-sky-to-night{
  background: linear-gradient(180deg, var(--sky-mist), var(--ink));
}
.gradient-light{
  background: linear-gradient(180deg, var(--sky-mist), #2a2a2c);
}
.gradient-night{
  background: linear-gradient(180deg, #151517, var(--ink));
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background: rgba(0,0,0,0.35);
  border-bottom:1px solid var(--line); backdrop-filter: blur(6px);
}
.brand{
  font-family: "Playfair Display", serif;
  font-size: 1.2rem; color: var(--moon-glow); text-decoration:none;
  letter-spacing: .5px;
}
.nav a{
  color: var(--moon-glow);
  text-decoration:none; margin-left:14px; padding:6px 10px; border-radius:10px;
  opacity:.9;
}
.nav a:hover{ background: var(--glass); }
.nav .pill{ background: var(--breeze); color:#0f1216; }
.nav .active{ outline:1px solid var(--breeze); }

/* Hero */
.hero, .room-hero{
  position: relative; min-height: 70vh;
  display:grid; place-items:center; text-align:center;
  background: #111;
}
.hero{ min-height: 88vh; }
.hero::before, .room-hero::before{
  content:""; position:absolute; inset:0;
  background-image: var(--bg);
  background-position:center; background-size:cover;
  filter: contrast(1.1) saturate(0.9) brightness(0.8);
}
.veil{ position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.veil.darker{ background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.75)); }

.hero-content, .room-content{
  position: relative; z-index: 2; padding: 0 16px;
}
h1{ font-family: "Playfair Display", serif; font-size: clamp(32px, 6vw, 64px); margin:0; }
.sub{ opacity: .9; margin-top:10px; }

/* Sections */
section{ padding: 64px 22px; }
.ritual{ background: rgba(0,0,0,.35); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ritual-list{ list-style:none; padding:0; margin:18px auto; max-width: 720px; }
.ritual-list li{ padding:10px 0; border-bottom:1px dashed var(--line); }

/* Rooms grid */
.rooms{ text-align:center; }
.grid{
  display:grid; gap:16px; margin: 24px auto; max-width:1100px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  display:block; text-decoration:none; color:var(--moon-glow);
  background: var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:20px; transition: transform .25s ease, border-color .25s ease;
  backdrop-filter: blur(6px);
}
.card:hover{ transform: translateY(-4px); border-color: var(--breeze); }
.card.focus{ outline: 2px solid var(--breeze); }

/* Room body */
.room-body{ max-width: 900px; margin: 0 auto; }
.list{ line-height: 1.9; }
.embed{ margin: 20px 0 8px; }

/* Buttons */
.btn{
  display:inline-block; padding:12px 22px; border-radius:999px;
  background: var(--breeze); color:#0f1216; text-decoration:none; font-weight:600;
}

/* Footer */
.site-footer{
  text-align:center; padding: 28px 12px; color: var(--fog);
  border-top:1px solid var(--line); background: rgba(0,0,0,.35);
}

/* Animations */
.fade-in{ opacity:0; transform: translateY(8px); animation: fadeIn .8s ease forwards; }
@keyframes fadeIn{ to{ opacity:1; transform:none; } }


body.fade-out { animation: fadeOut .35s ease forwards; }
@keyframes fadeOut { to { opacity: 0; filter: blur(2px); } }

/* ===== Breathwork Widget ===== */
.breath-widget{
  margin: 14px 0 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}

.breath-visual{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
}

.breath-circle{
  width: 160px; height: 160px;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  transform: scale(0.72);
  transition: transform 1s ease;
}

@media (max-width: 640px){
  .breath-visual{
    grid-template-columns: 1fr;
  }
  .breath-circle{ margin-bottom: 12px; }
}

.breath-readout{
  text-align: left;
}
.breath-readout .phase{
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.breath-readout .count{
  font-size: 1.1rem;
  opacity: 0.9;
}

.breath-controls{
  display: flex; flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin-top: 16px;
}
.breath-controls .btn{
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: #0f1216; border: none; cursor: pointer;
}
.breath-controls .btn.ghost{
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
.breath-controls .btn:disabled{
  opacity: .55; cursor: not-allowed;
}

.select{
  display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.select select{
  background: transparent; color: var(--text); border: none; outline: none;
}

.toggle{
  display: inline-flex; gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

.micro-note{ opacity: .85; margin-top: 10px; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .breath-circle{ transition: none; }
}