/* AnchorForce: motion layer (shared with the All Canadian site, recoloured). Loaded on every page after the main stylesheet.
   Rules: animate only transform and opacity (GPU-cheap), finish reveals before content is read,
   no animated blur filters, hover effects only on mouse devices, nothing moves under reduced motion. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Smooth wheel scrolling (Lenis, laptops/desktops only; loaded by motion.js) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* iPhone: clip instead of hidden keeps native momentum scrolling and sticky header intact */
@media (max-width: 860px) { html, body { overflow-x: hidden; overflow-x: clip; } }

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

/* ---------- Header: constant height, shadow fades in (opacity only) ---------- */
.head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(rgba(20,24,29,.12), rgba(20,24,29,0)); opacity: 0; transition: opacity .25s ease; }
.head.is-scrolled::after { opacity: 1; }

/* ---------- Scroll choreography ----------
   Block = the card/panel itself. Kids = the items inside it, cascading with --cd delays set by JS.
   Only transform + opacity animate (GPU), and JS strips these classes once the motion is finished. */
:root {
  --ease-spring: cubic-bezier(.22, 1.28, .36, 1);   /* soft landing with a hint of overshoot */
  --ease-pop: cubic-bezier(.34, 1.7, .5, 1);       /* bouncy, for small things */
  --ease-wipe: cubic-bezier(.77, 0, .18, 1);
  --rv-dist: 30px; --rv-kid: 14px;
}
@media (max-width: 860px) { :root { --rv-dist: 20px; --rv-kid: 10px; } }

/* blocks */
.rv { opacity: 0; transform: translate3d(0, var(--rv-dist), 0);
  transition: opacity .5s ease-out, transform .75s var(--ease-out); transition-delay: var(--rv-delay, 0s); backface-visibility: hidden; }
.rv.rv-card { transform: translate3d(0, calc(var(--rv-dist) + 10px), 0) scale(.96); transition: opacity .45s ease-out, transform .85s var(--ease-spring); transition-delay: var(--rv-delay, 0s); }
.rv.rv-pop { transform: translate3d(0, 18px, 0) scale(.82); transition: opacity .4s ease-out, transform .75s var(--ease-pop); transition-delay: var(--rv-delay, 0s); }
.rv.rv-left { transform: translate3d(calc(var(--rv-dist) * -1.2), 0, 0); }
.rv.rv-right { transform: translate3d(calc(var(--rv-dist) * 1.2), 0, 0); }
.rv.rv-zoom { transform: scale(.95); }
.rv.rv-in { opacity: 1; transform: none; }

/* kids: fade + rise */
.rv .rv-c { display: block; opacity: 0; transform: translate3d(0, var(--rv-kid), 0);
  transition: opacity .45s ease-out, transform .6s var(--ease-out); transition-delay: var(--cd, 0s); }
.rv li.rv-c { display: list-item; }
.rv .rv-c.btn { display: inline-flex; }
.rv .rv-c.more, .rv .rv-c.go { display: inline-block; }
.rv .pane-cta.rv-c { display: flex; }
.rv.rv-in .rv-c { opacity: 1; transform: none; }

/* kids: pop with a bounce (icons, logos, pills, buttons) */
.rv .rv-p { opacity: 0; transform: scale(.55); transition: opacity .3s ease-out, transform .6s var(--ease-pop); transition-delay: var(--cd, 0s); }
.rv svg.rv-p { transform: scale(.4) rotate(-14deg); }
.rv .rv-p.btn { transform: translate3d(0, 10px, 0) scale(.9); }
.rv.rv-in .rv-p { opacity: 1; transform: none; }

/* kids: photo wipe (a panel slides off while the photo settles from a slight zoom) */
.rv .rv-w { position: relative; overflow: hidden; }
.rv .rv-w::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--wipe, #2a3138);
  transform-origin: 50% 100%; transform: scaleY(1); transition: transform .9s var(--ease-wipe); transition-delay: var(--cd, 0s); }
.rv .rv-w img { transform: scale(1.14); transition: transform 1.25s var(--ease-out); transition-delay: var(--cd, 0s); }
.rv.rv-in .rv-w::after { transform: scaleY(0); }
.rv.rv-in .rv-w img { transform: none; }
.pc .rv-w { --wipe: #eceef0; }

/* jumped past (anchor link, fast fling): show at once */
.rv.rv-now, .rv.rv-now .rv-c, .rv.rv-now .rv-p, .rv.rv-now .rv-w::after, .rv.rv-now .rv-w img { transition: none !important; }

@media (max-width: 860px) {
  .rv.rv-left, .rv.rv-right { transform: translate3d(0, var(--rv-dist), 0); }
  .rv .rv-w img { transform: scale(1.08); }
}

/* ---------- Hero intro (pure CSS, quick: everything readable within ~0.7s) ---------- */
@keyframes acUp { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes acFloat { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes acDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(70px,-40px,0); } }
@keyframes acDrift2 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-60px,30px,0); } }

