/* ============================================================
   שיוף: תנועה, כרטיסים בצורת כרטיס אמיתי, כוכבים ופרטים קטנים.
   הקובץ יושב מעל style.css. כדי לבטל הכול – מוחקים את השורה
   שטוענת אותו ב-HTML. הצבעים עדיין מגיעים מ-style.css.
   ============================================================ */

:root {
  --pop: cubic-bezier(.23, 1, .32, 1);        /* מהיר בהתחלה, נרגע בסוף, בלי קפיצה */
  --out: cubic-bezier(.19, 1, .22, 1);        /* כניסה מהירה שנרגעת */
  --star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  --arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4M10 6l-6 6 6 6'/></svg>");
}

html { scroll-behavior: smooth; scrollbar-color: var(--yellow) var(--navy); }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--pink); color: var(--cream); }
input { caret-color: var(--pink); }
h1, h2, h3, .section-sub, .signup-text { text-wrap: balance; }

/* ---------- buttons: press + keyboard focus ---------- */
.btn { cursor: pointer; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--navy); }
.btn:focus-visible, .nav-link:focus-visible, .soc:focus-visible, .logo:focus-visible,
.next-show:focus-visible, .show-btn:focus-visible {
  outline: 3px solid var(--pink); outline-offset: 3px;
}

/* ---------- nav ---------- */
.logo { display: inline-block; transition: rotate .2s var(--pop); }
.nav-link[aria-current="page"] { rotate: -2deg; }
/* small round icons: a bigger invisible tap area (44px) */
.soc { position: relative; }
.soc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .logo:hover { rotate: -3deg; } }

/* ============================================================
   hero: הרגע המרכזי של הדף – הקרניים מסתובבות לאט והכול נכנס יחד
   ============================================================ */
.hero { background: var(--blue); isolation: isolate; }
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 55%;
  width: max(170vmax, 1500px); aspect-ratio: 1;
  background: repeating-conic-gradient(var(--blue) 0deg 9deg, var(--blue-light) 9deg 18deg);
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: spin 240s linear infinite;
}
/* the dots stay behind everything (on phones the photo is re-ordered and used to end up under them) */
.hero::after, .page-head::after { z-index: -2; }
.hero::before, .page-head::before { z-index: -1; }
.hero::before {
  background-image:
    radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px),
    radial-gradient(circle at 50% 55%, transparent 0 55%, rgba(13,17,96,.6) 100%);
  background-size: 8px 8px, 100% 100%;
}
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to   { transform: translate(-50%, -50%) rotate(1turn); }
}

/* same slow-turning rays on the heading of every inner page */
.page-head { background: var(--blue); isolation: isolate; }
.page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 120%;
  width: max(140vw, 1100px); aspect-ratio: 1;
  background: repeating-conic-gradient(var(--blue) 0deg 9deg, var(--blue-light) 9deg 18deg);
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: spin 240s linear infinite;
}

/* retro 3D lettering: pink layer under the navy one */
.hero .big, .page-head .big {
  text-shadow: 4px 4px 0 var(--pink), 9px 9px 0 var(--navy);
}

/* the line "סטנדאפ · הנחיה · אירועים" sits under the name, not above it */
.hero .side-start .kicker { margin: 16px 0 0; font-size: 17px; }

/* entrance: short, staggered, done within ~0.8s */
@keyframes rise { from { opacity: 0; translate: 0 24px; } }
@keyframes pop-in { from { opacity: 0; scale: .94; rotate: -3deg; } }
@keyframes ticket-in { from { opacity: 0; translate: 0 24px; rotate: -6deg; } }
.hero .photo           { animation: pop-in .5s var(--pop) backwards; }
.hero .side-start .big { animation: rise .5s var(--out) .08s backwards; }
.hero .side-end .big   { animation: rise .5s var(--out) .14s backwards; }
.hero .kicker          { animation: rise .5s var(--out) .18s backwards; }
.hero .ctas            { animation: rise .5s var(--out) .24s backwards; }
.hero .next-show       { animation: ticket-in .5s var(--pop) .28s backwards; }
.hero .badge           { animation: pop-in .4s var(--pop) .34s backwards; }
.page-head .big        { animation: rise .5s var(--out) backwards; }

/* the hero follows the mouse a little (fx.js sets --mx / --my) */
.hero .photo { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -8px); transition: translate .3s ease-out; }
.hero .big   { translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 10px); transition: translate .3s ease-out; }

/* sparkles around the photo */
.center::before, .center::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  aspect-ratio: 1; clip-path: var(--star);
  animation: twinkle 3.2s ease-in-out infinite;
}
.center::before { width: 76px; top: 3%; inset-inline-start: -34px; background: var(--pink); }
.center::after  { width: 44px; top: 52%; inset-inline-end: -30px; background: var(--cream); animation-delay: -1.4s; }
@keyframes twinkle {
  0%, 100% { scale: 1; rotate: 0deg; }
  50% { scale: .72; rotate: 28deg; }
}

