/* ============================================================
   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-xs) 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); }
/* ⚠️ .scrolled as well as .on-light: a dark hero's nav turns white on scroll, and btn-ghost is a
   white-on-translucent-white style — the Log in button vanished into the solid bar. */
.nav.on-light .btn-ghost,
.nav.scrolled .btn-ghost { color: var(--color-secondary); border-color: var(--color-primary); background: transparent; }
.nav.on-light .btn-ghost:hover,
.nav.scrolled .btn-ghost:hover { background: var(--brand-50); }
.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;
  /* nudge: centres the 20px badge on the first line of a top-aligned cell */
  margin-top: 2px; }
.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%); } }

/* .logos-flat — the redesign's treatment: bare greyscale logos, gap-spaced, rather than the
   default full-colour chips. Same partial and same marquee mechanics; the .logo-chip wrapper
   is flattened to a plain flex item so the markup contract still holds. */
.logos-band.logos-flat { padding: var(--space-2xl) 0; }
.logos-band.logos-flat .logos-lead { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: var(--space-l); }
/* Full-bleed: the marquee escapes its .wrap so the logos run edge to edge, while the lead line
   above stays within the grid. overflow-x guard on the band stops the 100vw breakout adding a
   horizontal scrollbar. logos-flat only — the default band stays inside the wrap. */
.logos-band.logos-flat { overflow-x: hidden; }
.logos-band.logos-flat .marquee { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* Spacing MUST be per-item margins, not gap on the track. The keyframe runs 0 -> -50%, which
   only repeats seamlessly if the two halves are identical in width. `gap` applies between
   items only, so the track is one gap short of twice a set and the loop visibly jumps.
   Margins give each chip its own spacing on both sides, so half the track is exactly one set.
   The default (colour) variant already does this and is unaffected. */
.logos-band.logos-flat .marquee-track { align-items: center; }
.logos-band.logos-flat .logo-chip { height: auto; margin: 0 var(--space-l); }
/* Width-capped like the default band (185px): the specialist set has single-line wordmarks (John Hunter,
   Kotara) that would otherwise run 500px+ at 44px tall and dwarf everything beside them. */
.logos-band.logos-flat .logo-chip img { max-height: 44px; max-width: 200px; opacity: .72; filter: grayscale(1); }
/* .logos-colour — the specialists band shows its logos in full colour (owner, 2026-09-12); the flat
   layout stays, only the greyscale/opacity treatment is lifted. */
.logos-band.logos-flat.logos-colour .logo-chip img { opacity: 1; filter: none; }

/* ---- 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; }
}