/* ============================================
   Hero Section – Cinematic look + high animation
   Add-on for css/style.css (loaded after it, so it wins).
   To switch off: remove this <link>, js/hero-animations.js
   and the .hero-aurora / .hero-beam / .hero-feature blocks.
   ============================================ */

/* ---------- 0. Cinematic dark overlay (photo stays vivid) ---------- */
.hero-section {
  --hero-gold-light: #f6d58a;
  background: #14100b;
}

.hero-section::after {
  background:
    linear-gradient(0deg, rgba(12, 9, 6, .72) 0%, rgba(12, 9, 6, 0) 34%),
    linear-gradient(90deg, rgba(12, 9, 6, .88) 0%, rgba(12, 9, 6, .72) 34%, rgba(12, 9, 6, .28) 66%, rgba(12, 9, 6, .08) 100%);
}

.hero-grid { position: relative; z-index: 2; }

.hero-eyebrow { color: var(--hero-gold-light); }
.hero-eyebrow::before { background: linear-gradient(90deg, #d7a72f, var(--hero-gold-light)); height: 2px; }

.hero-title { color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.hero-description { color: rgba(255, 255, 255, .86); }

.hero-secondary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-secondary:hover { background: rgba(255, 255, 255, .22); border-color: var(--hero-gold-light); }

.hero-trust { color: rgba(255, 255, 255, .92); border-top-color: rgba(255, 255, 255, .22); }
.hero-trust i { color: var(--hero-gold-light); }

/* ---------- 1. Slide transition: cinematic wipe + slow drift (Ken Burns) ---------- */
.hero-slide.is-active { animation: hero-wipe 1.5s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

.hero-slide.is-active img { animation-duration: 8.5s; animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
.hero-slide:nth-child(1).is-active img { animation-name: hero-kb-a; transform-origin: 30% 60%; }
.hero-slide:nth-child(2).is-active img { animation-name: hero-kb-b; transform-origin: 70% 50%; }
.hero-slide:nth-child(3).is-active img { animation-name: hero-kb-c; transform-origin: 50% 40%; }

@keyframes hero-kb-a { from { transform: scale(1.16) translate3d(1.6%, 0, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
@keyframes hero-kb-b { from { transform: scale(1.14) translate3d(-1.6%, 1.2%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
@keyframes hero-kb-c { from { transform: scale(1.18) translate3d(0, -1.6%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }

.hero-slides { will-change: transform; }

/* ---------- 2. Title: words rise out of a mask, gold line shimmers ---------- */
.hero-title.is-split { animation: none; filter: none; opacity: 1; transform: none; }

.hero-title .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .04em .16em 0;
  margin-bottom: -.16em;
}

.hero-title .hwi {
  display: inline-block;
  transform: translate3d(0, 112%, 0) rotate(7deg);
  transform-origin: 0 100%;
  animation: hero-word-in 1.15s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.2s + var(--i, 0) * .11s);
}

@keyframes hero-word-in { from { transform: translate3d(0, 112%, 0) rotate(7deg); } to { transform: translate3d(0, 0, 0) rotate(0); } }

/* gold second line — gradient sits on each word so the mask reveal still works */
.hero-title > span:not(.hw) { display: block; }
.hero-title > span:not(.hw) .hwi,
.hero-title:not(.is-split) > span:not(.hw) {
  background: linear-gradient(100deg, #ffe7ae 0%, #e6b043 28%, #fff4cf 50%, #e6b043 72%, #ffe7ae 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-title > span:not(.hw) .hwi { animation: hero-word-in 1.15s cubic-bezier(.16, 1, .3, 1) both, hero-shimmer 5s ease-in-out 1.8s infinite; animation-delay: calc(.2s + var(--i, 0) * .11s), 1.8s; }
.hero-title:not(.is-split) > span:not(.hw) { animation: hero-shimmer 5s ease-in-out 1.8s infinite; }

@keyframes hero-shimmer {
  0%   { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}

/* ---------- 3. Eyebrow rule draws itself ---------- */
.hero-eyebrow::before {
  transform-origin: left center;
  animation: hero-rule-draw 1.1s cubic-bezier(.16, 1, .3, 1) .35s both;
}
@keyframes hero-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 4. Buttons: light sweep, magnetic pull (JS) ---------- */
.hero-primary { position: relative; overflow: hidden; }
.hero-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: hero-btn-sweep 3.6s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes hero-btn-sweep { 0% { left: -70%; } 35%, 100% { left: 140%; } }

.hero-primary { animation: hero-btn-glow 3.2s ease-in-out 2.4s infinite; }
@keyframes hero-btn-glow {
  0%, 100% { box-shadow: 0 12px 22px rgba(183, 122, 18, .26), 0 0 0 0 rgba(246, 213, 138, .5); }
  50%      { box-shadow: 0 14px 28px rgba(183, 122, 18, .38), 0 0 0 14px rgba(246, 213, 138, 0); }
}

.hero-cta .btn { will-change: translate; }

/* ---------- 5. Drifting golden light (aurora) + moving beam + cursor spotlight ---------- */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }

.hero-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.hero-aurora i:nth-child(1) { width: 38vw; height: 38vw; left: -8vw; top: -12vw; background: radial-gradient(circle, rgba(244, 184, 70, .75), transparent 68%); animation: hero-orb-a 19s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 30vw; height: 30vw; right: -6vw; top: 10%; background: radial-gradient(circle, rgba(255, 140, 60, .55), transparent 68%); animation: hero-orb-b 23s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 30%; bottom: -16vw; background: radial-gradient(circle, rgba(255, 224, 150, .5), transparent 68%); animation: hero-orb-c 27s ease-in-out infinite alternate; }

@keyframes hero-orb-a { to { transform: translate3d(14vw, 10vw, 0) scale(1.25); } }
@keyframes hero-orb-b { to { transform: translate3d(-16vw, 8vw, 0) scale(.85); } }
@keyframes hero-orb-c { to { transform: translate3d(-12vw, -9vw, 0) scale(1.2); } }

.hero-beam {
  position: absolute;
  z-index: 1;
  top: -20%;
  left: -35%;
  width: 24%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 232, 178, .20) 50%, transparent 100%);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: hero-beam-run 10s ease-in-out 2.5s infinite;
}
@keyframes hero-beam-run { 0% { left: -35%; } 45%, 100% { left: 135%; } }

.hero-spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 214, 130, .13), transparent 62%);
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-section.has-spot .hero-spot { opacity: 1; }

/* ---------- 6. Floating gold dust ---------- */
.hero-dust { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-dust i {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1c4 0%, #f0b84a 55%, rgba(226, 176, 74, 0) 72%);
  opacity: 0;
  animation: hero-dust-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes hero-dust-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { transform: translate3d(var(--dx, 30px), -85vh, 0) scale(1.2); opacity: 0; }
}

/* ---------- 7. Featured glass card (spinning gold border, floating, 3D tilt) ---------- */
@property --hf-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero-feature {
  justify-self: end;
  width: min(100%, 23rem);
  perspective: 900px;
  animation: hero-float 7s ease-in-out 2s infinite;
}
@keyframes hero-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }

.hero-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.75rem 1.7rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(28, 20, 11, .62), rgba(28, 20, 11, .42));
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
  text-decoration: none;
  transform-style: preserve-3d;
  transition: transform .25s ease-out, box-shadow .3s ease;
  animation: hero-card-in 1.3s cubic-bezier(.16, 1, .3, 1) .7s both;
}
@keyframes hero-card-in { from { opacity: 0; translate: 70px 30px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }

.hero-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.6px;
  border-radius: inherit;
  background: conic-gradient(from var(--hf-angle), transparent 0 58%, #f6d58a 78%, #fff 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: hf-spin 5s linear infinite;
}
@keyframes hf-spin { to { --hf-angle: 360deg; } }

.hero-feature-card:hover { box-shadow: 0 36px 70px rgba(0, 0, 0, .46), 0 0 40px rgba(246, 213, 138, .22), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hero-feature-card:focus-visible { outline: 3px solid var(--hero-gold, #bd8518); outline-offset: 4px; }

.hf-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(246, 213, 138, .5);
  border-radius: 999px;
  background: rgba(246, 213, 138, .14);
  color: var(--hero-gold-light);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hf-badge b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.hf-badge b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84; animation: hf-ping 1.8s ease-out infinite; }
@keyframes hf-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }

.hf-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.02em; }
.hf-loc { color: rgba(255, 255, 255, .8); font-size: .86rem; }
.hf-loc i { margin-right: .4rem; color: var(--hero-gold-light); }

.hf-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.hf-meta > span { padding: .4rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: .78rem; color: rgba(255, 255, 255, .85); }
.hf-meta em { margin-right: .25rem; color: #fff; font-style: normal; font-weight: 700; }

.hf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .95rem; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.hf-stats > span { display: flex; flex-direction: column; gap: .15rem; color: rgba(255, 255, 255, .7); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hf-stats em { color: var(--hero-gold-light); font-family: 'Playfair Display', Georgia, serif; font-size: 1.55rem; font-style: normal; letter-spacing: 0; line-height: 1.1; }
.hf-stats b { font-weight: inherit; font-variant-numeric: tabular-nums; }

.hf-cta { display: flex; align-items: center; justify-content: space-between; padding-top: .35rem; color: #fff; font-size: .9rem; font-weight: 600; }
.hf-cta i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #e5bb4c, #b77a12); font-size: .8rem; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); animation: hf-nudge 2.2s ease-in-out infinite; }
.hero-feature-card:hover .hf-cta i { transform: translateX(5px); }
@keyframes hf-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------- 8. Slide progress bar ---------- */
.hero-slider-controls { flex-wrap: wrap; justify-content: center; row-gap: .7rem; }
.hero-progress { flex: 0 0 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hero-progress b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #f6d58a, #e6b043); transform: scaleX(0); transform-origin: left center; }
.hero-progress.is-running b { animation: hero-progress-fill var(--hero-slide-ms, 6500ms) linear forwards; }
@keyframes hero-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 9. Scroll cue ---------- */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .4rem .6rem;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0;
  animation: hero-cue-in .9s ease 2s forwards;
}
.hero-scroll-cue .mouse { position: relative; width: 22px; height: 36px; border: 1.5px solid currentColor; border-radius: 12px; }
.hero-scroll-cue .mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--hero-gold-light);
  animation: hero-wheel 1.7s ease-in-out infinite;
}
.hero-scroll-cue:focus-visible { outline: 3px solid var(--hero-gold, #bd8518); outline-offset: 3px; border-radius: 8px; }
@keyframes hero-cue-in { to { opacity: .9; } }
@keyframes hero-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Wait for the opening intro ---------- */
html.intro-playing .hero-title .hwi,
html.intro-playing .hero-feature-card,
html.intro-playing .hero-eyebrow::before,
html.intro-playing .hero-slide.is-active { animation-play-state: paused !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-feature { width: 20rem; }
  .hf-name { font-size: 1.6rem; }
}

@media (max-width: 1023px) {
  .hero-section { padding-bottom: 5.5rem; }
  .hero-scroll-cue { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .hero-feature { justify-self: start; width: min(100%, 26rem); }
  .hero-section::after {
    background:
      linear-gradient(0deg, rgba(12, 9, 6, .7) 0%, rgba(12, 9, 6, 0) 30%),
      linear-gradient(90deg, rgba(12, 9, 6, .86) 0%, rgba(12, 9, 6, .6) 60%, rgba(12, 9, 6, .3) 100%);
  }
}

@media (max-width: 767px) {
  .hero-section { padding-bottom: 5.5rem; }
  .hero-section::after { background: linear-gradient(180deg, rgba(12, 9, 6, .6) 0%, rgba(12, 9, 6, .78) 55%, rgba(12, 9, 6, .88) 100%); }
  .hero-grid { gap: 2rem; min-height: auto; }
  .hero-feature { width: 100%; }
  .hero-feature-card { padding: 1.4rem 1.25rem 1.2rem; gap: .7rem; }
  .hf-name { font-size: 1.45rem; }
  .hero-trust { padding-top: 1.2rem; }
  .hero-scroll-cue { display: none; }
  .hero-dust i:nth-child(n+9) { display: none; }
  .hero-aurora i { filter: blur(50px); }
  .hero-aurora i:nth-child(1) { width: 70vw; height: 70vw; }
  .hero-aurora i:nth-child(2) { width: 60vw; height: 60vw; }
  .hero-aurora i:nth-child(3) { width: 65vw; height: 65vw; }
}

@media (max-height: 600px) { .hero-scroll-cue { display: none; } }
@media (max-height: 480px) and (orientation: landscape) { .hero-feature { display: none; } }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active,
  .hero-slide.is-active img,
  .hero-title .hwi,
  .hero-title > span,
  .hero-eyebrow::before,
  .hero-primary,
  .hero-primary::after,
  .hero-aurora i,
  .hero-beam,
  .hero-feature,
  .hero-feature-card,
  .hero-feature-card::before,
  .hf-badge b::after,
  .hf-cta i,
  .hero-scroll-cue .mouse::after { animation: none !important; }
  .hero-title .hwi { transform: none; }
  .hero-dust, .hero-progress, .hero-beam, .hero-spot { display: none; }
  .hero-scroll-cue { opacity: .9; animation: none; }
}