/* ============================================================
   BeWell · oct14 — design uplift layer (preview)
   Additive only. Loads last. No copy changed.
   Goal: one recognizable signature — flower motif + arches +
   softer depth + calmer rhythm — across every page.
   ============================================================ */

:root{
  --petal:#f6e4ea;          /* soft blush petal */
  --petal-2:#efe7f0;        /* lilac haze */
  --glow:#fbeef2;           /* hero glow */
  --ring:#e7ddcf;           /* sand hairline */
  --shadow-soft:0 26px 60px -28px rgba(25,40,76,.30);
  --shadow-lift:0 14px 34px -18px rgba(25,40,76,.26);
}

/* ---------- 1. FLOWER SIGNATURE, stronger + on more sections ----------
   The brand already draws a faint mark behind the first section.
   We extend the same idea to the rhythmic sections so the motif
   recurs down the page — the thing that makes a site "recognizable". */

.brand-page #main>section{position:relative;isolation:isolate}

/* a reusable soft flower, placed per-section below */
.brand-page #main>section.cream:before,
.brand-page #main>section.quotes:before,
.brand-page #main>section.section:not(.navy):not(.hero):nth-of-type(n):after{
  content:none; /* reset — specific rules below own the motif */
}

/* testimonials: large petal drifting in from the right */
.quotes{position:relative;overflow:hidden}
.quotes:after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:-150px;top:-80px;width:min(46vw,520px);height:min(46vw,520px);
  background:url('/assets/brand/programmes/flower.webp') center/contain no-repeat;
  opacity:.07;transform:rotate(-8deg);
}
/* "Привіт, я Таня" + materials: petal low-left, very quiet */
.section:not(.navy):not(.hero) .about-preview{position:relative}
#materials{position:relative;overflow:hidden}
#materials:before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-120px;bottom:-130px;width:min(40vw,440px);height:min(40vw,440px);
  background:url('/assets/brand/flower-sand.webp') center/contain no-repeat;
  opacity:.5;
}

/* navy sections: a light flower, barely there */
.section.navy{position:relative;overflow:hidden}
.section.navy:after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  right:-120px;bottom:-140px;width:min(42vw,480px);height:min(42vw,480px);
  background:url('/assets/brand/programmes/flower.webp') center/contain no-repeat;
  opacity:.06;filter:brightness(0) invert(1);
}
.section.navy>.container{position:relative;z-index:1}

/* footer gets the quiet mark too */
.site-footer{position:relative;overflow:hidden}
.site-footer:after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  right:-90px;top:-70px;width:min(34vw,360px);height:min(34vw,360px);
  background:url('/assets/brand/programmes/flower.webp') center/contain no-repeat;
  opacity:.05;filter:brightness(0) invert(1);
}
.site-footer>.container{position:relative;z-index:1}

/* ---------- 2. HOME HERO — give the empty half a reason to exist ----------
   Photo shows in a soft arch, a big petal blooms behind it,
   a warm glow lifts it off the flat cream. */

.hero--home{position:relative;overflow:hidden}
.hero--home:before{                 /* warm radial glow, right side */
  content:'';position:absolute;z-index:-2;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(60vw,760px);height:min(60vw,760px);
  background:radial-gradient(closest-side,var(--glow) 0%,rgba(251,238,242,.55) 42%,transparent 72%);
}
.hero--home .hero-media{position:relative;isolation:isolate}
.hero--home .hero-media:before{     /* large petal behind the photo */
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:-14%;top:-12%;width:118%;height:118%;
  background:url('/assets/brand/programmes/flower.webp') center/contain no-repeat;
  opacity:.14;transform:rotate(6deg);
}
.hero--home .hero-photo{
  display:block;height:clamp(420px,52vw,560px);
  border-radius:150px 28px 28px 28px;   /* signature arch */
  box-shadow:var(--shadow-soft);
  background:var(--cream);
}
/* a thin tinted backing-plate, slightly offset, kills the "pasted" edge */
.hero--home .hero-media:after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:18px -18px -18px 22px;
  border-radius:150px 28px 28px 28px;
  background:linear-gradient(140deg,var(--petal) 0%,var(--petal-2) 100%);
  opacity:.5;
}

