.yt-btn {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.yt-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* Button 1 = btn02 (blurry) — closer to person, right */
.yt-btn-1 {
  width: 155px;
  top: -60px;
  left: 50px;
  transform: rotate(8deg);
  animation: ytfly1 7s ease-in-out infinite;
}

/* Button 2 = btn01 (sharp) — higher up */
.yt-btn-2 {
  width: 190px;
  top: 55px;
  left: -60px;
  transform: rotate(-10deg);
  animation: ytfly2 9s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes ytfly1 {
  0%   { transform: rotate(-15deg) translateY(0px)   translateX(0px); }
  25%  { transform: rotate(-12deg) translateY(-14px)  translateX(5px); }
  50%  { transform: rotate(-18deg) translateY(-8px)   translateX(-4px); }
  75%  { transform: rotate(-13deg) translateY(-18px)  translateX(6px); }
  100% { transform: rotate(-15deg) translateY(0px)   translateX(0px); }
}

@keyframes ytfly2 {
  0%   { transform: rotate(12deg) translateY(0px)   translateX(0px); }
  30%  { transform: rotate(15deg) translateY(-12px)  translateX(-6px); }
  60%  { transform: rotate(9deg)  translateY(-20px)  translateX(4px); }
  80%  { transform: rotate(14deg) translateY(-8px)   translateX(-3px); }
  100% { transform: rotate(12deg) translateY(0px)   translateX(0px); }
}

/* Hero visual */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  height: 500px;
}
.hero-frame {
  width: 340px; height: 450px;
  position: relative;
}

/* === VARIANT A: Parallelogram === */
.hero-frame.var-a::before {
  transform: skewX(-4deg);
}

/* === VARIANT B: Arch (tall rounded top) === */
.hero-frame.var-b::before {
  border-radius: 200px 200px 20px 20px;
}
.hero-frame.var-b .hero-frame::after {
  border-radius: 0 0 20px 20px;
}
/* Visual box: border with gold glow highlights */
.hero-frame::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50px; right: -50px;
  height: 100%;
  background: transparent;
  border-radius: 20px;
  transform: skewX(-4deg);
  /* Main border + asymmetric gold glow: bright top-right, dim bottom-left */
  border: 1.5px solid rgba(212,168,83,0.45);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    /* outer glow — top edge */
    0 -2px 18px rgba(212,168,83,0.30),
    /* outer glow — right edge */
    4px 0 22px rgba(212,168,83,0.22),
    /* inner highlight — top-right corner */
    inset 1px 1px 0 rgba(212,168,83,0.35),
    /* inner subtle — left edge dim */
    inset -1px 0 0 rgba(212,168,83,0.05);
  z-index: 1;
  pointer-events: none;
}
.hero-frame .frame-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(42,46,31,0.8), var(--olive-deep));
}
/* Gradient fade at bottom — legs dissolve into background */
.hero-frame::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top,
    var(--olive-deep) 0%,
    var(--olive-deep) 20%,
    rgba(23,28,18,0.85) 55%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
  border-radius: 0 0 20px 20px;
}
.hero-photo-wrap {
  position: absolute;
  bottom: 0;
  left: calc(50% + 30px);
  transform: translateX(-50%);
  width: 520px;
  z-index: 2;
  pointer-events: none;
}
.hero-photo-wrap img {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}