/* ============================================================
   Bespoke CSS — animations, decorative motifs, state-driven UI
   Things that can't be expressed as design tokens or component
   classes. Pure vanilla CSS, no framework dependency.
   ============================================================ */

/* ---- Decorative motifs ---- */
/* Deco overflow: default clips x-axis only, y bleeds freely. */
.has-deco { position: relative; clip-path: inset(-999px 0); }
/* Bleed bottom: deco renders ABOVE the next section's background */
.has-deco.deco-over { z-index: 2; }
/* Clip all sides (spheres contained within section) */
.has-deco.deco-contain { clip-path: inset(0); }
/* Legacy alias */
.has-deco-bleed { position: relative; clip-path: inset(0); }
.cc-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.cc-deco > * { position: absolute; }
.blend-group { position: relative; overflow: clip; }
.blend-group > .cc-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.blend-group > section { position: relative; z-index: 1; }
.cc-orb { border-radius: var(--radius-full); filter: blur(2px); }
.cc-sphere { border-radius: var(--radius-full); }
.cc-sphere.sky { background: radial-gradient(circle at 38% 34%, rgba(103,184,220,.22), rgba(103,184,220,.06) 66%, rgba(103,184,220,0) 72%); }
.cc-sphere.blue { background: radial-gradient(circle at 38% 34%, rgba(67,143,185,.18), rgba(67,143,185,.05) 66%, rgba(67,143,185,0) 72%); }
.cc-sphere.pale { background: radial-gradient(circle at 38% 34%, rgba(220,235,244,.85), rgba(220,235,244,.28) 62%, rgba(220,235,244,0) 70%); }
.cc-sphere.ondark { background: radial-gradient(circle at 38% 34%, rgba(103,184,220,.16), rgba(103,184,220,.04) 64%, rgba(103,184,220,0) 72%); }
.cc-glow { border-radius: var(--radius-full); filter: blur(70px); }
.cc-ring { border-radius: var(--radius-full); border: 2px solid currentColor; }
.cc-tri { width: var(--tri, 180px); aspect-ratio: 1/0.62; }
.cc-tri i { position: absolute; border-radius: var(--radius-full); background: currentColor; }
.cc-tri i:nth-child(1) { width: 24%; aspect-ratio: 1; left: 38%; top: 0; }
.cc-tri i:nth-child(2) { width: 24%; aspect-ratio: 1; left: 0; top: 55%; }
.cc-tri i:nth-child(3) { width: 24%; aspect-ratio: 1; right: 0; top: 55%; }
.cc-wm {
  -webkit-mask: url(/assets/logo/confcare-mark-mono.svg) no-repeat center / contain;
  mask: url(/assets/logo/confcare-mark-mono.svg) no-repeat center / contain;
  background: currentColor;
}
.cc-mark { line-height: 0; pointer-events: none; }
.cc-mark .cc-mark-svg { width: 100%; height: auto; display: block; fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .cc-float { animation: cc-bob 9s ease-in-out infinite; }
  .cc-float.slow { animation-duration: 13s; }
  .cc-float.alt { animation-direction: alternate-reverse; }
  .cc-sphere { animation: cc-drift 19s ease-in-out infinite; will-change: transform; }
  .cc-sphere.pale { animation-duration: 24s; animation-direction: alternate; }
  .cc-sphere.sky { animation-duration: 17s; }
  .cc-sphere.blue { animation-duration: 21s; animation-direction: alternate-reverse; }
  .cc-sphere.ondark { animation-duration: 22s; animation-direction: alternate-reverse; }
  .cta-card .cc-sphere { animation: none; will-change: auto; }
}
@keyframes cc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes cc-drift {
  0% { transform: translate(0,0); }
  25% { transform: translate(16px,-20px); }
  50% { transform: translate(-6px,-30px); }
  75% { transform: translate(-18px,-12px); }
  100% { transform: translate(0,0); }
}

/* ---- Scroll reveal now handled by framework/animations.css (CSS-native) ---- */

/* ---- Scroll progress bar ---- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary), var(--color-accent)); pointer-events: none; }

/* ---- Nav scroll/light states (JS-driven) ---- */
.nav.scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: var(--shadow-xs); padding: var(--space-2xs) 0; }
.nav.scrolled .logo.white { display: none; }
.nav.scrolled .logo.colour { display: block; }
.nav.scrolled .nav-links a.link { color: var(--color-ink); }
.nav.scrolled .nav-links a.link:hover { color: var(--color-secondary); }
.nav.scrolled .btn-ghost { color: var(--color-secondary); border-color: var(--color-primary); background: transparent; }
.nav.on-light .logo.white, .nav.logo-colour .logo.white { display: none; }
.nav.on-light .logo.colour, .nav.logo-colour .logo.colour { display: block; }
.nav.on-light .nav-links a.link { color: var(--color-ink); }
.nav.on-light .btn-ghost { color: var(--color-secondary); border-color: var(--color-primary); background: transparent; }
.nav.scrolled .nav-toggle, .nav.on-light .nav-toggle { border-color: var(--color-primary); background: transparent; }
.nav.scrolled .nav-toggle svg, .nav.on-light .nav-toggle svg { stroke: var(--color-secondary); }

/* ---- References modal animation ---- */
.refs-modal { opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .3s var(--ease), transform .34s var(--ease),
    overlay .34s var(--ease) allow-discrete, display .34s var(--ease) allow-discrete; }
.refs-modal[open] { opacity: 1; transform: none; }
@starting-style { .refs-modal[open] { opacity: 0; transform: translateY(12px) scale(.985); } }
.refs-modal::backdrop { background: rgba(22,56,78,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease), backdrop-filter .3s var(--ease),
    overlay .3s var(--ease) allow-discrete, display .3s var(--ease) allow-discrete; }
