/* ============================================================
   Sparkly & Co. — Tweaks themes
   Body-class driven "feel" variants set by the Tweaks panel.
   Loaded AFTER styles.css so these win on the cascade.
   ============================================================ */

/* ---------------- MOOD (full palette repaint) ---------------- */
body.mood-midnight {
  --navy:#15264E; --navy-deep:#0E1A38; --navy-soft:#1E335F;
  --gold:#BF9A4A; --gold-bright:#D4B45F; --gold-soft:#E7D6A6;
  --green:#4C7A39; --green-soft:#6E9A52;
  --cream:#F6F2E9; --cream-2:#FBF8F1; --paper:#FFFFFF;
  --ink:#1A2236; --ink-soft:#45506B; --line:#E6DFD0;
}

/* Seaside: deep teal surfaces + warm brass — nods to Strandfontein's coast */
body.mood-coastal {
  --navy:#0E3D44; --navy-deep:#082C32; --navy-soft:#145660;
  --gold:#C9913F; --gold-bright:#E2A94E; --gold-soft:#F0DCB4;
  --green:#3E7A5E; --green-soft:#5FA07E;
  --cream:#EEF4F2; --cream-2:#F7FBFA; --paper:#FFFFFF;
  --ink:#13282B; --ink-soft:#3E565A; --line:#D6E3E0;
}

/* Boutique: warm espresso surfaces + muted brass on soft linen — airy, editorial */
body.mood-soft {
  --navy:#34302A; --navy-deep:#262320; --navy-soft:#4A453C;
  --gold:#B0853F; --gold-bright:#CB9D51; --gold-soft:#E9D8B6;
  --green:#6E7A4A; --green-soft:#8A9663;
  --cream:#F3EDE3; --cream-2:#FAF6EE; --paper:#FFFFFF;
  --ink:#2B2620; --ink-soft:#5C5347; --line:#E5DCCC;
}

/* repaint transition so a mood switch feels deliberate, not jarring */
body, body .topbar, body .nav, body section.block, body .footer,
body .svc, body .panel, body .plan, body .why, body .cc, body .tst,
body .ci-row, body .form-card, body .hero-chip, body .btn {
  transition: background-color .6s var(--ease, ease), color .6s var(--ease, ease),
              border-color .6s var(--ease, ease);
}

/* ---------------- TYPE PERSONALITY ---------------- */
body.type-editorial { --serif: "Cormorant Garamond", Georgia, serif; }

body.type-modern { --serif: "Manrope", system-ui, sans-serif; }
body.type-modern .section-title,
body.type-modern .hero h1 { font-weight: 800; letter-spacing: -.022em; line-height: 1.0; }
body.type-modern .section-title em,
body.type-modern .hero h1 .em { font-style: normal; }
body.type-modern .svc h3,
body.type-modern .plan .ph h3,
body.type-modern .cc h3,
body.type-modern .why h3,
body.type-modern .panel h3 { font-weight: 700; letter-spacing: -.01em; }

body.type-boutique { --serif: "DM Serif Display", Georgia, serif; }
body.type-boutique .section-title,
body.type-boutique .hero h1 { font-weight: 400; letter-spacing: .004em; line-height: 1.05; }
body.type-boutique .hero h1 { font-size: clamp(42px, 5vw, 68px); }

/* ---------------- ATMOSPHERE (motion energy) ---------------- */
/* reveal entrance distance + pace */
body.atmo-calm .reveal {
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
body.atmo-lively .reveal {
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
body.atmo-bold .reveal {
  transform: translateY(56px) scale(.955);
  transition: opacity .8s var(--ease-out), transform .85s var(--ease-out);
}
body.atmo-calm .reveal.in,
body.atmo-lively .reveal.in,
body.atmo-bold .reveal.in { transform: none; }

/* marquee tempo */
body.atmo-calm .marquee-track  { animation-duration: 50s; }
body.atmo-lively .marquee-track { animation-duration: 32s; }
body.atmo-bold .marquee-track  { animation-duration: 18s; }

/* hero glow presence */
body.atmo-calm .hero-bg-glow { opacity: .5; }
body.atmo-bold .hero-bg-glow { opacity: 1; transform: scale(1.28); }

/* hover energy across cards + buttons */
body.atmo-calm .svc:hover,
body.atmo-calm .why:hover,
body.atmo-calm .cc:hover    { transform: translateY(-4px); }
body.atmo-calm .btn:hover   { transform: translateY(-2px); }

body.atmo-bold .svc:hover   { transform: translateY(-12px) scale(1.022); }
body.atmo-bold .why:hover   { transform: translateY(-11px); }
body.atmo-bold .cc:hover    { transform: translateY(-12px); }
body.atmo-bold .btn:hover   { transform: translateY(-5px) scale(1.03); }
body.atmo-bold .ci-row:hover{ transform: translateX(10px); }

/* whatsapp pulse cadence */
body.atmo-calm .wa-float::after { animation-duration: 3.4s; }
body.atmo-bold .wa-float::after { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  body.atmo-calm .reveal, body.atmo-lively .reveal, body.atmo-bold .reveal {
    opacity: 1 !important; transform: none !important;
  }
}

/* helper note inside the Tweaks panel */
.tw-note {
  margin: -3px 2px 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(41, 38, 27, .5);
}

/* ============================================================
   Click-to-upload photo overlay
   ============================================================ */
.photo-up {
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: #fff;
  font-family: var(--sans);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease, ease), background .3s var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
}
.photo-up::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,26,56,.62), rgba(14,26,56,.14) 46%, transparent 72%);
}
.photo-up:hover,
.photo-up:focus-visible { opacity: 1; outline: none; }
.photo-up:focus-visible::before { box-shadow: inset 0 0 0 3px var(--gold-bright); }

.pu-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(255,255,255,.96);
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
  transform: translateY(6px);
  transition: transform .3s var(--ease-out, ease);
}
.photo-up:hover .pu-chip { transform: translateY(0); }
.pu-chip svg { width: 18px; height: 18px; color: var(--gold); }

/* small always-on hint that the image is clickable */
.photo-up::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(14,26,56,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E7D6A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5A2 2 0 0 1 5 6.5h2L8.2 4.6a1 1 0 0 1 .85-.5h5.9a1 1 0 0 1 .85.5L17 6.5h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/><circle cx='12' cy='12' r='3.2'/></svg>") center/16px no-repeat;
  opacity: .85;
  transition: opacity .3s ease;
  pointer-events: none;
}
.photo-up:hover::after { opacity: 0; }

.pu-done {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(76,122,57,.85);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.pu-done svg { width: 20px; height: 20px; }
.photo-up.done { opacity: 1; }
.photo-up.done .pu-chip { display: none; }
.photo-up.done .pu-done { display: flex; }
.photo-up.uploading .pu-chip .pu-txt::after {
  content: "…";
}
@media (prefers-reduced-motion: reduce) {
  .photo-up, .pu-chip { transition: none; }
}