/* ---------- 3. UNIFY PHOTOS — one arch, soft depth, no flat edges ----------
   The About photo on the home is the worst offender (hard rounded box). */

.about-preview{align-items:center}
.about-preview>img{
  border-radius:140px 24px 24px 24px;   /* same arch family */
  box-shadow:var(--shadow-soft);
  position:relative;
}
.split.about-preview{position:relative}
.about-preview:before{                   /* petal behind the about photo */
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-60px;top:-50px;width:min(34vw,360px);height:min(34vw,360px);
  background:url('/assets/brand/flower-sand.webp') center/contain no-repeat;
  opacity:.55;
}

/* lead-magnet cover: lift it off the page */
.material-preview img,.material-previews figure img{
  border-radius:16px;box-shadow:var(--shadow-lift);
}

/* product-page heroes already have their own treatments —
   just warm the arch + depth so they read as one family */
.hero--prostir .hero-photo{box-shadow:var(--shadow-soft)}

/* ---------- 4. PROGRAMME CARDS — stop looking like a price list ----------
   A hairline colour accent on top of each card; PROSTIR stays the star. */

.selector .choice{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.selector .choice:before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--sand);opacity:.85;
}
.selector .choice--body-reset:before{background:#cbb68f}
.selector .choice--easy-start:before{background:var(--sage);opacity:1}
.selector .choice--prostir:before{background:var(--rose)}
.selector .choice--rounded:before{background:var(--navy);opacity:.75}
.selector .choice:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.selector .choice--prostir{box-shadow:0 18px 40px -22px rgba(233,99,154,.45)}

/* tiny "start here / popular" whispers, pure CSS, no copy edit */
.selector .choice--body-reset:after,
.selector .choice--prostir:after{
  position:absolute;top:14px;right:16px;
  font:650 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;
}
.selector .choice--body-reset:after{content:'почни звідси';color:#7a6a4a;background:#efe7d6}
.selector .choice--prostir:after{content:'найпопулярніше';color:#fff;background:var(--rose)}

/* ---------- 5. RHYTHM — more air before a new idea, not inside it ------- */
.section{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.quotes{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(56px,7vw,88px)}
.section.navy{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}

/* a quiet motif divider: small sand dot between major blocks */
.section + .section:not(.navy):before,
.quotes + .section:before{
  content:'❃';position:absolute;top:calc(-0.5 * clamp(64px,8vw,104px));
  left:50%;transform:translateX(-50%);
  color:var(--sand);font-size:15px;opacity:.7;line-height:1;
}

/* ---------- 6. TYPOGRAPHY polish ---------- */
.hero--home h1{letter-spacing:-.01em;line-height:1.04}
.eyebrow{letter-spacing:.26em}
h2{position:relative}

/* ---------- 7. BUTTONS — a touch more life ---------- */
.btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--ghost:hover{box-shadow:var(--shadow-lift)}

/* ---------- 8. MOBILE — keep decoration from crowding small screens ---- */
@media(max-width:760px){
  .hero--home .hero-photo{height:clamp(340px,80vw,440px);border-radius:110px 20px 20px 20px}
  .hero--home .hero-media:after{inset:12px -10px -12px 14px}
  .about-preview>img{border-radius:100px 18px 18px 18px}
  .quotes:after,.section.navy:after,.site-footer:after,#materials:before{opacity:.045}
  .selector .choice--body-reset:after,.selector .choice--prostir:after{position:static;display:inline-block;margin-bottom:8px}
  .section + .section:not(.navy):before,.quotes + .section:before{content:none}
}
@media(prefers-reduced-motion:reduce){
  .btn,.selector .choice{transition:none}
}