/* ============================================================
   Alaya — Pali Ekei Music Festival popup
   Corner record that shakes for attention, and the ticket it opens.

   Typography note: Krona One is the festival's display face, but Google
   only publishes it in latin + latin-ext (no Greek glyphs). The stack below
   therefore falls back to Inter per character, so Greek headings render in
   Inter automatically instead of a random system font. The long paragraph
   uses Inter in BOTH languages on purpose, so English and Greek look like
   the same design and stay readable at small sizes.
   ============================================================ */
.pk-root{
  --pk-accent:#e6007e;
  --pk-cream:#f7eeca;
  --pk-ink:#17130f;
  --pk-radius:14px;
  --pk-display:"Krona One","Inter","Helvetica Neue",Arial,sans-serif;
  --pk-body:"Inter","Helvetica Neue",Arial,sans-serif;
}

/* ============================================================
   1. Corner record (the launcher)
   ============================================================ */
.pk-launcher{
  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:clamp(14px,2.2vw,28px);
  z-index:120;               /* under the cookie banner (200), over the page */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.pk-launcher[hidden]{display:none}
/* While the ticket is open the corner record steps out of the way, so it
   does not ghost through the dark backdrop behind the ticket. */
.pk-launcher.is-behind{opacity:0;pointer-events:none;transition:opacity .3s ease}

.pk-launcher__btn{
  display:block;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  line-height:0;
  border-radius:50%;
  /* Same reasoning as the record on the ticket: a shadow rather than a
     filter, so the shake underneath it keeps painting on iOS. */
  box-shadow:0 10px 22px rgba(0,0,0,.42);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pk-launcher__btn:hover{transform:scale(1.07)}
.pk-launcher__btn:focus-visible{outline:3px solid var(--pk-accent);outline-offset:6px}

.pk-launcher__vinyl{
  width:clamp(92px,10vw,140px);
  height:auto;
  border-radius:50%;
  /* Wobble on a long loop: a quick shake, then a long rest. */
  animation:pk-shake 7s ease-in-out infinite;
  transform-origin:50% 50%;
}
.pk-launcher__btn:hover .pk-launcher__vinyl{
  /* Hovering stops the nudging and starts playing. */
  animation:pk-spin 3.2s linear infinite;
}

@keyframes pk-shake{
  0%,   100%{transform:rotate(0) translateY(0)}
  2%   {transform:rotate(-9deg)  translateY(-3px)}
  4%   {transform:rotate(8deg)   translateY(0)}
  6%   {transform:rotate(-7deg)  translateY(-2px)}
  8%   {transform:rotate(5deg)   translateY(0)}
  10%  {transform:rotate(-3deg)  translateY(-1px)}
  12%  {transform:rotate(0)      translateY(0)}
  /* 12%-100% = the record simply rests */
}
@keyframes pk-spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* ---- "TAP TO PLAY" bubble ---- */
.pk-bubble{
  position:relative;
  font-family:var(--pk-display);
  font-size:clamp(.6rem,1.1vw,.76rem);
  letter-spacing:.06em;
  line-height:1.15;
  text-align:center;
  color:var(--pk-ink);
  background:var(--pk-cream);
  padding:.7em 1.1em;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  white-space:nowrap;
  /* Hidden until the record is hovered, or until it shakes on touch. */
  opacity:0;
  transform:translateY(6px) scale(.94);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.pk-bubble::after{           /* the little pointer underneath */
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:14px;height:14px;
  margin-left:-7px;
  background:var(--pk-cream);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.pk-launcher:hover .pk-bubble{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Keyboard focus only. Deliberately NOT :focus-within: a mouse click leaves
   the button focused, and the ticket hands focus back to it on close, so the
   bubble would then sit there permanently instead of following the cursor.
   Kept as its own rule so browsers without :has() still get the hover rule. */
.pk-launcher:has(.pk-launcher__btn:focus-visible) .pk-bubble{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Touch screens have no cursor to hover with, so the label is just clutter
   sitting over the artwork. The button keeps its aria-label for screen readers. */
@media (hover:none){
  .pk-bubble{display:none}
}

/* ============================================================
   2. Overlay + open/close animation
   ============================================================ */
.pk-overlay{
  position:fixed;
  inset:0;
  z-index:190;               /* still under the cookie banner */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(18,15,12,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .4s ease;
  overflow-y:auto;
  /* Stated outright: with only overflow-y set, the other axis becomes "auto"
     by itself, and anything reaching past the edge turns into a sideways
     scroll. The ticket is only ever meant to scroll up and down. */
  overflow-x:hidden;
}
.pk-overlay[hidden]{display:none}
.pk-overlay.is-open{opacity:1}

.pk-stage{
  width:100%;
  max-width:1080px;
  margin:auto;
  /* Grows out of the bottom-right corner, where the record was tapped. */
  transform:scale(.28) translate(22%,26%);
  opacity:0;
  transition:transform .55s cubic-bezier(.22,1.2,.36,1), opacity .35s ease;
}
.pk-overlay.is-open .pk-stage{transform:scale(1) translate(0,0);opacity:1}

/* ============================================================
   3. The ticket
   ============================================================ */
.pk-ticket{
  position:relative;
  display:flex;
  align-items:stretch;
  background:var(--pk-cream);
  border-radius:var(--pk-radius);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  /* The record hangs off the bottom-right corner, so nothing may clip it. */
  overflow:visible;
}

/* ---- Main part of the ticket (everything left of the perforation) ---- */
.pk-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* Rounded on the left only; the stub finishes the right side. */
  border-radius:var(--pk-radius) 0 0 var(--pk-radius);
  overflow:hidden;
  /* Dark underneath its own children. This panel is clipped to a rounded
     corner while the cream ticket sits behind it, and the two curves do not
     anti-alias identically, which showed as pale specks along the left edge.
     Matching the panel to its dark content means any seam is invisible. */
  background:var(--pk-ink);
}

/* ---- Black "AMNESIA x ALAYA PRESENTS" bar ---- */
.pk-presents{
  display:flex;
  align-items:center;
  justify-content:center;
  /* Greek words are longer than the English ones, so let the line wrap
     rather than run off the edge of the ticket. */
  flex-wrap:wrap;
  gap:clamp(6px,2.2vw,30px);
  background:var(--pk-ink);
  color:#fff;
  padding:clamp(8px,1.4vw,15px) clamp(12px,2vw,26px);
}
.pk-presents__brand,
.pk-presents__word{
  font-family:var(--pk-display);
  font-size:clamp(.85rem,2.1vw,1.6rem);
  letter-spacing:.02em;
  line-height:1;
}
.pk-presents__x{
  font-size:clamp(.7rem,1.4vw,1.05rem);
  opacity:.85;
}
.pk-presents__logo{
  width:clamp(74px,11vw,150px);
  height:auto;
  /* The logo file is gold; on black it reads better in white. */
  filter:brightness(0) invert(1);
}

/* ---- Poster / date strip / copy ---- */
.pk-content{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  min-height:0;
}

/* The poster carries text right to its edges, so it must never be cropped.
   The column takes its width from the artwork's own proportions at full
   ticket height, which is what keeps it filling the space with no bands. */
.pk-poster{
  flex:0 0 auto;
  /* Capped so the headline beside it keeps enough width not to wrap.
     Any leftover height shows as an even black mat, which suits the ticket. */
  max-width:36%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pk-ink);
  padding:clamp(6px,.9vw,12px);
}
.pk-poster img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}

.pk-date{
  flex:0 0 auto;
  background:var(--pk-ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(6px,1vw,12px) clamp(3px,.7vw,9px);
}
.pk-date__text{
  font-family:var(--pk-display);
  font-size:clamp(.72rem,1.7vw,1.35rem);
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
  /* Reads bottom-to-top, like the screenshot. */
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

.pk-main{
  flex:1 1 auto;
  min-width:0;
  /* Explicit, because the panel behind it is now dark rather than the
     ticket's cream (see .pk-body). */
  background:var(--pk-cream);
  padding:clamp(14px,2.4vw,32px) clamp(14px,2.6vw,38px);
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.2vw,14px);
}

.pk-title{
  font-family:var(--pk-display);
  font-weight:400;
  font-size:clamp(1.15rem,3.4vw,2.5rem);
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--pk-ink);
  margin:0;
}
.pk-title__line{display:block}
.pk-title em{font-style:normal;color:var(--pk-accent)}

/* Sponsor logo. The artwork is white, so it needs something dark behind it. */
.pk-sponsor{
  align-self:flex-start;
  background:var(--pk-ink);
  border-radius:8px;
  padding:clamp(5px,.8vw,10px) clamp(9px,1.4vw,16px);
}
.pk-sponsor img{
  width:clamp(96px,15vw,190px);
  height:auto;
  display:block;
}

.pk-sub{
  font-family:var(--pk-display);
  font-size:clamp(.85rem,1.9vw,1.4rem);
  line-height:1.2;
  color:var(--pk-ink);
  margin:0;
}

.pk-text{
  font-family:var(--pk-body);
  font-size:clamp(.72rem,1.15vw,.9rem);
  line-height:1.65;
  color:#413628;
  /* No inner scroll box: a fixed height clips the Greek copy mid-line.
     The ticket grows instead, and the overlay scrolls if it has to. */
}
.pk-text p+p{margin-top:.75em}

.pk-trailer{
  font-family:var(--pk-body);
  font-size:clamp(.72rem,1.15vw,.9rem);
  /* Its own colour, set from the dashboard, so the note stands apart from
     the body copy and from the magenta used in the headline. */
  color:var(--pk-trailer-color,#8a2be2);
  margin:0;
}
.pk-trailer__link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
/* The marked word before a trailer link has been set: not clickable. */
.pk-trailer__word{color:inherit;font-weight:500}

/* ---- Right-hand stub, torn off along a perforation ---- */
.pk-stub{
  position:relative;
  /* Wide enough that the record overlapping this corner stays off the copy.
     Grows with the record: see .pk-ticket__vinyl. */
  flex:0 0 clamp(64px,14%,158px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* Tight, so the label and the booking button read as one pair. */
  gap:clamp(6px,.9vw,11px);
  /* Extra room at the bottom keeps the label and button clear of the
     record, which hangs over this corner. */
  padding:clamp(14px,2vw,26px) clamp(4px,.8vw,10px) clamp(92px,14vw,186px);
  border-left:2px dashed rgba(23,19,15,.32);
  border-radius:0 var(--pk-radius) var(--pk-radius) 0;
}
/* No punched notches at the ends of the perforation. A drawn circle can only
   pass for a hole when it happens to match whatever is behind the ticket, and
   it read as a black blob against the cream stub and against a light page.
   Cutting real holes would mean masking the ticket, which would also clip the
   record hanging off the corner. The dashed line alone reads as a perforation. */

.pk-stub__label{
  font-family:var(--pk-display);
  /* Trimmed from 1.25rem: the stub now also carries the QR and its wording,
     and this word is the tallest thing competing for the space. */
  font-size:clamp(.68rem,1.2vw,.95rem);
  letter-spacing:.06em;
  line-height:1;
  color:var(--pk-ink);
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
/* ---- "More info": QR on computers, plain link on phones ----
   Split by pointer type rather than screen width, because the question is
   not how big the screen is, it is whether the visitor is holding the camera
   that would scan it. A phone cannot scan its own screen. */
.pk-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:none;
  /* Set apart from the booking pair above it. */
  margin-top:clamp(12px,2.2vw,26px);
}
.pk-info__qr{
  display:none;                 /* computers switch this on below */
  width:clamp(72px,7vw,96px);
  height:auto;
  border-radius:3px;
}
.pk-info__link{
  font-family:var(--pk-display);
  font-size:clamp(.5rem,.85vw,.62rem);
  letter-spacing:.1em;
  line-height:1;
  color:var(--pk-ink);
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.75;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transition:opacity .25s ease;
}
.pk-info__link:hover{opacity:1}
.pk-info__link:focus-visible{outline:2px solid var(--pk-accent);outline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .pk-info__qr{display:block}
  /* The QR carries the meaning here, so the wording sits under it, upright. */
  .pk-info__link{writing-mode:horizontal-tb;transform:none;font-size:.5rem;letter-spacing:.12em}
}

.pk-cta{
  font-family:var(--pk-display);
  /* The main action on the stub, so it carries more weight than the
     "more info" line underneath it. */
  font-size:clamp(.64rem,1.15vw,.88rem);
  letter-spacing:.06em;
  line-height:1.15;
  text-align:center;
  color:#fff;
  background:var(--pk-accent);
  padding:1.05em .85em;
  border-radius:7px;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transition:filter .25s ease, transform .25s ease;
}
.pk-cta:hover{filter:brightness(1.12)}
.pk-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- The record, playing in the ticket's corner ----
   Sized as a share of the TICKET, not the viewport, so it always lands over
   the stub instead of reaching back across the last lines of the paragraph. */
.pk-ticket__vinyl{
  position:absolute;
  right:clamp(-26px,-2vw,-14px);
  bottom:clamp(-30px,-2.4vw,-16px);
  width:clamp(104px,17%,186px);
  aspect-ratio:1;
  /* Clips the turning image to a circle. The record is round already, so
     nothing visible is lost, and the box itself never changes size. */
  overflow:hidden;
  border-radius:50%;
  /* A box-shadow, not a drop-shadow filter. A filter on the parent of a
     turning element makes iOS render the spin as a single frozen frame, and
     since this box is already clipped to a circle a plain shadow is both
     correct and cheaper. */
  box-shadow:0 12px 26px rgba(0,0,0,.5);
  pointer-events:none;
}
.pk-ticket__vinyl img{
  width:100%;
  height:100%;
  display:block;
  animation:pk-spin 3.4s linear infinite;
  /* Ask for its own layer up front, so the spin does not depend on the
     browser noticing mid-animation that it needs one. */
  will-change:transform;
}

/* ---- Close ---- */
.pk-close{
  position:absolute;
  top:calc(-1 * clamp(14px,2.4vw,22px));
  right:calc(-1 * clamp(6px,1.4vw,16px));
  width:clamp(34px,4vw,44px);
  height:clamp(34px,4vw,44px);
  color:var(--pk-ink);
  background:var(--pk-cream);
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform .25s ease;
}
/* The cross is two bars crossed at the exact centre of the circle. A typed
   "x" character sits slightly off centre, because a glyph is positioned on
   its baseline rather than in the middle of its box, and how far off depends
   on the font that happens to load. */
.pk-close::before,
.pk-close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:40%;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.pk-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.pk-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pk-close:hover{transform:scale(1.1)}
.pk-close:focus-visible{outline:3px solid var(--pk-accent);outline-offset:3px}

/* ============================================================
   4. Small screens: the ticket stands up instead of lying down
   ============================================================ */
@media (max-width:820px){
  .pk-ticket{flex-direction:column}
  .pk-body{border-radius:var(--pk-radius) var(--pk-radius) 0 0}

  .pk-content{flex-direction:row;align-items:stretch}
  .pk-poster{max-width:42%}

  /* Stub moves to the bottom: perforation becomes horizontal. */
  .pk-stub{
    flex:0 0 auto;
    flex-direction:row;
    /* Three things now share this row (label, more info, button) and Greek
       runs longer than English, so let it wrap onto a second line rather
       than push the button under the record. */
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px 14px;
    padding:14px clamp(14px,4vw,22px) 16px;
    border-left:0;
    border-top:2px dashed rgba(23,19,15,.32);
    border-radius:0 0 var(--pk-radius) var(--pk-radius);
  }
  .pk-stub__label,
  .pk-info__link,
  .pk-cta{writing-mode:horizontal-tb;transform:none}
  /* Narrower side padding so the label and the button stay on one line
     together, leaving "more info" to wrap underneath them. */
  .pk-cta{padding:.9em 1.15em}
  /* Row layout, so the separation above becomes a gap to its left. */
  .pk-info{margin-top:0;margin-left:clamp(4px,2vw,14px)}
  /* Stub is a row down here, so the info sits beside the label. */
  .pk-info{flex-direction:row;align-items:center;gap:8px}
  .pk-info__qr{width:50px}
  /* Keep clear of the record in the corner. */
  .pk-stub{padding-right:clamp(114px,31vw,164px)}


  /* The ticket now fills the screen, so the close button moves inside it,
     onto the black bar, where it stays visible at the top of the scroll. */
  .pk-close{
    top:8px;right:8px;
    background:var(--pk-cream);
    box-shadow:0 4px 12px rgba(0,0,0,.5);
  }
  /* ...so leave it room rather than letting it sit on the wording. */
  .pk-presents{padding-right:clamp(46px,13vw,64px)}
}

@media (max-width:560px){
  /* Poster on top, copy underneath, so neither gets squeezed. */
  .pk-content{flex-direction:column}
  /* Full width now, so the poster sizes by height and stays centred. */
  .pk-poster{max-width:100%}
  .pk-poster img{height:auto;width:auto;max-height:30vh;margin:0 auto}
  .pk-date{padding:7px 10px}
  .pk-date__text{writing-mode:horizontal-tb;transform:none;font-size:.8rem}
  /* Kept inside the viewport so the clip above never touches the record. */
  .pk-ticket__vinyl{width:112px;right:-8px;bottom:-18px}
}

/* ============================================================
   5. Reduced motion: no shaking, no spinning
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pk-launcher__vinyl,
  .pk-launcher__btn:hover .pk-launcher__vinyl,
  .pk-ticket__vinyl img{animation:none}
  .pk-stage{transition:opacity .3s ease;transform:none}
  .pk-overlay.is-open .pk-stage{transform:none}
  .pk-bubble{transition:opacity .2s ease}
}