/* =========================================================
   thera-pi.cz — landing page
   Aesthetic: refined minimalism. A quiet, meditative room.
   Palette: warm near-white paper, soft greys, near-black ink.
   ========================================================= */

:root {
  --paper:      #f6f6f4;   /* very soft warm-grey background */
  --paper-edge: #ececea;   /* subtle vignette edge           */
  --ink:        #1b1b1a;   /* near-black, never pure black    */
  --ink-soft:   #6f6f6b;   /* muted grey                      */
  --ink-faint:  #b9b9b4;   /* faint grey for hairlines        */

  /* Calming, muted sage green — for the logo accents */
  --sage:       #4f7d57;   /* calming but present green       */
  --sage-faint: #8aaa8e;   /* lighter green for the separator */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html, body { height: 100%; }

body {
  min-height: 100svh;
  background:
    radial-gradient(120% 120% at 50% 38%, var(--paper) 0%, var(--paper) 55%, var(--paper-edge) 100%);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  position: relative;
}

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url("../images/grain.svg");
  background-size: 220px 220px;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr;
  text-align: center;
  padding: 2rem;
}

/* ---------- Breathing ring motif ---------- */
.breath {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 46vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  display: grid;
  place-items: center;
}

.breath__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  opacity: 0.25;
  animation: breathe 9s var(--ease) infinite;
}

.breath__ring--2 {
  inset: 14%;
  opacity: 0.18;
  animation-delay: -1.2s;
  animation-duration: 9s;
}

.breath__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0;
  animation: dot 9s var(--ease) infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(0.86); opacity: 0.08; }
  50%      { transform: scale(1.04); opacity: 0.25; }
}

@keyframes dot {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 0.55; transform: scale(1);   }
}

/* ---------- Wordmark ---------- */
.wordmark {
  position: relative;
  z-index: 2;
  font-family: "Cormorant", "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 11vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark__a,
.wordmark__b { color: var(--sage); }

.wordmark__sep {
  color: var(--ink-faint);
  font-weight: 300;
  margin: 0 0.04em;
}

.wordmark__b { font-style: italic; }

.wordmark__tld {
  color: var(--ink-faint);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ---------- Hairline beneath the mark ---------- */
.line {
  position: absolute;
  bottom: clamp(2.2rem, 6vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 6vw, 72px);
  height: 1px;
  background: var(--ink-faint);
  transform-origin: center;
}

/* ---------- Entrance choreography ---------- */
.wordmark,
.breath,
.line { opacity: 0; }

.wordmark {
  animation: rise 1.4s var(--ease) 0.25s forwards;
}
.breath {
  animation: fade 2.2s var(--ease) 0.6s forwards;
}
.line {
  animation: grow 1.6s var(--ease) 1s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes grow {
  from { opacity: 0; transform: translateX(-50%) scaleX(0); }
  to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* Re-trigger breathing opacity baseline after the fade-in finishes */
.breath { animation-fill-mode: forwards; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wordmark, .breath, .line { opacity: 1; animation: none; transform: none; }
  .line { transform: translateX(-50%); }
  .breath__ring, .breath__dot { animation: none; }
  .breath__ring { opacity: 0.4; transform: scale(1); }
}

/* ---------- Small screens ---------- */
@media (max-width: 420px) {
  .wordmark { letter-spacing: 0; }
  .breath { width: clamp(240px, 78vw, 360px); }
}