.refs-modal[open]::backdrop { opacity: 1; }
@starting-style { .refs-modal[open]::backdrop { opacity: 0; } }
@keyframes ref-flash { 0%,100% { background: transparent; } 18% { background: rgba(103,184,220,.22); } }
.refs-modal li.flash { animation: ref-flash 1.6s var(--ease); }

/* ---- FAQ accordion animation ---- */
.faq details::details-content { height: 0; overflow: clip; opacity: 0; transform: translateY(-4px);
  transition: height .32s var(--ease), opacity .28s var(--ease), transform .32s var(--ease),
    content-visibility .32s var(--ease) allow-discrete; }
.faq details[open]::details-content { height: auto; opacity: 1; transform: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2.4px solid var(--color-primary); border-bottom: 2.4px solid var(--color-primary);
  transform: rotate(45deg); transition: transform .25s var(--ease); margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 2px; }

/* ---- Comparison table check marks ---- */
.compare-row span.good::before { content: "\2713"; flex: none; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-success), oklch(from var(--color-success) calc(l + 0.1) c h)); color: #fff; font-size: 11px; font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 1px; }
.compare-row.head span.good::before { display: none; }

/* ---- Logo marquee animation ---- */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Photo frame Ken Burns ---- */
.kb-wrap { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.kb-wrap img { border-radius: 0; }
.kb-show .kb-wrap { aspect-ratio: 3/4; }
.kb-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.kb-slide:nth-child(1) { opacity: 1; animation: kb-fade-1 27s linear infinite, kb-move-1 18s ease-in-out infinite alternate; }
.kb-slide:nth-child(2) { animation: kb-fade-2 27s linear infinite, kb-move-2 20s ease-in-out infinite alternate; }
.kb-slide:nth-child(3) { animation: kb-fade-3 27s linear infinite, kb-move-3 22s ease-in-out infinite alternate; }
@keyframes kb-fade-1 { 0%{opacity:1;} 30%{opacity:1;} 36%{opacity:0;} 94%{opacity:0;} 100%{opacity:1;} }
@keyframes kb-fade-2 { 0%{opacity:0;} 30%{opacity:0;} 36%{opacity:1;} 63%{opacity:1;} 69%{opacity:0;} 100%{opacity:0;} }
@keyframes kb-fade-3 { 0%{opacity:0;} 63%{opacity:0;} 69%{opacity:1;} 94%{opacity:1;} 100%{opacity:0;} }
@keyframes kb-move-1 { 0%{transform:scale(1.20) translate(-4%,-1.5%);} 100%{transform:scale(1.28) translate(4%,1.5%);} }
@keyframes kb-move-2 { 0%{transform:scale(1.28) translate(3%,2%);} 100%{transform:scale(1.20) translate(-3%,-1%);} }
@keyframes kb-move-3 { 0%{transform:scale(1.20) translate(1%,-3%);} 100%{transform:scale(1.28) translate(-1%,3%);} }
.ken-burns .kb-wrap img { animation: kb-single 18s ease-in-out infinite alternate; }
.ken-burns-sm .kb-wrap img { animation: kb-single 16s ease-in-out infinite alternate; }
.ken-burns-lg .kb-wrap img { animation: kb-single 22s ease-in-out infinite alternate; }
@keyframes kb-single { 0%{transform:scale(1.18) translate(-3%,-1%);} 100%{transform:scale(1.26) translate(3%,1%);} }

/* ---- Video mosaic ---- */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.mosaic-controls { display: flex; justify-content: center; margin-top: var(--space-xs); grid-column: 1/-1; }
.mosaic-controls img { width: 260px; height: auto; filter: drop-shadow(0 4px 12px rgba(13,38,56,.18)); }
.tile { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile .tag { position: absolute; left: 10px; bottom: 10px; background: rgba(13,38,56,.82); color: #fff; font-size: var(--step--2); font-weight: var(--weight-semibold); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-md); backdrop-filter: blur(4px); }
.tile .mic { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; background: rgba(13,38,56,.82); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #fff; }
.tile .mic svg { width: 13px; height: 13px; }
.tile .live { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: var(--space-3xs); background: rgba(13,38,56,.7); color: #fff; font-size: var(--step--2); font-weight: var(--weight-bold); letter-spacing: .08em; padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-md); backdrop-filter: blur(4px); }
.tile .live i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success); box-shadow: 0 0 0 0 rgba(63,174,106,.6); animation: mosaic-pulse 2.2s infinite; }
@keyframes mosaic-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,174,106,.55); } 70% { box-shadow: 0 0 0 8px rgba(63,174,106,0); } 100% { box-shadow: 0 0 0 0 rgba(63,174,106,0); } }

/* ---- Ambient float for float cards / radial cards ---- */
@keyframes float-y {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--float-d, -8px); }
}
@keyframes float-x {
  0%, 100% { translate: 0 0; }
  50%      { translate: var(--float-d, 6px) 0; }
}
@keyframes float-diag {
  0%, 100% { translate: 0 0; }
  50%      { translate: var(--float-dx, 5px) var(--float-dy, -7px); }
}
[data-float]         { animation: float-y var(--float-dur, 4s) ease-in-out infinite; }
[data-float="x"]    { animation-name: float-x; }
[data-float="diag"] { animation-name: float-diag; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .kb-wrap img { animation: none !important; }
  .kb-slide { animation: none !important; opacity: 1; }
  .kb-slide ~ .kb-slide { opacity: 0; }
  * { animation: none !important; }
}