/* Online care page (online-care.html): scoped under .oc. Motion uses transform, opacity and clip-path only. */
.oc {
  --oc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --oc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --oc-slow: 900ms;
  --oc-fast: 260ms;
}

/* Scroll reveal: hidden only once JS has marked the page ready, so the page reads fine without JS */
.oc-ready .oc [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  transition: opacity var(--oc-slow) var(--oc-ease), transform var(--oc-slow) var(--oc-ease);
  transition-delay: calc(var(--oc-i, 0) * 70ms);
}
.oc-ready .oc [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero: words rise in one after another, facts count up, the rule draws across */
.oc-hero h1 .oc-word { display: inline-block; clip-path: inset(0 0 -.2em 0); }
.oc-hero h1 .oc-word > span { display: inline-block; transform: translate3d(0, 110%, 0); animation: oc-rise 1s var(--oc-ease) forwards; animation-delay: calc(var(--oc-w, 0) * 55ms + 120ms); }
.oc-hero .eyebrow, .oc-hero .aud-hero__lead, .oc-hero .aud-hero__actions { opacity: 0; animation: oc-fade 1s var(--oc-ease) forwards; }
.oc-hero .eyebrow { animation-delay: 60ms; }
.oc-hero .aud-hero__lead { animation-delay: 520ms; }
.oc-hero .aud-hero__actions { animation-delay: 900ms; }
.oc-facts { position: relative; border-top-color: transparent !important; }
.oc-facts::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: rgba(255,255,255,.35); transform-origin: left; transform: scaleX(0); animation: oc-draw 1.2s var(--oc-ease) 700ms forwards; }
.oc-facts li { opacity: 0; animation: oc-fade .9s var(--oc-ease) forwards; }
.oc-facts li:nth-child(1) { animation-delay: 760ms; }
.oc-facts li:nth-child(2) { animation-delay: 860ms; }
.oc-facts li:nth-child(3) { animation-delay: 960ms; }
.oc-facts strong { font-variant-numeric: tabular-nums; }

/* Buttons: a small lift and a press */
.oc .btn { transition: transform var(--oc-fast) var(--oc-spring), box-shadow var(--oc-fast) var(--oc-ease); will-change: auto; }
.oc .btn:hover { transform: translate3d(0, -2px, 0); }
.oc .btn:active { transform: translate3d(0, 0, 0) scale(.97); transition-duration: 90ms; }

/* Cards: lift on hover, the kicker slides, a soft glow follows the pointer */
.oc .aud__card, .oc .aud__step, .oc .aud__person {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform 420ms var(--oc-ease), box-shadow 420ms var(--oc-ease);
}
.oc .aud__card::after, .oc .aud__person::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--oc-x, 50%) var(--oc-y, 0%), rgba(232, 84, 32, .10), transparent 70%);
  transition: opacity 300ms var(--oc-ease);
}
@media (hover: hover) {
  .oc .aud__card:hover, .oc .aud__step:hover, .oc .aud__person:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 0 0 1px rgba(40,10,0,.08), 0 18px 40px -18px rgba(120, 40, 10, .35);
  }
  .oc .aud__card:hover::after, .oc .aud__person:hover::after { opacity: 1; }
  .oc .aud__card:hover .aud__kicker { transform: translate3d(4px, 0, 0); }
  .oc .aud__person:hover img { transform: scale(1.08) rotate(-2deg); }
}
.oc .aud__kicker { display: inline-block; transition: transform 400ms var(--oc-spring); }
.oc .aud__person img { transition: transform 600ms var(--oc-spring); }

/* Team: photo ring pulses once when it arrives */
.oc .aud__person span b { display: block; font-weight: 500; color: var(--color-ember); margin-bottom: .15rem; }
.oc .aud__person.is-in img { animation: oc-ring 1.4s var(--oc-ease) calc(var(--oc-i, 0) * 70ms + 200ms) 1; }

