/* Showpiece 2 — Scent Mood Ring. Visual layer only; text lives in Elementor widgets. */
@property --ring-a { syntax: "<color>"; inherits: true; initial-value: #f7dde3; }
@property --ring-b { syntax: "<color>"; inherits: true; initial-value: #e58fa3; }
@property --ring-c { syntax: "<color>"; inherits: true; initial-value: #fbf6f2; }

/* Ring colours per mood panel (add a line when you add a mood) */
#mood-stressed { --ring-a: #c9b6f2; --ring-b: #a8d8f0; --ring-c: #f3eefe; }
#mood-sleepy   { --ring-a: #b9c6f7; --ring-b: #e5c9f2; --ring-c: #fdfbff; }
#mood-flirty   { --ring-a: #ff8fb1; --ring-b: #c4001a; --ring-c: #ffe3ea; }
#mood-homesick { --ring-a: #f5c9a0; --ring-b: #eaa7b5; --ring-c: #fff4e8; }
#mood-boss     { --ring-a: #e7c873; --ring-b: #e5708f; --ring-c: #fff8e1; }

#mood-ring { overflow-x: clip; }
#mood-orb { position: relative; }
#mood-orb > .elementor-widget { position: relative; z-index: 2; }
.pnp-orb {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(100%, 440px); aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: --ring-a 1.4s cubic-bezier(.22,1,.36,1), --ring-b 1.4s cubic-bezier(.22,1,.36,1), --ring-c 1.4s cubic-bezier(.22,1,.36,1);
}
.pnp-orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ring-a), var(--ring-b), var(--ring-c), var(--ring-b), var(--ring-a));
  filter: blur(2px) saturate(1.15);
  animation: pnp-orb-spin 14s linear infinite;
  box-shadow: 0 40px 80px -20px var(--ring-b);
}
.pnp-orb::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 60%, var(--ring-c) 0, var(--ring-a) 45%, var(--ring-b) 100%);
  box-shadow: inset 0 -20px 50px rgba(34,34,34,.12), inset 0 10px 30px rgba(255,255,255,.6);
}
@keyframes pnp-orb-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) { .pnp-orb { width: min(86%, 320px); } }

.mood-orb-label .elementor-heading-title { font-style: italic; font-size: clamp(34px, 4vw, 52px); line-height: 1; transition: opacity .4s; }
#mood-orb.is-changing .mood-orb-label .elementor-heading-title { opacity: 0; }

.mood-option .elementor-button { background: var(--e-global-color-pnpwhite); border-color: var(--e-global-color-pnpline) !important; }
.mood-option .elementor-button:hover { background: var(--e-global-color-pnpwhite) !important; color: var(--e-global-color-primary) !important; border-color: var(--e-global-color-primary) !important; }
.mood-option.is-active .elementor-button,
.mood-option.is-active .elementor-button:hover { background: var(--e-global-color-primary) !important; color: var(--e-global-color-pnpwhite) !important; border-color: var(--e-global-color-primary) !important; }
.pnp-mood-ready .mood-option .elementor-button-text::before {
  content: ""; display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 10px; vertical-align: -4px;
  background: linear-gradient(135deg, var(--sw-a, #f7dde3), var(--sw-b, #e58fa3));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

#mood-panels > .e-con + .e-con { margin-top: 14px; }
.pnp-mood-ready #mood-panels > .e-con { display: none; margin-top: 0; }
.pnp-mood-ready #mood-panels > .e-con.is-active { display: flex; animation: pnp-panel-in .6s cubic-bezier(.22,1,.36,1); }
@keyframes pnp-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }