/* ================================================================
   PAY AFTER YOU PASS — "The Unlocked Vault"
   pay-after-pass.css

   Phase 1: The Sealed Vault (static structure)
   Phase 2: The Authentication Scan & the Crack (lighting + scan)

   PREFIX: .hs-pap
================================================================ */


/* ================================================================
   SECTION SHELL
   Full viewport height. Background is removed to seamlessly
   continue the cinematic space from the "Who It's For" section.
================================================================ */
.hs-pap {
  position: relative;
  width: 100%;
  /*
   * Phase 4: Full scroll height including the sanctuary reveal.
   * 600vh perfectly balances the new pacing.
   */
  height: 600vh;
  /* Background removed — inherits from body / previous section */
}

/* ================================================================
   STICKY WRAPPER
   This is the element that GSAP pins using ScrollTrigger.
   Provides native position:sticky behaviour to lock the 100vh
   scene perfectly in place while the user scrolls down the 300vh shell.
================================================================ */
.hs-pap__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Depth environment — allows Z-axis transforms to be visible */
  perspective: 1200px;
  perspective-origin: 50% 50%;
}


/* ================================================================
   THE SCENE
   The perspective container inside the sticky wrapper.
   All animated children live here.
   Phase 3 will apply a translateZ to this element to simulate
   the camera pushing forward through the doors.
================================================================ */
.hs-pap__scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: var(--hs-z-raised);
}


/* ================================================================
   THE VAULT DOOR FRAME
   Positions both doors absolutely across the full viewport width.
   The frame does not scroll — it is fixed within the pinned scene.
================================================================ */
.hs-pap__door-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  z-index: var(--hs-z-raised);
  /* Added for Phase 3 fly-through */
  transform-origin: center center;
  will-change: transform, opacity;
}


/* ================================================================
   INDIVIDUAL DOOR
   Each door occupies exactly half the viewport width.
   They are laid out as a flex row so they meet perfectly at the centre.
================================================================ */
.hs-pap__door {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: stretch;
  will-change: transform;
  /* Phase 3 will add transform: translateX + scale */
}

.hs-pap__door--left {
  justify-content: flex-end;
  /* seam sits at the right edge */
}

.hs-pap__door--right {
  justify-content: flex-start;
  /* seam sits at the left edge */
}


/* ================================================================
   THE GLASS SURFACE
   The face of each door.
   Now styled to perfectly match the 'Who It's For' background.
================================================================ */
.hs-pap__door-glass {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Matches the very bottom of the 'Who It's For' gradient perfectly */
  background: #E0F2FE;
}

/* ================================================================
   CENTER LOGO
   The Hesse logo split perfectly across the seam.
================================================================ */
.hs-pap__door-logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--hs-z-raised) + 2);
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hs-pap__door-logo-icon {
  width: 120px;
  /* Increased from 64px */
  height: 120px;
  opacity: 0.8;
  /* Increased from 0.6 for better definition */
}

.hs-pap__door-logo--left {
  right: 0;
  transform: translate(50%, -50%);
  clip-path: inset(0 50% 0 0);
}

.hs-pap__door-logo--right {
  left: 0;
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 0 50%);
}

.hs-pap__door--right .hs-pap__door-glass {
  border-left: none;
  /* seam element handles the centre gap */
  box-shadow:
    inset -1px 0 0 var(--hs-color-border-inverse-strong),
    inset 0 1px 0 var(--hs-color-border-inverse);
}


/* ================================================================
   THE CENTRE SEAM
   The glowing hairline that runs vertically down the dead centre
   of the screen, where the two doors meet.
   It appears on both doors but only the inner edge is visible —
   they overlap perfectly to look like a single glowing line.
================================================================ */
.hs-pap__door-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hs-border-2);

  /* Glowing cyan seam — hints at the brilliant light trapped behind */
  background: linear-gradient(180deg,
      transparent 0%,
      var(--hs-palette-accent-500) 20%,
      var(--hs-palette-accent-400) 50%,
      var(--hs-palette-accent-500) 80%,
      transparent 100%);

  /* Glow effect — the seam bleeds softly into the darkness */
  box-shadow:
    0 0 8px 2px rgba(43, 197, 241, 0.45),
    0 0 24px 4px rgba(43, 197, 241, 0.20);

  z-index: calc(var(--hs-z-raised) + 1);
}