/* Programs */
.oc-prog__who { margin: 0; font-size: var(--text-small); color: var(--color-text-2); }
.oc-prog__list { display: grid; gap: .45rem; list-style: none; padding: .6rem 0 0; margin: 0; border-top: 1px solid rgba(40,10,0,.08); font-size: var(--text-small); }
.oc-prog__list li { display: grid; grid-template-columns: .9rem 1fr; gap: .5rem; align-items: baseline; }
.oc-prog__list li::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-ember); transform: scale(0); transition: transform 500ms var(--oc-spring); }
.oc-prog.is-in .oc-prog__list li::before { transform: scale(1); }
.oc-prog.is-in .oc-prog__list li:nth-child(2)::before { transition-delay: 120ms; }
.oc-prog.is-in .oc-prog__list li:nth-child(3)::before { transition-delay: 240ms; }
@media (min-width: 768px) and (max-width: 1099px) { .oc .aud__grid.oc-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The week: a line draws down the steps as they come in */
.oc-week .aud__step::before { transition: transform 600ms var(--oc-spring); transform: scale(.6); }
.oc-week .aud__step.is-in::before { transform: scale(1); }

/* Price lines slide in one by one, amounts settle */
.oc .aud__price-lines li { transition: transform 500ms var(--oc-ease), opacity 500ms var(--oc-ease); }
.oc-ready .oc .aud__price:not(.is-in) .aud__price-lines li { opacity: 0; transform: translate3d(-12px, 0, 0); }
.oc .aud__price.is-in .aud__price-lines li:nth-child(2) { transition-delay: 90ms; }
.oc .aud__price.is-in .aud__price-lines li:nth-child(3) { transition-delay: 180ms; }
.oc .aud__price.is-in .aud__price-lines li:nth-child(4) { transition-delay: 270ms; }
@media (hover: hover) { .oc .aud__price-lines li:hover strong { transform: translate3d(-3px, 0, 0); } }
.oc .aud__price-lines strong { transition: transform 300ms var(--oc-spring); }

/* FAQ: chevron turns, answer eases open */
.oc .faq__chevron { transition: transform 400ms var(--oc-spring); }
.oc details[open] .faq__chevron { transform: rotate(180deg); }
.oc details[open] .acc__body { animation: oc-fade 500ms var(--oc-ease); }

/* Links inside text: underline grows from the left */
.oc .text-2 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }

