/* Gabriel Veres-inspired vault: large sheets queue from the upper-right to lower-left. */
.vault-section {
  background:
    radial-gradient(circle at 78% 24%, rgba(60, 88, 71, .16), transparent 34%),
    #030806;
}

.vault-window {
  min-height: 500px;
  background:
    linear-gradient(125deg, rgba(13, 29, 23, .72), rgba(2, 6, 4, .96) 58%),
    #030806;
  border-color: rgba(217, 195, 153, .18);
  perspective: 2400px;
  isolation: isolate;
  outline: none;
  --vc-w: clamp(420px, 44vw, 720px);
  --vc-h: auto;
}

/* .flow-slot .reference-window (flow-transitions.css) sets the box's real
   height in production; #vault raises specificity so our taller box wins. */
#vault .vault-window {
  height: calc(100svh - 188px);
  min-height: 460px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 60%, rgba(39, 52, 44, .28), transparent 70%),
    linear-gradient(125deg, rgba(13, 29, 23, .32), rgba(2, 6, 4, .55) 58%),
    url('assets/vault-world.webp') center / cover no-repeat,
    #030806;
}

.vault-window > .vault-start {
  background: transparent;
}

.vault-window > .section-heading {
  position: relative;
  z-index: 5;
  margin-bottom: 0;
  padding: 26px 32px 0;
}

.vault-window > .section-heading h2 {
  font-size: clamp(20px, 2vw, 28px);
  margin-top: 8px;
}

.vault-window > .section-heading p {
  font-size: 12px;
  line-height: 1.6;
}

.vault-window > .vault-start {
  top: 112px;
}

.vault-window > .vault-deck {
  top: 40px;
}

.vault-deck {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: visible;
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, transparent 0 49.85%, rgba(217, 195, 153, .045) 50%, transparent 50.15%);
}

.vault-window.entered .vault-deck {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vault-card {
  position: absolute;
  top: 5%;
  right: 3%;
  left: auto;
  width: var(--vc-w);
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 1px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate3d(calc(var(--deck-x) + var(--vault-travel-x, 0%)), calc(var(--deck-y) + var(--vault-travel-y, 0%)), var(--deck-z)) rotateY(var(--deck-ry, 0deg)) scale(var(--deck-scale));
  translate: 0 0;
  opacity: 1;
  filter: brightness(var(--deck-light)) saturate(.82);
  box-shadow:
    0 34px 75px -30px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(226, 204, 162, .2);
  transition:
    top .68s cubic-bezier(.2, .78, .18, 1),
    left .68s cubic-bezier(.2, .78, .18, 1),
    right .68s cubic-bezier(.2, .78, .18, 1),
    transform .68s cubic-bezier(.2, .78, .18, 1),
    translate .68s cubic-bezier(.2, .78, .18, 1),
    filter .45s ease,
    opacity .48s ease,
    box-shadow .55s ease;
  transition-delay: 0ms;
  will-change: transform, translate;
  backface-visibility: hidden;
  pointer-events: auto;
}

.vault-card:nth-child(1) { --deck-x: 0%; --deck-y: 0%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 0ms; z-index: 4; }
.vault-card:nth-child(2) { --deck-x: -23%; --deck-y: 4%; --deck-z: -125px; --deck-scale: .925; --deck-light: .68; --deck-ry: -46deg; --deck-delay: 65ms; z-index: 5; }
.vault-card:nth-child(3) { --deck-x: -46%; --deck-y: 8%; --deck-z: -100px; --deck-scale: .94; --deck-light: .74; --deck-ry: -42deg; --deck-delay: 130ms; z-index: 6; }
.vault-card:nth-child(4) { --deck-x: -69%; --deck-y: 12%; --deck-z: -75px; --deck-scale: .955; --deck-light: .80; --deck-ry: -38deg; --deck-delay: 195ms; z-index: 7; }
.vault-card:nth-child(5) { --deck-x: -92%; --deck-y: 16%; --deck-z: -50px; --deck-scale: .97; --deck-light: .86; --deck-ry: -34deg; --deck-delay: 260ms; z-index: 8; }
.vault-card:nth-child(6) { --deck-x: -115%; --deck-y: 20%; --deck-z: -25px; --deck-scale: .985; --deck-light: .92; --deck-ry: -30deg; --deck-delay: 325ms; z-index: 9; }
.vault-card:nth-child(7) { --deck-x: -138%; --deck-y: 24%; --deck-z: 0; --deck-scale: 1; --deck-light: 1; --deck-ry: -26deg; --deck-delay: 390ms; z-index: 10; }
.vault-card:nth-child(8) { --deck-x: 23%; --deck-y: -4%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 455ms; z-index: 3; }
.vault-card:nth-child(9) { --deck-x: 46%; --deck-y: -8%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 520ms; z-index: 2; }
.vault-card:nth-child(10) { --deck-x: 69%; --deck-y: -12%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 585ms; z-index: 1; }
.vault-card:nth-child(11) { --deck-x: 92%; --deck-y: -16%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 650ms; z-index: 0; }
.vault-card:nth-child(12) { --deck-x: 115%; --deck-y: -20%; --deck-z: -150px; --deck-scale: .91; --deck-light: .62; --deck-ry: -50deg; --deck-delay: 715ms; z-index: -1; }

.vault-window.entered .vault-card {
  animation: vault-card-in .68s cubic-bezier(.2, .78, .18, 1) backwards;
  animation-delay: var(--deck-delay);
}

@keyframes vault-card-in {
  from {
    translate: 150px -110px;
    opacity: 0;
  }
}

.vault-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 235, 196, .06), transparent 30% 70%, rgba(0, 0, 0, .24));
}

