/* =====================================================
   Package page: the curtain button, the side card that
   slides in at the film's end pose, and the three
   service cards (paper tags, like the film's) on velvet.
   Phones: the card rises into the lower third instead.
   ===================================================== */
.pk-hero {
  cursor: default;
}

.pk-closed:not(.pk-opening) .pk-hero {
  cursor: pointer;
}

/* "Open the curtain": a paper ticket centred on the curtain */
.pk-open {
  position: absolute;
  left: 50%;
  top: calc(var(--pg-hdr) + (100svh - var(--pg-hdr)) / 2);
  z-index: 2;
  min-height: 56px;
  padding: 0 34px;
  border: 1px solid var(--champagne);
  border-radius: 999px;
  background: var(--pk-tag, none) 0 0 / 384px 384px, #f3ecdc;
  box-shadow: inset 0 0 0 4px #f3ecdc, inset 0 0 0 5px rgba(168, 140, 69, 0.6), 0 14px 36px rgba(20, 2, 4, 0.55);
  color: var(--wine);
  font: 400 clamp(17px, 1.5vw, 21px) / 1 var(--ff-display);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

/* a slow golden breath around the ticket, compositor-only */
.pk-open::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  box-shadow: 0 0 26px 4px rgba(239, 226, 176, 0.55);
  opacity: 0;
  animation: pk-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}

.pk-closed:not(.pk-opening) .pk-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pk-open:hover {
  background-color: #fbf6ea;
}

.pk-open:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 6px;
}

@keyframes pk-breathe {
  50% {
    opacity: 1;
  }
}

.reduced .pk-open::after {
  animation: none;
}

/* ---- the side card: cream handmade paper, gold hairline, wine ink ---- */
.pk-card {
  position: absolute;
  right: max(20px, 2.5vw);
  top: calc(var(--pg-hdr) + (100svh - var(--pg-hdr)) / 2);
  z-index: 2;
  width: min(28vw, 460px);
  min-width: 320px;
  max-height: calc(100svh - var(--pg-hdr) - 40px);
  overflow: auto;
  padding: clamp(28px, 2.6vw, 44px);
  border-radius: 6px;
  background: var(--pk-paper, none) 0 0 / 512px 512px, #efe8d8;
  box-shadow: 0 30px 70px rgba(10, 2, 3, 0.5), 0 3px 10px rgba(10, 2, 3, 0.3);
  color: var(--wine-deep);
  /* hidden by opacity only: the text stays in the reading order */
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(100% + 6vw), -50%);
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.6s ease;
}

.pk-card.is-in {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.pk-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(211, 193, 129, 0.75);
  border-radius: 4px;
  pointer-events: none;
}

.pk-card__title {
  font: 400 clamp(26px, 2.3vw, 36px) / 1.12 var(--ff-display);
  letter-spacing: 0.04em;
  color: var(--wine);
}

.pk-card__rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: 16px 0 14px;
  background: linear-gradient(90deg, #a88c45, #efe2b0 50%, rgba(168, 140, 69, 0));
}

.pk-card__sub {
  font: italic 500 clamp(19px, 1.45vw, 23px) / 1.3 var(--ff-serif);
  color: var(--truffle);
}

.pk-card__text {
  margin-top: 14px;
  font: 500 clamp(16px, 1.15vw, 18.5px) / 1.55 var(--ff-serif);
  color: var(--ink);
}

.pk-card__text p + p {
  margin-top: 0.7em;
}

/* ---- service cards: paper tags on the curtain velvet ---------------- */
.pk-svc {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 20px clamp(72px, 9vw, 120px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 196, 0.08), rgba(255, 214, 196, 0) 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(90, 14, 18, 0.25), rgba(20, 2, 4, 0.6) 100%),
    var(--pk-velvet, none) 0 0 / 512px 512px,
    #3e0a0c;
  border-top: 1px solid rgba(211, 193, 129, 0.55);
  box-shadow: 0 -24px 60px rgba(10, 2, 3, 0.45);
}

.pk-svc__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1240px;
  margin: 0 auto;
}

.pk-svc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px clamp(22px, 2.2vw, 34px) 34px;
  /* the shadow sits on the card, the tag shape on its paper (::before):
     a clip on the card itself would cut the shadow off */
  filter: drop-shadow(0 18px 30px rgba(10, 2, 3, 0.45));
  color: var(--ink);
  text-align: center;
}

.pk-svc__card::before,
.pk-svc__card::after {
  content: "";
  position: absolute;
  clip-path: polygon(14% 0, 86% 0, 100% 7%, 100% 100%, 0 100%, 0 7%);
  pointer-events: none;
}

.pk-svc__card::before {
  inset: 0;
  z-index: -1;
  background: var(--pk-tag, none) 0 0 / 384px 384px, #f3ecdc;
}

.pk-svc__card::after {
  inset: 10px;
  border: 1px solid rgba(168, 140, 69, 0.55);
}

.pk-svc__eyelet {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #6b5a3e 0 32%, #efe2b0 36%, #a88c45 52%, #d3c181 64%, rgba(0, 0, 0, 0) 70%);
}

.pk-svc__num {
  font: 500 12px/1.3 var(--ff-sans);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: rgba(168, 140, 69, 0.95);
}

.pk-svc__title {
  margin-top: 8px;
  font: 400 clamp(22px, 1.9vw, 28px) / 1.15 var(--ff-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wine);
}

.pk-svc__rule {
  width: 84px;
  height: 1px;
  margin: 18px 0 8px;
  background: linear-gradient(90deg, rgba(168, 140, 69, 0), #a88c45, rgba(168, 140, 69, 0));
}

.pk-svc__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.pk-svc__row dt {
  font: 500 12.5px/1.4 var(--ff-sans);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--wine);
}