@keyframes oc-rise { to { transform: none; } }
@keyframes oc-fade { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes oc-draw { to { transform: scaleX(1); } }
@keyframes oc-ring { 0% { transform: scale(.9); } 50% { transform: scale(1.06); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .oc *, .oc *::before, .oc *::after { animation: none !important; transition: none !important; }
  .oc-ready .oc [data-reveal], .oc-ready .oc .aud__price .aud__price-lines li,
  .oc-hero .eyebrow, .oc-hero .aud-hero__lead, .oc-hero .aud-hero__actions, .oc-facts li { opacity: 1 !important; transform: none !important; }
  .oc-hero h1 .oc-word > span, .oc-prog__list li::before, .oc-week .aud__step::before { transform: none !important; }
  .oc-facts::before { transform: none; }
}
@media (min-width: 1100px) { .oc .aud__grid.oc-progs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Session clips: muted loops that play only while on screen */
.oc-clip__frame { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 16 / 9; background: var(--color-bg); box-shadow: 0 0 0 1px rgba(40,10,0,.06); isolation: isolate; }
.oc-clip__video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--oc-ease); }
.oc-panel.is-shown .oc-clip__video { transform: scale(1); }

.oc-clip__live { position: absolute; left: .9rem; top: .9rem; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; letter-spacing: .02em; color: #fff; background: rgba(20, 8, 2, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.oc-clip__live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #ff5a36; animation: oc-pulse 1.8s ease-in-out infinite; }
@keyframes oc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .oc-clip__video { transform: none !important; } }

/* Sample classes: tabs with a sliding ink bar, a clip and a minute-by-minute agenda */
.oc-tabs { position: relative; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .3rem; margin-bottom: 1.25rem; border-radius: 999px; background: var(--color-white); box-shadow: 0 0 0 1px rgba(40,10,0,.06); }
.oc-tabs::-webkit-scrollbar { display: none; }
.oc-tab { position: relative; z-index: 1; flex: 0 0 auto; padding: .6rem 1.05rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: var(--text-small); color: var(--color-text-2); cursor: pointer; transition: color 300ms var(--oc-ease), transform 200ms var(--oc-spring); }
.oc-tab:hover { color: var(--color-text); }
.oc-tab:active { transform: scale(.96); }
.oc-tab[aria-selected="true"] { color: #fff; }
.oc-tab:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 2px; }
.oc-tabs__ink { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: var(--ink-w, 0); border-radius: 999px; background: var(--color-text); transform: translate3d(var(--ink-x, 0), 0, 0); transition: transform 520ms var(--oc-spring), width 520ms var(--oc-ease); }
.oc-panel { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .oc-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: start; } .oc-panel .oc-clip__frame { position: sticky; top: 6rem; } }
.oc-panel[hidden] { display: none; }
.oc-panel.is-shown .oc-panel__body > * { animation: oc-fade 600ms var(--oc-ease) both; }
.oc-panel.is-shown .oc-panel__body > :nth-child(2) { animation-delay: 60ms; }
.oc-panel__body h3 { margin: 0; }
.oc-agenda { position: relative; display: grid; gap: .2rem; list-style: none; padding: 0 0 0 1.4rem; margin: 1rem 0 0; }
.oc-agenda::before { content: ""; position: absolute; left: .3rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: rgba(40,10,0,.08); }
.oc-agenda::after { content: ""; position: absolute; left: .3rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: var(--color-ember); transform-origin: top; transform: scaleY(0); }
.oc-panel.is-shown .oc-agenda::after { animation: oc-grow 1.6s var(--oc-ease) 150ms forwards; }
.oc-agenda__step { position: relative; display: grid; grid-template-columns: 5.2rem 1fr; gap: .75rem; padding: .7rem .8rem; border-radius: 14px; transition: transform 300ms var(--oc-ease); }
.oc-agenda__step::before { content: ""; position: absolute; left: -1.38rem; top: 1.05rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-white); box-shadow: 0 0 0 2px var(--color-ember); transform: scale(0); }
.oc-panel.is-shown .oc-agenda__step { animation: oc-fade 600ms var(--oc-ease) both; }
.oc-panel.is-shown .oc-agenda__step::before { animation: oc-pop 500ms var(--oc-spring) forwards; }
.oc-panel.is-shown .oc-agenda__step:nth-child(1), .oc-panel.is-shown .oc-agenda__step:nth-child(1)::before { animation-delay: 150ms; }
.oc-panel.is-shown .oc-agenda__step:nth-child(2), .oc-panel.is-shown .oc-agenda__step:nth-child(2)::before { animation-delay: 420ms; }
.oc-panel.is-shown .oc-agenda__step:nth-child(3), .oc-panel.is-shown .oc-agenda__step:nth-child(3)::before { animation-delay: 690ms; }
.oc-panel.is-shown .oc-agenda__step:nth-child(4), .oc-panel.is-shown .oc-agenda__step:nth-child(4)::before { animation-delay: 960ms; }
.oc-panel.is-shown .oc-agenda__step:nth-child(5), .oc-panel.is-shown .oc-agenda__step:nth-child(5)::before { animation-delay: 1230ms; }
@media (hover: hover) { .oc-agenda__step:hover { transform: translate3d(4px, 0, 0); } }
.oc-agenda__time { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--color-ember); padding-top: .15rem; }
.oc-agenda__step strong { display: block; font-weight: 500; }
.oc-agenda__step p { margin: .15rem 0 0; font-size: var(--text-small); color: var(--color-text-2); line-height: 1.5; }
.oc-leave { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--color-white); box-shadow: 0 0 0 1px rgba(40,10,0,.06); }
.aud--alt .oc-leave { background: var(--color-bg); }
.oc-leave ul { display: grid; gap: .35rem; list-style: none; padding: 0; margin: .5rem 0 0; font-size: var(--text-small); }
.oc-leave li::before { content: "\2713"; margin-right: .5rem; color: var(--color-ember); }
@media (max-width: 520px) { .oc-agenda__step { grid-template-columns: 1fr; gap: .2rem; } }
@keyframes oc-grow { to { transform: scaleY(1); } }
@keyframes oc-pop { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .oc-agenda::after, .oc-agenda__step::before { transform: none !important; } .oc-tabs__ink { transition: none; } }
