/* Hamiltonn Home Improvement — cinematic page hero v3.5.0 (all pages, ch- prefix)
   Variants: default = full viewport; .is-compact = reading/utility pages; .is-plain = no media (navy).
   Media: a looping self-hosted video over its poster, or the page photograph with a slow camera move. */

/* ---------- Frame ---------- */
.ch-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 640px; min-height: max(640px, 100vh); min-height: max(640px, 100svh);
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.9);
}
.ch-hero.is-compact { min-height: 560px; min-height: max(560px, 74vh); min-height: max(560px, 74svh); }
.ch-hero.is-plain {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(201, 161, 92, 0.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(31, 51, 72, 0.75), transparent 55%),
    var(--navy-950);
}
.ch-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ch-hero-media img,
.ch-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ch-hero-video { opacity: 0; transition: opacity 1.2s ease; }
.ch-hero-video.is-on { opacity: 1; }
.ch-hero-video.is-dim { opacity: 0; transition-duration: 0.8s; }

/* Navy shade: keeps the copy readable over bright footage, warms the edges with crest gold */
.ch-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 50%, rgba(10, 20, 32, 0.55), rgba(10, 20, 32, 0.24) 70%, transparent),
    radial-gradient(1100px 520px at 85% -10%, rgba(201, 161, 92, 0.14), transparent 60%),
    linear-gradient(to bottom, rgba(10, 20, 32, 0.74) 0%, rgba(10, 20, 32, 0.34) 22%, rgba(10, 20, 32, 0.42) 62%, rgba(10, 20, 32, 0.92) 100%);
}
.ch-hero.is-plain .ch-hero-shade { display: none; }

/* ---------- Content ---------- */
.ch-hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 64rem;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 7vh, 5rem)) clamp(5.5rem, 12vh, 7.5rem);
}
.ch-hero.is-compact .ch-hero-inner { padding-block: calc(var(--header-h) + clamp(3.5rem, 7vh, 4.5rem)) clamp(3.5rem, 8vh, 5rem); }
.ch-hero-top { position: absolute; top: calc(var(--header-h) + 22px); left: 0; right: 0; z-index: 1; }
.ch-hero-top .breadcrumbs { margin: 0; }
.ch-hero-icon {
  position: relative;
  display: grid; place-items: center;
  width: 68px; height: 68px; margin-bottom: 26px;
  border-radius: 50%;
  border: 1px solid rgba(217, 185, 94, 0.5);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(4, 10, 18, 0.5), 0 0 30px rgba(217, 185, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--gold-200);
}
.ch-hero-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.ch-hero-icon::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(217, 185, 94, 0.55);
  opacity: 0; pointer-events: none;
}
.ch-hero .overline { margin-bottom: 20px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.ch-hero-title {
  max-width: 18em; margin: 0 0 0.42em;
  font-size: clamp(2.4rem, 4vw + 1rem, 4.1rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(4, 10, 18, 0.55);
  text-wrap: balance;
}
.ch-hero-title.is-long { font-size: clamp(2.1rem, 2.6vw + 1rem, 3.3rem); max-width: 20em; }
.ch-hero-title em { font-style: italic; font-weight: 500; color: var(--gold-300); }
.ch-hero-lede {
  max-width: 620px; margin: 0;
  font: 500 clamp(1rem, 0.3vw + 0.95rem, 1.0625rem) / 1.6 var(--font-text);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 14px rgba(4, 10, 18, 0.6);
  text-wrap: balance;
}
.ch-hero .hero-actions { justify-content: center; margin-top: 36px; }
.ch-hero .hero-ticks { justify-content: center; margin-top: 30px; }
.ch-hero .btn-gold:hover,
.ch-hero .btn-gold:focus-visible {
  box-shadow: 0 0 0 1px rgba(236, 217, 164, 0.55), 0 0 26px rgba(217, 185, 94, 0.55), 0 0 64px rgba(217, 185, 94, 0.28);
}
.ch-hero .btn-ghost {
  color: #fff; border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ch-hero .btn-ghost svg { color: var(--gold-300); }
.ch-hero .btn-ghost:hover,
.ch-hero .btn-ghost:focus-visible {
  color: var(--navy-950); border-color: #fff; background: #fff;
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.35);
}
.ch-hero .btn-ghost:hover svg { color: var(--navy-950); }
.ch-br { display: none; }
@media (min-width: 768px) { .ch-br { display: inline; } }
@media (max-width: 640px) {
  .ch-hero-top { display: none; }
  .ch-hero-icon { width: 60px; height: 60px; margin-bottom: 22px; }
  .ch-hero-icon svg { width: 26px; height: 26px; }
  .ch-hero .hero-actions { width: 100%; max-width: 360px; }
  .ch-hero .hero-ticks { gap: 8px 18px; }
}

/* ---------- Photo heroes: slow cinematic camera move ---------- */
@keyframes chKen { from { transform: scale(1.14) translate3d(1.2%, 0.8%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .ch-hero.is-photo .ch-hero-media img { animation: chKen 24s cubic-bezier(0.25, 0.1, 0.25, 1) both; will-change: transform; }
}

/* ---------- Step-by-step entrance ----------
   html.ch-anim is set in <head> only when motion is allowed. Delays come from cinema-hero.js
   (--ch-d per element/word); the fallback values below still reveal everything if the script fails.
   fill-mode "backwards" only: the hidden "from" state holds during the delay, then the normal
   styles take over again, so hover lifts (.btn transform) and the scroll cue's centring keep working. */
@keyframes chRise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes chWord { from { opacity: 0; transform: translateY(15px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chDrop {
  0% { opacity: 0; transform: translateY(-34px) scale(0.82); }
  60% { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes chPulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes chFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .ch-anim .ch-hero [data-ch-step] { animation: chRise 0.8s var(--ease-out) backwards; animation-delay: var(--ch-d, 1.6s); }
  .ch-anim .ch-hero .ch-hero-icon { animation: chDrop 0.9s var(--ease-out) backwards; animation-delay: var(--ch-d, 0.15s); }
  .ch-anim .ch-hero .ch-hero-icon::after { animation: chPulse 2.6s ease-out 1.4s 3; }
  .ch-anim .ch-hero .ch-hero-title { animation-delay: var(--ch-d, 0.7s); }
  .ch-anim .ch-hero .ch-hero-lede { animation-delay: var(--ch-d, 1.2s); }
  /* Split by cinema-hero.js: the block itself shows at once, each word animates on its own delay */
  .ch-anim .ch-hero .is-split { animation: none; }
  .ch-w { display: inline-block; }
  .ch-anim .ch-hero .ch-w { animation: chWord 0.7s var(--ease-out) backwards; animation-delay: var(--ch-d, 0s); }
  .ch-anim .ch-hero .hero-actions .btn { animation: chRise 0.75s var(--ease-out) backwards; animation-delay: var(--ch-d, 2.2s); }
  .ch-anim .ch-hero .hero-ticks li { animation: chRise 0.6s var(--ease-out) backwards; animation-delay: var(--ch-d, 2.5s); }
  .ch-anim .ch-hero .hero-scroll { animation: chFade 0.9s ease backwards; animation-delay: var(--ch-d, 2.8s); }
}