.pk-svc__row dd {
  margin-top: 4px;
  font: 500 17.5px/1.45 var(--ff-serif);
  color: var(--ink);
}

.pk-hero .pg-hint {
  z-index: 2;
}

/* ---- portrait (phones): the card rises into the lower third and the
   page goes on from it; no side shift of the stage ------------------- */
.is-portrait .pk-hero {
  height: auto;
  min-height: 100svh;
  padding: 70svh 12px 28px;
}

.is-portrait .pk-card {
  position: relative;
  right: auto;
  top: auto;
  width: auto;
  min-width: 0;
  max-height: none;
  overflow: visible;
  padding: 30px 24px 34px;
  border-radius: 18px;
  transform: translateY(48px);
}

.is-portrait .pk-card.is-in {
  transform: none;
}

.is-portrait .pk-card::before {
  border-radius: 12px;
}

.is-portrait .pk-hero .pg-hint {
  top: calc(70svh - 58px);
  bottom: auto;
}

@media (max-width: 900px) {
  .pk-svc__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

/* no film (boot error, no JS): the card simply sits under the first screen */
.film-failed .pk-card,
html:not(.js) .pk-card {
  opacity: 1;
  pointer-events: auto;
}

/* the stage slides left for the card: more curtain shows on the right */
.pg--package #film {
  background: radial-gradient(120% 80% at 100% 50%, rgba(20, 2, 4, 0), rgba(20, 2, 4, 0.55)), var(--pk-velvet, none) 0 0 / 512px 512px, #4a0b10;
}

/* landscape: the hint sits under the side card, clear of the scene's numbers */
html:not(.is-portrait) .pk-hero .pg-hint {
  left: auto;
  right: calc(max(20px, 2.5vw) + max(min(32vw, 520px), 340px) / 2);
  bottom: 12px;
  transform: translate(50%, 12px);
}

html:not(.is-portrait) .pk-hero .pg-hint.is-on {
  transform: translate(50%, 0);
}

/* phones: the ticket label stays on one line */
@media (max-width: 480px) {
  .pk-open {
    padding: 0 24px;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    white-space: nowrap;
  }
}

/* QA fix: on phones the fixed Book button must not cover card or service text */
@media (max-width: 860px) {
  .is-portrait .pk-card,
  .pk-svc {
    padding-bottom: 92px;
  }
}

/* a line of links under the three service cards (package/gen.mjs): corporate section, wedding guides */
.pk-svc__more {
  max-width: 760px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  text-align: center;
  font: 400 clamp(18px, 1.5vw, 21px) / 1.55 var(--ff-serif);
  color: var(--pearl);
}

.pk-svc__more a {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pk-svc__more a:hover {
  color: var(--gold-hi);
}

.pk-svc__more a:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

/* =====================================================
   Phones (up to 600 px wide, portrait; owner request 2026-10-05).
   The scene's tags and numbers are about twice their old size
   (V2-film/scenes/s5-package.js) and fill the first screen, so the
   card starts below it; and the "Scroll" cue is the home page's cue
   (the word and two chevrons that bob and pulse), at the foot of the
   first screen, left of the fixed Book button. It shows from the moment
   the curtain starts to open (it used to be hidden for the 11 s of the
   opening) and goes once the reader scrolls. Tablets and desktop keep
   the rules above.
   ===================================================== */
@media (max-width: 600px) {
  .is-portrait .pk-hero {
    padding-top: 100svh;
  }

  .is-portrait .pk-hero .pg-hint {
    top: calc(100svh - 54px - max(16px, env(safe-area-inset-bottom, 0px))); /* centred on the fixed Book button */
    bottom: auto;
    left: 14px;
    gap: 4px;
    min-height: 56px;
    padding: 9px 20px 6px;
    transform: none;
    border: 1px solid rgba(211, 193, 129, 0.55);
    background: rgba(43, 8, 10, 0.84);
    font: 600 13px/1 var(--ff-sans);
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    transition: opacity 0.7s ease, top 0.5s ease;
  }

  /* first visit: the cookie notice (rr-tracking.js) covers the foot of the screen.
     On the closed curtain, where there is room, the cue waits above it until the
     notice is answered; once the scene plays it is behind the notice, as the Book
     button is. */
  .is-portrait:has([data-rr-consent]):not(.pk-opening) .pk-hero .pg-hint {
    top: calc(100svh - 210px);
  }

  .is-portrait .pk-hero .pg-hint::before {
    content: "";
    order: 2;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23efe2b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5L10 9.5L16.5 3.5' opacity='.45'/%3E%3Cpath d='M3.5 10L10 16L16.5 10'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: pk-cue-bob 2.2s ease-in-out infinite;
  }

  /* the pulse: a ring that swells out of the pill and fades (transform and opacity only) */
  .is-portrait .pk-hero .pg-hint::after {
    position: absolute;
    inset: -1px;
    width: auto;
    height: auto;
    border: 1px solid rgba(239, 226, 176, 0.8);
    border-radius: inherit;
    background: none;
    pointer-events: none;
    animation: pk-cue-ring 2.2s ease-out infinite;
  }

  /* shown from the first moment of the opening, not only at its end */
  .is-portrait.pk-opening:not(.pg-scrolled) .pk-hero .pg-hint {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease;
  }

  .reduced .pk-hero .pg-hint::before,
  .reduced .pk-hero .pg-hint::after {
    animation: none;
  }
}

@keyframes pk-cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@keyframes pk-cue-ring {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.28, 1.6);
  }
}