/* ============================================================
   Next event page — builds on the tokens + form styles in style.css
   ============================================================ */

.event-page {
  position: relative;
  background: var(--plum);
  overflow-x: clip;
}

/* ---------- background: light through a curtain ----------
   Wide soft stripes sway and breathe on different rhythms (two independent
   animations composed via `translate` + `scale`), and a soft spotlight
   follows the pointer (event.js). */
.stripes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.stripes span {

  position: absolute;
  top: -10%;
  height: 120%;
}
.stripes span {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(227, 85, 246, .11) 25%,
    rgba(233, 89, 123, .14) 62%,
    transparent 100%);
  /* soft sides via a mask instead of filter: blur — a blurred layer gets
     clipped while it animates, which showed up as hard flickering lines */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  animation:
    sway var(--sway, 14s) ease-in-out infinite alternate,
    breathe var(--breathe, 9s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) * 1.7);
}
.stripes span:nth-child(1) { left: 4%;  width: 1.6%; --sway: 13s; --breathe: 8s;  --d: -1s;  --dx: 2.5vw; }
.stripes span:nth-child(2) { left: 17%; width: 3.5%; --sway: 17s; --breathe: 11s; --d: -4s;  --dx: -3vw; }
.stripes span:nth-child(3) { left: 30%; width: 1.2%; --sway: 11s; --breathe: 7s;  --d: -7s;  --dx: 2vw; }
.stripes span:nth-child(4) { left: 47%; width: 2.2%; --sway: 19s; --breathe: 10s; --d: -2s;  --dx: -2.5vw; }
.stripes span:nth-child(5) { left: 57%; width: 4%;   --sway: 15s; --breathe: 12s; --d: -6s;  --dx: 3.5vw; }
.stripes span:nth-child(6) { left: 69%; width: 1.4%; --sway: 12s; --breathe: 8s;  --d: -3s;  --dx: -2vw; }
.stripes span:nth-child(7) { left: 82%; width: 3%;   --sway: 18s; --breathe: 9s;  --d: -8s;  --dx: 2.5vw; }
.stripes span:nth-child(8) { left: 95%; width: 1.8%; --sway: 14s; --breathe: 11s; --d: -5s;  --dx: -3vw; }


@keyframes sway {
  from { translate: calc(var(--dx) * -.6 * var(--sway-k, 1)) 0; }
  to   { translate: calc(var(--dx) * .6 * var(--sway-k, 1)) 0; }
}
@keyframes breathe {
  from { scale: .85 1; opacity: .5; }
  to   { scale: 1.15 1; opacity: .85; }
}

/* phones: the stripes sit close to the text, so keep them dimmer (same motion) */
@media (max-width: 640px) {
  .stripes { opacity: .4; }
  .event-grain { opacity: .08; }
}

/* pointer spotlight — position set by event.js through --x / --y */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--x, 50%) var(--y, 30%),
    rgba(233, 89, 123, .09), rgba(227, 85, 246, .035) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .8s;
}
.spotlight.is-on { opacity: 1; }

.event-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.event-page main,
.event-page .footer {
  position: relative;
  z-index: 1;
}
.event-page .footer { background: transparent; }

/* ---------- top logo ---------- */
.event-top {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) var(--gutter) 0;
}
.event-top__home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.event-top__mark {
  width: 48px;
  transition: transform .8s var(--ease-out);
}
.event-top__home:hover .event-top__mark { transform: rotateY(180deg); }
.event-top__wordmark { width: min(52vw, 190px); }

/* ---------- 1. title + date + place ---------- */
.event-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(36px, 6vh, 64px);
  text-align: center;
}

.event-hero__title { margin: 0; line-height: 0; }
.event-hero__line {
  width: min(88vw, 940px);
  height: auto;
  animation: write 2.2s .2s var(--ease-out) both;
}
/* "write" + "rise" keyframes live in style.css */

