/* ============================================================
 *  FINANCIAL STRATEGY — "The Treasure" (image chest, auto-open on scroll)
 *  Phases on .fin2[data-phase]: 0 closed · 1 shake+shine · 2 open+burst · 3 copy
 * ============================================================ */
/* gentle scroll-snap so the section settles into view when reached */
html { scroll-snap-type: y proximity; }

.fin2 {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 3.2vh, 44px);
  padding: clamp(80px, 10vh, 140px) 24px;
  scroll-snap-align: center;
  background:
    linear-gradient(180deg, rgba(5,3,2,0.74) 0%, rgba(5,3,2,0.52) 40%, rgba(5,3,2,0.60) 64%, rgba(5,3,2,0.86) 100%),
    url("../assets/finance-bg.png") center/cover no-repeat;
}

/* ---- atmosphere ---- */
.fin2-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fin2-aura {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 40%, rgba(201,162,75,0.10) 0%, rgba(201,162,75,0) 60%);
  opacity: 0.7;
}
.fin2-dust {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 32%, rgba(251,230,184,0.7), transparent),
    radial-gradient(1.2px 1.2px at 72% 58%, rgba(251,230,184,0.5), transparent),
    radial-gradient(1px 1px at 46% 80%, rgba(251,230,184,0.45), transparent),
    radial-gradient(1.3px 1.3px at 86% 22%, rgba(251,230,184,0.6), transparent),
    radial-gradient(1px 1px at 33% 64%, rgba(251,230,184,0.4), transparent);
  background-size: 620px 620px, 720px 720px, 520px 520px, 820px 820px, 660px 660px;
  animation: fin2Drift 30s linear infinite;
}
@keyframes fin2Drift { to { background-position: 0 -620px, 0 -720px, 0 -520px, 0 -820px, 0 -660px; } }
.fin2-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #050302 0%, rgba(5,3,2,0) 18%, rgba(5,3,2,0) 82%, #050302 100%),
    radial-gradient(110% 90% at 50% 44%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.48) 80%, rgba(0,0,0,0.72) 100%);
}

/* ============================================================
 *  STAGE — chest + intro (content-height, centered group)
 * ============================================================ */
.fin2-stage {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.4vh, 30px);
}

.chest2 {
  position: relative;
  width: clamp(240px, 34vh, 480px); aspect-ratio: 1.5;
  display: flex; align-items: center; justify-content: center;
  transform: scale(1);
  transition: transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
/* phase 1 — zoom in;  phase 2 — settle open;  phase 3 — nudge up (layout stays) */
.fin2[data-phase="1"] .chest2 { transform: scale(1.12); }
.fin2[data-phase="2"] .chest2 { transform: scale(1.05); }
.fin2[data-phase="3"] .chest2 { transform: translateY(-44px) scale(1.0); }
/* shake while arming — on the chest render so it doesn't fight the wrapper zoom */
.fin2[data-phase="1"] .chest2__img--closed { animation: chest2Shake 0.55s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes chest2Shake {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  15% { transform: translate3d(-5px,1px,0) rotate(-0.7deg); }
  30% { transform: translate3d(5px,-1px,0) rotate(0.7deg); }
  45% { transform: translate3d(-4px,1px,0) rotate(-0.5deg); }
  60% { transform: translate3d(4px,-1px,0) rotate(0.5deg); }
  78% { transform: translate3d(-2px,0,0) rotate(-0.25deg); }
}

/* the two stacked renders */
.chest2__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 36px 50px rgba(0,0,0,0.6));
  transition: opacity 0.7s ease;
}
.chest2__img--closed { opacity: 1; z-index: 2; }
.chest2__img--open { opacity: 0; z-index: 2; }
.fin2[data-phase="2"] .chest2__img--closed,
.fin2[data-phase="3"] .chest2__img--closed { opacity: 0; }
.fin2[data-phase="2"] .chest2__img--open,
.fin2[data-phase="3"] .chest2__img--open {
  opacity: 1;
  animation: chest2Pop 0.9s cubic-bezier(0.22,1,0.36,1);
}
@keyframes chest2Pop {
  0% { transform: scale(0.97); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* shine sweep — masked to the chest silhouette so it rides the metal */
.chest2__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(108deg,
    transparent 38%, rgba(255,242,206,0) 44%,
    rgba(255,247,222,0.9) 50%,
    rgba(255,242,206,0) 56%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 135% 0;
  -webkit-mask: url("../assets/finance-chest-closed.png") center/contain no-repeat;
          mask: url("../assets/finance-chest-closed.png") center/contain no-repeat;
  mix-blend-mode: screen;
}
.fin2[data-phase="1"] .chest2__shine { opacity: 1; animation: chest2Shine 0.85s ease-in-out 1; }
@keyframes chest2Shine {
  from { background-position: 135% 0; }
  to { background-position: -35% 0; }
}

/* golden light bursting from inside as it opens */
.chest2__glow {
  position: absolute; left: 50%; top: 44%; z-index: 1;
  width: 86%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,232,170,0.95) 0%, rgba(248,200,120,0.55) 24%,
    rgba(214,150,70,0.18) 48%, rgba(214,150,70,0) 70%);
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22,1,0.36,1);
}
.fin2[data-phase="2"] .chest2__glow { opacity: 1; transform: translate(-50%, -52%) scale(1.02); }
.fin2[data-phase="3"] .chest2__glow { opacity: 0.85; transform: translate(-50%, -52%) scale(1.08); }
/* pre-glow building during the shake + zoom-in, before the lid bursts open */
.fin2[data-phase="1"] .chest2__glow { opacity: 0.6; transform: translate(-50%, -50%) scale(0.7); }

