/* ============================================================================
   LegacyVault – Animated visual scenes
   1) Family heart-gift scene (index.html, injected into .fam-layout)
   2) Phone feature-burst scene (functies.html, injected before .cat-wrap)
   All animations pause until the parent element has the .is-playing class
   (added by scene.js via IntersectionObserver).
============================================================================ */

/* ============================== FAMILY SCENE ============================== */

.fam-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}

.fam-scene {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  isolation: isolate;
}

.fs-photo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 28px;
  overflow: hidden;
  background: #0d2a17;
  box-shadow:
    0 40px 80px -30px rgba(4, 30, 15, 0.45),
    0 12px 32px -12px rgba(4, 30, 15, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.fam-scene:hover .fs-photo-stage {
  transform: perspective(1400px) rotateY(0) rotateX(0);
}

.fs-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
/* Frame 1 is the poster: visible by default so there's no dark flash before
   the crossfade animation starts. */
.fs-frame.fs-f1 { opacity: 1; }
.fs-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.08);
  transform-origin: center center;
}

/* Soft vignette + warm color overlay to make all 4 frames sit together */
.fs-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(6, 30, 15, 0.35) 100%),
    linear-gradient(180deg, rgba(255, 235, 200, 0.06) 0%, transparent 40%);
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Slow shimmering shine across the photo */
.fs-shine {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 140%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  transform: translateX(-30%);
  z-index: 3;
  opacity: 0;
}
.fam-scene.is-playing .fs-shine {
  animation: fs-shine 5.5s 1.5s ease-in-out infinite;
}
@keyframes fs-shine {
  0%   { transform: translateX(-30%); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0; }
}

/* Crossfade schedule (total ≈ 11s, ends on frame-4)
   Each frame is visible for ~3s with 1s crossfades. Ken-Burns zoom on image. */
.fam-scene.is-playing:not(.mo-controlled) .fs-f1 { animation: fs-fade-f1 11s .20s ease-in-out both; }
.fam-scene.is-playing:not(.mo-controlled) .fs-f2 { animation: fs-fade-f2 11s .20s ease-in-out both; }
.fam-scene.is-playing:not(.mo-controlled) .fs-f3 { animation: fs-fade-f3 11s .20s ease-in-out both; }
.fam-scene.is-playing:not(.mo-controlled) .fs-f4 { animation: fs-fade-f4 11s .20s ease-in-out both; }
.fam-scene.is-playing:not(.mo-controlled) .fs-frame img { animation: fs-kenburns 11s .20s linear both; }

