@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;300&family=Inter:wght@300;400&family=Space+Mono:wght@400&display=swap');

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

:root {
  --deep:    #080d1a;
  --ocean:   #0d2b4e;
  --teal:    #0e7490;
  --aqua:    #22d3ee;
  --glow:    #67e8f9;
  --foam:    #e0f7fa;
  --text:    #caf0f8;
  --muted:   #5b8ca8;
  --violet:  #7c3aed;
  --indigo:  #4f46e5;
  --neon:    #a78bfa;
}

html, body {
  height: 100%;
  background: var(--deep);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  overflow: hidden;
}

/* Hex-grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17Z' fill='none' stroke='rgba(167%2C139%2C250%2C0.055)' stroke-width='0.6'/%3E%3Cpath d='M28 52 L54 67 L54 97 L28 112 L2 97 L2 67Z' fill='none' stroke='rgba(167%2C139%2C250%2C0.055)' stroke-width='0.6'/%3E%3C%2Fsvg%3E");
  background-size: 56px 100px;
  pointer-events: none;
  z-index: 0;
}

/* Gelaagde achtergrond — elk faded zelfstandig, geen gradient-sprong */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg1 {
  background: radial-gradient(ellipse 80% 60% at 15% 80%, rgba(14,116,144,.28) 0%, transparent 60%);
  animation: bgFade 16s ease-in-out infinite alternate;
}
.bg2 {
  background: radial-gradient(ellipse 65% 45% at 82% 18%, rgba(34,211,238,.10) 0%, transparent 55%);
  animation: bgFade 22s ease-in-out infinite alternate-reverse;
}
.bg3 {
  background: radial-gradient(ellipse 55% 50% at 88% 82%, rgba(124,58,237,.18) 0%, transparent 55%);
  animation: bgFade 28s ease-in-out infinite alternate;
}

@keyframes bgFade {
  0%   { opacity: 0.4; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.5; }
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100dvh;
  padding: 1rem 2rem 1rem;
  position: relative;
}

/* ── Taalkiezer ── */
.lang-switcher {
  position: absolute;
  top: .8rem;
  right: 1rem;
  display: flex;
  gap: .4rem;
  z-index: 10;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  cursor: pointer;
  padding: .2rem .1rem;
  opacity: .5;
  transition: opacity .2s;
}

.lang-btn:hover { opacity: 1; }
.lang-btn.active { opacity: 1; color: var(--aqua); }

/* ── Header ── */
header { text-align: center; margin-bottom: -2rem; margin-top: -1rem; }

.logo {
  height: clamp(120px, min(52vw, 22vh), 280px);
  width: auto;
  display: block;
  margin: 0 auto;
}

/* ── Orb area ── */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 2vh, 2rem);
  flex: 1;
  justify-content: center;
}

.breath-container {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ripple rings */
.ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.15);
  animation: none;
}
.r1 { width: 200px; height: 200px; }
.r2 { width: 230px; height: 230px; border-color: rgba(34,211,238,.08); }
.r3 { width: 260px; height: 260px; border-color: rgba(34,211,238,.04); }

.ripple.active {
  animation: ripple-pulse 4s ease-in-out infinite;
}
.r2.active { animation-delay: .4s; }
.r3.active { animation-delay: .8s; }

@keyframes ripple-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%       { transform: scale(1.06); opacity: 1; }
}

/* Main orb */
.orb {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(103,232,249,.25), rgba(14,116,144,.6) 60%, rgba(10,22,40,.8));
  border: 1.5px solid rgba(103,232,249,.3);
  box-shadow:
    0 0 40px rgba(34,211,238,.15),
    0 0 80px rgba(34,211,238,.05),
    inset 0 0 30px rgba(103,232,249,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  will-change: transform;
  animation: borderBreath 4s ease-in-out infinite;
}

@keyframes borderBreath {
  0%, 100% { border-color: rgba(103,232,249,.15); }
  50%       { border-color: rgba(103,232,249,.55); }
}

.mandala {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}


/* ── Tekst in de bol ── */
.orb-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: .3rem;
  will-change: transform;
}

.phase-label {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
  font-size: 1.25rem;
  letter-spacing: .12em;
  color: var(--foam);
  text-align: center;
  text-transform: lowercase;
  text-shadow: 0 0 14px rgba(103,232,249,.6);
  transition: opacity .6s ease;
  line-height: 1.4;
}

.timer-label {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
  font-size: 2.2rem;
  letter-spacing: .15em;
  color: var(--aqua);
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(34,211,238,.5);
  min-height: 3rem;
  margin-top: 0;
}

.sub-hint {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: .10em;
  color: var(--text);
  text-align: center;
  text-transform: lowercase;
  min-height: 1.2rem;
  margin-top: 0;
  transition: opacity .8s ease;
}

/* ── Footer ── */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: center;
}


.btn-start {
  background: transparent;
  border: 1px solid rgba(103,232,249,.35);
  color: var(--aqua);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .35em;
  text-transform: lowercase;
  padding: .65rem 2.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.btn-start:hover {
  background: rgba(34,211,238,.08);
  border-color: rgba(103,232,249,.6);
  box-shadow: 0 0 20px rgba(34,211,238,.15);
}
.btn-start.active {
  border-color: rgba(103,232,249,.5);
  background: rgba(34,211,238,.06);
}

.cycle-info {
  font-size: .95rem;
  letter-spacing: .2em;
  color: var(--muted);
  min-height: 1rem;
}

.total-timer {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
  font-size: 1.3rem;
  letter-spacing: .2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-height: 1.5rem;
}

.hint {
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--muted);
  text-align: center;
}

.credits {
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgba(91,140,168,.45);
  text-align: center;
}

.credits a {
  color: rgba(91,140,168,.6);
  text-decoration: none;
}

.credits a:hover {
  color: var(--muted);
}


/* ── Loader ── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  background: var(--deep);
  transition: opacity 0.9s ease;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loader-label {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
  font-size: .75rem;
  letter-spacing: .55em;
  color: var(--muted);
  text-transform: lowercase;
}