/* doors.css — Vedic Portico double-door opener. HOME PAGE ONLY, first visit of a browser session.
   Pure CSS + doors.js. No images, no network. Animates transform + opacity only.
   Colours are the six locked brand tokens only (brand-spec.md); fonts are the brand display/body stacks.
   Shown only when the inline head snippet adds html.vp-doors-on, so if any script fails the page is never covered. */

.vp-doors { display: none; }

.vp-doors-on .vp-doors {
  --vp-leaf-top: var(--fg, #3C291D);
  --vp-leaf-bot: #2b1c13;              /* --fg darkened for the leaf's lower edge */
  --vp-line: var(--border, #CDBDA4);
  --vp-stile: clamp(40px, 7vw, 104px);
  --vp-dur: 1100ms;
  --vp-ease: cubic-bezier(.6, .02, .25, 1);

  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  perspective: 120vw;                  /* must exceed half the viewport width */
  perspective-origin: 50% 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* CSS-only fail-safe: whatever JS does, the overlay is gone after 4 s. */
  animation: vp-doors-failsafe 1ms linear 4s forwards;
}
@keyframes vp-doors-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

/* ---- Door leaves ---------------------------------------------------------- */
.vp-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;                    /* clips each leaf's half of the wordmark */
  background: var(--vp-leaf-top);
  background: linear-gradient(180deg, var(--vp-leaf-top) 0%, var(--vp-leaf-bot) 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform var(--vp-dur) var(--vp-ease);
  will-change: transform;
}
.vp-door--l { left: 0;  transform-origin: 0 50%;
  box-shadow: inset -3px 0 0 var(--accent, #8D4129), inset 28px 0 40px -28px rgba(0, 0, 0, .55); }
.vp-door--r { right: 0; transform-origin: 100% 50%;
  box-shadow: inset 3px 0 0 var(--accent, #8D4129), inset -28px 0 40px -28px rgba(0, 0, 0, .55); }

/* Doors swing TOWARD the viewer: hinge on the outer edge, free edge comes forward. */
.vp-doors.is-open .vp-door--l { transform: rotateY(-98deg); }
.vp-doors.is-open .vp-door--r { transform: rotateY(98deg); }

/* Leaf darkens as it turns away from the light */
.vp-door::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #120a06;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vp-dur) var(--vp-ease);
}
.vp-doors.is-open .vp-door::after { opacity: .6; }

/* ---- Panel detail ----------------------------------------------------------- */
.vp-panels {
  position: absolute;
  top: clamp(18px, 5vh, 56px);
  bottom: clamp(18px, 5vh, 56px);
  display: grid;
  grid-template-rows: 1.6fr 1fr;
  gap: clamp(12px, 3vh, 32px);
}
.vp-door--l .vp-panels { left: clamp(14px, 3vw, 44px); right: var(--vp-stile); }
.vp-door--r .vp-panels { right: clamp(14px, 3vw, 44px); left: var(--vp-stile); }
.vp-panel {
  --vp-bevel: clamp(6px, 1.1vw, 14px);
  position: relative;
  border: 1px solid var(--vp-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2));
  box-shadow: inset 0 0 0 var(--vp-bevel) rgba(0, 0, 0, .14);
}
/* Upper panels meet at the seam to form one arched portico window across both leaves */
.vp-door--l .vp-panel--arch { border-top-left-radius:  100% 34%; }
.vp-door--r .vp-panel--arch { border-top-right-radius: 100% 34%; }

/* ---- Handles (sand tones of the palette, no gold) ---------------------------- */
.vp-handle {
  position: absolute;
  top: 66%;
  width: clamp(8px, 1.1vw, 14px);
  height: clamp(80px, 20vh, 190px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--border, #CDBDA4);
  background: linear-gradient(135deg, var(--bg, #F9F3E6) 0%, var(--border, #CDBDA4) 50%, var(--muted, #6B5142) 100%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .4);
}
.vp-handle::before,
.vp-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--bg, #F9F3E6) 0%, var(--border, #CDBDA4) 50%, var(--muted, #6B5142) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.vp-handle::before { top: 7%; }
.vp-handle::after  { bottom: 7%; }
.vp-door--l .vp-handle { right: calc(var(--vp-stile) / 2 - clamp(8px, 1.1vw, 14px) / 2); }
.vp-door--r .vp-handle { left:  calc(var(--vp-stile) / 2 - clamp(8px, 1.1vw, 14px) / 2); }

/* ---- Wordmark: the same full-width block sits in both leaves, each clips its half ---- */
.vp-crest {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 26vh;                /* lifts the wordmark clear of the handles */
  box-sizing: border-box;
  text-align: center;
  color: var(--bg, #F9F3E6);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
  pointer-events: none;
  opacity: 0;
  animation: vp-crest-in 400ms ease 80ms forwards;     /* wordmark fades in over the first ~0.4 s */
  transition: opacity .4s ease .65s;                   /* stays whole while the doors part, then fades */
}
@keyframes vp-crest-in { to { opacity: 1; } }
.vp-door--l .vp-crest { left: 0; }
.vp-door--r .vp-crest { right: 0; }
.vp-doors.is-open .vp-crest { opacity: 0; animation: none; }

.vp-crest__name {
  font: 500 clamp(30px, 8.5vw, 96px) / 1.05 var(--display, "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vp-crest__rule {
  width: min(34vw, 360px);
  height: 2px;
  margin: 1.1em 0 .95em;
  background: linear-gradient(90deg, transparent, var(--accent, #8D4129) 20%, var(--accent, #8D4129) 80%, transparent);
}
.vp-crest__sub {
  font: 600 clamp(10px, 1.45vw, 18px) / 1 var(--body, "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif);
  letter-spacing: .4em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- States ------------------------------------------------------------------- */
.vp-doors.is-open { pointer-events: none; }            /* taps go to the page once the doors are moving */
.vp-doors.is-skip { opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.vp-doors.is-skip .vp-door,
.vp-doors.is-skip .vp-door::after { transition: none; }

/* ---- Reduced motion: no swing, a quick fade of the whole closed doors ---------- */
@media (prefers-reduced-motion: reduce) {
  .vp-door, .vp-door::after, .vp-crest { transition: none; animation: none; opacity: 1; }
  .vp-doors.is-open .vp-door--l,
  .vp-doors.is-open .vp-door--r { transform: none; }
  .vp-doors.is-open .vp-door::after { opacity: 0; }
  .vp-doors.is-open .vp-crest { opacity: 1; }
  .vp-doors { transition: opacity 350ms ease; }
  .vp-doors.is-open { opacity: 0; }
}

@media print { .vp-doors { display: none !important; } }