.vault-card .vc-face,
.vault-card .vc-detail {
  z-index: 1;
}

.vault-card .vc-face,
.vault-card .vc-detail {
  display: none !important;
}

.vault-card .vc-face b {
  font-size: 10px;
  letter-spacing: 2.6px;
}

.vault-card .vc-detail {
  justify-content: flex-end;
  padding: 34px;
  background: linear-gradient(0deg, rgba(2, 8, 5, .95), rgba(3, 11, 7, .18) 75%);
  backdrop-filter: none;
}

.vault-card.is-active {
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 40;
  translate: 0 0;
  transform: translate(-50%, -50%) translateZ(180px) scale(.95);
  filter: brightness(1.04) saturate(1.03);
  box-shadow:
    0 55px 95px -30px rgba(0, 0, 0, .96),
    0 0 0 1px rgba(235, 213, 170, .4);
  transition-delay: 0ms;
}

.vault-card .vc-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.vault-card.is-active .vc-video {
  opacity: 1;
}

/* Dedicated video cards (e.g. the Brahma/Vishnu/Shiva motion cards) show
   their video as the resting frame, not just on activation. Keep the name
   label above the video layer so it doesn't vanish underneath it. */
.vault-card.tone-video .vc-video {
  opacity: 1;
}

.vault-card.tone-video::before,
.vault-card.tone-video .vc-face {
  z-index: 4;
}

.vault-card.is-dimmed {
  filter: brightness(.36) saturate(.55);
  transition-delay: 0ms;
}

/* Hover peek: slides right in-plane, keeping the same tilt as the rest of
   the deck (parallel). Lifted forward in depth only so its rotated plane
   clears the neighboring cards instead of cutting through them. */
.vault-window.entered .vault-card.is-peeking:not(.is-active) {
  z-index: 20;
  transform: translate3d(calc(var(--deck-x) + var(--vault-travel-x, 0%) + 50%), calc(var(--deck-y) + var(--vault-travel-y, 0%)), calc(var(--deck-z) + 260px)) rotateY(var(--deck-ry, 0deg)) scale(var(--deck-scale));
  filter: brightness(calc(var(--deck-light) + .18)) saturate(.9);
  box-shadow:
    0 44px 88px -34px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(233, 211, 168, .34);
  transition:
    transform .38s cubic-bezier(.22, .72, .2, 1),
    filter .34s ease,
    box-shadow .5s ease;
  transition-delay: 0ms;
}

