{"version":3,"file":"blocks/CubeSlider/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;EAAA;AAQA;EACE;;;;;;;;;;;;;;;;;;IAAA;EAmBA;EACA;EAEA;;;;IAAA;AAIF;AACE;;EAEE;EACA;AACJ;AAhCA;EAkCE;;;IAAA;AAIF;AAAE;;EAEE;AAEJ;AA1CA;EA2CE;;;;;;IAAA;AAQF;AADE;;EAEE;EACA;EACA;AAGJ;AADI;;EACE;EACA;EACA;KAAA;AAIN;;AACA;;;;;EAAA;AAOE;EACE;;;;;;;IAAA;EAQA;EACA;;;;;;;;;;;IAAA;EAYA;AACJ;AAEE;EACE;EACA;;;;IAAA;EAKA;AAAJ;AAGE;EACE;EACA;EACA;;;IAAA;EAIA;EACA;EACA;EACA;;;;;;IAAA;EAOA;EACA;AADJ;AArDA;EAyDE;;;IAAA;AAEF;AAEE;;;EAGE;AAAJ;AAGE;EACE;AADJ;;AAKA;EACE;EACA;EACA;EACA;AAFF,C","sources":["webpack://brandy-blocks/./src/blocks/CubeSlider/style.scss"],"sourcesContent":["/**\n * Cube Slider — shared frontend + canvas styles.\n *\n * Card styles verified against swiper@11/modules/effect-cube.min.css. They are\n * not polish: without transform-origin, backface-visibility and the visibility\n * rules the cube renders as four overlapping flat slides.\n */\n\n.brandy-cube-slider {\n  /*\n   * Bound the horizontal scroll extent.\n   *\n   * The faces that are not currently on screen still sit at their cube\n   * positions — up to three viewports off to the side — and `visibility:\n   * hidden` does NOT take an element out of the scrollable area. Left alone,\n   * one cube slider adds several thousand pixels to the document's scroll\n   * width and the whole page gets a horizontal scrollbar. Measured at 10318px\n   * against a 1917px viewport before this rule.\n   *\n   * `clip` rather than `hidden` so this never becomes a scroll container of its\n   * own, and `overflow-clip-margin` so the turning faces still have room to\n   * bleed past the block edge — which is the entire reason the viewport's\n   * overflow was opened up.\n   *\n   * Horizontal only: `overflow-x: clip` composes with `overflow-y: visible`\n   * (unlike `hidden`, which would force the other axis to `auto`), so turning\n   * faces can still bleed past the block's top and bottom edges.\n   */\n  overflow-x: clip;\n  overflow-clip-margin: 200px;\n\n  /*\n   * Every face shares one box. Applied to the slide rather than the viewport so\n   * it holds in the canvas too, where the slides are an ordinary stack and\n   * there is no viewport element between them.\n   */\n  .embla__slide,\n  .brandy-cube-slider__faces > * {\n    aspect-ratio: var(--brandy-cube-aspect, 16/9);\n    padding-left: 0;\n  }\n\n  /*\n   * Content taller than the face overflows it rather than growing it — a cube\n   * whose faces resized to fit their contents would not be a cube.\n   */\n  .embla__slide > *,\n  .brandy-cube-slider__faces > * > * {\n    max-width: 100%;\n  }\n\n  /*\n   * An image that is a face's whole content covers the face. Without this an\n   * image block sits at its intrinsic size — a 940px photo in a 1280px face\n   * leaves a quarter of the face bare, because nothing else relates the\n   * image's box to the face's box. Scoped to direct image-block children so a\n   * face composed of text or cards keeps its own layout.\n   */\n  .embla__slide > .wp-block-image,\n  .brandy-cube-slider__faces > * > .wp-block-image {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n}\n\n/*\n * The 3D layer proper. Gated on `.is-cube-ready`, which the module adds only\n * after it has attached — so a slider whose module never loaded, or that\n * refused to animate under reduced motion, keeps working as an ordinary strip\n * instead of collapsing into a pile of stacked faces.\n */\n.brandy-cube-slider .embla.is-cube-ready {\n  .embla__viewport {\n    /*\n     * Swiper's cube requires unclipped overflow, and embla.min.css sets\n     * `overflow: hidden !important` on every viewport. Scoped to this block and\n     * to the ready state, so no sibling slider is affected.\n     *\n     * The consequence is real: turning faces can paint outside the block's\n     * box.\n     */\n    overflow: visible !important;\n    /*\n     * Viewing distance has to scale with the cube, not be a constant.\n     *\n     * Swiper hardcodes 1200px, which reads well only because its demo cubes are\n     * about 300px wide — a 4:1 ratio of distance to side. A block-width cube is\n     * 1400px+, where that same 1200px is a savagely short distance: faces swing\n     * most of the way to the viewer's eye and project far outside the block.\n     *\n     * Holding the RATIO instead keeps the perspective identical at every\n     * breakpoint. The fallback only applies for the frame before the module\n     * publishes a measurement.\n     */\n    perspective: calc(var(--brandy-cube-size, 300px) * 4);\n  }\n\n  .embla__container {\n    transform-style: preserve-3d;\n    /*\n     * embla.min.css pulls the container left by one gap to seat the slide\n     * gutters. The gap is 0 here, so this is already 0 — restated because the\n     * cube's pivot maths assumes slide i sits at exactly i * size.\n     */\n    margin-left: 0;\n  }\n\n  .embla__slide {\n    backface-visibility: hidden;\n    z-index: 1;\n    /*\n     * Measured from the slide's top-left, which is the frame Swiper's face\n     * offsets are expressed in. Not centre, and not an edge.\n     */\n    transform-origin: 0 0;\n    width: 100%;\n    height: 100%;\n    /*\n     * Hidden by default, and NOT inside the reduced-motion query below: the\n     * module does not attach under `reduce`, so `.is-cube-ready` is never set\n     * and these rules never apply — the slider stays an ordinary visible strip.\n     * Putting the visibility rules behind the motion query as well would hide\n     * every slide with nothing left to reveal them.\n     */\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /*\n   * Only the active face and its two neighbours are painted. This is what lets\n   * slides past the fourth reuse faces without ever overlapping visibly.\n   */\n  .embla__slide.is-cube-active,\n  .embla__slide.is-cube-next,\n  .embla__slide.is-cube-prev {\n    visibility: visible;\n  }\n\n  .embla__slide.is-cube-active {\n    pointer-events: auto;\n  }\n}\n\n.brandy-cube-slider__notice {\n  margin: 0.75rem 0 0;\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  opacity: 0.75;\n}\n"],"names":[],"sourceRoot":""}