/* light rays fanning up from the opening */
.chest2__rays {
  position: absolute; left: 50%; top: 40%; z-index: 1;
  width: 70%; height: 80%; transform: translate(-50%, -50%) scaleY(0.5);
  transform-origin: 50% 60%;
  background:
    conic-gradient(from 270deg at 50% 60%,
      rgba(255,236,180,0) 0deg, rgba(255,236,180,0.22) 8deg, rgba(255,236,180,0) 16deg,
      rgba(255,236,180,0) 30deg, rgba(255,236,180,0.18) 38deg, rgba(255,236,180,0) 46deg,
      rgba(255,236,180,0) 60deg, rgba(255,236,180,0.22) 68deg, rgba(255,236,180,0) 76deg,
      rgba(255,236,180,0) 284deg, rgba(255,236,180,0.22) 292deg, rgba(255,236,180,0) 300deg,
      rgba(255,236,180,0) 314deg, rgba(255,236,180,0.18) 322deg, rgba(255,236,180,0) 330deg,
      rgba(255,236,180,0) 344deg, rgba(255,236,180,0.22) 352deg, rgba(255,236,180,0) 360deg);
  -webkit-mask: radial-gradient(circle at 50% 60%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
          mask: radial-gradient(circle at 50% 60%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  transition: opacity 1s ease 0.15s, transform 1.3s cubic-bezier(0.22,1,0.36,1) 0.15s;
}
.fin2[data-phase="2"] .chest2__rays,
.fin2[data-phase="3"] .chest2__rays { opacity: 0.9; transform: translate(-50%, -50%) scaleY(1); }
.fin2[data-phase="3"] .chest2__rays { opacity: 0.5; }

/* rising spark motes */
.chest2__sparks {
  position: absolute; left: 12%; right: 12%; top: 22%; height: 40%; z-index: 4;
  pointer-events: none; opacity: 0; border-radius: 40%;
  background-image:
    radial-gradient(2px 2px at 30% 80%, rgba(255,240,200,0.95), transparent),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(255,240,200,0.8), transparent),
    radial-gradient(2px 2px at 68% 84%, rgba(255,240,200,0.9), transparent),
    radial-gradient(1.5px 1.5px at 42% 60%, rgba(255,240,200,0.7), transparent),
    radial-gradient(1.5px 1.5px at 60% 64%, rgba(255,240,200,0.7), transparent);
}
.fin2[data-phase="2"] .chest2__sparks { animation: chest2Sparks 1.5s ease-out 0.1s 1; }
@keyframes chest2Sparks {
  0% { opacity: 0; transform: translateY(24px) scale(0.9); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-64px) scale(1.15); }
}