.vault-card.no-anim {
  transition: none !important;
}

/* Used when jumping directly between two already-open cards (arrow nav) so
   the incoming/outgoing card snaps to position instead of visibly flying
   across the stack through the other cards; brightness/shadow still ease. */
.vault-card.no-position-anim {
  transition: filter .45s ease, opacity .48s ease, box-shadow .55s ease !important;
}

@media (max-width: 760px) {
  .vault-window {
    min-height: 430px;
    --vc-w: clamp(300px, 78vw, 410px);
  }

  #vault .vault-window {
    height: calc(100svh - 100px);
    min-height: 580px;
  }

  .vault-window > .section-heading {
    padding: 20px 20px 0;
  }

  .vault-window > .section-heading h2 {
    font-size: 22px;
  }

  .vault-window > .section-heading p {
    margin-top: 10px;
    font-size: 11px;
  }

  .vault-window > .vault-start {
    top: 150px;
  }

  .vault-window > .vault-deck {
    top: 60px;
  }

  .vault-card:nth-child(1) { --deck-x: 8%; --deck-y: 0%; }
  .vault-card:nth-child(2) { --deck-x: -10%; --deck-y: 3%; }
  .vault-card:nth-child(3) { --deck-x: -28%; --deck-y: 6%; }
  .vault-card:nth-child(4) { --deck-x: -46%; --deck-y: 9%; }
  .vault-card:nth-child(5) { --deck-x: -64%; --deck-y: 12%; }
  .vault-card:nth-child(6) { --deck-x: -82%; --deck-y: 15%; }
  .vault-card:nth-child(7) { --deck-x: -100%; --deck-y: 18%; }
  .vault-card:nth-child(8) { --deck-x: 26%; --deck-y: -3%; }
  .vault-card:nth-child(9) { --deck-x: 44%; --deck-y: -6%; }
  .vault-card:nth-child(10) { --deck-x: 62%; --deck-y: -9%; }
  .vault-card:nth-child(11) { --deck-x: 80%; --deck-y: -12%; }
  .vault-card:nth-child(12) { --deck-x: 98%; --deck-y: -15%; }

  .vault-card.is-active {
    top: 50%;
    left: 50%;
    right: auto;
    translate: 0 0;
    transform: translate(-50%, -50%) translateZ(110px) scale(.95);
  }

  .vault-card .vc-detail {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-card {
    transition: opacity .15s ease;
  }

  .vault-window.entered .vault-card {
    animation: none;
  }
}

.vault-nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 60;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.vault-window.has-active-card .vault-nav-arrow {
  opacity: .8;
  visibility: visible;
  pointer-events: auto;
}

.vault-window.has-active-card .vault-nav-arrow:hover,
.vault-window.has-active-card .vault-nav-arrow:focus-visible {
  opacity: 1;
}

.vault-nav-arrow--prev {
  left: 110px;
}

.vault-nav-arrow--prev:hover,
.vault-nav-arrow--prev:focus-visible {
  transform: translateY(-50%) translateX(-4px);
}

.vault-nav-arrow--next {
  right: 110px;
}

.vault-nav-arrow--next:hover,
.vault-nav-arrow--next:focus-visible {
  transform: translateY(-50%) translateX(4px);
}

.vault-nav-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .65));
}

.vault-nav-arrow--prev img {
  transform: scaleX(-1);
}

@media (max-width: 760px) {
  .vault-nav-arrow {
    width: 56px;
    height: 56px;
  }

  .vault-nav-arrow--prev {
    left: 10px;
  }

  .vault-nav-arrow--next {
    right: 10px;
  }
}

.vault-trail {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.vault-trail.is-visible {
  opacity: 1;
}

.vault-smoke-puff {
  mix-blend-mode: screen;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .vault-trail {
    display: none;
  }
}