/* =========================================================
   Homepage motion — adapted from the PlayGround prototypes.
   =========================================================
   The prototypes are standalone pages: each one pins its content with
   position:fixed and stretches document.body so the whole window scroll
   drives a single effect. Dropped in as they are, any two of them would
   fight for the page height and the rest of the homepage would have
   nowhere to go. So the techniques are kept and the plumbing is not —
   every effect here reads its own section's position instead of the
   global scroll, and the elements stay in normal flow.

   Everything is gated behind .jh-fx, a class js/home-effects.js puts on
   <html>. Without JavaScript nothing below applies and the page renders
   exactly as it did before — otherwise a failed script would leave the
   hero invisible.

   To remove all of this: delete this file, js/home-effects.js, and their
   two wp_enqueue lines in functions.php. Nothing else references them.
   ========================================================= */

/* ---- 1. Hero: the buttons pop in on arrival ------------------------
   From Text_Slide, reduced to its last beat. The headline and motto it
   used to stagger are part of the banner artwork now, so the buttons are
   all that is left to animate — they fade up and overshoot into place.
   It runs on load rather than on scroll because the hero is already on
   screen when the page opens.
   --------------------------------------------------------------------- */
.jh-fx .jh-hero-actions .btn {
  opacity: 0;
  transform: scale(.82) translateY(14px);
}
.jh-fx .jh-hero-actions.is-in .btn {
  opacity: 1;
  transform: none;
  /* Overshoot past 1 and settle — that is the "pop". A plain ease just
     grows into place and reads as a fade. */
  transition: opacity .4s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.jh-fx .jh-hero-actions.is-in .btn:nth-child(1) { transition-delay: .18s; }
.jh-fx .jh-hero-actions.is-in .btn:nth-child(2) { transition-delay: .30s; }

/* ---- 3. Our Treatments: cards on a 3D slider ------------------------
   From Photo_Slider. That prototype wraps its six photos into a closed
   hexagon — each is one face, 60 degrees apart. With three cards the
   same maths gives a triangle whose two side faces sit at 120 degrees,
   pointing away from the viewer: you would be looking at the backs of
   two thirds of the section. So the ring is opened out into an arc —
   same perspective, same drag, wheel and blur, but the cards fan rather
   than wrap.
   --------------------------------------------------------------------- */
.jh-fx .jh-cards-3d {
  position: relative;
  /* No perspective or preserve-3d. A rotated card sits in a 3D layer the
     browser will not hit-test through, and its links stop responding —
     only the centre card stayed clickable. Depth is done with scale and
     blur instead, which keeps every card in the normal 2D plane. */
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.jh-fx .jh-cards-3d.is-dragging { cursor: grabbing; }
.jh-fx .jh-cards-3d .jh-cards-track {
  position: relative;
}
.jh-fx .jh-cards-3d .jh-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(34%, 420px);
  margin-left: calc(min(34%, 420px) / -2);
  /* No filter transition. The script rewrites the blur every frame as the
     card moves, so a transition smooths each of those steps over a
     further quarter second — the blur then trails the card and is still
     clearing well after it has arrived in the centre. */
}
/* No will-change on these cards. It is the textbook advice for an animated
   filter, and measuring it here showed the opposite: promoting the six cards
   to their own layers took the median frame from 16.6ms to 55ms, reproduced
   both ways twice. Six 365x442 layers cost more to composite than the blur
   saves. The is-moving class is still set, in case it is ever wanted for
   something cheaper. */

/* Nothing here disables pointer events during a drag any more. Toggling
   pointer-events off on pointerup and back on a tick later raced with
   the browser's own click, and on a trackpad — where a click carries a
   pixel or two of drift and registers as a small drag — the links lost
   that race and nothing happened. A drag is cancelled in JavaScript now,
   on the click itself, which has no timing to get wrong. */

.jh-fx .jh-cards-nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 1, 0, .16);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.jh-fx .jh-cards-nav:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
}
/* The track loops, so the arrows never run out of cards — but a disabled
   state is kept in case the section is ever reduced to a single card. */