/* phones: the script breaks into two bigger, staggered lines */
.event-hero__stack { display: none; }
@media (max-width: 640px) {
  .event-hero__line { display: none; }
  .event-hero__stack {
    display: flex;
    flex-direction: column;
    direction: ltr;
    width: calc(100vw - 2 * var(--gutter));
  }
  .event-hero__stack img { height: auto; }
  .event-hero__stack img:first-child {
    width: 100%;
    align-self: flex-start;
    animation: write 1.6s .2s var(--ease-out) both;
  }
  .event-hero__stack img:last-child {
    width: 63%;
    align-self: flex-end;
    margin-top: -9%;
    animation: write 1.2s 1.2s var(--ease-out) both;
  }
}

.event-hero__date {
  margin: clamp(-14px, -1.2vw, 0px) 0 0;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 100;
  letter-spacing: .12em;
  line-height: 1.1;
  direction: ltr;
  animation: rise 1.2s 1.4s var(--ease-out) both;
}

/* collaboration line: "Urbans × Ofir Lazrov" */
.event-hero__collab {
  margin: clamp(4px, 1vw, 12px) 0 0;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  animation: rise 1.2s 1.2s var(--ease-out) both;
}
.event-hero__x {
  margin: 0 .3em;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 0;
  color: var(--pink);
}
.event-hero__collab:not([hidden]) + .event-hero__date { margin-top: clamp(6px, 1.2vw, 14px); }

.event-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 300;
  letter-spacing: .18em;
  animation: rise 1.2s 1.6s var(--ease-out) both;
}
.event-hero__sep {
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--pink);
  transform: rotate(45deg);
}

/* address + navigation */
.event-location {
  margin-top: 16px;
  animation: rise 1.2s 1.8s var(--ease-out) both;
}
.event-location[hidden] { display: none; }
.event-location__address {
  margin: 0;
  color: var(--sand-dim);
}
.event-location__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: .95rem;
  color: var(--sand);
  text-decoration: none;
  border: 1px solid var(--sand-dim);
  border-radius: 999px;
  direction: ltr;
  transition: background .3s, color .3s, border-color .3s;
}
.nav-btn:hover { background: var(--sand); color: var(--plum); border-color: var(--sand); }

/* ---------- 2. RSVP: form card + photo ---------- */
.rsvp {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rsvp__card {
  width: 100%;
  max-width: 460px;
  justify-self: center;
  text-align: center;
}
.rsvp__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 700;
}

.rsvp__form { margin-top: 4px; }
.rsvp__form .form__grid { column-gap: 16px; }
/* keep name + phone side by side even on phones, like the wireframe */
@media (max-width: 639px) {
  .rsvp__form .form__grid { grid-template-columns: 1fr 1fr; }
}
.rsvp__form .field label { inset-inline: 0; text-align: center; transform-origin: center; }
.rsvp__form .field input { text-align: center; }

/* RSVP choices — icon cards (radio buttons) */
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 20px 8px 16px;
  border-radius: 16px;
  background: rgba(206, 193, 187, .05);
  border: 1px solid rgba(206, 193, 187, .3);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .25s var(--ease-out);
}
/* gradient border, faded in when selected */
.choice__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--magenta), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
}
.choice:hover .choice__card {
  background: rgba(206, 193, 187, .09);
  border-color: rgba(206, 193, 187, .5);
  transform: translateY(-2px);
}

.choice__icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s, transform .5s var(--ease-out);
}
.choice__label {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
}
.choice__label small {
  display: block;
  font-size: .78rem;
  font-weight: 300;
  opacity: .85;
}
.choice__sub {
  font-size: .82rem;
  color: var(--sand-dim);
  line-height: 1.3;
}

/* hexagon check (the logo's shape) in the corner */
.choice__check {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.choice__hex {
  stroke: rgba(206, 193, 187, .45);
  stroke-width: 1.3;
  transition: fill .35s, stroke .35s;
}
.choice__tick {
  stroke: var(--plum-deep);
  stroke-width: 2;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset .35s .1s var(--ease-out);
}

/* selected */
.choice input:checked + .choice__card {
  background: linear-gradient(160deg, rgba(227, 85, 246, .16), rgba(233, 89, 123, .12));
  border-color: transparent;
  box-shadow: 0 10px 34px rgba(233, 89, 123, .22), inset 0 0 22px rgba(227, 85, 246, .08);
}
.choice input:checked + .choice__card::before { opacity: 1; }
.choice input:checked + .choice__card .choice__icon {
  stroke: #f6d9e6;
  transform: scale(1.12) rotate(-6deg);
}
.choice input:checked + .choice__card .choice__sub { color: var(--sand); }
.choice input:checked + .choice__card .choice__hex { fill: var(--sand); stroke: var(--sand); }
.choice input:checked + .choice__card .choice__tick { stroke-dashoffset: 0; }

.choice input:focus-visible + .choice__card {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
.choice:active .choice__card { transform: scale(.98); }
.choices.is-invalid .choice__card { border-color: var(--pink); }

/* phones: stack as rows — icon, text, check */
@media (max-width: 560px) {
  .choices { grid-template-columns: 1fr; gap: 8px; }
  .choice__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 12px 16px;
    text-align: start;
  }
  .choice__icon { grid-row: 1 / 3; width: 30px; height: 30px; }
  /* justify-self: start = the right edge in RTL, even for the dir="ltr" label */
  .choice__label { align-self: end; justify-self: start; }
  .choice__label small { display: inline; }
  .choice__sub { align-self: start; justify-self: start; }
  .choice__card { padding-inline-end: 48px; }
  .choice__check { top: 50%; translate: 0 -50%; inset-inline-start: auto; inset-inline-end: 14px; }
}

/* bill-splitting note — sits right under the choices */
.rsvp__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 14px auto 0;
  padding: 2px 0;
  font-size: .92rem;
  line-height: 1.5;
  text-align: start;
}
.rsvp__note svg { flex: none; margin-top: 1px; color: var(--pink); }
.rsvp__note strong { font-weight: 700; }

/* submit — small, delicate pink pill */
.rsvp__submit {
  position: relative;
  display: block;
  min-width: 170px;
  margin: 22px auto 0;
  padding: 10px 36px;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: #ffd3df;
  background: rgba(233, 89, 123, .16);
  border: 1px solid var(--pink);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s, box-shadow .35s, transform .2s;
}
.rsvp__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--magenta), var(--pink));
  opacity: 0;
  transition: opacity .35s;
}
.rsvp__submit:hover,
.rsvp__submit:focus-visible {
  color: var(--plum-deep); /* 6:1 on the gradient */
  box-shadow: 0 8px 26px rgba(233, 89, 123, .35);
}
.rsvp__submit:hover::before,
.rsvp__submit:focus-visible::before { opacity: 1; }
.rsvp__submit:active { transform: scale(.97); }
.rsvp__submit.is-loading .rsvp__submit-label { opacity: 0; }
.rsvp__submit.is-loading .btn-join__spinner { opacity: 1; animation: spin .8s linear infinite; }

.rsvp__privacy {
  margin: 12px 0 0;
  font-size: .85rem;
  color: var(--sand-dim);
}

.rsvp__success { margin-top: 28px; }

.event-follow {
  display: flex;
  justify-content: center;
  padding: clamp(48px, 7vw, 72px) var(--gutter) 8px;
}
.event-follow .btn-follow {
  margin-top: 0;
  gap: 6px;
  padding: 7px 14px;
  font-size: .8rem;
  color: #fff;
  background: var(--pink);   /* the logo's bright pink, by request (white text is 3.4:1) */
  border-color: var(--pink);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(233, 89, 123, .45);
}
.event-follow .btn-follow svg { width: 15px; height: 15px; }
.event-follow .btn-follow:hover {
  color: #fff;
  background: #f06a8a;
  border-color: #f06a8a;
  box-shadow: 0 0 26px rgba(233, 89, 123, .65);
}