/* ---- intro copy (removed from flow once the chest is open) ---- */
.fin2-intro {
  position: relative; z-index: 2; text-align: center; max-width: 620px;
}
.fin2[data-phase="3"] .fin2-intro { display: none; }
.fin2-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.36em; text-transform: uppercase; color: #C9A24B;
  margin-bottom: 16px;
}
.vault-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 0.98; letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(180deg, #FBE9C8 0%, #C9915C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.7));
}
.vault-sub {
  font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6;
  color: #C7BBA6; margin: 20px auto 0; max-width: 500px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}

/* ============================================================
 *  REVEAL — strategy copy + CTAs (in the same pinned viewport)
 * ============================================================ */
.fin2-reveal {
  display: none;
  position: relative; z-index: 2; width: 100%;
}
.fin2[data-phase="3"] .fin2-reveal {
  display: block;
  animation: fin2RevealRise 0.9s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fin2RevealRise {
  from { transform: translateY(28px); }
  to   { transform: none; }
}
/* (chamber band removed — the section BG carries the atmosphere now) */
.fin2-chamber { display: none; }
.fin2-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center;
}
.fin2-head { text-align: center; max-width: 760px; }
.fin2-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.8vw, 58px); line-height: 1.05; letter-spacing: 0.005em;
  margin: 0; color: #F4E9D2; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,0.82), 0 1px 4px rgba(0,0,0,0.9);
}
.fin2-sub {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 0.12em; text-transform: uppercase; color: #C9A24B;
  margin: 20px 0 0; text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}
.fin2-body { margin: 22px auto 30px; max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.fin2-body p {
  font-family: var(--font-body); font-size: clamp(14px, 1vw, 16.5px); line-height: 1.66;
  color: #CFC3AD; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.9);
}

/* ---- CTAs ---- */
.fin2-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fin2-btn {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 30px; border-radius: 3px; border: 1px solid transparent;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.25s ease, color 0.25s ease, gap 0.25s ease, border-color 0.25s ease;
}
.fin2-btn svg { transition: transform 0.2s ease; }
.fin2-btn:hover svg { transform: translateX(3px); }
.fin2-btn--primary {
  background: linear-gradient(180deg, #E8C277 0%, #B4823E 100%); color: #1A1206;
  box-shadow: 0 14px 36px -16px rgba(232,194,119,0.6);
}
.fin2-btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.fin2-btn--ghost { background: transparent; color: #E8C98A; border-color: rgba(201,162,75,0.45); }
.fin2-btn--ghost:hover { background: rgba(201,162,75,0.10); border-color: rgba(201,162,75,0.8); }

/* ============================================================
 *  REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fin2-dust, .chest2__sparks, .chest2__shine { animation: none !important; }
  .chest2__img, .chest2__glow, .chest2__rays, .fin2-reveal, .fin2-intro { transition-duration: 0.3s !important; }
  .fin2[data-phase="1"] .chest2__img--closed { animation: none !important; }
}

/* ============================================================
 *  MOBILE
 * ============================================================ */
@media (max-width: 760px) {
  .fin2 { padding: 64px 22px; }
  .chest2 { width: min(86vw, 440px); }
  .fin2-cta { flex-direction: column; align-items: center; width: 100%; }
  .fin2-btn { width: 100%; max-width: 340px; justify-content: center; }
}

/* ============================================================
 *  THE TREASURE — scroll-scrubbed chest video (pinned)
 * ============================================================ */
.finv {
  position: relative;
  overflow: visible;             /* must stay visible so .finv-pin can stick */
  height: 260vh;                 /* scroll-lock length: scrub + hold */
  background:
    linear-gradient(180deg, rgba(5,3,2,0.74) 0%, rgba(5,3,2,0.52) 40%, rgba(5,3,2,0.66) 70%, #050302 92%),
    url("../assets/finance-bg.png") center / cover no-repeat;
}
.finv-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* the dark scene must live INSIDE the pin's stacking context so the
     lighten-blended video has a backdrop to blend against */
  background:
    linear-gradient(180deg, rgba(5,3,2,0.80) 0%, rgba(5,3,2,0.6) 40%, rgba(5,3,2,0.72) 72%, #050302 96%),
    url("../assets/finance-bg.png") center / cover no-repeat;
}
/* bottom fade so the pinned scene resolves to pure black before the next section */
.finv-pin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,3,2,0) 0%, rgba(5,3,2,0.7) 55%, #050302 100%);
}
.finv-scrub {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vh, 28px); padding: clamp(60px,9vh,120px) 24px;
  text-align: center;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}
.finv-cap { text-align: center; will-change: opacity; }
.finv-cap .fin2-eyebrow { margin-bottom: 12px; }
.finv-cap .vault-title { margin: 0; }
.finv-canvas {
  width: min(560px, 64vw); height: auto; aspect-ratio: 864 / 496; display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 56px rgba(0,0,0,0.55));
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
                linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
                linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite: intersect;
}
.finv-reveal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
@media (max-width: 760px) {
  .finv { height: 240vh; }
  .finv-canvas { width: 94vw; }
}