/* SoftSchedule – editorial redesign (Olha-inspired)
   Goals: keep content intact, upgrade typography, spacing, background texture, and motion.
*/

:root{
  --paper: #f4f1e7;
  --paper-2:#f7f5ee;
  --ink:#1b1c1e;
  --ink-2: rgba(27,28,30,.72);
  --sage:#51733f;
  --sage-2:#7fa081;
  --lav:#c7b7ff;
  --line: rgba(27,28,30,.07);
  --shadow: 0 18px 50px rgba(17, 24, 39, 0.10);
  --shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.08);
  --radius-xl: 22px;
}

html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
}

/* Paper + vertical line texture + very subtle noise */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(27,28,30,.04) 0 1px, transparent 1px 22px),
    radial-gradient(900px 520px at 12% 8%, rgba(81,115,63,.14) 0%, rgba(81,115,63,0) 58%),
    radial-gradient(760px 520px at 88% 12%, rgba(199,183,255,.16) 0%, rgba(199,183,255,0) 62%),
    radial-gradient(720px 480px at 45% 85%, rgba(127,160,129,.12) 0%, rgba(127,160,129,0) 60%),
    url('noise.png');
  background-size: auto, auto, auto, auto, 180px 180px;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
  mix-blend-mode: multiply;
  opacity: .22;
}

/* Ensure site content is above overlays (clouds.css already does something similar) */
body > *{ position: relative; z-index: 1; }

/* Typography */
.font-display{
  font-family: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
  letter-spacing: -0.01em;
}

h1, h2, h3{
  color: var(--ink);
}

p{
  color: var(--ink-2);
}

/* Header feels like a floating pill */
header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244,241,231,.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(27,28,30,.08) !important;
}

/* Links */
a{
  text-underline-offset: 4px;
}

a:hover{ opacity: .9; }

/* Cards */
.card-minimal{
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(247,245,238,.92) 100%) !important;
  border: 1px solid rgba(27,28,30,.10) !important;
  box-shadow: var(--shadow-soft) !important;
}

.ring-subtle{
  box-shadow: inset 0 0 0 1px rgba(27,28,30,.08) !important;
}

/* Fancy hover */
.card-minimal:hover,
article.rounded-2xl:hover,
.fm-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
}

article.rounded-2xl,
.fm-card{
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Buttons */
button, .btn, a[role="button"], .inline-flex.rounded-full{
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}

.inline-flex.rounded-full:hover,
button:hover{
  transform: translateY(-1px);
}

/* Hero accents (works on existing layouts) */
.ss-hero-accent{
  position: relative;
}

.ss-hero-accent::before{
  content:"";
  position:absolute;
  width: 340px;
  height: 340px;
  left: -60px;
  top: -70px;
  background: radial-gradient(circle at 30% 30%, rgba(81,115,63,.22), rgba(81,115,63,.10) 55%, rgba(81,115,63,0) 72%);
  border-radius: 999px;
  filter: blur(0.2px);
  transform: rotate(-6deg);
  z-index: -1;
}

/* Soft underline animation for emphasis */
.ss-underline{
  position: relative;
}

.ss-underline::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.18em;
  background: rgba(81,115,63,.18);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.2,.9,.2,1);
}

.is-visible .ss-underline::after{
  transform: scaleX(1);
}

/* Reveal-on-scroll */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; }
  .reveal.is-visible{ opacity: 1; transform: none; }
  .card-minimal:hover, article.rounded-2xl:hover, .fm-card:hover{ transform:none; }
  .inline-flex.rounded-full:hover, button:hover{ transform:none; }
}

/* Fourth Month hero: ensure video fills and stays behind text */
.fm-hero{
  position: relative;
  overflow: hidden;
}

.fm-hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}

.fm-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(244,241,231,.55) 0%, rgba(244,241,231,.88) 72%, rgba(244,241,231,1) 100%);
}

.fm-hero-content{
  position: relative;
  z-index: 2;
}

/* Make the floating sound control match the new look */
#soundControl{
  background: rgba(244,241,231,.78) !important;
  border: 1px solid rgba(27,28,30,.14) !important;
}

.soundBtn{ color: rgba(27,28,30,.72) !important; }
.soundBtn:hover{ background: rgba(255,255,255,.45) !important; }

/* Tone down the existing cloud overlay so the paper texture leads */
body::before{ opacity: 0.10 !important; }