/* price on a choice card */
.choice__price {
  margin-top: 2px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pink);
  direction: ltr;
}
.choice input:checked + .choice__card .choice__price { color: #ffd3df; }
@media (max-width: 560px) {
  .choice__price { grid-column: 2; justify-self: start; margin-top: 0; }
}

/* payment after registering */
.rsvp__pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(206, 193, 187, .2);
}
.rsvp__pay-amount { margin: 0; font-size: 1.05rem; }
.rsvp__pay-amount strong { color: #ffd3df; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.rsvp__pay-btn {
  display: inline-block;
  padding: 11px 32px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--plum-deep);
  text-decoration: none;
  background: linear-gradient(90deg, var(--magenta), var(--pink));
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(233, 89, 123, .35);
  transition: transform .2s, box-shadow .3s;
}
.rsvp__pay-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(233, 89, 123, .5); }
.rsvp__pay-hint { margin: 0; font-size: .85rem; color: var(--sand-dim); }

/* action inside the status box (e.g. "join the community first") */
.rsvp__status-action {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 28px;
  font-weight: 600;
  color: #ffd3df;
  text-decoration: none;
  background: rgba(233, 89, 123, .16);
  border: 1px solid var(--pink);
  border-radius: 999px;
  transition: background .3s, color .3s;
}
.rsvp__status-action:hover { background: var(--pink); color: var(--plum-deep); }
.rsvp__status:focus { outline: none; }

/* ---------- check-in page ---------- */
.checkin {
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 56px) var(--gutter) clamp(40px, 8vh, 72px);
  text-align: center;
}
.checkin__title { margin: 0; line-height: 0; }
.checkin__title img {
  width: min(84vw, 400px);
  height: auto;
  margin: 0 auto;
  animation: write 1.8s .2s var(--ease-out) both;
}
.checkin__event {
  margin: 18px 0 0;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: .16em;
  direction: ltr;
}
.checkin__form { margin-top: clamp(28px, 5vh, 44px); }
.checkin__lead { margin: 0; font-size: 1.05rem; }
.checkin__form .field label { inset-inline: 0; text-align: center; transform-origin: center; }
.checkin__form .field input { text-align: center; font-size: 1.35rem; letter-spacing: .08em; }
.checkin__submit { min-width: 220px; padding: 13px 40px; font-size: 1.15rem; margin-top: 26px; }
.checkin__result { margin-top: clamp(28px, 5vh, 44px); }

/* ---------- loading from the sheet ---------- */
/* while the event loads, hide the details that are about to change */
.event-page.is-pending [data-dyn] { visibility: hidden; }
.event-page.is-ready [data-dyn] { animation: rise .8s var(--ease-out) both; }
/* first visit only (later visits draw from the saved copy at once) */
.event-loading { display: none; }
.event-page.is-pending .event-loading {
  display: block;
  margin: clamp(20px, 4vh, 36px) 0 0;
  text-align: center;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--sand);
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .event-page.is-pending .event-loading { animation: none; opacity: .7; } }

/* two choices when the event has no "no alcohol" option */
.choices--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .choices--two { grid-template-columns: 1fr; } }

/* status: registration closed / no upcoming event / load error */
.rsvp__status {
  margin-top: 8px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid rgba(206, 193, 187, .3);
  border-radius: 16px;
  background: rgba(206, 193, 187, .05);
}
.rsvp__status-mark { width: 56px; margin: 0 auto 12px; }
.rsvp__status-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 650;
}
.rsvp__status-text { margin: 0; color: var(--sand-dim); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .stripes span { animation: none; }
  .spotlight { display: none; }
}