.badge { transition: rotate .2s var(--pop); }

/* main button: bigger, with a drawn arrow */
.hero .ctas .btn { font-size: 18px; padding: 13px 26px; }
.hero .ctas .btn-yellow { display: inline-flex; align-items: center; gap: 10px; }
.hero .ctas .btn-yellow::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: translate .2s var(--out);
}
[dir="ltr"] .hero .ctas .btn-yellow::after { scale: -1 1; }

@media (hover: hover) and (pointer: fine) {
  .badge:hover { rotate: 5deg; }
  [dir="rtl"] .hero .ctas .btn-yellow:hover::after { translate: -4px 0; }
  [dir="ltr"] .hero .ctas .btn-yellow:hover::after { translate: 4px 0; }
}

/* ============================================================
   כרטיסים אמיתיים: נגיסה בצדדים וקו ניקוב לפני הכפתור
   (ההופעה הבאה + כל שורה ברשימת ההופעות)
   ============================================================ */
.next-show, .show {
  --notch: 11px; --line: 4px; --fill: var(--cream);
  position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none;
  filter: drop-shadow(6px 6px 0 var(--navy));
  transition: transform .15s ease-out;
}
.next-show { --fill: var(--yellow); padding: 16px 22px; filter: drop-shadow(8px 8px 0 var(--navy)); }
.show { padding: 16px 22px; }
.next-show::before, .next-show::after, .show::before, .show::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* outline */
.next-show::before, .show::before {
  inset: 0; border-radius: 18px; background: var(--navy);
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000),
    radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000);
  mask-image:
    radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000),
    radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000);
}
/* paper */
.next-show::after, .show::after {
  --r: calc(var(--notch) + var(--line));
  inset: var(--line); border-radius: 14px; background: var(--fill);
  -webkit-mask-image:
    radial-gradient(circle var(--r) at calc(0px - var(--line)) 50%, #0000 calc(100% - .5px), #000),
    radial-gradient(circle var(--r) at calc(100% + var(--line)) 50%, #0000 calc(100% - .5px), #000);
  mask-image:
    radial-gradient(circle var(--r) at calc(0px - var(--line)) 50%, #0000 calc(100% - .5px), #000),
    radial-gradient(circle var(--r) at calc(100% + var(--line)) 50%, #0000 calc(100% - .5px), #000);
}
/* hover lifts the ticket (only transform moves; the shadow stays) */
/* show rows sit slightly crooked, like the hero ticket, and straighten + lift on hover */
.show { transform: rotate(-.7deg); transition: transform .2s var(--pop); }
.show:nth-child(even) { transform: rotate(.7deg); }
.show:hover { transform: rotate(-.7deg); box-shadow: none; }
.show:nth-child(even):hover { transform: rotate(.7deg); }
.next-show:hover { transform: rotate(-1.5deg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .show:hover, .show:nth-child(even):hover { transform: rotate(0deg) translate(-3px, -4px); }
  .next-show:hover { transform: rotate(0deg) translate(-2px, -2px); }
}
.next-show:active, .show:active, .show:nth-child(even):active { transform: rotate(0deg) translate(2px, 2px); }

/* perforation line before the button */
.ns-btn, .show > .show-btn { position: relative; margin-inline-start: 22px; transition: background-color .15s ease, scale .2s var(--pop); }
.ns-btn::before, .show > .show-btn::before {
  content: ""; position: absolute; inset-block: -18px; inset-inline-start: -20px;
  border-inline-start: 3px dashed var(--navy); opacity: .3; pointer-events: none;
}
.show > a.show-btn:active { scale: .97; }
.show > .show-btn.soldout { rotate: -4deg; }

/* date stamp sits a bit crooked and straightens on hover */
.show-date { rotate: -4deg; border: 3px solid var(--navy); transition: rotate .2s var(--pop); }
.show:nth-child(even) .show-date { rotate: 3deg; background: var(--pink); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .next-show:hover .ns-btn, .show > a.show-btn:hover { scale: 1.05; }
  .show:hover .show-date { rotate: 0deg; }
}

/* ============================================================
   sections
   ============================================================ */
/* titles like a hand-placed poster headline */
.shows .section-title, .clips .section-title { width: fit-content; rotate: -2deg; }

/* clips: slightly crooked frames, straighten on hover */
.clip-frame { transition: transform .15s ease-out, box-shadow .15s ease-out, rotate .2s var(--pop); }
.clip:nth-child(odd) .clip-frame { rotate: -1.2deg; }
.clip:nth-child(even) .clip-frame { rotate: 1.2deg; box-shadow: 10px 10px 0 var(--blue); }
.clip.playing .clip-frame { rotate: 0deg; }
.clip-play { transition: transform .2s var(--pop); }
.clip:active .clip-play { transform: scale(.95); }

/* friends club */
.club-photo { rotate: -6deg; transition: rotate .25s var(--pop); }
@keyframes wiggle { 25% { rotate: -14deg; } 75% { rotate: 14deg; } }

/* private show banner */
.private-teaser .wrap { position: relative; rotate: -1deg; transition: rotate .2s var(--pop); }
.private-teaser .wrap::before, .private-teaser .wrap::after {
  content: ""; position: absolute; aspect-ratio: 1; clip-path: var(--star); pointer-events: none;
}
.private-teaser .wrap::before { width: 64px; top: -30px; inset-inline-end: 8%; background: var(--yellow); rotate: 12deg; }
.private-teaser .wrap::after { width: 36px; bottom: -16px; inset-inline-start: 14%; background: var(--cream); rotate: -10deg; }

@media (hover: hover) and (pointer: fine) {
  .clip:hover .clip-frame { rotate: 0deg; }
  .clip:nth-child(even):hover .clip-frame { box-shadow: 12px 12px 0 var(--blue); }
  .club-inner:hover .club-photo { rotate: 4deg; }
  .club-btn:hover::before { animation: wiggle .4s ease-in-out; }
  .private-teaser .wrap:hover { rotate: 0deg; }
}

/* signup: faint rays from the top + chunkier fields */
.signup {
  background:
    radial-gradient(rgba(255,255,255,.1) 1.2px, transparent 1.4px) 0 0 / 8px 8px,
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.06) 0deg 9deg, transparent 9deg 18deg),
    var(--blue);
}
.field input {
  box-shadow: 4px 4px 0 var(--navy);
  transition: translate .15s ease-out, box-shadow .15s ease-out;
}
.field input:focus-visible { translate: -2px -2px; box-shadow: 6px 6px 0 var(--navy); }
.signup-msg.ok { animation: pop-in .3s var(--pop); }

/* ============================================================
   contact page: "רוצים שנחזור אליכם?" form card
   ============================================================ */
.callback {
  max-width: 640px; margin: 56px auto 0; text-align: start;
  background: var(--blue); border: 5px solid var(--yellow); border-radius: 24px;
  padding: 28px clamp(20px, 4vw, 36px) 20px; box-shadow: 10px 10px 0 var(--pink);
}
.callback-title {
  font-family: var(--font-display); font-size: clamp(48px, 7vw, 72px); line-height: .9;
  color: var(--yellow); text-shadow: 4px 4px 0 var(--navy);
}
.callback-text { font-size: 18px; font-weight: 700; margin-top: 8px; }
.callback-form { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.callback-form .field-wide { grid-column: 1 / -1; }
.callback-form .btn { grid-column: 1 / -1; justify-self: start; height: 50px; font: inherit; font-weight: 700; padding-inline: 30px; }
.field textarea {
  font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; resize: vertical; min-height: 96px;
  border: 3px solid var(--navy); background: var(--cream); color: var(--navy); width: 100%;
  caret-color: var(--pink); box-shadow: 4px 4px 0 var(--navy);
  transition: translate .15s ease-out, box-shadow .15s ease-out;
}
.field textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; translate: -2px -2px; box-shadow: 6px 6px 0 var(--navy); }
.callback input[dir="ltr"] { text-align: end; }
@media (max-width: 560px) {
  .callback-form { grid-template-columns: 1fr; }
  .callback-form .btn { justify-self: stretch; }
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .show { padding: 14px 18px; }
  .show > .show-btn { margin-inline-start: 0; }
  .show > .show-btn::before { display: none; }
  .center::before { width: 56px; inset-inline-start: -10px; }
  .center::after { width: 34px; inset-inline-end: -8px; }
  .shows .section-title, .clips .section-title { margin-inline: auto; text-align: center; }
  .hero .ctas .btn { font-size: 17px; padding: 12px 22px; }
}

/* ---------- people who asked for less motion: everything stands still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::after, .page-head::after, .center::before, .center::after,
  .hero .photo, .hero .kicker, .hero .big, .hero .ctas, .hero .badge, .hero .next-show,
  .page-head .big, .signup-msg.ok, .club-btn:hover::before { animation: none; }
  .hero .photo, .hero .big { translate: none; }
  .btn, .logo, .badge, .next-show, .show, .ns-btn, .show > .show-btn, .show-date,
  .clip-frame, .clip-play, .club-photo, .private-teaser .wrap, .field input,
  .hero .ctas .btn-yellow::after, .hero .photo, .hero .big { transition: none; }
}