/* Velvære: the centrepiece is the hour itself, drawn to scale, so the
   massage visibly takes up nearly all of it. Then one slow breath. */

.vv-line { margin-top: 16px; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--ember-hi); }
.vv-intro { margin-top: 18px; color: var(--cream-2); font-size: 1.08rem; }

/* the signs: soft cream tags, read like a list you nod along to */
.vv-signs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.vv-signs li { padding: 12px 20px; border-radius: 999px; background: rgba(244, 233, 218, .07); box-shadow: inset 0 0 0 1px rgba(244, 233, 218, .12); color: var(--cream); font-size: 1.02rem; }
.vv-offer { margin-top: 30px; }

/* the hour: columns sized to the time each part takes */
.hour { display: grid; grid-template-columns: 1fr 1fr 2.6fr 1.2fr; gap: 0 22px; margin: 40px 0 0; padding: 0; list-style: none; }
.hour li { display: flex; flex-direction: column; }
.h-bar { display: block; height: 10px; margin-bottom: 22px; border-radius: 999px; background: rgba(227, 161, 90, .26); }
.h-massage .h-bar { background: linear-gradient(90deg, var(--ember), var(--ember-hi), var(--ember)); background-size: 200% 100%; box-shadow: 0 0 24px rgba(227, 161, 90, .45); animation: warm 9s ease-in-out infinite alternate; }
.h-after .h-bar { background: linear-gradient(90deg, rgba(227, 161, 90, .5), rgba(227, 161, 90, 0)); }
@keyframes warm { from { background-position: 0 0; } to { background-position: 100% 0; } }
.hour h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.h-massage h3 { color: var(--ember-hi); }
.hour p { margin-top: 8px; color: var(--cream-2); }
.vv-after { margin-top: 34px; max-width: 60ch; font-size: 1.1rem; color: var(--cream-2); }

/* one slow breath: in for about four seconds, out for six */
.breath { position: relative; display: grid; place-items: center; min-height: clamp(380px, 60vh, 560px); padding: 0 var(--wrap); overflow: hidden; text-align: center; }
.breath-orb { position: absolute; left: 50%; top: 50%; width: min(78vw, 560px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, rgba(242, 188, 124, .34), rgba(227, 161, 90, .12) 42%, rgba(227, 161, 90, 0) 68%); animation: breathe 10s ease-in-out infinite; }
@keyframes breathe { 0% { scale: .78; opacity: .7; } 40% { scale: 1; opacity: 1; } 100% { scale: .78; opacity: .7; } }
.breath-line { position: relative; max-width: 16ch; font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.08; color: var(--cream); text-wrap: balance; }

@media (max-width: 860px) {
  .hour { grid-template-columns: 1fr; gap: 28px; }
  .h-bar { width: 22%; margin-bottom: 14px; }
  .h-talk .h-bar { width: 22%; }
  .h-massage .h-bar { width: 100%; }
  .h-after .h-bar { width: 36%; }
}
@media (prefers-reduced-motion: reduce) {
  .breath-orb, .h-massage .h-bar { animation: none; }
}