/* ─────────────────────────────────────────────────────────────
   PM SITE OPENING — cortinilla de apertura
   Aislado con prefijo pm- para no chocar con base.css
   ───────────────────────────────────────────────────────────── */
:root {
  --pm-opening-serif: "Cormorant Garamond", Georgia, serif;
  --pm-opening-sans: "Inter", Arial, sans-serif;
  --pm-opening-mono: "JetBrains Mono", ui-monospace, monospace;
  --pm-opening-ease: cubic-bezier(.2, .75, .22, 1);
  --pm-opening-paper: rgba(239, 235, 225, .94);
  --pm-opening-ink: #1a1814;
  --pm-opening-accent: #8b7644;
}

.pm-site-opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  color: var(--pm-opening-ink);

  /* 0.9s en total. El sello entra en .26s, el texto esta puesto en .38s y
     los paneles ya van abriendo en .42s: se solapan y no hay pausa muerta. */
  --pm-t-total:      .9s;
  --pm-t-mark-dur:   .26s;  --pm-t-mark-del:  .02s;
  --pm-t-rule-dur:   .26s;  --pm-t-rule-del:  .06s;
  --pm-t-copy-dur:   .28s;  --pm-t-copy-del:  .1s;
  --pm-t-sig-dur:    .22s;  --pm-t-sig-del:   .44s;
  --pm-t-panel-dur:  .46s;  --pm-t-panel-del: .42s;

  animation: pm-opening-shell var(--pm-t-total) linear forwards;
}

.pm-opening-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background-color: var(--pm-opening-paper);
  background-image:
    linear-gradient(to right, rgba(26, 20, 14, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 20, 14, .075) 1px, transparent 1px);
  background-size: 80px 80px;
  backdrop-filter: blur(11px) saturate(75%);
  -webkit-backdrop-filter: blur(11px) saturate(75%);
  will-change: transform;
}

.pm-opening-panel--left {
  left: 0;
  border-right: 1px solid color-mix(in srgb, var(--pm-opening-accent) 42%, transparent);
  animation: pm-opening-left var(--pm-t-panel-dur) var(--pm-opening-ease) var(--pm-t-panel-del) forwards;
}

.pm-opening-panel--right {
  right: 0;
  border-left: 1px solid color-mix(in srgb, var(--pm-opening-accent) 42%, transparent);
  animation: pm-opening-right var(--pm-t-panel-dur) var(--pm-opening-ease) var(--pm-t-panel-del) forwards;
}

.pm-opening-signature {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto;
  align-items: center;
  gap: 22px;
  transform: translate(-50%, -50%);
  animation: pm-opening-signature-out var(--pm-t-sig-dur) var(--pm-opening-ease) var(--pm-t-sig-del) forwards;
}

.pm-opening-mark {
  position: relative;
  width: 68px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.84) rotate(-8deg);
  animation: pm-opening-mark-in var(--pm-t-mark-dur) var(--pm-opening-ease) var(--pm-t-mark-del) forwards;
}

.pm-opening-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .3;
}

.pm-opening-mark b {
  font: 500 25px/.9 var(--pm-opening-serif);
  letter-spacing: .06em;
}

.pm-opening-mark small {
  margin-top: 6px;
  font: 500 4.5px/1 var(--pm-opening-sans);
  letter-spacing: .2em;
}

.pm-opening-rule {
  height: 1px;
  background: var(--pm-opening-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: pm-opening-rule-in var(--pm-t-rule-dur) var(--pm-opening-ease) var(--pm-t-rule-del) forwards;
}

.pm-opening-copy {
  min-width: max-content;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: translateX(-12px);
  animation: pm-opening-copy-in var(--pm-t-copy-dur) var(--pm-opening-ease) var(--pm-t-copy-del) forwards;
}

.pm-opening-copy strong {
  font: 600 12px/1.2 var(--pm-opening-sans);
  letter-spacing: .02em;
}

.pm-opening-copy small {
  color: color-mix(in srgb, var(--pm-opening-ink) 58%, transparent);
  font: 400 7px/1 var(--pm-opening-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes pm-opening-shell {
  0%, 98% { visibility: visible; }
  99%, 100% { visibility: hidden; }
}

@keyframes pm-opening-left {
  to { transform: translate3d(-101%, 0, 0); }
}

@keyframes pm-opening-right {
  to { transform: translate3d(101%, 0, 0); }
}

@keyframes pm-opening-mark-in {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes pm-opening-rule-in {
  to { transform: scaleX(1); }
}

@keyframes pm-opening-copy-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-opening-signature-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

@media (max-width: 560px) {
  .pm-opening-signature {
    width: calc(100vw - 36px);
    grid-template-columns: auto minmax(34px, 1fr) auto;
    gap: 13px;
  }

  .pm-opening-mark { width: 56px; }
  .pm-opening-copy strong { font-size: 10px; }
  .pm-opening-copy small { font-size: 6px; letter-spacing: .14em; }
}

/* El backdrop-filter sobre dos paneles de pantalla completa es caro en iOS
   y el papel ya va al 94% de opacidad, asi que casi no se nota. */
@media (max-width: 980px) {
  .pm-opening-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-site-opening { display: none; }
}