/*
Theme Name: Wellness Coming Soon
Theme URI: https://proviedinfo.com
Author: ProviedInfo
Author URI: https://proviedinfo.com
Description: A lightweight coming-soon theme with countdown timer, built for wellness brand launches. Upload as a WordPress theme and activate.
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.2
Text Domain: wellness-coming-soon
*/

:root{
  --linen:#F3EFE6;
  --pine:#1F3A2E;
  --pine-soft:#2C4A3B;
  --sage:#8AA68C;
  --coral:#C77B6B;
  --ink:#22291F;
  --line: rgba(34,41,31,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  background:var(--linen);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  width:100%;
  overflow-x:hidden;
}
.cs-wrap{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  text-align:center;
  overflow:hidden;
}
/* texture */
.cs-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(34,41,31,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events:none;
}

.cs-eyebrow{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--pine);
  opacity:0.7;
  margin-bottom:28px;
  z-index:2;
}

/* breathing circle */
.breathe-stage{
  position:relative;
  width:min(52vw,340px);
  height:min(52vw,340px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  z-index:2;
}
.breathe-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--line);
}
.ring-1{ width:100%; height:100%; }
.ring-2{ width:78%; height:78%; }
.breathe-circle{
  width:46%;
  height:46%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--sage) 0%, var(--pine-soft) 55%, var(--pine) 100%);
  box-shadow: 0 0 60px rgba(31,58,46,0.25);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe{
  0%   { transform:scale(0.82); }
  45%  { transform:scale(1.14); }
  50%  { transform:scale(1.14); }
  95%  { transform:scale(0.82); }
  100% { transform:scale(0.82); }
}

h1{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(2rem,6vw,4.4rem);
  line-height:1.1;
  margin-top:40px;
  z-index:2;
  max-width:16ch;
}
h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--coral);
}

.cs-sub{
  margin-top:18px;
  max-width:46ch;
  font-size:clamp(14px,2.4vw,16px);
  line-height:1.65;
  color:var(--ink);
  opacity:0.72;
  z-index:2;
}

/* countdown */
.cs-countdown{
  display:flex;
  gap:clamp(14px,4vw,42px);
  margin-top:clamp(32px,6vw,52px);
  z-index:2;
  flex-wrap:wrap;
  justify-content:center;
}
.cs-cd-item{ display:flex; flex-direction:column; align-items:center; }
.cs-cd-num{
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:clamp(1.4rem,4vw,2.4rem);
  color:var(--pine);
  min-width:2ch;
}
.cs-cd-label{
  margin-top:6px;
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.5;
}
.cs-cd-sep{
  font-family:'Space Mono',monospace;
  font-size:clamp(1.2rem,3.4vw,2rem);
  color:var(--line);
  align-self:flex-start;
  margin-top:2px;
}

@media (prefers-reduced-motion: reduce){
  .breathe-circle{ animation:none; }
}

/* tablet */
@media (max-width:768px){
  .cs-wrap{ padding:8vh 8vw; }
  h1{ margin-top:32px; }
}

/* mobile */
@media (max-width:520px){
  .cs-countdown{ gap:12px; }
  .cs-cd-sep{ display:none; }
  .cs-eyebrow{ font-size:10px; letter-spacing:0.22em; }
  .breathe-stage{ width:min(60vw,220px); height:min(60vw,220px); }
}

/* very small phones */
@media (max-width:360px){
  .cs-cd-num{ font-size:1.2rem; }
  h1{ font-size:1.7rem; }
}