/* Batch Genealogy page custom styles */

.stage {
  position: relative;
  width: 100%;
  contain: paint;
  /* Bootstrap-style container: stays at 7vw padding on smaller screens,
     caps at a 1320px-wide container on very large (4K) screens. */
  --container-max: 1320px;
  --panel-x: max(7vw, calc((100vw - var(--container-max)) / 2));
  /* Hero copy + panel positions. On standard desktop the hero copy starts
     at 22vh and the panel at 73vh — proportional and natural.
     On tall viewports (1440p+, 4K, zoomed-out) those vh values explode,
     pushing both elements way too far down with empty space at the top.
     Cap the hero-copy top at 240px and derive the panel from it. */
  --hero-top: min(16vh, 180px);
  --panel-top: min(73vh, calc(var(--hero-top) + 400px));
  --beam-mask-y: calc(var(--panel-top) - 1vh);
  --edge-feather: 72px;
  --right-cover: 96px;
  /* Section auto-sizes to its content (hero copy area + dashboard panel).
     No explicit vh — the in-flow .panel below determines the total height. */
  height: auto;
  background: #000;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

/* ---------- Hero copy ---------- */
.hero-copy {
  position: absolute;
  z-index: 3;
  top: calc(var(--hero-top) + 30px);
  left: var(--panel-x);
  max-width: min(820px, calc(100vw - var(--panel-x) * 2));
  pointer-events: none;
}
.hero-copy * {
  pointer-events: auto;
}
.hero-copy__title {
  background: linear-gradient(270deg, #fff 10.51%, #999 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 46px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -1.84px;
  margin: 0 0 22px;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}
.hero-copy__sub {
  color: #e8e8e8;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 230%;
  max-width: none;
  white-space: nowrap;
  width: max-content;
  margin: 0 0 32px;
}
.hero-copy__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Pill Buttons (ported from existing-style.css) ---------- */
.btn-pill {
  border: none;
  border-radius: 100px;
  padding: 6px 6px 6px 20px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  gap: 15px;
  display: inline-flex;
  align-items: center;
}

.btn-text-inner {
  position: relative;
  height: 1.2em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.btn-text-main,
.btn-text-hover {
  display: block;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-pill:hover .btn-text-main,
.btn-pill:hover .btn-text-hover {
  transform: translateY(-100%);
}

.btn-pill .arrow-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.arrow-inner-wrapper {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 24px;
  transform: translateX(-22px);
}
.arrow-inner-wrapper svg {
  flex-shrink: 0;
}
.btn-pill:hover .arrow-inner-wrapper {
  transform: translateX(22px);
}

/* Primary variant */
.btn-primary {
  background: var(--bg-gradient);
  color: var(--foreground-white);
}
.btn-primary .arrow-circle {
  background: var(--surface-white);
}
.btn-primary .arrow-circle svg path {
  stroke: var(--foreground-primary);
}

/* Secondary variant */
.btn-secondary {
  background: var(--surface-white);
  color: var(--foreground-primary);
}
.btn-secondary .arrow-circle {
  background: var(--bg-gradient);
}
.btn-secondary .arrow-circle svg path {
  stroke: var(--foreground-white);
}

.stage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: calc(var(--panel-x) + var(--right-cover));
  background: linear-gradient(
    270deg,
    #000 0%,
    #000 calc(100% - var(--right-cover)),
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

#beam {
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--beam-mask-y),
      transparent calc(var(--beam-mask-y) + 0.01%)
    ),
    linear-gradient(
      to right,
      transparent 0%,
      transparent max(calc(var(--panel-x) - var(--edge-feather)), 0%),
      #000 var(--panel-x),
      #000 calc(100% - var(--panel-x)),
      transparent min(calc(100% - var(--panel-x) + var(--edge-feather)), 100%),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--beam-mask-y),
      transparent calc(var(--beam-mask-y) + 0.01%)
    ),
    linear-gradient(
      to right,
      transparent 0%,
      transparent max(calc(var(--panel-x) - var(--edge-feather)), 0%),
      #000 var(--panel-x),
      #000 calc(100% - var(--panel-x)),
      transparent min(calc(100% - var(--panel-x) + var(--edge-feather)), 100%),
      transparent 100%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 0;
}

/* Dark panel: positioned in-flow so the stage's height auto-sizes to it.
   No z-index — that way the .panel-side-glow children can use z-index: -1
   to sit behind the beam canvas (which is at z-index 0). */
.panel {
  position: relative;
  z-index: 2;
  margin: var(--panel-top) var(--panel-x) 0;
  aspect-ratio: 1232 / 708;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #06080e 0%, #020306 100%);
  border: 1px solid rgba(150, 185, 255, 0.14);
  border-bottom: none;
  box-shadow:
    0 -2px 50px rgba(60, 110, 255, 0.02),
    inset 1px 0 0 rgba(67, 97, 238, 0);
  animation: panelGlowIn 900ms ease-out 900ms forwards;
}

.beam-glow {
  position: absolute;
  top: var(--panel-top);
  /* Container-aware position: beam stays at 73.3% of panel width on all viewports.
     At 7vw panel-x (normal desktop) this equals 70% of viewport — no change.
     At 4K / zoomed-out it shifts left so the fan doesn't hit the right mask edge.
     Formula: 0.733*100vw - 0.466*panel-x  */
  left: calc(73.3% - 0.466 * var(--panel-x));
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 70%,
    rgba(200, 215, 255, 0.95) 0%,
    rgba(120, 150, 250, 0.65) 30%,
    rgba(67, 97, 238, 0) 70%
  );
  filter: blur(40px);
  mix-blend-mode: plus-lighter;
  transform: translate(-50%, -50%);
  will-change: filter;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: edgeGlowIn 650ms ease-out 900ms forwards;
}

.beam-glow--oval {
  top: 0;
  left: 82%;
  width: 360px;
  height: 90px;
  filter: blur(30px);
  z-index: auto;
}

.panel-side-glow {
  position: absolute;
  top: 8px;
  right: 0;
  width: 130px;
  height: 100%;
  background: linear-gradient(0deg, rgba(67, 97, 238, 0.18) 0%, #4361ee 100%);
  mix-blend-mode: plus-lighter;
  filter: blur(25px);
  will-change: filter;
  pointer-events: none;
  opacity: 0;
  animation: edgeGlowIn 650ms ease-out 900ms forwards;
  /* Right-side glows sit above the beam canvas (z:0) and above the
     .stage::after right-edge dark gradient (z:1), so the glow remains
     visible past the panel edge. Panel image (z:2, later in DOM) still
     covers the glow inside the panel area. Left variant overrides to z:-1. */
  z-index: 2;
}

.panel-side-glow--left {
  right: auto;
  left: 0;
  width: 300px;
  background: linear-gradient(
    0deg,
    rgba(67, 97, 238, 0.08) 0%,
    rgba(67, 97, 238, 0.5) 100%
  );
  filter: blur(25px);
  /* Left-side glow above the beam (z:2) — matches the right-side glows. */
  z-index: 2;
}

.panel-side-glow--core {
  width: 50px;
  background: linear-gradient(0deg, rgba(67, 97, 238, 0) 0%, #4361ee 100%);
  filter: blur(20px);
}

.panel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  display: block;
  pointer-events: none;
  /* Above the beam-glow (z:1) so the bottom half of the glow circle
     gets clipped behind the panel image. */
  z-index: 2;
}

@keyframes panelGlowIn {
  to {
    box-shadow:
      0 -2px 50px rgba(60, 110, 255, 0.07),
      inset 1px 0 0 rgba(67, 97, 238, 0.22);
  }
}

@keyframes edgeGlowIn {
  to {
    opacity: 1;
  }
}

@keyframes panelGlowInMobile {
  to {
    box-shadow:
      0 -2px 32px rgba(60, 110, 255, 0.05),
      inset 1px 0 0 rgba(67, 97, 238, 0.14);
  }
}

/* The beam mask handles the soft panel-edge fade. The right overlay remains
   above the beam, while the dashboard panel is lifted above both layers. */

@media (min-width: 1536px) {
  .stage {
    --panel-top: min(73vh, calc(var(--hero-top) + 450px));
  }

  .beam-glow {
    width: 210px;
    height: 210px;
    filter: blur(34px);
  }
}

@media (min-width: 2200px) {
  .stage {
    --panel-top: min(73vh, calc(var(--hero-top) + 500px));
  }

  .beam-glow {
    left: calc(73.3% - 0.466 * var(--panel-x) - 110px);
    width: 130px;
    height: 130px;
    filter: blur(20px);
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .hero-copy {
    top: calc(var(--hero-top) + 24px);
  }
}

@media (max-width: 900px), (orientation: portrait) {
  .stage::before {
    height: 136px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 88%);
  }

  .stage {
    --panel-x: 7%;
    --panel-top: var(--mobile-panel-top, 620px);
    --beam-mask-y: calc(var(--panel-top) - 1vh);
    --edge-feather: 48px;
    --right-cover: 36px;
    /* height auto-fits the in-flow panel */
  }

  .panel {
    bottom: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    animation-name: panelGlowInMobile;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.65) 68%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.65) 68%,
      transparent 100%
    );
    /* The mask-image creates a stacking context, which traps panel-image's
       z:2 inside the panel's own layer. Lift the whole panel above the
       beam-glow (z:1) so the glow circle's lower half stays hidden
       behind the dashboard image. */
    z-index: 2;
  }

  .hero-copy {
    top: calc(8vh + 40px);
    left: 7%;
    right: 7%;
    max-width: none;
  }
  .hero-copy__title {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    margin-bottom: 16px;
    white-space: normal;
    width: auto;
    letter-spacing: -0.5px;
  }
  .hero-copy__sub {
    font-size: 0.9rem;
    margin-bottom: 22px;
    white-space: normal;
    width: auto;
  }
  .hero-copy__actions {
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
  .hero-copy__actions .btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 56px 14px 22px;
    min-height: 56px;
    font-size: 14px;
    gap: 0;
  }
  .hero-copy__actions .btn-pill .arrow-circle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }
  .hero-copy__actions .arrow-inner-wrapper {
    gap: 20px;
    transform: translateX(-20px);
  }
  .hero-copy__actions .btn-pill:hover .arrow-inner-wrapper {
    transform: translateX(20px);
  }
}

@media (max-width: 600px), (orientation: portrait) and (max-width: 600px) {
  .hero-copy__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-copy__actions .btn-pill {
    width: 100%;
    padding: 14px 60px;
  }
}