/* v1.5/v1.6 reveal effects (Dido 2026-10-10), loaded after theme.css.
   1 point cards: enter one after another (0.1 s stagger) from different directions, flip (rotateY) on hover / tap,
     back face = the same card text on a gold/black poster face.
   2 schedule cards and the 4 rehearsal steps (.pop): scale-up + fade, 0.6 s, one after another, no bounce.
   3 parallax band behind the gallery heading (speed 0.3, JS sets --py).
   4 phones (<=640px): steps = photo on top + accordion text (title button with arrow, first open).
   Reduced motion: static end state everywhere. */

/* ---------- 1 point cards: faces ---------- */
.hero-points li.point{background:none;box-shadow:none;padding:0;color:inherit;perspective:1000px;cursor:pointer;outline:none}
.hero-points li.point::before,.hero-points li.point::after{content:none}
.pc{position:relative;display:grid;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.77,0,.175,1)}
.pf,.pb{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative}
.pf{background:var(--paper);color:var(--ink);box-shadow:var(--card-shadow);padding:56px 18px 22px}
.pf::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:var(--tape);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.pf::after{content:counter(pt,decimal-leading-zero);position:absolute;top:10px;left:16px;font:900 2.4rem/1 var(--font-head);color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero-points li.point:nth-child(3n+2) .pf{background:var(--ink);color:#fff}
.hero-points li.point:nth-child(3n+2) .pf::after{-webkit-text-stroke-color:var(--gold)}
.pb{transform:rotateY(180deg);background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:22px 16px;
  font:900 clamp(1.25rem,1.9vw,1.6rem)/1.05 var(--font-head);text-transform:uppercase;letter-spacing:.02em}
.hero-points li.point.flipped .pc{transform:rotateY(180deg)}
.hero-points li.point:focus-visible .pf,.hero-points li.point:focus-visible .pb{outline:3px solid var(--gold);outline-offset:3px}
@media (hover:hover){.hero-points li.point:hover .pc{transform:rotateY(180deg)}}
/* the lift on hover from theme.css stays; the card itself carries no shadow any more */

/* ---------- 1 point cards: entry (v1.5 bounce-in from different directions, max 80px travel) ---------- */
.hero-points li.point{--i:0;--dx:0px;--dy:0px}
.hero-points li.point:nth-child(1){--i:0;--dx:-80px}
.hero-points li.point:nth-child(2){--i:1;--dy:-80px}
.hero-points li.point:nth-child(3){--i:2;--dy:80px}
.hero-points li.point:nth-child(4){--i:3;--dx:80px}
.hero-points li.point:nth-child(5){--i:4;--dy:-80px}
.js .hero-points li.point.reveal{opacity:0;transform:rotate(var(--r))}
.js .hero-points li.point.reveal.in{opacity:1;transform:rotate(var(--r));transition:transform .45s cubic-bezier(.3,1.6,.5,1);
  animation:pt-in .6s calc(var(--i) * .1s) cubic-bezier(.2,.8,.3,1) backwards}
@keyframes pt-in{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
  55%{opacity:1;transform:translate(calc(var(--dx) * -.12),calc(var(--dy) * -.12)) rotate(var(--r))}
  78%{transform:translate(calc(var(--dx) * .05),calc(var(--dy) * .05)) rotate(var(--r))}
  100%{opacity:1;transform:rotate(var(--r))}}

/* ---------- 2 schedule cards + steps: scale-up + fade, one after another ---------- */
.loc2.pop:nth-child(1){--r:-.6deg}.loc2.pop:nth-child(2){--r:.6deg}
.pop{--d:0s}
.pop:nth-child(2){--d:.15s}.pop:nth-child(3){--d:.3s}.pop:nth-child(4){--d:.45s}
.js .pop.reveal,.js .loc2.pop.reveal:nth-child(n){opacity:0;transform:rotate(var(--r))}
.js .pop.reveal.in,.js .loc2.pop.reveal.in:nth-child(n){opacity:1;transform:rotate(var(--r));transition:transform .45s cubic-bezier(.3,1.6,.5,1);
  animation:pop-in .6s var(--d) cubic-bezier(.2,.7,.2,1) backwards}
@media (hover:hover){.js .step.pop.reveal.in:hover{transform:rotate(0) translateY(-4px)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.8) rotate(var(--r))}100%{opacity:1;transform:scale(1) rotate(var(--r))}}

/* ---------- 3 parallax band behind the gallery heading ---------- */
#gallery.block{padding-top:0}
.plx{position:relative;overflow:hidden;margin-bottom:40px;padding:84px 0 60px;background:var(--ink);color:#fff;isolation:isolate}
.plx-img{position:absolute;left:0;width:100%;top:calc(-15% - 15vh);height:calc(130% + 30vh);object-fit:cover;z-index:-2;
  transform:translate3d(0,var(--py,0px),0);will-change:transform}
.plx::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(21,20,18,.86) 0%,rgba(21,20,18,.62) 55%,rgba(21,20,18,.35) 100%)}
.plx .section-head{margin-bottom:0}
.plx h2{color:#fff}
.plx .lead{color:#fff;opacity:.95}

/* ---------- 4 steps: title button (accordion only on phones) ---------- */
.step-tg{all:unset;display:block;box-sizing:border-box;width:100%;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit;cursor:default}
.step-arr{display:none}
@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .step-tg{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:4px 0}
  .step-tg:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .step-arr{display:block;flex:none;width:32px;height:32px;padding:4px;background:var(--gold);color:var(--ink);border:2px solid var(--ink);transition:transform .3s ease}
  .step.open .step-arr{transform:rotate(180deg)}
  .step:not(.open) .step-body{display:none}
  .step:not(.open){padding-bottom:12px}
}

/* ---------- reduced motion: static end state ---------- */
@media (prefers-reduced-motion:reduce){
  .js .hero-points li.point.reveal,.js .pop.reveal,.js .loc2.pop.reveal:nth-child(n){opacity:1;transform:rotate(var(--r));animation:none}
  .pc,.step-arr{transition:none}
  .plx-img{transform:none}
}