/*
 * St. Lawrence — motion layer v1 (decorative only).
 * Rules: transform/opacity/translate only (no layout shift), nothing hides the H1,
 * every hidden state lives under html.sl-js so the page is fully visible without
 * JS or if motion.js fails (a 4 s failsafe in <head> removes sl-js), and
 * prefers-reduced-motion switches the whole layer off.
 */
:root { --sl-ease: cubic-bezier(.2, .7, .2, 1); }

@keyframes slUp    { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes slRight { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes slLift  { from { translate: 0 16px; } to { translate: 0 0; } }
@keyframes slShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes slFloatA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(36px, -28px, 0) scale(1.1); } }
@keyframes slFloatB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40px, 26px, 0) scale(1.12); } }
@keyframes slZoom  { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes slRing  { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes slShine { 0%, 55% { translate: -130% 0; } 100% { translate: 130% 0; } }

/* ---------- Hero entrance (classes are in the markup, so no flash) ---------- */
html.sl-js .sl-in    { animation: slUp .85s var(--sl-ease) both; animation-delay: calc(var(--d, 0) * 110ms); }
html.sl-js .sl-in-r  { animation: slRight .95s var(--sl-ease) both; animation-delay: calc(var(--d, 0) * 110ms); }
html.sl-js .sl-lift  { animation: slLift .8s var(--sl-ease) both; }

/* Gold headline shimmer */
html.sl-js .sl-shimmer {
  background-size: 220% 100%;
  animation: slShimmer 7s linear infinite;
}

/* Slow Ken Burns on hero photographs */
html.sl-js main > section:first-of-type > img { animation: slZoom 24s ease-in-out infinite alternate; will-change: transform; }

/* Floating light orbs behind hero content (injected by motion.js, aria-hidden) */
.sl-orb {
  position: absolute; border-radius: 9999px; pointer-events: none;
  filter: blur(64px); opacity: .55; will-change: transform;
}
.sl-orb-a { width: 340px; height: 340px; top: -90px; right: 6%;  background: radial-gradient(circle, rgba(212,175,55,.55), rgba(212,175,55,0) 70%); animation: slFloatA 15s ease-in-out infinite; }
.sl-orb-b { width: 420px; height: 420px; bottom: -160px; left: -80px; background: radial-gradient(circle, rgba(80,130,220,.45), rgba(80,130,220,0) 70%); animation: slFloatB 19s ease-in-out infinite; }

/* ---------- Scroll reveal ---------- */
html.sl-js .sl-rv { opacity: 0; translate: 0 28px; }
html.sl-js.sl-ready .sl-rv {
  transition: opacity .85s var(--sl-ease), translate .85s var(--sl-ease);
  transition-delay: var(--sl-d, 0ms);
}
html.sl-js .sl-rv.sl-on { opacity: 1; translate: 0 0; }

/* Gold accent line under section headings */
html.sl-js .sl-head h2::after {
  content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin: 16px auto 0;
  background: linear-gradient(90deg, #D4AF37, #f2dc86, #D4AF37);
  transform: scaleX(0); transform-origin: center;
  transition: transform .9s var(--sl-ease) .4s;
}
html.sl-js .sl-head.sl-on h2::after { transform: scaleX(1); }

/* ---------- Cards and photos ---------- */
.sl-card { transition: transform .4s var(--sl-ease), box-shadow .4s var(--sl-ease), border-color .4s; }
main figure .overflow-hidden img { transition: transform 1s var(--sl-ease); }
@media (hover: hover) {
  .sl-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -14px rgba(15, 44, 89, .28); border-color: rgba(212, 175, 55, .65); }
  main figure:hover .overflow-hidden img { transform: scale(1.07); }
}

/* Light sweep across primary gold buttons */
.sl-shine { position: relative; overflow: hidden; isolation: isolate; }
.sl-shine::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  translate: -130% 0; animation: slShine 4.2s ease-in-out infinite 1.4s;
}

/* WhatsApp pulse ring */
[data-wa-float]::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #22c55e; z-index: -1;
  animation: slRing 2.8s ease-out infinite; pointer-events: none;
}

/* Reading progress bar */
.sl-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none;
  background: linear-gradient(90deg, #D4AF37, #f2dc86, #D4AF37);
  transform: scaleX(0); transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  html.sl-js .sl-in, html.sl-js .sl-in-r, html.sl-js .sl-lift, html.sl-js .sl-shimmer,
  html.sl-js main > section:first-of-type > img, .sl-orb, .sl-shine::after, [data-wa-float]::before { animation: none !important; }
  html.sl-js .sl-rv { opacity: 1 !important; translate: 0 0 !important; transition: none !important; }
  .sl-card, main figure .overflow-hidden img { transition: none !important; }
  .sl-progress { display: none; }
}