/* ========================================================================== CINEMA ONE CAMERA PASS OVER THE HERO SCENE. The frame holds one platform at a time; a signal leaves it along the arc to the next platform; the camera waits, whips under a directional smear, settles, and the platform it lands on runs its own x-ray reveal. An opening dive and three hops, clockwise, which is every platform once. When the last reveal has come off, the camera pulls back to the wide composition it opened on and parks there, and the scene is handed to the pointer. THIS SHEET IS ADDITIVE AND SCOPED. It adds no rule that runs on its own. Every declaration below is either a style for a box cinema.js creates at runtime, or a restatement of a value the shipped sheets already carry, held under an attribute cinema.js writes on the root element. With the attribute absent the page computes exactly as it did before this file was linked. THE ATTRIBUTE HAS TWO LIVE VALUES AND MOST RULES READ ONLY ITS PRESENCE. The composition, the reveal's tempo, the suppressed ambient bands and the callout overrides hold across both, so the picture does not change under the visitor when the pass ends. Two blocks read the value and they are the two halves of the same handover: section 3, whose hover neutraliser comes off, and section 8, whose plain labels come on. Nothing the camera runs on is edited by either; the zoom's callouts are the same rules and the same script path they have always been. data-cinema="run" the loop owns the scene: the arcs take their offset and opacity from script, the resting hover reveal is neutralised, the reveal's own movements are held live and run at the loop's own tempo, and the four callouts are the cinema ones data-cinema="parked" the pass is over: the camera is on the wide frame, the leaders are not drawn and each label sits square over or under its own part, the control stands among the platforms, and a pointer runs the x-ray reveal as it always did absent nothing in this file has a subject, the leaders carry the d the markup shipped, and the scene is the page's IT IS WRITTEN AT EVERY WIDTH AND SHAPED AT ONE. Section 6 carries the overlay layout the shipped sheet only reaches above 1440, restated with no media query so it resolves everywhere; from 768 up that is the whole story and this file has no band it stands down in. Below 768 section 9 takes the same composition and stacks it: the scene in a 16/9 media box at the top of the hero and the copy in a card under it, with nothing lying over anything. Section 9 is the ONLY media query in this file and 768 is the only figure in it. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE HOSTS Two boxes, created by script, with one job each. -------------------------------------------------------------------------- */ /* THE FRAME IS THE UNTRANSFORMED BOX THE BLUR HANGS ON, and that is the whole reason it is a box of its own. A filter's stdDeviation is read in the filtered element's own coordinate system, so hanging the smear on an untransformed host means the figure written each frame is already in screen pixels and no camera scale has to be divided back out of it. IT IS THE HERO'S OWN RECTANGLE. inset: 0 inside the hero's padding box gives it exactly the area the hero paints, which is what the filter region is then declared against: the filter has one window to rasterise rather than the whole magnified frame, and its region matches the area the hero's own overflow already clips to, so switching the filter on cannot move an edge. z-index 1 SEATS THE SCENE WHERE THE PLATE ALREADY SAT. The hero's layer table runs the lattice at 0, the artwork from 1 to 6, the text scrim at 7 and the blend and copy above it; parking the host at 1 keeps the scene under the scrim and over the lattice, and the order inside the host is the order the scene already had. pointer-events: none because the stage it holds is pointer-transparent too, and the four hit regions inside it switch themselves back on. */ .fg-cinema-frame { position: absolute; inset: 0; z-index: 7; pointer-events: none; } /* THE SCRIM, INSIDE THE CAMERA AND HELD STILL. Its box is written in pixels and its transform is the inverse of the camera's, both per frame, so it lands on the hero's own rectangle at one to one whatever the camera is doing. z-index 7 is the place the shipped scrim holds on the scene's ladder: over the plate and the four platform layers, under the revealed parts at 8 and the callouts at 9, which is the whole point of moving it here. */ .fg-cinema-scrim { position: absolute; left: 0; top: 0; z-index: 7; transform-origin: 0 0; pointer-events: none; } /* THE CAMERA. A box the size of the stage, holding everything the stage holds, carrying one transform and nothing else. The transform is written by script and by nothing here. transform-origin: 0 0 puts the origin on the frame's own top left corner, which is the point the placement arithmetic is written against: art unit 0, 0. inset: 0 inside the stage gives it the stage's own rectangle, so every percentage the scene is built from resolves against exactly the box it resolved against before, and an identity transform reproduces the composition to the pixel. */ .fg-cinema-camera { position: absolute; inset: 0; transform-origin: 0 0; } /* The compositor hint is carried for as long as the loop runs, which is as long as the page is open. */ html[data-cinema="run"] .fg-cinema-camera { will-change: transform; } /* THE IMPACT LAYER. One box the size of the stage, inside the camera, holding the bloom that fires where a signal lands. It is inside the camera because the impact belongs to a point on the ARTWORK: written in the stage's own coordinate space it tracks the camera exactly, with no per-frame arithmetic to keep it registered. ITS VIEWBOX IS THE FRAME'S, so one unit across is the same number of screen pixels as one unit down and a circle in it is a circle on screen. That is the same property the leader lines depend on. z-index 7 SEATS IT OVER THE ARTWORK AND UNDER THE PARTS. The scene's ladder runs the plate and the four platform layers from 1 to 6 and the revealed parts at 8, so the bloom washes over the platform it lands on and the part that follows it comes forward through the light rather than under it. */ .fg-cinema-impact { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* THE BACKLIGHT. The second bloom, seated with the plate and painted after it, so it lands over the painting and under every platform layer: the light grows out from behind the object that was hit rather than being drawn on it. Its viewBox is the frame's, so a circle in it is a circle on screen. */ .fg-cinema-back { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* The filter host. Zero sized and clipped, so it takes part in no layout. */ .fg-cinema-defs { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* -------------------------------------------------------------------------- 2. ONE SIGNAL AT A TIME EVERY AMBIENT BAND IS OFF AND STAYS OFF. In the loop the only light travelling anywhere is the one the camera is following, so all four arcs give up their keyframes together and take their offset and their opacity from script instead. The two custom properties are written on the group the sequence is driving and on no other, so the other three arcs fall through to the declared fallbacks: the offset that parks a band off the head of its own path, and zero opacity. BOTH VALUES ARE SET ON THE GROUP AND INHERIT, which is what guarantees the band profile survives. All thirteen layers read the same two numbers on the same frame, so their dash arithmetic stays centred on one point of the path and the taper cannot shear. The offset carries its unit for the reason the shipped signal block documents: a bare number and a length are not the same type. THE STATIC TRACES ARE UNTOUCHED. The hairline and the standing glow carry no animation and are not addressed here, so every connection stays drawn. -------------------------------------------------------------------------- */ html[data-cinema] .fg-conn .fg-conn__band { animation: none !important; stroke-dashoffset: calc(var(--cin-off, var(--sm)) * 1px); stroke-opacity: var(--cin-op, 0); } /* -------------------------------------------------------------------------- 3. THE SCENE IS WATCHED, NOT POINTED AT THE RESTING REVEAL IS TAKEN OFF THE POINTER AND GIVEN TO THE LOOP. A platform lights up when a signal lands on it and at no other time, so a pointer crossing the scene cannot open a second platform behind the sequence's back. The click is untouched: the hit regions keep their pointer events and a press still opens that platform's drawer. IT IS WRITTEN AS A RETURN TO THE RESTING VALUES rather than as a block on the pointer, because the hit region has to stay live for the press. Each declaration below is the shipped resting figure, restated at a selector that carries the cinema attribute and excludes the two states that are allowed to light a platform: the loop's own reveal and an open drawer. A platform in either of those states is therefore unaffected by a pointer resting on it, which is what keeps one set of revealed values. THE DELAYS COME OFF WITH THE VALUES. The shipped rules pair the reveal's figures with the callout's entrance delays; restating the figures without restating the delay would leave a retract waiting on a delay only an entrance should have. IT IS THE ONLY BLOCK HELD ON THE ATTRIBUTE'S VALUE, and that is the whole of the handover at the end of the pass. While the camera is running the four rules below outrank the shipped hover block and the scene is watched; the moment cinema.js writes "parked" they lose their subject, the shipped rules are the only ones left with one, and the hover x-ray the page has always carried is live again with no rule of this file's restoring it. The four callouts go back to the geometry in the markup at the same moment, from script, so what a hover draws is the approved label and not one solved for a magnified hold. THE SPECIFICITY IS UNCHANGED BY THE VALUE. An attribute selector counts the same whether or not it tests a value, so these stay at (0,6,1) against the shipped block's (0,3,0). -------------------------------------------------------------------------- */ html[data-cinema="run"] .fg-scene-node:hover:not([data-revealed="true"]):not([aria-expanded="true"]) .fg-scene-node__layer { opacity: 1; scale: 1; } html[data-cinema="run"] .fg-scene-node:hover:not([data-revealed="true"]):not([aria-expanded="true"]) .fg-scene-node__part { opacity: 0; scale: var(--part-rest); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); } html[data-cinema="run"] .fg-scene-node:hover:not([data-revealed="true"]):not([aria-expanded="true"]) .fg-scene-node__leader-path { stroke-dashoffset: calc(var(--ld) * var(--stage-px) / 5120); transition-delay: 0s; } html[data-cinema="run"] .fg-scene-node:hover:not([data-revealed="true"]):not([aria-expanded="true"]) .fg-scene-node__tag { opacity: 0; translate: 0 6px; transition-delay: 0s; } /* -------------------------------------------------------------------------- 4. THE LOOP ALWAYS PLAYS, AND IT PLAYS AT ITS OWN TEMPO The kit answers a reduced-motion preference two ways: tokens.css collapses its durations under the media query, and the motion controller stamps data-motion="reduced" on the root, which drops the ambient loops and the reveal's movement. Either one would leave this sequence a still image. THE ANSWER IS TO RESTATE THE MOVEMENTS, NOT TO BUILD A SECOND SEQUENCE. Every rule below is the shipped one, restated at a selector that carries the cinema attribute so it applies only while the loop owns the scene, and only to the hero. THE ONE FIGURE THAT IS NOT THE SHIPPED ONE IS THE TEMPO. On the base page the reveal is asked for by a pointer resting on a platform and it has as long as it likes. In the loop it is the tail of a landing, and at the shipped lengths the ghost, the part and the label are all still arriving long after the hit that called for them, which reads as three events rather than one. So the whole choreography is scaled by ONE factor, --cin-chore-f, and that factor is the only value in this section the base sheet does not already carry. IT IS A SCALE AND NOT A REWRITE, which is what keeps the choreography the one the page already has. The four durations and the two entrance delays are multiplied by the same number, so the movements keep their order, keep their spacing against each other and keep their easing exactly; the only thing that changes is the rate the whole figure runs at. At a factor of 1 every value below is the shipped one to the millisecond. THE DELAYS ARE PART OF THE FIGURE AND SCALE WITH IT. Halving the durations alone would leave the label waiting out a 430ms delay to start a 70ms fade, which is not the same choreography run faster: it is a different one. The two delays are declared in the base sheet's REVEALED rules at (0,3,0), so the two selectors that answer them here are (0,4,1); their shipped figures, the 250ms the leader waits and the 430ms the label waits, are written out because no custom property is declared for them. Nothing else about the revealed state is touched. THE SPECIFICITY IS THE POINT OF THE SHAPE elsewhere in the section. The guards being answered are html[data-motion="reduced"] X, which is (0,2,1); each of the four movement rules is (0,2,1) as well and this file is linked after the sheets it answers, so file order settles the tie. The media-query twins are (0,1,0) and lose outright. -------------------------------------------------------------------------- */ /* The three durations the hero's reveal and its callout are written in. Held on the hero so a preference is answered inside the scene and nowhere else on the page. */ html[data-cinema] .fg-hero { --dur-fast: 140ms; --dur-quick: 200ms; --dur-slower: 620ms; } /* The platform's lean and the part's entrance ratio, and the one factor the whole reveal is scaled by. The five derived figures are held on the node rather than at each rule, so every movement of one callout reads the same number and a single edit to --cin-chore-f moves all four together. */ html[data-cinema] .fg-scene-node { --plat-grow: 1.025; --part-rest: 0.7; --cin-chore-f: 0.5; --cin-chore-slower: calc(var(--dur-slower) * var(--cin-chore-f)); --cin-chore-quick: calc(var(--dur-quick) * var(--cin-chore-f)); --cin-chore-fast: calc(var(--dur-fast) * var(--cin-chore-f)); --cin-chore-leader-delay: calc(250ms * var(--cin-chore-f)); --cin-chore-tag-delay: calc(430ms * var(--cin-chore-f)); } /* The four movements of the x-ray reveal, on one clock. */ html[data-cinema] .fg-scene-node__layer { transition: opacity var(--cin-chore-slower) var(--ease-in-out), scale var(--cin-chore-slower) var(--ease-in-out); } html[data-cinema] .fg-scene-node__part { transition: opacity var(--cin-chore-slower) var(--ease-in-out), scale var(--cin-chore-slower) var(--ease-in-out), filter var(--cin-chore-slower) var(--ease-in-out); } /* The callout's resting state and its transitions. Under a reduced-motion preference the kit switches every leader and every tag permanently on from 768 up, which would put four labels over a zoomed frame; these put the callout back on the reveal that asks for it. Both figures are the shipped resting values. */ html[data-cinema] .fg-scene-node__leader-path { stroke-dashoffset: calc(var(--ld) * var(--stage-px) / 5120); transition: stroke-dashoffset var(--cin-chore-quick) var(--ease-out-quart); } html[data-cinema] .fg-scene-node__tag { opacity: 0; translate: 0 6px; transition: opacity var(--cin-chore-fast) var(--ease-out-quart), translate var(--cin-chore-fast) var(--ease-out-quart); } /* THE TWO ENTRANCE DELAYS, ON THE SAME FACTOR. These are the only rules in the file that address the revealed state's own clock, and they address nothing else about it: the values the reveal settles at are the base sheet's and stay the base sheet's. The retract is untouched for the reason the base sheet gives, that every delay lives in the revealed rule and the resting rule carries none, so releasing the state still starts all four movements together. */ html[data-cinema] .fg-scene-node[data-revealed="true"] .fg-scene-node__leader-path, html[data-cinema] .fg-scene-node[aria-expanded="true"] .fg-scene-node__leader-path { transition-delay: var(--cin-chore-leader-delay); } html[data-cinema] .fg-scene-node[data-revealed="true"] .fg-scene-node__tag, html[data-cinema] .fg-scene-node[aria-expanded="true"] .fg-scene-node__tag { transition-delay: var(--cin-chore-tag-delay); } /* -------------------------------------------------------------------------- 5. THE CALLOUTS, CINEMA STATE ONLY THE SHIPPED CALLOUTS ARE COMPOSED FOR THE WHOLE FRAME and each one reaches as far off its subject as the resting composition allows. Held at the loop's magnification a single one of those runs can be wider than the window it has to sit in, so in this state each leader is rebuilt tight to its own part and each tag is set at a size that reads as ordinary interface type once the camera's magnification has been applied to it. THE TAG IS THE SAME SIZE AT ALL FOUR HOLDS, AND SO IS ITS DISTANCE FROM ITS OWN SUBJECT. Its type size is one screen figure divided by that platform's own camera scale, and its edge is divided by the same figure, so every part of the box is a constant number of em and the whole label renders at one size on screen while the frame behind it does not. The gap between the revealed part's box and the label's near edge is a second screen figure, converted the same way, so the four callouts sit off their subjects by one distance. THE TAG IS PLACED BY ITS TOP LEFT CORNER, which is what lets the same two properties express a label east, west, above or below its part. --tgx is the left edge and --tgy the vertical centre, both percentages of the frame; the shipped side modifiers, which anchor by one edge and add a fixed margin, are overridden out of the way. The margins go with them: with the gap solved to an exact figure there is nothing left for a margin to add. NOTHING HERE IS A LITERAL POSITION. Every value is written by cinema.js from the part's own revealed geometry, from a measurement of the tag and from the window the shot is held at. THE BASE PAGE IS UNTOUCHED. Every rule is held under the cinema attribute and under the tag attribute, and every value it reads is a --cin- property that exists only while cinema.js has written it. With the attributes gone the shipped declarations are the only ones with a subject, each leader's own d is back on its element, and the four approved callouts are back. WHY THE OVERRIDES CARRY !important. --tgx, --tgy and --ld are declared in each button's INLINE style attribute, and an inline declaration outranks every ordinary rule whatever its selector. That is the same mechanism the shipped sheet already uses to re-point the aircraft's anchor on the 768 to 1439 band. The placement rule is (0,4,1) against the shipped (0,2,0), so it needs nothing. -------------------------------------------------------------------------- */ html[data-cinema] .fg-scene-node[data-cin-tag] { --tgx: var(--cin-tgx) !important; --tgy: var(--cin-tgy) !important; --ld: var(--cin-ld) !important; } /* THE EDGE IS DRAWN RATHER THAN BORDERED, and the swap is what makes the four rendered heights identical. A border takes part in layout, and a border width under one device pixel is snapped up to one before it does, so a box whose type is divided by a different scale at every hold would take a different share of that unsnapped pixel at every hold and stand a little taller at one than at another. An inset ring is painted and not laid out, so the box is exactly the 2.3em its own floor asks for at all four holds while the ring still rides the type size down. The colour is the shipped hairline token and the width is the shipped hairline divided by the camera's scale, so the edge reads at the same weight on screen that it does on the base page. The width ceiling comes off because the run is solved to fit rather than clamped to fit. */ /* THE REVEALED PART'S EDGE LIGHT. A second drop-shadow behind the separation shadow the part already carries, taken off the part's own alpha, with no offset and a low alpha: a warm rim on the object rather than an effect around it. It is a finish and not a beat, so it has no clock of its own and simply rides the part's existing entrance. BOTH ENDS CARRY THE SAME TWO FUNCTIONS IN THE SAME ORDER, which is what keeps the filter interpolating instead of snapping: the resting rule below states the shipped separation shadow and a second, zero-radius, zero-alpha shadow, and the revealed rule states the shipped open shadow and the rim. The radius is counter-scaled twice by the script, because a filter is mapped by every transform above it and a revealed part carries its own growth as well as the camera's scale. */ html[data-cinema] .fg-scene-node[data-cin-tag] .fg-scene-node__part { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0 rgba(227, 85, 48, 0)); } html[data-cinema] .fg-scene-node[data-cin-tag][data-revealed="true"] .fg-scene-node__part, html[data-cinema] .fg-scene-node[data-cin-tag][aria-expanded="true"] .fg-scene-node__part { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 var(--cin-part-glow-r, 0px) rgba(227, 85, 48, var(--cin-part-glow-a, 0))); } html[data-cinema] .fg-scene-node[data-cin-tag] .fg-scene-node__tag { --tag-fs: var(--cin-tag-fs); border-width: 0; box-shadow: inset 0 0 0 var(--cin-tag-bw, var(--border-hairline-w)) var(--border-hairline-strong); max-width: none; left: var(--tgx); right: auto; margin-left: 0; margin-right: 0; } /* TWO LABELS SIT ON BACKDROPS THE COMMON TREATMENT DOES NOT HOLD AGAINST, and each gets one modifier and nothing else: the size, the type and the box are the same on all four either way. THE AIRCRAFT'S sits over the lit face of the Earth, which is the brightest ground any of the four crosses, so its box takes a dark cast shadow and separates from it. The offsets are em, so they ride the counter-scaled type and the shadow reads at one size on screen at every hold. THE SATELLITE'S sits over the star field, which is the darkest, so its edge is widened and brightened instead: an inset ring at three times the hairline in a much stronger white. The ring is drawn rather than bordered for the reason the common rule gives, so the box's own height is untouched by it. */ html[data-cinema] .fg-scene-node[data-cin-tag="shadow"] .fg-scene-node__tag { box-shadow: inset 0 0 0 var(--cin-tag-bw, var(--border-hairline-w)) var(--border-hairline-strong), 0 0.15em 0.5em rgba(3, 5, 9, 0.85), 0 0.05em 0.15em rgba(3, 5, 9, 0.7); } html[data-cinema] .fg-scene-node[data-cin-tag="edge"] .fg-scene-node__tag { box-shadow: inset 0 0 0 calc(var(--cin-tag-bw, var(--border-hairline-w)) * 3) rgba(255, 255, 255, 0.72); } /* -------------------------------------------------------------------------- 6. ONE HERO AT EVERY WIDTH THE OVERLAY COMPOSITION IS NO LONGER A WIDTH BAND. The hero is the same composition on a handset as on an ultrawide: a full bleed scene with the copy over it and this loop running on it. The stylesheet reaches that composition inside a 1440 media query and carries a stacked fallback below it; every declaration in this section is the overlay one restated at a selector carrying the cinema attribute, which has no media query on it, so the same composition resolves at every width and the stacked fallback never has a subject. IT IS A RESTATEMENT AND NOT A DESIGN, WITH ONE EXCEPTION AND IT IS THE ARTWORK'S SIZE. Every other figure here is the shipped overlay figure. What a narrow window gets is the wide composition scaled to it, with the copy lying over the picture, which is accepted for now; the camera's own framing has its floor for those widths written at FRAME_MIN_W_PX in cinema.js. THE ONE FIGURE THAT COULD NOT BE RESTATED IS --stage-static, and the fit rule at the foot of this section is why. The overlay's size is a CONSTANT, chosen against the room a 1440 window has; carried down to a 768 one unchanged it is no longer a size but a crop, and the object it crops is the vessel, which at 768 loses nearly half of itself off the left edge of the window. So below 1440 the constant gives way to --stage-fit x the hero's own width. Everything else about the stage is untouched: the same anchor, the same bottom edge, the same geometry table, because all of them are expressed against the stage rather than against its size. THE SPECIFICITY IS WHY IT WORKS EITHER SIDE OF 1440. Each rule below is one attribute more specific than the pair it settles: the base rules it beats below 1440 and the overlay rules it agrees with above it. A media query adds nothing to specificity, so one set of declarations answers both, and the fit rule's own query is a switch between two values rather than a second design. -------------------------------------------------------------------------- */ html[data-cinema] .fg-hero { container-type: size; display: flex; align-items: center; min-height: var(--hero-h); padding-block: 0; } html[data-cinema] .fg-hero__body { padding-top: var(--hero-header); } /* THE SPLIT IS THE COLUMN'S OWN WIDTH RATHER THAN A LITERAL, so the track and the copy stay one figure and the overlay can narrow both by moving one property. --copy-w is 660 everywhere the copy is not over the picture, which is the whole of this block's range below 1440, and the sheet's overlay band brings it down to the width the scene needs above it. */ html[data-cinema] .fg-hero__body .fg-container { display: grid; grid-template-columns: minmax(0, var(--copy-w)) minmax(0, 1fr); } html[data-cinema] .fg-hero__copy { max-width: var(--copy-w); } html[data-cinema] .fg-hero__title { max-width: 6.6em; } html[data-cinema] .fg-hero__stage { --stage-w: max(var(--stage-static), 100%); --stage-px: max(var(--stage-static), 100vw); position: absolute; top: auto; bottom: 0; left: max(calc(100% - var(--stage-w)), calc(100% - var(--frame-pad) - (var(--stage-w) * var(--sat-rx)))); width: var(--stage-w); max-width: none; margin: 0; } html[data-cinema] .fg-hero__stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 160px; pointer-events: none; background: var(--sky-ramp); -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%); } /* THE SHIPPED SCRIM IS TAKEN OUT OF THE PAGE, not restated: the replica this file paints inside the camera is the only one now, and two would double the ink. Its two custom properties are solved in cinema.js instead of read off it, which is also what lets the release be rebuilt. */ html[data-cinema] .fg-hero__scrim { display: none; } /* THE FIT RULE. Below 1440 the artwork is drawn at --stage-fit times the hero's own width instead of at the constant, so the composition scales with the window rather than being cropped by it. WHERE 1.2 COMES FROM, and it is the copy column that sets it. The four platforms span frame x 0.409961 to 0.828516, which is 0.41856 of the frame, and the anchor puts the right end of that span --frame-pad short of the window's right edge. So the whole group occupies the last 0.41856 x stageWidth + --frame-pad pixels of the window, and asking that to fit in what the copy leaves, W - plateau, gives stageWidth <= (W - plateau - 40) / 0.41856. The plateau is 684px at every width the overlay's own solve holds it there, so the bound is 1314px at 1280, 1696px at 1440 and 2334px at 1920: 1.03, 1.18 and 1.22 times the window. 1.2 is the figure that band converges on, so a stage at 1.2 x the hero puts all four objects in the clear at the top of the band and as near it as the room allows at the bottom, where a 762px window has 280px of clear width and no size can hold four objects in it. AT THE TOP OF THE BAND THE TWO SIZES MEET IN THE RIGHT ORDER. 1.2 x 1440 is 1728 against the constant's 2560, so crossing 1440 upward is a step INTO the larger artwork, which is the direction the window is going: the constant is the size the room at 1440 and above was chosen for, and this is the size the room below it actually has. --stage-px IS THE SAME MULTIPLE OF THE VIEWPORT, for the one consumer that cannot take a percentage: the leader dash. It differs from the box's own width by the multiple times a classic scrollbar, which leaves the dash a shade long, and the overlay block in home.css records why that is the harmless direction. THE FLOOR AT 768 IS SECTION 9'S AND NOT THIS RULE'S. Below the handset breakpoint the stage is sized by the composition sub-box instead, so this value governs the 768 to 1439 band and nothing else. */ @media (max-width: 1439.98px) { html[data-cinema] .fg-hero__stage { --stage-w: calc(100% * var(--stage-fit)); --stage-px: calc(100vw * var(--stage-fit)); } } /* -------------------------------------------------------------------------- 7. THE CTA THE ONE CONTROL THIS FILE OWNS, and it exists because the pass ends. While the camera was running the scene explained itself; parked, it is a still picture with four things in it that answer a pointer and no way to know that from looking. A button standing among the platforms says so, opens all four at once when it is pressed, and becomes the line that says what to do with them. Nothing about it is a hint that goes away: both faces persist. IT IS THE PAGE'S OWN BUTTON. The element carries .fg-btn and .fg-btn--primary, so the padding, the type, the tracking, the fill, the edge and the hover lift are the ones every primary control on the site is built from and no button figure is invented here. The line it becomes carries .fg-eyebrow for the same reason. ONE HOST, TWO FACES, ONE CELL. Both children are placed in the same grid cell, so the host measures the wider of the two and neither face moves when the other takes over; the swap is a crossfade at a fixed point. The host's centre is written by cinema.js from the four platforms' own measured rects and its own translation puts that centre on the point, so nothing here needs to know how wide either face is. IT TAKES THE POINTER, alone among the boxes this file makes, because it is a control. The line it becomes does not: with the button spent, the artwork under that point has to be reachable again, and the antenna's own hit region passes within a few pixels of it at some widths. z-index 9 SEATS IT OVER THE SCENE AND UNDER THE PAGE. The frame box and everything in it sit at 7, the bottom blend at 10 and the copy at 11, so the control is over the artwork and its labels and under the hero's own text. BELOW 768 THE SAME ELEMENT IS MOVED INSIDE THE FRAME BOX, into the showcase's own chrome at 12, which puts it over the picture and its caption and still under the copy card at 11 by being inside a box seated at 7. What changes with the seat is the anchor and nothing else; section 11 states it. The declaration below is the overlay's and is what the script's solve writes into. -------------------------------------------------------------------------- */ .fg-cinema-cta { position: absolute; z-index: 9; display: grid; justify-items: center; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; translate: 0 8px; transition: opacity var(--dur-slower) var(--ease-out-quart), translate var(--dur-slower) var(--ease-out-quart); } /* Up, once the camera has stopped, in either of its two faces. */ .fg-cinema-cta[data-cta] { visibility: visible; opacity: 1; translate: 0 0; } /* The two faces share one cell, so the host is the size of the wider and the point they are both centred on cannot move between them. */ .fg-cinema-cta__btn, .fg-cinema-cta__note { grid-area: 1 / 1; transition: opacity var(--dur-quick) var(--ease-out-quart); } /* The line is set in the page's eyebrow. Three declarations differ, and each is what a positioned line over a photograph needs: the colour, because a single orange line floating over the artwork reads as a control rather than as a caption and the control is the other face; the margin, which a grid-placed element has no use for; and the shadow, which is what carries 12px type over a picture. */ .fg-cinema-cta__note { margin: 0; opacity: 0; pointer-events: none; text-align: center; /* One line, like the button it replaces. It keeps the host's measured width stable, which is what the centring and the clear-band clamp are both solved from, and it keeps the crossfade from reflowing under itself. */ white-space: nowrap; color: var(--text-display); text-shadow: 0 1px 2px rgba(3, 5, 9, 0.9), 0 0 20px rgba(3, 5, 9, 0.8); } /* The press. The button is left in the tree because it is what the host is measured from, and a host that shrank under the line would move it. */ .fg-cinema-cta[data-cta="done"] .fg-cinema-cta__btn { opacity: 0; pointer-events: none; } .fg-cinema-cta[data-cta="done"] .fg-cinema-cta__note { opacity: 1; } /* SPENT. The card grid carries the line now, as a heading over its own cards, so the host has nothing left to say and goes out the way it came in: the same two properties on the same transition, reversed. The "done" face above is left intact and unreferenced by the new path; it is one attribute value away if the grid is ever pulled. The rule is (0,2,0) against the visible rule's (0,2,0) and later in the file, which is what settles it. */ .fg-cinema-cta[data-cta="spent"] { visibility: hidden; opacity: 0; translate: 0 8px; } /* -------------------------------------------------------------------------- 8. THE PARKED VIEW'S LABELS, WHICH ARE NOT CALLOUTS A CALLOUT IS COMPOSED FOR A FRAME HOLDING ONE PLATFORM. It reaches off its subject on a leader and parks its tag wherever that frame has room, which is exactly right when the camera is on that subject and nothing else is in shot. Four of them on ONE wide frame is four leaders and four anchors competing for the middle of the composition, and the middle of the composition is where this state puts its control. SO THE WIDE VIEW DROPS THE GRAMMAR RATHER THAN MOVING THE GEOMETRY. The leaders are not drawn and each label is set square over or under its own part, close enough that it belongs to the part by proximity and needs no line to say so. One system, and it answers both ways a label can be asked for here: a pointer resting on one platform and the press that opens all four. EVERY RULE IS HELD ON data-cinema="parked" AND NOTHING ELSE READS THESE VALUES. The loop's own callout geometry is written to --cin-tgx, --cin-tgy and --cin-ld under [data-cin-tag], and cinema.js takes all of it off before any of this is written; the two properties below are this state's own and the zoom never sees them. The callouts the camera runs on are therefore untouched, in the sheet and in the script. THE PLACEMENT IS BY THE LABEL'S MIDDLE ON BOTH AXES, which is what lets one pair of figures express a label over or under a part without the sheet knowing how wide the label is. The transform slot is free to carry it: the shipped rule uses it for the vertical half only, and the tag's entrance rides the independent `translate` property, so replacing the transform costs the entrance nothing. THE SIDE MODIFIERS ARE OVERRIDDEN OUT OF THE WAY. --tag-e anchors by the left edge and --tag-w by the right, each with a margin and a max-width solved off --tgx; a centred label wants none of the four. The rules are (0,4,1) against their (0,2,0), so file order is not being leaned on. -------------------------------------------------------------------------- */ /* THE LEADERS ARE OFF IN BOTH HANDED-OVER STATES. Parked drops them because a wide frame has no room for four of them; the card state drops them because it has no tags left for one to reach. */ html[data-cinema="parked"] .fg-scene-node__leader, html[data-cinema="cards"] .fg-scene-node__leader { display: none; } /* THE FOUR-AT-ONCE LABEL STATE IS RETIRED AND THIS IS WHERE IT GOES. Section 10 answers the press with a card grid, and a card carries its own title, so a label in the scene at the same moment is the same name printed twice: once where it fits and once where, on a handset, it does not. The tags are held down for the whole of the card state, including the one whose drawer is open, and the SINGLE-REVEAL PATH IS UNTOUCHED: before the press the state is still "parked", the block above still places one label at a time on a hover or a tap, and that label has always fitted because there is only ever one. THE SPECIFICITY IS THE WHOLE POINT OF THE EXTRA CLASS. The shipped rules that raise a tag are (0,3,0) at four selectors, hover, focus, aria-expanded and data-revealed; naming the node as well as the tag makes this (0,3,1), which is the smallest thing that beats all four without an !important. */ html[data-cinema="cards"] .fg-scene-node .fg-scene-node__tag { opacity: 0; translate: 0 6px; transition-delay: 0s; } html[data-cinema="parked"] .fg-scene-node[data-cin-wide] .fg-scene-node__tag { left: var(--cin-wl); right: auto; top: var(--cin-wt); margin: 0; max-width: none; transform: translate(-50%, -50%); } /* -------------------------------------------------------------------------- 9. THE HANDSET STACK, BELOW 768 AND NOWHERE ELSE THE OVERLAY IS A COMPOSITION AND A HANDSET IS NOT WIDE ENOUGH TO HOLD ONE. Everything above this block puts the copy ON the picture: one full bleed scene, a scrim walling off the left of it and the headline standing in that wall. That reading needs two things a phone does not have, a column and a scene side to it, so below 768 the hero stops being one picture with words on it and becomes two blocks: the scene in a media box at the top and the copy in a card under it. Nothing overlaps, nothing is pulled up into anything, and the scrim has no job left because there is no copy over the artwork to separate. THE BOX IS 16/9 AND THE ARTWORK ALREADY HAD A 16/9 IN IT. The delivered frame is 5120 x 1620, which is 3.16:1, and a 16/9 window cannot hold that at its own height. It does not have to: the frame is the ORIGINAL 2880 x 1620 painting with new scenery added either side, the original is 2880 / 1620 = 16/9 exactly, and the four platforms all stand inside it. So the media box is that sub-box and no other: frame x 1608 to 4488 in the artwork's own units, at full frame height. There is no vertical surplus to fill, no letterbox bar, no stretch and no second treatment invented for a phone. What the box crops is the scenery that was added to make the wide overlay work, which is what that scenery is. stage width = media width / --comp-w (the sub-box fills the box) stage height = media height (the frame is full height) stage left = -(media width x --comp-x / --comp-w) --comp-x and --comp-w are the shipped descriptor's own measured figures and nothing here restates them as literals. The stacked fallback in home.css sizes its stage by exactly this construction; this is that construction with the box it lands in declared 16/9 rather than left to the container. THE MEDIA BOX IS THE FRAME BOX CINEMA.JS ALREADY MAKES. Above 768 it is the hero's own rectangle, inset: 0, and the camera composes against it; here it is an in-flow block with an aspect and its own clip, and the camera composes against THAT. One box, one role, two shapes, and the script reads its rectangle either way rather than being told which case it is in. --cin-mobile IS THE HANDOVER AND THE STYLESHEET OWNS IT. The script needs to know it is in this layout, and a second copy of 768 in JavaScript is a second place for the breakpoint to be wrong. The property is declared here and only here, so the media query is the only statement of the figure in the project and the script reads the answer instead of recomputing the question. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* THE HERO IS A PLAIN COLUMN. Size containment has to come off with the overlay: container-type: size means the box is sized without looking at its contents, which is exactly right for a declared-height hero and exactly wrong for a stack that is as tall as what is in it. The declared height goes with it for the same reason. The header allowance moves from the copy block to the hero, because the thing that now sits under the fixed bar is the media box and not the words. */ html[data-cinema] .fg-hero { --cin-mobile: 1; container-type: normal; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding-top: var(--hero-header); padding-bottom: clamp(24px, 1rem + 2vw, 56px); } /* THE MEDIA BOX. In flow, full bleed, 16/9, and it clips: the stage inside it is 1.778 times its width and the overhang either side is the added scenery. order puts it above the copy without touching the document, which still reads copy then scene and still gives a keyboard the hero's button before the four platforms. flex: none because a flex item's main size is its content's and this box has no content in flow: its width is stated and its height comes from the aspect, which is only definite while nothing is trying to flex it. */ html[data-cinema] .fg-cinema-frame { order: 1; flex: none; position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } /* THE BOTTOM BLEND STANDS DOWN AND IS NOT REPLACED. It is the join between a hero that bleeds into the next band and that band, pinned to the foot of the HERO; here the foot of the hero is the foot of the copy card, and a join treatment painted over a card is not a join. PAINTING THE SAME GRADIENT ON THE MEDIA BOX INSTEAD WAS TRIED AND IS WRONG, for a reason the parked labels give. The lower two labels sit BELOW their parts and the terminal's is clamped to the last position inside the frame, which puts its bottom edge on the box's bottom edge by construction at every phone size; any blend at that edge is a blend over that label, and a shorter one only moves how much of it is washed. Raising the label ceiling to clear a blend would mean reintroducing the 86 per cent floor section 8 records as deliberately removed, which is not a trade to make for a gradient. WHAT IS LEFT IS A PICTURE WITH AN EDGE, which is what a media box in a stack is: the artwork does not touch the next band here, the copy card does, and the card sits on the hero's own ground with the section spacing under it. */ html[data-cinema] .fg-hero__fade { display: none; } /* THE ARTWORK, PLACED SO ITS COMPOSITION SUB-BOX IS THE MEDIA BOX. Both lengths are stated, so the aspect is not asked to resolve anything and cannot leave a sub-pixel line at the foot of the frame; the box's own aspect is 1.777778 / 0.5625 = 3.160494, which is the file's, so the plate still fills it without distortion. --stage-px is the same width again without a percentage, for the one consumer that cannot take one: the leader dash. */ html[data-cinema] .fg-hero__stage { --stage-w: calc(100% / var(--comp-w)); --stage-px: calc(100vw / var(--comp-w)); position: absolute; top: 0; bottom: auto; left: calc(0px - (100% * var(--comp-x) / var(--comp-w))); width: var(--stage-w); height: 100%; max-width: none; margin: 0; aspect-ratio: auto; } /* THE COPY, AS A CARD THAT SITS ON THE PICTURE'S EDGE. The two column grid the overlay reserves a scene side with has nothing to reserve here, so it is a plain block and the card is centred in it; the container's own gutter is the side margin and no second figure is introduced for it. The card recipe is the kit's: --surface-raised, one hairline, square corners, and padding off the spacing scale. THE OVERLAP IS THE POINT AND IT IS ONE STEP OF THE SPACING SCALE. A negative --space-6 lifts the card's top edge 24px over the foot of the media box, so the two blocks read as one object with a near plane rather than as a picture and a paragraph that happen to be adjacent, and --shadow-lift is the kit's own figure for a layer that floats over another. The shadow's offset is downward and its spread negative, so it casts onto the card's own ground and adds nothing to what the overlap covers. THE OVERLAP COVERS PART OF TWO SILHOUETTES, SO THE CARD DOES NOT TAKE THE POINTER. The band lands on the bottom 14 to 17px of the vessel's and the terminal's hit regions, between 17 and 25 per cent of each; a card that took the pointer there would be an invisible lid over live artwork, which is the exact failure .fg-hero__body is pointer-transparent above 768 to avoid. So the same convention is used: the card is transparent to the pointer and its controls alone switch back on, and a tap in the band reaches the platform under it. Both hit regions keep more than 50px of clear height against the 44px floor. The cost is text selection inside the card, which is the cheaper of the two by a distance. z-index HERE IS BELT AND BRACES. The card is already over the scene by its ancestor: .fg-hero__body stands at z-index 11 on the hero and the media box at 7, so the paint order is settled before this rule is read. The pair below states the intent locally so a later change to the body's own seat cannot quietly drop the card behind the picture it is overlapping. */ html[data-cinema] .fg-hero__body { order: 2; padding-top: 0; } html[data-cinema] .fg-hero__body .fg-container { display: block; } html[data-cinema] .fg-hero__copy { position: relative; z-index: 1; max-width: 560px; margin: calc(-1 * var(--space-6)) auto 0; padding: var(--space-6); background: var(--surface-raised); border: var(--border-hairline-w) solid var(--border-hairline); border-radius: 0; box-shadow: var(--shadow-lift); text-align: center; pointer-events: none; } html[data-cinema] .fg-hero__copy .fg-btn, html[data-cinema] .fg-hero__copy :any-link { pointer-events: auto; } /* Both measures are overlay figures: 6.6em holds the headline to four lines beside a scene, and 537px is a character count taken at the full width. In a 560px card centred on a phone the card IS the measure, and a second one inside it only breaks the lines earlier than the box does. */ html[data-cinema] .fg-hero__title { max-width: none; margin-inline: auto; } html[data-cinema] .fg-hero__sub { max-width: none; margin-inline: auto; } html[data-cinema] .fg-hero__actions { justify-content: center; } /* THE CONTROL IS GIVEN A WIDTH AND THEN GIVEN THE POINTER BACK CAREFULLY. A shrink-to-fit host on a phone is measured against whatever room is left right of its own left offset, which makes its width a function of the very placement that is solved from its width; stating the width breaks the loop and lets the line it becomes wrap inside a known box instead of running past the frame on one line. A stated width is also a 320px lid over the scene, so the host stops taking the pointer and the button takes it instead. The spent state's own rule is (0,3,0) against this (0,2,1), so a pressed button is still inert. */ html[data-cinema] .fg-cinema-cta { width: min(320px, calc(100% - (var(--gutter) * 2))); pointer-events: none; } html[data-cinema] .fg-cinema-cta__btn { pointer-events: auto; } html[data-cinema] .fg-cinema-cta__note { white-space: normal; } } /* -------------------------------------------------------------------------- 10. THE CARD GRID, WHICH IS WHAT THE PRESS OPENS NOW THE SCENE EXPLAINS ITSELF ONCE AND THEN HANDS THE EXPLANATION OVER. The press still fires all four x-ray reveals, because that moment is the thing the button promises; what changes is where they end up. The four revealed parts travel out of their places in the artwork into a 2x2 grid of cards floating over it, the platforms re-solidify behind them, and from then on the four capabilities are a list you can read rather than four labels competing for the middle of a photograph. IT IS A COMPONENT AND NOT A SECOND DESIGN. The card is the kit's card: --surface-raised, one hairline, square corners, the accent edge on hover, the whole thing a button. The heading is the kit's eyebrow, carrying the same string the spent control used to crossfade into. Nothing here invents a colour, a weight or a corner. THE FLIGHT IS A COPY AND THE SCENE IS NEVER DISTURBED. Four throwaway images are created at the parts' own screen rectangles and transformed onto the cards' art slots; the parts themselves never leave the camera and the scene's markup is untouched, so the loop, the reveal and the drawer all still run on exactly the tree they were written against. The flyers are removed on arrival. EVERY DURATION IS THE KIT'S. The hold before the parts leave and the flight itself are both --dur-slower, which is the token the reveal they are made of already runs on, so the parts leave at the instant they finish arriving. The easing is --ease-in-out, the same curve the reveal uses. Under a reduced motion preference tokens.css collapses that token to 1ms and the whole handover becomes a cut, which is what the setting asks for. -------------------------------------------------------------------------- */ /* THE ONE EASING THIS FILE ADDS TO THE KIT'S FIVE, and it is added because none of them can do what the arrival needs. All five decelerate into their target and stop; an object with weight goes a little past where it is going and settles back onto it, and that overshoot is the whole difference between a part being SET DOWN in a card and a rectangle sliding into a cell. 1.12 on the second control point is about four per cent past the target, which reads as weight rather than as a bounce; anything near the 1.5 a spring curve carries would read as a toy. It is declared on the cinema attribute rather than on :root so this file still adds no rule that runs on its own. */ html[data-cinema] { --cin-ease-settle: cubic-bezier(0.34, 1.12, 0.44, 1); } /* THE SCENE STEPS BACK SO THE CARDS CAN COME FORWARD. The grid is the focused layer once the press has happened, and a full colour photograph behind an opaque card competes with it however good the card is. So the whole hero takes one flat wash of the kit's own surface ink, the same rgba(9, 12, 20) the scrim and the bottom blend are painted in: tone first, no filter, no blur, no desaturation pass. A dark wash over a dark photograph drops its saturation on its own, and a backdrop-filter would cost a full-frame rasterisation for a result this is already most of. THE ONE KNOB IS --cin-dim. It is the wash's alpha and nothing else reads it. 0.52 is the figure: at 0.4 the artwork still pulls the eye at the edges of the grid, and past about 0.65 the scene stops reading as a scene and the cards look like they are floating on a flat panel. THE HERO COPY IS NOT UNDER IT AND MUST NEVER BE. The wash washes the SCENE. The headline, the eyebrow, the sub and the briefing button are the page's own words and they stay at full strength through every state this file has: while the pass runs, while the cards gather, and after. Nothing in this file may fade them, and nothing in this file may fade the scrim that separates them from the picture for any reason, including making a platform under that scrim easier to see. That is a standing instruction and not a default. z-index 8 IS WHAT KEEPS IT OFF THEM, and it is the whole of the mechanism. The hero's ladder runs the lattice at 0, the scene and everything the camera holds at 7, the spent control at 9, the bottom blend at 10 and the copy at 11, so 8 is the first seat above the scene and the last one below the copy: the artwork, the labels and the scrim replica inside the camera all take the wash, and the copy renders over it untouched. The grid sits at 13 and the flight at 14, over everything. THE SCRIM TAKES THE WASH WITH THE SCENE AND THAT IS THE RIGHT SIDE OF IT. It is ink over the picture, so it belongs to the picture; under a uniform wash its plateau only gets darker, which can only help the separation it exists for. IT IS DECLARED IN EVERY CINEMA STATE AND RAISED IN ONE, so the wash fades in rather than appearing. At zero opacity there is nothing to composite. */ html[data-cinema] .fg-hero::after { --cin-dim: 0.52; content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: rgba(9, 12, 20, var(--cin-dim)); transition: opacity var(--dur-slower) var(--ease-out-quart); } html[data-cinema="cards"] .fg-hero::after { opacity: 1; } /* THE HOST. Placed by script on the hero, like the control it replaces: on the overlay its centre is written from the four platforms' own centre of mass, and below 768 it is given the hero's own width and centred in it. */ .fg-cinema-cards { position: absolute; z-index: 13; display: flex; flex-direction: column; gap: var(--space-4); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-slower) var(--ease-out-quart); } /* Up as the parts leave, in both of its two values: "pending" is the grid standing empty with the flight still in the air, "on" is the grid filled. */ .fg-cinema-cards[data-cards] { visibility: visible; opacity: 1; } /* The heading. Same three departures from .fg-eyebrow the spent control's line made and for the same reasons: the colour, because a floating orange line over artwork reads as a control; the margin, which a flex child has no use for; and the shadow, which is what carries small type over a photograph. */ .fg-cinema-cards__note { margin: 0; text-align: center; color: var(--text-display); text-shadow: 0 1px 2px rgba(3, 5, 9, 0.9), 0 0 20px rgba(3, 5, 9, 0.8); } /* THE COLUMNS ARE THE CARD'S SIZE AND THE CARD IS MEANT TO BE READ. The first pass at this made them the smallest box that would hold a title beside a thumbnail, and what that produced was four labelled squares. These are two and a half times the area: the floor is the narrowest column a full capability title and a wrapped line of description sit in without either fighting for room, and the ceiling stops the grid growing without limit on an ultrawide, where the point is a card that reads well and not a bigger one. 1440 240px columns, 496px grid 2560+ 320px columns, 656px grid 1920 288px columns, 592px grid The gap is one step up from the old one for the same reason: at this size a 12px gutter reads as a seam rather than as space between two objects. */ .fg-cinema-cards__grid { display: grid; grid-template-columns: repeat(2, clamp(240px, 15vw, 320px)); gap: var(--space-4); } /* THE CARD, TOP TO BOTTOM: the part render in a block of its own with room around it, then the numeral the scene has always used for this capability, the title in the kit's card face, the one line the drawer opens with, and the kit's arrow. Five things in one column with a clear order of weight, which is what a showcase is and what a labelled box is not. IT ARRIVES RATHER THAN APPEARING. Each card fades and rises on its own delay, one step behind its own part, so a card is already standing when the part settles into it. The rise runs on the settle curve for the same reason the flight does. The transform slot is left free for the hover lift and the entrance rides the independent translate property, so the two never fight. THE DELAY LIST IS POSITIONAL and the two middle entries are the two the stagger applies to: colour first (no delay, so hover is instant at any point), then opacity and translate on the card's own index, then the lift and its shadow (no delay, hover again). */ .fg-cinema-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; min-height: 44px; padding: clamp(16px, 1.2vw, 24px); background: var(--surface-raised); border: var(--border-hairline-w) solid var(--border-hairline); border-radius: 0; box-shadow: var(--shadow-lift); text-align: left; cursor: pointer; pointer-events: auto; opacity: 0; translate: 0 16px; transition: var(--t-color), opacity var(--dur-slow) var(--ease-out-quart), translate var(--dur-slow) var(--cin-ease-settle), transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); transition-delay: 0s, calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; } .fg-cinema-cards[data-cards] .fg-cinema-card { opacity: 1; translate: 0 0; } /* The kit's card hover, with the lift a floating card earns: the accent edge, the title to accent, the arrow forward, and one step up the shadow ramp. */ .fg-cinema-card:hover, .fg-cinema-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-panel); } .fg-cinema-card:hover .fg-cinema-card__title, .fg-cinema-card:focus-visible .fg-cinema-card__title { color: var(--accent); } .fg-cinema-card:hover .fg-cinema-card__arrow, .fg-cinema-card:focus-visible .fg-cinema-card__arrow { color: var(--accent); transform: translateX(4px); } /* THE PART GETS A BLOCK OF ITS OWN, which is the whole of what "room to breathe" means here: a band the card's full width with the render centred in it, sized off the viewport so it grows with the card. The render is square, so stating the height and letting the width follow keeps the band exact and gives the flight a square target to land on. */ .fg-cinema-card__media { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(88px, 6.5vw, 132px); } /* The art slot. It is empty while the flight is in the air and fills at the instant the flyers land, which is what makes the part look like it came to rest in the card rather than being replaced by a picture of itself. */ .fg-cinema-card__art { display: block; width: auto; height: 100%; max-width: 100%; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out-quart); } .fg-cinema-cards[data-cards="on"] .fg-cinema-card__art { opacity: 1; } .fg-cinema-card__body { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; min-width: 0; } /* The scene's own numbering, in the scene's own accent and face. It is the one thing on the card that ties it back to the platform it came out of. */ .fg-cinema-card__num { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xs); line-height: 1; letter-spacing: 0.1em; color: var(--accent); } /* The kit's card title, unmodified: display face, uppercase, --fs-h3. break-word is a guard and not a wrap; MICROELECTRONICS is the only unbreakable run of the four and it sits inside every column above with room to spare. */ .fg-cinema-card__title { min-width: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-transform: uppercase; overflow-wrap: break-word; color: var(--text-display); transition: var(--t-color); } /* The line the drawer opens with, at the kit's smallest body size and its muted ink, which is 5.57:1 on --surface-base and better on --surface-raised. */ .fg-cinema-card__lede { min-width: 0; font-family: var(--font-body); font-size: var(--fs-3xs); line-height: 1.5; color: var(--text-muted); } /* THE ARROW EARNS ITS PLACE because the whole card opens a drawer, which is exactly the promise .fg-link-arrow makes everywhere else on the site. It is drawn rather than set, so it carries no glyph and no font dependency: a rule and a rotated corner, both in currentColor, and the 4px forward on hover is the kit's own 3px rounded to the larger size this card sets it at. */ .fg-cinema-card__arrow { position: relative; width: 24px; height: 8px; margin-top: var(--space-1); color: var(--text-muted); transition: var(--t-color), transform var(--dur-quick) var(--ease-out-expo); } .fg-cinema-card__arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; border-top: var(--border-hairline-w) solid currentColor; } .fg-cinema-card__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: var(--border-hairline-w) solid currentColor; border-right: var(--border-hairline-w) solid currentColor; transform: translateY(-50%) rotate(45deg); } /* THE FLIGHT. A host with no size, holding four throwaway images that are positioned at the parts' own screen rectangles and then transformed onto the card slots. z-index 14 is the top of this state's ladder: over the wash at 12 and over the grid at 13, so a part lifts out of a scene that is already dimming, passes in front of its own empty card and settles into it. */ .fg-cinema-flight { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 14; pointer-events: none; } /* transform-origin at the corner is what lets one translate and one scale carry a rectangle onto another rectangle with no second correction: the offset is the two top left corners and the factor is the two widths. The duration, the delay and the curve of each of the two movements are written by script, which is what lets one element run a lift and then a travel on different curves. */ .fg-cinema-flyer { position: absolute; transform-origin: 0 0; will-change: transform; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8)); transition-property: transform; } @media (max-width: 767.98px) { /* THE HANDSET GRID IS NOT SQUEEZED INTO THE MEDIA BOX ANY MORE. It was, and what that produced was 60px rows: the media box is 202 to 242px tall and a card worth looking at is not going to come out of half of that. The grid is now the hero's own width inside the gutters and centred in the hero, over the picture AND over the copy card, with the wash covering both. That is the honest reading of this state on a phone: the scene has handed over, so the thing it handed to gets the screen. THE CARDS KEEP THE SAME FIVE PIECES IN THE SAME ORDER. Only the art band, the padding and the title size come down, so a phone card is the desktop card at a phone's scale rather than a different component. At the three widths the columns are 154, 169 and 188px and the cards run about 226px tall, which is every target well clear of 44px on both axes. */ html[data-cinema] .fg-cinema-cards { gap: var(--space-3); } html[data-cinema] .fg-cinema-cards__note { line-height: 1.25; } html[data-cinema] .fg-cinema-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } html[data-cinema] .fg-cinema-card { gap: var(--space-2); padding: var(--space-3); } html[data-cinema] .fg-cinema-card__media { height: clamp(56px, 18vw, 84px); } html[data-cinema] .fg-cinema-card__title { font-size: var(--fs-h4); } html[data-cinema] .fg-cinema-card__arrow { width: 20px; } } /* -------------------------------------------------------------------------- 11. THE HANDSET SHOWCASE, BELOW 768 AND NOWHERE ELSE THE STACKED LAYOUT GIVES THE SCENE A BOX ABOUT 219px TALL ON A 390px PHONE, and the whole 16/9 painting goes in it. Everything is present at that size and nothing can be read: four platforms 60 to 90px across with their labels set over them, four hit regions floored at 44px so they nearly touch, and a control floating in the middle of it. So below 768 the parked composition is replaced by a showcase that holds ONE platform at a time, at the framing the choreography's own holds are solved to, and moves between them on a clock, an arrow or a thumb. EVERY FIGURE OF THE SHOT COMES FROM THE PASS AND NONE OF IT IS HERE. The camera's transform, the magnification, the callout tight to the part and the label counter-scaled to read at one screen size are all cinema.js reading solveFrame and buildCallout, exactly as the zoom pass did. What this section carries is the chrome: two arrows, the treatment for the three platforms that are off frame, the seating of the control in the copy card, and the one declaration that decides which gestures belong to the page. THE STATE IS data-cinema="slides" AND IT IS ITS OWN VALUE FOR A REASON. Every rule in this file held on the attribute's PRESENCE still applies, which is the composition, the suppressed ambient bands, the reveal's tempo and the whole callout system; the two blocks held on a VALUE do not, which is section 3's hover neutraliser, since the pass is not running, and section 8's parked labels, since the labels here are callouts and a callout is the thing that counter-scales. Nothing had to be excluded by hand. THE BOX IS READ IN TWO BANDS AND NOTHING SHARES A CORNER. The head carries the caption on the left and the control on the right, as one row with a gap; the two arrows take the middle on their own centre line; the picture under them is what the showcase is for. The foot is left to the picture. THE CONTROL CAME OFF THE FOOT AND BECAME A CHIP, on the owner's direction. At the foot it was the full 320px primary standing across the bottom of a 219px box, which is a third of the picture's height and most of its width spent on a control that is one of three things competing for a phone-sized frame. In the head opposite the caption it is two marks of the same 28px height at the two top corners, reading as one band of chrome rather than as two treatments, and the platform under them is uncovered. THE ROW IS WHAT GUARANTEES THEY DO NOT MEET. Both are flow items with a gap between them, so no width can overlap them whatever a capability name measures; the alternative, hanging the chip off the corner by its own offsets, would need the caption's width to be a known figure and it is copy. THE CHIP IS SMALLER THAN THE TARGET FLOOR AND STILL MEETS IT. 28px of visible box carries a 44px hit area on an invisible ::after centred on it, which is the pattern WCAG 2.5.5 describes and the one the arrows do not need because they are drawn at 44 already. -------------------------------------------------------------------------- */ /* THE GESTURE SPLIT, AND IT IS ONE DECLARATION BECAUSE THE BROWSER IS BETTER AT THIS THAN A HANDLER IS. pan-y leaves every vertical gesture with the page and hands the horizontal component to the script, so the page never waits on a listener to find out whether it may scroll and a swipe never has to cancel a scroll that has already started. The script's own thresholds then decide whether the horizontal component was meant, which is a separate question. */ html[data-cinema="slides"] .fg-cinema-frame { touch-action: pan-y; } /* THE THREE PLATFORMS THAT ARE NOT ON SCREEN. Their layers stay painted, because the artboard the visible platform is drawn from is one of the same four; what comes off is the pointer. The tab stop and the accessibility tree come off in the markup, from script, because both are states of the element rather than of its box. A hit region outside the visible frame is a tap that opens a drawer for a platform the visitor cannot see, which is the one failure this rule exists to prevent. */ html[data-cinema="slides"] .fg-scene-node[data-cin-off] .fg-scene-node__hit { pointer-events: none; } /* THE HOST, AND IT IS A COLUMN OF THREE BANDS. The frame box's own rectangle, transparent to the pointer like every other box this file makes, with the controls in it switching themselves back on. z-index 12 seats it over everything the frame box holds: the plate at 1, the platform layers above it, the scrim replica at 7 and the revealed part and its callout above that. The arrows have to clear all of them, because they are the only controls in the box that are not the picture, and they still sit under the hero's own copy at 11 by being inside a frame box seated at 7. THE PADDING IS THE WHOLE OF THE PLACEMENT AND IT IS STATED ONCE. 12px on the head and the sides is the reading margin the box has always used, which is MOBILE_EDGE_PAD_PX in cinema.js; the foot is that plus --space-6, the step the copy card is lifted over the media box by, so nothing in this column is ever under the card. Both figures are shipped ones and neither is invented here. The figures are restated rather than shared because a custom property would have to be written by script on every layout to say a number that never changes; where the two are the same number the note is the link. THE BANDS ARE FLOW ITEMS AND NOT OFFSETS, which is what makes the box hold at 320px. The caption is 28px, the control 44, and the picture is about 180 tall there: three pieces placed by their own absolute offsets fit at 390 and land on each other below it, and the arrows are the piece that has to move because they are the only one whose position was a percentage. Centred in the row the other two leave, they cannot collide with either at any width, and no figure in this section has to know what the control measures. IT IS OUT OF THE TREE UNTIL THE SHOWCASE IS UP, so nothing here is reachable at any width the showcase does not run at, and no media query is needed to say so: the attribute is only ever written below 768. */ .fg-cinema-slides { position: absolute; inset: 0; z-index: 12; display: none; pointer-events: none; } .fg-cinema-slides[data-slides] { display: flex; flex-direction: column; align-items: center; padding: 12px 12px calc(var(--space-6) + 12px); } /* THE HEAD BAND. The caption at one end, the control at the other, and the gap between them is the whole of the collision rule: two flow items in a row cannot occupy the same pixel however wide either one is, so nothing here has to know what a capability name measures or what the control's label says. flex-start ON THE CROSS AXIS, so a caption that has taken a second line grows downward and the chip stays on the picture's own top edge rather than sliding down to the caption's middle. THE CAPTION IS THE ONE THAT GIVES. The chip is flex: none by its own rule, so where the two will not fit at their natural widths the room comes off the caption, which is a label for what is already named in the live region and can afford to wrap; the control is the thing being offered and may not shrink. */ /* THE BAND IS A FIXED HEIGHT AND THAT IS WHAT HOLDS THE ARROWS STILL. The row below takes what this band leaves, so anything that changes this band's height moves the two arrows, and the caption's height is a function of WHICH SLIDE IS UP: at 320 and 360 the longer capability names take a second line, which puts the caption at 32px where the shorter ones leave it on its own 28px floor. The band then grew by 4, the row lost 4 from the top and 4 from its height, and the arrows centred in it moved 2px down and back on every slide change. Two controls that shift under the thumb between presses is the defect that was reported as the arrows bouncing. SO THE BAND RESERVES THE CAPTION'S OWN FLOOR AND A WRAPPED CAPTION GROWS PAST IT. That is the same direction align-items: flex-start already sends it and it costs nothing: the row below is 100px at the narrowest phone with 44px of arrow centred in it, so a second caption line reaches 4px into 28px of empty picture and stops well clear of the controls. The height is the caption's own min-height and the chip's own box, which are the same 28, so the band is exactly as tall as the taller of the two things it holds at their natural size and no figure is invented here. */ .fg-cinema-slides__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); width: 100%; height: 28px; } /* THE MIDDLE BAND. It takes what the head leaves and centres the two arrows in it, which is the one thing it is for. min-height is the target floor, so a picture too short to give the arrows their room overflows the band rather than shrinking a control below 44px. */ .fg-cinema-slides__row { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; } /* THE ARROWS. 44px square, which is the WCAG 2.1 target floor taken as the design rather than as a minimum to be checked afterwards, seated against the left and right edges of the picture by their row and centred in it. They carry the kit's own raised surface and hairline so they read as interface over a photograph, and the accent on hover and focus is the same one every control on the site takes. THE GROUND IS AT 0.72 AND NOT AT FULL STRENGTH so the picture behind them is still a picture. The glyph is --text-display on --surface-raised, which is the pairing the kit already measures for its own raised controls, and the hairline carries the edge where the backdrop happens to match the fill. THE FLAT SURFACE IS DECLARED FIRST AND THE MIX SECOND. These two lines are the only use of color-mix in the theme's own stylesheets, and a browser that does not know the function drops the whole declaration, which on a control whose only fill this is would leave the glyph on the photograph. The pair is the standard fallback shape: an older engine keeps the opaque surface it can parse, a current one overwrites it with the same colour at 0.72, and the contrast the note above records is measured on the mix, which is the weaker of the two. */ .fg-cinema-slides__btn { flex: none; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; pointer-events: auto; cursor: pointer; color: var(--text-display); background: var(--surface-raised); background: color-mix(in srgb, var(--surface-raised) 72%, transparent); border: var(--border-hairline-w) solid var(--border-hairline-strong); border-radius: 0; transition: color var(--dur-quick) var(--ease-out-quart), border-color var(--dur-quick) var(--ease-out-quart), background-color var(--dur-quick) var(--ease-out-quart); } /* The same pair for the same reason: the flat surface an older engine can read, then the mix that supersedes it. */ .fg-cinema-slides__btn:hover, .fg-cinema-slides__btn:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--surface-raised); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); } .fg-cinema-slides__glyph { display: block; width: 18px; height: 18px; pointer-events: none; } /* The line the showcase speaks with. It is a live region and never a visible one, so it is taken out of flow entirely and cannot take part in the box's layout however long a capability name gets. */ .fg-cinema-slides__live { position: absolute; left: 0; top: 0; } /* THE SCENE'S OWN LABELS ARE HELD DOWN FOR THE WHOLE STATE, which is the same thing section 8 does for the card grid and for the same reason: the caption already carries the numeral and the name, and a tag in the picture at the same moment is the same name printed twice, once where it fits and once where it does not. The route solver was given this box and reported that it does not fit, which is what the caption exists to answer. THE SPECIFICITY IS THE EXTRA CLASS, exactly as section 8 explains: naming the node as well as the tag makes this (0,3,1) against the four shipped rules that raise a tag at (0,3,0), which is the smallest thing that beats all of them without an !important. The revealed platform is one of those four here, since the showcase reveals the platform it is holding. */ html[data-cinema="slides"] .fg-scene-node .fg-scene-node__tag { opacity: 0; translate: 0 6px; transition-delay: 0s; } /* THE CAPTION, AND IT IS THE SCENE'S OWN TAG REBUILT OUTSIDE THE PICTURE. Every figure below is the one .fg-scene-node__tag already carries: the same ink and the same hairline for the ground, the same 28px floor, the same padding, the same gap, the accent numeral in the display face at --fs-2xs and 0.1em, the name in the body face at --fs-3xs and the badge tracking. What differs is where it is anchored and that it is not inside the camera, so it renders at one size on every slide with nothing to counter-scale. THE HEAD OF THE COLUMN, ON THE LEFT, AND THE CONTROL IS THE OTHER END OF THE SAME ROW. A label above the thing it labels is the order the four callouts already read in, and the band the copy card overlaps is the whole height of the box away. IT SHRINKS AND THE CONTROL DOES NOT. min-width: 0 is what lets a flex item below its content width at all, and it is here rather than on the name because the name is already min-width: 0 and the constraint has to pass through both. The longest name on the site sets two lines inside the caption at the narrow end of the phone range instead of pushing the chip off the picture. IT DOES NOT TAKE THE POINTER. The platform behind it is a button and this is a label for that button, so a tap in this corner belongs to the platform. */ .fg-cinema-slides__cap { flex: 0 1 auto; min-width: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; max-width: 100%; margin: 0; padding: 4px var(--space-2); pointer-events: none; background: rgba(9, 12, 20, 0.85); border: var(--border-hairline-w) solid var(--border-hairline-strong); } .fg-cinema-slides__num { flex: none; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xs); line-height: 1; letter-spacing: 0.1em; color: var(--accent); /* 4.89:1 on the tag backing */ } .fg-cinema-slides__name { min-width: 0; font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--text-display); /* 16.78:1 on the tag backing */ } /* THE CONTROL, STANDING IN THE PICTURE IT IS ADVERTISING. cinema.js moves the element into the head row at this width and the row places it: second item, so the top right corner of the picture, opposite the caption. What the sheet has to undo here is the overlay's own positioning, because the same element is absolutely placed by an arithmetic solve above 768 and is a flow item in a row below it. left and top are not restated: the script takes its two inline offsets off on the layout that seats it here, and position: static leaves them nothing to act on either way. THE 320px WIDTH IS SECTION 9'S AND IS UNDONE HERE. That figure exists so the LINE the control used to become could wrap inside a known box while standing over the picture; the chip is shrink to fit and the line is gone from this state, so the host takes its own content width and the selector carries the attribute to outrank the block that states it. THE ENTRY IS THE TRANSLATE AND IT SURVIVES, because section 7 animates the control up on the translate property and only the transform is dropped here. IT IS ONE OFFER AND THE COPY CARD MAKES NO SECOND ONE. The card holds the briefing button alone at every width now; an Explore in the card under a showcase carrying its own would be the same offer twice in one screen, which is the reason the group has only ever held one button in the markup. */ html[data-cinema] .fg-cinema-slides .fg-cinema-cta { position: static; flex: none; width: auto; z-index: 1; transform: none; } /* THE LINE FACE IS OUT OF THE BOX HERE, AND WITH IT THE REASON THE HOST WAS EVER 320px WIDE. Both faces share one grid cell, so the host measures the wider of the two whether or not the wider one can be reached, and the line is 2.3 times the chip. It cannot be reached: the press retires the control and the card grid carries the line as its own heading, which is what the note on the spent state records. Taking it out of the box is what lets the chip be a chip. */ .fg-cinema-slides .fg-cinema-cta__note { display: none; } /* THE CHIP. The kit's primary button on the kit's own levers, at the smallest setting that still reads as the same control: the fill, the ink, the edge, the tracking and the face are untouched and only --btn-py, --btn-px and the type size move, so the 5.22:1 the component measures is unchanged and no colour is invented here. 28px IS THE CAPTION'S OWN HEIGHT, which is what makes the two corners read as one band rather than as two sizes: 7 + 7 of padding, 12px of type at leading none and the component's own 2px of border. It replaces a 44px box 320px wide at the foot of the picture. THE COARSE POINTER FLOOR IS STOOD DOWN HERE AND ONLY HERE. tokens.css gives every .fg-btn a 44px min-height on a coarse pointer, which is the right default and would make this chip 44px tall on the one class of device it is drawn for, so the chip would not be a chip on a phone at all. The floor is not given up with it: the rule below carries the same 44px as an invisible target centred on the drawn box, which is the substitution WCAG 2.5.5 is written to allow. Nothing outside this box is affected. */ .fg-cinema-slides .fg-cinema-cta__btn { --btn-py: 7px; --btn-px: 10px; min-height: 0; font-size: var(--fs-2xs); } /* THE TARGET IS 44px AND IT IS INVISIBLE. WCAG 2.5.5 asks for the target rather than for the drawn box, so the chip keeps its 28px of ink and carries the floor on a pseudo element centred on it: 8px of reach above and below, and across, the larger of the box and 44 so a short label can never fall under it either. It is inside the button, so a press on it IS a press on the button and no handler knows it exists. IT REACHES UP AND NOT DOWN INTO THE PICTURE ONLY BY BEING CENTRED, which is the placement that keeps the reach off the arrows below: the chip's foot sits at 40px from the box's top edge and the arrows are centred in what the head leaves, which on the shortest picture this state draws is 89px down. */ .fg-cinema-slides .fg-cinema-cta__btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }