/* ========================================================================== Wayvo — hero gift card deck [wayvo_hero_deck] Enqueued by the shortcode only, so this sheet is not in the global $child_stylesheets list in functions.php. A code rebuild of designs/hero-slider.mp4 (Arqe, "Deck" template). The long note at the top of shortcodes/wayvoHeroDeck.php has the measurements and how they were taken; this sheet turns them into transforms. The JS writes three numbers per card per frame — --wvhd-o, --wvhd-s and --wvhd-z — and the composition below is the only place the transform is assembled. Tune here, not in the script. ── THE ONE PIECE OF ARITHMETIC ───────────────────────────────────────────── Measured on the video's 1920 canvas: a card one slot out renders 0.703 the size of the centre one, and its screen x sits about 10% short of where a plain linear translateX would put it. Two effects, two knobs: the 10% is PERSPECTIVE. A card at z = -depth renders at P / (P + depth) of nominal. Setting P = 9*depth makes that exactly 0.9 — hence --wvhd-persp. the rest is SCALE. 0.703 / 0.90 = 0.781, so the explicit scale runs 1 -> 0.781 across one slot. --wvhd-shrink is the 0.219 it drops by, and MUST MATCH WAYVO_HERO_DECK_SHRINK in the shortcode. Because perspective eats 10% of the x as well, --wvhd-slot is NOMINAL and --wvhd-gap is what you would actually measure on screen. Tune --wvhd-gap; --wvhd-slot follows from it. ── WHAT TO REACH FOR FIRST ───────────────────────────────────────────────── --wvhd-rot is the least certain number in here. It comes from reading a card's width against its height in the video, which is noisy as the card approaches edge-on, so it is 130deg +/- about 4. If the flip feels too fast or too slow through a crossover, that is the one to move — nothing else changes the character of the turn. ========================================================================== */ /* FULL-BLEED. The shortcode lands inside whatever boxed container the page builder put it in, and the neighbouring cards are supposed to be cut off by the SCREEN edge, not by a content column. Same break-out as .wv-frogger-wrap, and the same caveat: on a platform with a classic (non-overlay) scrollbar, 100vw is the scrollbar's width wider than the page, which shows as ~17px of horizontal scroll. If that bites, set the Elementor section to full width with no gaps and delete the two lines below. */ .wv-hero-deck-wrap { width: 100vw; margin-left: calc(50% - 50vw); /* Fallback only. The shortcode sets this inline from its height attribute. */ --wvhd-height: 33vh; } .wv-hero-deck { /* ── Sizing ────────────────────────────────────────────────────────────── The card is sized off BOTH axes and takes the smaller. 23.54vw is the video's proportion: 452 of 1920. On a band a third of the screen tall that card would be far too big for the space, so the second term caps it at 58% of the band's height — 0.9254 is 0.58 turned into a width through the artwork's 1.5955 aspect. On 1920x1080 at 33vh the height cap wins and the card comes out 329 wide. That is smaller than the video's 452 because the video's frame is three times taller than this band; the COMPOSITION is what is being matched, not the absolute size. */ --wvhd-card-w: min(23.54vw, calc(0.9254 * var(--wvhd-height))); --wvhd-card-h: calc(var(--wvhd-card-w) / 1.5955); /* Rendered distance from the centre card to its neighbour. 44.8vw is the video's 860 of 1920, which is what puts the neighbours half off the screen edge and makes the row read as endless. The clamp stops that going wrong at the extremes: the lower bound keeps cards from overlapping on a narrow window, and the upper stops an ultrawide monitor spreading three cards into a sparse line. */ --wvhd-gap: clamp( calc(1.55 * var(--wvhd-card-w)), 44.8vw, calc(2.7 * var(--wvhd-card-w)) ); /* Nominal, i.e. before perspective takes its 10%. See the note above. */ --wvhd-slot: calc(var(--wvhd-gap) / 0.9); --wvhd-persp: calc(1.98 * var(--wvhd-slot)); --wvhd-depth: calc(var(--wvhd-persp) / 9); /* Degrees of turn per slot. Past 90, which is why a neighbour is showing its back and why the colour changes through a crossover. */ --wvhd-rot: 130deg; /* In plane, per card. MEASURED at -1.47deg off the video: the card's top and bottom edges come out parallel at -1.47 and -1.46, so it is a rotation of the card and not a tilt of the whole scene — all three cards sit on the same centre line. Arqe's panel says Tilt 1.5. */ --wvhd-tilt: -1.5deg; /* Must match WAYVO_HERO_DECK_SHRINK in shortcodes/wayvoHeroDeck.php. */ --wvhd-shrink: 0.219; /* Arqe's Background panel: linear, 180deg, F5F5F5 -> FFFFFF. Dropped in layer mode — see the bottom of this sheet. */ --wvhd-bg: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%); position: relative; height: var(--wvhd-height); background: var(--wvhd-bg); overflow: hidden; } /* The perspective lives on the stage so it applies to the cards, which are its direct children. perspective-origin is the default centre, stated because it is the thing that decides where the vanishing point is and it is easy to knock out of true by adding padding here. */ .wv-hero-deck__stage { position: absolute; inset: 0; perspective: var(--wvhd-persp); perspective-origin: 50% 50%; transform-style: preserve-3d; /* The offset goes on the STAGE, not on the cards. On a card it would sit inside the perspective and the neighbours — which are pushed back in z — would be lifted about 10% less than the centre one, breaking the shared centre line the design and the video both have. Moving the stage moves the vanishing point with it, so the three stay level. NOT DECLARED ON .wv-hero-deck with a 0 default, which is where it started and is wrong: a value on the deck element would shadow the one [wayvo_hero] sets on the section above it, and the band would sit dead centre whatever the composer asked for. The default belongs in the fallback. */ transform: translateY(var(--wvhd-offset-y, 0px)); } /* ── One card ──────────────────────────────────────────────────────────────── Every card is absolutely centred and then moved entirely by transform, so none of this ever costs a layout. --wvhd-o, --wvhd-s and --wvhd-z are written by the script each frame, and printed inline by PHP for the rest pose so the section is a correct three-card composition before the script runs and if it never runs at all. TRANSFORM ORDER IS LOAD-BEARING. translate, then z, then the turn, then scale, then the tilt LAST — last means it happens in the card's own rotated plane, which is what makes it a tilt of the card rather than a tilt of the row. */ .wv-hero-deck__card { position: absolute; left: 50%; top: 50%; width: var(--wvhd-card-w); height: var(--wvhd-card-h); margin-left: calc(var(--wvhd-card-w) / -2); margin-top: calc(var(--wvhd-card-h) / -2); transform-style: preserve-3d; transform: translateX(calc(var(--wvhd-o, 0) * var(--wvhd-slot))) translateZ(calc(var(--wvhd-z, 0) * var(--wvhd-depth) * -1)) rotateY(calc(var(--wvhd-o, 0) * var(--wvhd-rot))) scale(var(--wvhd-s, 1)) rotate(var(--wvhd-tilt)); /* Thirteen of these are composited but only ever three or four are on screen, and the ones that are move every frame. */ will-change: transform; } /* Far enough out that it cannot be on screen on any viewport this clamps to. visibility rather than display so there is no layout to redo when it comes back round. */ .wv-hero-deck__card.is-offstage { visibility: hidden; /* Dropped with the card, so the nine or ten that are parked at any moment are not each holding a promoted compositor layer. */ will-change: auto; } /* ── The two faces ─────────────────────────────────────────────────────────── Arqe's Two Sided: On, which is the whole trick — thirteen planes carrying twenty-six designs. backface-visibility does the swap for nothing: the back is pre-turned 180deg, and the browser paints whichever of the two is pointing at the camera. There is no state to track and nothing for the script to decide. -webkit- prefix retained. Safari has supported the unprefixed property for years, but it is one line and preserve-3d + backface-visibility is exactly the combination that used to need it. */ .wv-hero-deck__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .wv-hero-deck__face--back { transform: rotateY(180deg); } /* The artwork carries its own rounded corners as transparency, so there is no border-radius here and there must not be a box-shadow either — a box-shadow would trace the element's square box and print corners the card does not have. If a shadow is ever wanted it has to be filter: drop-shadow(), which follows the alpha. The video has none. */ .wv-hero-deck__face img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ── Reduced motion ────────────────────────────────────────────────────────── The script does not start, so the cards keep the rest pose PHP printed and the section is a still three-card composition. Nothing to declare here beyond killing any transition a global sheet might have put on them. */ @media (prefers-reduced-motion: reduce) { .wv-hero-deck__card { transition: none; will-change: auto; } } /* ── Layer mode ────────────────────────────────────────────────────────────── What [wayvo_hero] renders: no break-out, no background, just fill the positioned parent. The hero owns the clipping and runs the gradient over its whole height rather than over the band alone — measured down the design, the ground goes 245 at the top to 255 at the bottom across all 800 of it, so the band carrying its own gradient would print a seam. --wvhd-height still has to reach this element, because the card size is worked out against it. In layer mode the hero sets it and it inherits. height: auto is not tidying. Without it the height declaration on .wv-hero-deck wins over inset's bottom and the layer is the wrong size. */ .wv-hero-deck.wv-hero-deck--layer { position: absolute; inset: 0; height: auto; background: none; z-index: 0; }