/* Left door: seam sits on the right edge */
.hs-pap__door--left .hs-pap__door-seam {
  right: 0;
}

/* Right door: seam sits on the left edge */
.hs-pap__door--right .hs-pap__door-seam {
  left: 0;
}


/* ================================================================
   PHASE 2 — THE LIGHT SPILL
   A massive radial gradient simulating the brilliant light source
   trapped behind the sealed vault doors.
   It sits behind the door panels at z-base so it is invisible
   when the doors are closed. As the doors part (Phase 3), this
   light spills through the widening gap naturally.
================================================================ */
.hs-pap__light-spill {
  position: absolute;
  /* Centred exactly on the seam — radiates outward from the crack */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Large enough to flood the viewport from behind */
  width: 140vw;
  height: 140vh;

  background:
    radial-gradient(ellipse 40% 55% at 50% 50%,
      rgba(200, 245, 255, 0.65) 0%,
      rgba(43, 197, 241, 0.40) 25%,
      rgba(23, 168, 229, 0.18) 50%,
      transparent 75%);

  /* Soft outer blur — makes the light feel volumetric, not hard-edged */
  filter: blur(40px);

  pointer-events: none;
  /* Below the doors so it's fully hidden until the doors open */
  z-index: var(--hs-z-base);

  /* Phase 2 initial state — very faint.  GSAP will increase opacity. */
  opacity: 0.08;
}





/* ================================================================
   FRAME 2 — CRACK TEXT
   Floats above and in front of the door seam.
   Phase 1: set to opacity 0 and 24px below final position.
   Phase 2 animation will fade it in and lift it up.
================================================================ */
.hs-pap__crack-text {
  position: absolute;
  /* Sits just above the vertical centre — above where the seam begins to glow */
  top: calc(50% - var(--hs-space-32));
  left: 50%;
  transform: translateX(-50%) translateY(var(--hs-space-6));
  width: max-content;
  max-width: min(48ch, 90vw);
  text-align: center;

  font-family: var(--hs-font-display);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-font-light);
  letter-spacing: var(--hs-tracking-wide);
  color: var(--hs-palette-accent-400);

  /* Invisible until Phase 2 triggers */
  opacity: 0;

  z-index: calc(var(--hs-z-raised) + 2);
  pointer-events: none;
  white-space: nowrap;
}


/* ================================================================
   FRAME 3 — BREACH HEADLINE
   The massive headline the user "flies through."
   Sits dead centre in the scene.
   Phase 1: invisible. Phase 3 will reveal it and scale it massively.
================================================================ */
.hs-pap__breach-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Use fixed translate so we can animate scale cleanly in GSAP */
  transform: translate(-50%, -50%) scale(1);
  width: max-content;
  max-width: min(18ch, 90vw);
  text-align: center;
  margin: 0;

  font-family: var(--hs-font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: var(--hs-font-extrabold);
  line-height: var(--hs-leading-none);
  letter-spacing: var(--hs-tracking-tighter);

  /* Bright inverse white — this is the climax moment */
  color: var(--hs-color-text-inverse);

  /* Invisible until Phase 3 triggers */
  opacity: 0;
  will-change: transform, opacity;

  /* MUST be behind the doors so it is revealed when they open */
  z-index: calc(var(--hs-z-raised) - 1);
  pointer-events: none;
}


/* ================================================================
   FRAME 4 — THE INNER SANCTUARY
   The content revealed behind the vault doors.
   Positioned to fill the section below the door frame.
   Phase 1: fully invisible (doors mask it).
   Phase 4 will fade it in as the camera settles inside.
================================================================ */
.hs-pap__sanctuary {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hs-space-12) var(--hs-container-pad-x);

  /* Phase 4: Elevated above the doors so the card is always in front
     once the doors have scaled past the camera (doorFrame opacity → 0). */
  opacity: 0;
  pointer-events: none;

  /* One z-level above the door-frame (--hs-z-raised + 1) */
  z-index: calc(var(--hs-z-raised) + 1);
}