.home .hero .eyebrow, .home .hero h1 > span, .home .hero .lead, .home .hero .cta, .home .hero .textlink,
.phero .crumbs, .phero h1, .phero .lead, .phero .cta { animation: acUp .6s var(--ease-out) both; }
.home .hero h1 > span:nth-child(1) { animation-delay: .05s; }
.home .hero h1 > span:nth-child(2) { animation-delay: .1s; }
.home .hero h1 > span:nth-child(3) { animation-delay: .15s; }
.home .hero .lead { animation-delay: .22s; }
.home .hero .cta { animation-delay: .28s; }
.home .hero .textlink { animation-delay: .33s; }
.home .hero .card { animation: acFloat .8s var(--ease-out) .12s both; }
.phero h1 { animation-delay: .05s; } .phero .lead { animation-delay: .12s; } .phero .cta { animation-delay: .18s; }

/* Red glows: soft radial gradients (no blur filter), drifting slowly on the GPU */
.hero, .phero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after, .phero::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; }
.hero::before, .phero::before { width: 760px; height: 760px; left: -300px; top: -320px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05) 55%, transparent); animation: acDrift 18s ease-in-out infinite; }
.hero::after { width: 680px; height: 680px; right: -260px; bottom: -340px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.1), transparent); animation: acDrift2 22s ease-in-out infinite; }
@media (max-width: 860px), (hover: none) {
  .hero::before, .hero::after, .phero::before { animation: none; will-change: auto; }
  .hero::before, .phero::before { width: 480px; height: 480px; left: -220px; top: -220px; }
}

/* ---------- Brand marquee ---------- */
.marquee { background: var(--steel, #2a3138); color: #fff; overflow: hidden; padding-block: 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: acMarquee 38s linear infinite; will-change: transform; }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; }
.marquee a { display: inline-flex; align-items: center; text-decoration: none; font-stretch: 68%; font-weight: 850; font-size: 1.55rem; letter-spacing: .03em; padding-inline: 28px; white-space: nowrap; transition: color .2s; }
.marquee a::after { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); margin-left: 56px; margin-right: -28px; }
.marquee a:hover { color: #ff8a8e; }
@keyframes acMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 680px) { .marquee { padding-block: 14px; } .marquee a { font-size: 1.3rem; padding-inline: 20px; } .marquee a::after { margin-left: 40px; margin-right: -20px; } }

/* ---------- Hover polish (mouse devices only) ---------- */
.btn { position: relative; overflow: hidden; transition: background-color .2s, color .2s, transform .25s var(--ease-out), box-shadow .25s; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translate3d(-120%,0,0); transition: transform .7s ease; pointer-events: none; }
.more span[aria-hidden], .go span[aria-hidden], .textlink span[aria-hidden] { display: inline-block; transition: transform .3s var(--ease-out); }
.cimg img { transition: transform .7s var(--ease-out); }
.bt, .pane, .catcard, .pc { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s; }
.bt .lg img { transition: transform .35s var(--ease-out); }
.perk svg { transition: transform .35s var(--ease-out), background-color .3s; }
.staffline li { transition: background-color .2s, color .2s; }
nav.main a { transition: border-color .2s, color .2s; }
.btn:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0,-2px,0); }
  .btn-primary:hover { box-shadow: 0 10px 24px rgba(var(--accent-rgb),.32); }
  .btn-primary:hover::after { transform: translate3d(120%,0,0); }
  a:hover .more span[aria-hidden], .bt:hover .go span[aria-hidden], .textlink:hover span[aria-hidden] { transform: translate3d(5px,0,0); }
  .catcard:hover { transform: translate3d(0,-4px,0); box-shadow: 0 2px 4px rgba(20,24,29,.08), 0 18px 40px rgba(20,24,29,.13); }
  .catcard:hover .cimg img { transform: scale(1.05); }
  .bt:hover { transform: translate3d(0,-4px,0); box-shadow: 0 14px 32px rgba(20,24,29,.1); }
  .bt:hover .lg img { transform: scale(1.05); }
  .pane:hover { transform: translate3d(0,-4px,0); box-shadow: 0 18px 40px rgba(20,24,29,.18); }
  .perk:hover svg { transform: rotate(-6deg) scale(1.08); background: #ffe3a8; }
  .staffline li:hover { background: var(--accent); color: #fff; }
  .pc:hover { transform: translate3d(0,-3px,0); box-shadow: 0 14px 30px rgba(20,24,29,.12); }
}

/* Spotlight that follows the mouse on cards (JS sets --mx/--my once per frame) */
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb),.09), transparent 60%); }
@media (hover: hover) { .spot:hover::before { opacity: 1; } }

/* ---------- Back to top ---------- */
.ac-top { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: #14181d; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.25);
  opacity: 0; transform: translate3d(0,14px,0) scale(.92); pointer-events: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), background-color .2s; }
.ac-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .ac-top:hover { background: var(--accent); } }
.ac-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .ac-top { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; width: 46px; height: 46px; } }

/* ---------- Reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv .rv-c, .rv .rv-p, .rv .rv-w img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rv .rv-w::after { display: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-group[aria-hidden] { display: none; }
  .hero::before, .hero::after, .phero::before { animation: none; }
  .btn:hover, .pc:hover, .bt:hover, .pane:hover, .catcard:hover { transform: none; }
}