@keyframes fs-fade-f1 {
  0%   { opacity: 1; }
  22%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fs-fade-f2 {
  0%   { opacity: 0; }
  22%  { opacity: 0; }
  30%  { opacity: 1; }
  46%  { opacity: 1; }
  54%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fs-fade-f3 {
  0%   { opacity: 0; }
  46%  { opacity: 0; }
  54%  { opacity: 1; }
  70%  { opacity: 1; }
  78%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fs-fade-f4 {
  0%   { opacity: 0; }
  70%  { opacity: 0; }
  78%  { opacity: 1; }
  100% { opacity: 1; }
}
/* Subtle continuous zoom to imply movement across frames */
@keyframes fs-kenburns {
  from { transform: scale(1.08) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1%, 1%); }
}

/* Text reveal within the fam section — handled by the base .r/.v observer;
   we intentionally do NOT delay the text reveal so it appears alongside the
   photo sequence for a warmer, quicker read. */
.fam-text .r { transition-duration: .8s; }
/* Safety fallback: after 12s force all reveals visible */
.fam-text.fs-force > * { opacity: 1 !important; transform: none !important; animation: none !important; }

/* Visual order: photo on the RIGHT, text on the LEFT (desktop) */
.fam-layout > .fam-text  { order: 1; }
.fam-layout > .fam-scene { order: 2; }

/* ============================== PHONE BURST =============================== */

.phone-burst-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px 12px;
}
.phone-burst {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.phone-burst::before {
  content: "";
  position: absolute; inset: -4% -6% -10% -6%;
  background:
    radial-gradient(45% 55% at 50% 50%, rgba(22, 163, 74, 0.20), transparent 70%),
    radial-gradient(75% 75% at 50% 55%, rgba(255, 255, 255, 0.55), transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
}
.phone-burst svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pb-phone { opacity: 0; transform-origin: center; }
.pb-glow  { opacity: 0; transform-origin: center; }
.pb-orbit { opacity: 0; transform-origin: center; transform-box: fill-box; }
.pb-node  { opacity: 0; transform-box: fill-box; transform-origin: center; }

.phone-burst.is-playing:not(.mo-controlled) .pb-phone { animation: pb-phone-in 0.8s .10s cubic-bezier(.22,1,.36,1) both; }
.phone-burst.is-playing:not(.mo-controlled) .pb-glow  { animation: pb-glow      2.5s .40s ease-in-out infinite; opacity: 1; }
.phone-burst.is-playing:not(.mo-controlled) .pb-orbit { animation: pb-orbit-in  0.8s .50s ease-out both; }
.phone-burst.is-playing:not(.mo-controlled) .pb-node  { animation: pb-node-in 1.0s cubic-bezier(.34,1.4,.64,1) both, pb-node-float 5s ease-in-out infinite; }
.phone-burst.is-playing .pb-node:nth-child(1) { animation-delay: .55s, 1.6s; }
.phone-burst.is-playing .pb-node:nth-child(2) { animation-delay: .65s, 1.8s; }
.phone-burst.is-playing .pb-node:nth-child(3) { animation-delay: .75s, 2.0s; }
.phone-burst.is-playing .pb-node:nth-child(4) { animation-delay: .85s, 2.2s; }
.phone-burst.is-playing .pb-node:nth-child(5) { animation-delay: .95s, 2.4s; }
.phone-burst.is-playing .pb-node:nth-child(6) { animation-delay: 1.05s, 2.6s; }
.phone-burst.is-playing .pb-node:nth-child(7) { animation-delay: 1.15s, 2.8s; }
.phone-burst.is-playing .pb-node:nth-child(8) { animation-delay: 1.25s, 3.0s; }
.phone-burst.is-playing .pb-node:nth-child(9) { animation-delay: 1.35s, 3.2s; }

@keyframes pb-phone-in {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes pb-glow {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .70; transform: scale(1.08); }
}
@keyframes pb-orbit-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Each node uses CSS custom props --x, --y for its final radial position */
@keyframes pb-node-in {
  from { opacity: 0; transform: translate(0, 0) scale(.4); }
  60%  { opacity: 1; transform: translate(calc(var(--x) * 1.08), calc(var(--y) * 1.08)) scale(1.05); }
  to   { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes pb-node-float {
  0%, 100% { transform: translate(var(--x), var(--y)) scale(1); }
  50%      { transform: translate(calc(var(--x) + 3px), calc(var(--y) - 5px)) scale(1.02); }
}

/* Counter-rotate label text so it stays upright (no-op now that orbit doesn't spin) */
.phone-burst.is-playing .pb-orbit .pb-node > g,
.phone-burst.is-playing .pb-orbit .pb-node > text {
  /* Kept for future spin re-enable */
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .fam-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .fam-layout > .fam-scene { order: -1 !important; }
  .fam-layout > .fam-text  { order: 0 !important; }
  .fam-scene { max-width: 100%; margin: 0 auto; }
  .fs-photo-stage { transform: none !important; border-radius: 20px; }
  .phone-burst-wrap { padding: 12px 16px 6px; }
  .phone-burst { max-width: 100%; aspect-ratio: 4 / 3; }
}

/* Reduced motion: show final frame instantly, no crossfade/motion */
@media (prefers-reduced-motion: reduce) {
  .fs-frame, .fs-frame img, .fs-shine { animation: none !important; }
  .fs-frame { opacity: 0; }
  .fs-f4 { opacity: 1; }
  .fs-frame img { transform: scale(1.05); }
  .pb-phone, .pb-orbit, .pb-node { opacity: 1 !important; animation: none !important; }
  .pb-node { transform: translate(var(--x), var(--y)); }
  .fam-scene ~ .fam-text > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}