/* ================================================================
   THE SANCTUARY CARD
   The premium floating card inside the vault.
   Uses the glassmorphism tokens but with a warmer, brighter alpha
   to simulate the warm light of the inner sanctuary environment.
================================================================ */
.hs-pap__sanctuary-card {
  position: relative;
  width: 100%;
  max-width: var(--hs-container-lg);
  padding: var(--hs-space-16) var(--hs-space-16);
  border-radius: var(--hs-radius-2xl);

  /* Standard Light Page Glass Effect */
  background: var(--hs-glass-bg);
  backdrop-filter: var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  border: var(--hs-border-1) solid var(--hs-glass-border);

  /* Floating elevation */
  box-shadow: var(--hs-glass-shadow);

  text-align: center;
}

/* Subtle top-edge inner light — the vault ceiling light bouncing down */
.hs-pap__sanctuary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: var(--hs-border-2);
  background: linear-gradient(90deg,
      transparent 0%,
      var(--hs-palette-accent-500) 30%,
      var(--hs-palette-accent-400) 50%,
      var(--hs-palette-accent-500) 70%,
      transparent 100%);
  border-radius: var(--hs-radius-full);
  box-shadow: 0 0 16px rgba(43, 197, 241, 0.40);
}


/* ================================================================
   SANCTUARY TYPOGRAPHY
================================================================ */
.hs-pap__eyebrow {
  display: block;
  margin-bottom: var(--hs-space-5);
  color: var(--hs-color-text-brand);
}

.hs-pap__headline {
  margin: 0 0 var(--hs-space-6);
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-section-h);
  font-weight: var(--hs-font-extrabold);
  line-height: var(--hs-leading-tight);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-color-text-primary);
}

.hs-pap__body {
  max-width: 60ch;
  margin: 0 auto var(--hs-space-12);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-font-normal);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
}


/* ================================================================
   GUARANTEE PILLARS
   Three equally-spaced cards inside the sanctuary card.
================================================================ */
.hs-pap__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hs-gap-md);
  margin-bottom: var(--hs-space-10);
}

.hs-pap__pillar {
  padding: var(--hs-space-8) var(--hs-space-6);
  border-radius: var(--hs-radius-xl);
  background: var(--hs-surface-subtle);
  border: var(--hs-border-1) solid var(--hs-color-border-subtle);
  text-align: center;
}

.hs-pap__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--hs-space-5);
  color: var(--hs-color-text-brand);
}

.hs-pap__pillar-title {
  margin: 0 0 var(--hs-space-3);
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-font-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-color-text-primary);
}

.hs-pap__pillar-body {
  margin: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
}


/* ================================================================
   DISCLAIMER & CTA
================================================================ */
.hs-pap__disclaimer {
  max-width: 56ch;
  margin: 0 auto var(--hs-space-10);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-xs);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-tertiary);
  font-style: italic;
}

.hs-pap__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-3);
}


/* ================================================================
   HEIGHT RESPONSIVE — Sanctuary card
   The card's large padding and internal margins are the primary
   space consumers. Reductions are graduated across three thresholds.
   Scoped to min-width: 769px — the ≤768px layout is already static
   and handles its own sizing independently.
   1920 × 1080 baseline unaffected (1080px > 900px).
================================================================ */

/* ── Threshold 1: 900px — Trim outer padding, ease margins ────── */
@media (max-height: 900px) and (min-width: 769px) {

  .hs-pap__sanctuary-card {
    padding: var(--hs-space-12) var(--hs-space-16);
  }

  .hs-pap__body {
    margin-bottom: var(--hs-space-8);
  }

  .hs-pap__pillars {
    margin-bottom: var(--hs-space-8);
  }

  .hs-pap__disclaimer {
    margin-bottom: var(--hs-space-6);
  }
}

/* ── Threshold 2: 780px — Tighter card, compressed pillars ────── */
@media (max-height: 780px) and (min-width: 769px) {

  .hs-pap__sanctuary-card {
    padding: var(--hs-space-10) var(--hs-space-14);
  }

  .hs-pap__eyebrow {
    margin-bottom: var(--hs-space-3);
  }

  .hs-pap__headline {
    margin-bottom: var(--hs-space-4);
  }

  .hs-pap__body {
    font-size: var(--hs-text-base);
    margin-bottom: var(--hs-space-6);
  }

  .hs-pap__pillars {
    gap: var(--hs-gap-sm);
    margin-bottom: var(--hs-space-6);
  }

  .hs-pap__pillar {
    padding: var(--hs-space-5) var(--hs-space-5);
  }

  .hs-pap__pillar-icon {
    margin-bottom: var(--hs-space-3);
  }

  .hs-pap__disclaimer {
    margin-bottom: var(--hs-space-5);
  }
}