.jh-fx .jh-cards-nav:disabled { opacity: 0; pointer-events: none; }

/* Where you are in the row.
   The track loops, so the arrows never run out and nothing else tells you
   that you have come back round to the first card. Same reading as the
   results strip's counter — a gold number over a quiet total — so the two
   sliders on the page count the same way.

   Outside the track, which is full of absolutely positioned cards, and in
   normal flow underneath them. */
.jh-fx .jh-cards-count {
  margin: 26px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .14em;
  /* Tabular figures: 01 and 11 are different widths in Objective, and the
     line would shift sideways as the number changed. */
  font-variant-numeric: tabular-nums;
}
.jh-fx .jh-cards-count b {
  color: var(--primary-deep);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
}
.jh-fx .jh-cards-of { opacity: .75; }

/* Without the script the cards are a plain row and there is no position
   to report. */
.jh-cards-count { display: none; }
.jh-fx .jh-cards-count { display: block; }

/* The centred card must take the pointer before its neighbours, which
   overlap it at the edges once they tilt in. Without this the leftmost
   sliver of a side card can swallow a click meant for the middle one. */
/* The whole card is part of the drag surface, photograph and button
   included — a press anywhere on it starts a drag, and a press that does
   not travel falls through to whatever was underneath. */
.jh-fx .jh-cards-3d .jh-card { pointer-events: none; }

/* Browsers start their own drag when a pointer presses an image or a
   link and moves. That native drag takes over the gesture, so the slider
   never sees the movement and the card does not follow. Turning it off
   is what lets the photograph and the button be dragged from. */
.jh-fx .jh-cards-3d img,
.jh-fx .jh-cards-3d a {
  -webkit-user-drag: none;
  user-select: none;
}
.jh-fx .jh-cards-3d .jh-card a,
.jh-fx .jh-cards-3d .jh-card .btn { pointer-events: auto; }

/* Only the card in the middle opens. The ones either side are for looking
   at and getting to: their links take no pointer — no hover, no click — so
   a click on one lands on the row, and the script turns the fan one step
   towards it instead. */
.jh-fx .jh-cards-3d .jh-card:not(.is-centre) a,
.jh-fx .jh-cards-3d .jh-card:not(.is-centre) .btn { pointer-events: none; }
.jh-fx .jh-cards-prev { left: -8px; }
.jh-fx .jh-cards-next { right: -8px; }

@media (max-width: 600px) {
  .jh-fx .jh-cards-3d .jh-card { width: 76%; margin-left: -38%; }
  .jh-fx .jh-cards-prev { left: -4px; }
  .jh-fx .jh-cards-next { right: -4px; }
}

/* ---- 4. Trusted by celebrities: the prints are dealt in -------------
   Photo_Collage, rebuilt for four photographs instead of two. Each print
   flies in from further out and more steeply rotated than where it ends
   up, so the row assembles itself the way a hand of cards is dealt onto a
   table — one after another, each landing into its own tilt.

   The resting tilt lives in home.css; this only adds the travel on top of
   it, which is why the script writes a transform that ends with the CSS
   rotation rather than replacing it.
   --------------------------------------------------------------------- */
.jh-fx .jh-celeb {
  /* Hidden until the script has had a frame to place them, so they never
     flash into view at their resting position first. */
  opacity: 0;
  will-change: transform, opacity;
}
/* Once the prints have landed the script clears the inline transform and
   opacity it has been writing, so that the hover in home.css is a plain CSS
   transition with nothing competing against it.

   That hands opacity back to the rule above, which is 0 — so it has to be
   restored here, or clearing the inline value makes all four photographs
   vanish. */
.jh-fx .jh-celebs-strip.is-dealt .jh-celeb {
  opacity: 1;
  transition: opacity .5s ease;
}

/* ---- Anyone who has asked for less motion gets none of it ----------- */
@media (prefers-reduced-motion: reduce) {
  .jh-fx .jh-hero-actions .btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .jh-fx .jh-celeb { opacity: 1 !important; transform: none !important; }
}