/* ── Threshold 3: 680px — Minimal padding, compact everything ─── */
@media (max-height: 680px) and (min-width: 769px) {

  .hs-pap__sanctuary-card {
    padding: var(--hs-space-8) var(--hs-space-12);
  }

  .hs-pap__eyebrow {
    margin-bottom: var(--hs-space-2);
  }

  .hs-pap__headline {
    font-size: var(--hs-text-2xl);
    margin-bottom: var(--hs-space-3);
  }

  .hs-pap__body {
    font-size: var(--hs-text-sm);
    margin-bottom: var(--hs-space-5);
  }

  .hs-pap__pillars {
    gap: var(--hs-gap-xs);
    margin-bottom: var(--hs-space-5);
  }

  .hs-pap__pillar {
    padding: var(--hs-space-4) var(--hs-space-4);
  }

  .hs-pap__pillar-icon {
    margin-bottom: var(--hs-space-2);
  }

  .hs-pap__pillar-title {
    font-size: var(--hs-text-sm);
    margin-bottom: var(--hs-space-2);
  }

  .hs-pap__pillar-body {
    font-size: var(--hs-text-xs);
  }

  .hs-pap__disclaimer {
    margin-bottom: var(--hs-space-4);
  }
}


/* ── Tablet: 1024px — sanctuary card tightens ───────────────── */
@media (max-width: 1024px) {
  .hs-pap__sanctuary-card {
    padding: var(--hs-space-12) var(--hs-space-10);
  }
}

/* ── 768px — mobile entrance animation layout ───────────────── */
/*
 * The 600vh scroll track is replaced by a single entrance animation.
 * The section is allowed to grow naturally to prevent internal scroll.
 */
@media (max-width: 768px) {
  .hs-pap {
    height: auto;
    overflow: visible;
  }

  .hs-pap__sticky {
    position: relative;
    height: auto;
    min-height: 100svh;
    overflow: hidden;
  }

  .hs-pap__scene {
    height: auto;
    min-height: 100svh;
    padding: 0;
    align-items: flex-start;
    /* Prevent flex centering from chopping tall content */
  }

  /* Vault doors stay locked to viewport height during opening */
  .hs-pap__door-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: var(--hs-z-raised);
  }

  /* Keep intro elements centered in the viewport, not the (now long) section */
  .hs-pap__light-spill,
  .hs-pap__breach-headline {
    top: 50svh;
  }

  .hs-pap__crack-text {
    top: calc(50svh - var(--hs-space-32));
  }

  /* Sanctuary: relative so it pushes section height. No internal scroll. */
  .hs-pap__sanctuary {
    position: relative;
    inset: auto;
    opacity: 0;
    pointer-events: none;
    /* Large top padding ensures vault doors have space to open before content */
    padding: var(--hs-space-24) var(--hs-container-pad-x) var(--hs-space-12);
    align-items: flex-start;
    /* Fix chopped heading */
    overflow-y: visible;
    z-index: calc(var(--hs-z-raised) + 1);
  }

  .hs-pap__sanctuary-card {
    padding: var(--hs-space-8) var(--hs-space-6);
    max-width: 100%;
  }

  .hs-pap__pillars {
    grid-template-columns: 1fr;
    gap: var(--hs-gap-sm);
  }
}

/* ── Mobile: ≤425px — compact card ──────────────────────────── */
@media (max-width: 425px) {
  .hs-pap__sanctuary-card {
    padding: var(--hs-space-6) var(--hs-space-5);
  }

  .hs-pap__headline {
    font-size: var(--hs-text-2xl);
    margin-bottom: var(--hs-space-4);
  }

  .hs-pap__body {
    font-size: var(--hs-text-base);
    margin-bottom: var(--hs-space-8);
  }

  .hs-pap__pillar {
    padding: var(--hs-space-5);
  }

  .hs-pap__disclaimer {
    margin-bottom: var(--hs-space-6);
  }

  .hs-pap__cta {
    width: 100%;
    justify-content: center;
  }
}