{"version":3,"file":"blocks/Rotator/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;;;;;;;;;;;;;;;;;;EAAA;AAyBA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;;;;;;;;;;;;;;;IAAA;AAeD;AACC;EACC;EACA;EACA;EACA;EAIA;AAFF;;AAMA;EACC;EAOA;AATD;;AAYA;EACC;EACA;EACA;AATD;AAWC;EACC;EACA;EACA;AATF;;AAaA;;;;;;;;;;;;;;;;;;;EAAA;AAqBC;EACC;AAXF;AAcC;EACC;AAZF;;AAiBC;EACC;AAdF;AAiBC;EACC;AAfF;;AAoBA;AACA;EAGC;EACA;AAnBD;;AAsBA;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;AApBF;AAuBC;EACC;EACA;AArBF;AASA;EAeC;;;;;;;;;;IAAA;AAXD;AAsBC;EACC;AApBF;;AAwBA;;;EAAA;AAKC;EACC;EACA;AAtBF;AAyBC;EACC;EACA;AAvBF;AA0BC;EACC;EACA;AAxBF;;AA4BA;AAEC;EACC;AA1BF;AA6BC;EACC;AA3BF;;AA+BA;AACA;EACC;AA5BD;AA8BC;EACC;EACA;AA5BF;AA+BC;EACC;AA7BF;AAgCC;EACC;AA9BF;;AAkCA;;;;;;;;;;;EAAA;AAYA;EACC;AA/BD;AAiCC;EACC;EACA;EACA;EACA;EACA;EACA;AA/BF;AAkCC;EACC;AAhCF;AAmCC;EACC;AAjCF;;AAqCA;;;EAAA;AAIA;EACC;IACC;EAlCA;AACF;AAqCA;EACC;IACC;EAnCA;AACF;AAsCA;;;;EAAA;AAKA;EACC;IACC;EApCA;AACF;AAuCA;;;;;;;;;;EAAA;AAYC;EACC;EACA;EACA;AAtCF;AAyCC;EACC;EACA;AAvCF;;AA2CA;;;;EAAA;AAKA;EACC;EACA;EACA;EACA;AAxCD;;AA2CA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxCD,C","sources":["webpack://brandy-blocks/./src/blocks/Rotator/style.scss"],"sourcesContent":["/**\n * Rotator.\n *\n * Geometry is shared by every preset: a wrapping row of slots, and a slot that\n * stacks its children on a single grid cell so its height is its tallest\n * child. Nothing is absolutely positioned and nothing has a fixed height, so a\n * slot holding a 28px logo and a slot holding a two-line paragraph both size\n * themselves and the row never shifts mid-swap.\n *\n * Two states, and the difference matters:\n *\n *   resting  — no .is-live. The first child of each slot is visible because it\n *              is the first child. This is what a reader gets with JavaScript\n *              off, under reduced motion, and in the moments before the view\n *              module loads.\n *   live     — .is-live, added by view.js once it takes over. Visibility now\n *              follows .is-active, and .is-leaving marks the child on its way\n *              out so it can exit in the opposite direction to the one\n *              arriving.\n *\n * The stagger is --brandy-rotator-delay, set per slot by view.js. Custom\n * properties inherit, so the children read it as their transition-delay and\n * one synchronous class toggle produces a left-to-right wave.\n */\n\n.brandy-rotator {\n\t--brandy-rotator-gap: 24px;\n\t--brandy-rotator-columns: 5;\n\t--brandy-rotator-columns-tablet: 3;\n\t--brandy-rotator-columns-mobile: 2;\n\t--brandy-rotator-duration: 520ms;\n\t--brandy-rotator-stagger: 133ms;\n\n\t/*\n\t * A wrapping flex row rather than a grid, so a partial last row can be\n\t * packed by the alignment control.\n\t *\n\t * Grid places items into fixed tracks: with five slots across three\n\t * columns, the fourth always lands in track one and the empty track is\n\t * always the last one. justify-items can move an item inside its own\n\t * track but cannot shift the leftovers as a group, so \"centre\" left a\n\t * hole on the right of the final row.\n\t *\n\t * Giving each slot an explicit basis keeps the columns identical — a full\n\t * row fills the width exactly, so justify-content has nothing to\n\t * distribute there and items still line up between rows. It only becomes\n\t * visible on the row that does not fill, which is precisely the row that\n\t * needed it.\n\t */\n\t&__row {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: var(--brandy-rotator-gap);\n\t\talign-items: center;\n\n\t\t// Centre emits no class, so the row's default packing is centre too —\n\t\t// otherwise a leftover row would sit left while its items were centred.\n\t\tjustify-content: center;\n\t}\n}\n\n.brandy-rotator-slot {\n\tflex: 0 0\n\t\tcalc(\n\t\t\t(\n\t\t\t\t\t100% - (var(--brandy-rotator-columns) - 1) *\n\t\t\t\t\t\tvar(--brandy-rotator-gap)\n\t\t\t\t) / var(--brandy-rotator-columns)\n\t\t);\n\tmin-width: 0;\n}\n\n.brandy-rotator-slot {\n\tdisplay: grid;\n\talign-items: center;\n\tjustify-items: center;\n\n\t> * {\n\t\tgrid-area: 1 / 1;\n\t\tmargin: 0;\n\t\tmax-width: 100%;\n\t}\n}\n\n/*\n * Alignment — where the item sits inside its slot.\n *\n * This is justify-items, not justify-content, because the row's tracks are\n * `1fr` and always fill the container: aligning the tracks would do nothing.\n * Moving the item within its own cell is both what the control says and what\n * keeps the even column widths that stop the row jumping when a wide logo\n * swaps for a narrow one.\n *\n * It is also the only thing that helps the single-slot case — a word rotator\n * under a left-aligned headline needs its word hard left, and with one 1fr\n * track there is nothing else to push against.\n *\n * Centre is the default and emits no class.\n *\n * One rule covers all four presets. Slide stretches its children vertically so\n * translateY(±100%) clears the cell, but never horizontally — they stay\n * content-width, so justify-items places them just like everywhere else and\n * their own flex alignment never comes into it.\n */\n.brandy-rotator.is-align-left {\n\t.brandy-rotator__row {\n\t\tjustify-content: flex-start;\n\t}\n\n\t.brandy-rotator-slot {\n\t\tjustify-items: start;\n\t}\n}\n\n.brandy-rotator.is-align-right {\n\t.brandy-rotator__row {\n\t\tjustify-content: flex-end;\n\t}\n\n\t.brandy-rotator-slot {\n\t\tjustify-items: end;\n\t}\n}\n\n\n/* Resting state — before view.js, or instead of it. */\n.brandy-rotator:not(.is-live):not(.is-editing)\n\t.brandy-rotator-slot\n\t> :not(:first-child) {\n\topacity: 0;\n\tpointer-events: none;\n}\n\n/* Live state — visibility follows .is-active. */\n.brandy-rotator.is-live .brandy-rotator-slot {\n\t> * {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition-property: opacity, transform, filter;\n\t\ttransition-duration: var(--brandy-rotator-duration);\n\t\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\t\ttransition-delay: var(--brandy-rotator-delay, 0ms);\n\t}\n\n\t> .is-active {\n\t\topacity: 1;\n\t\tpointer-events: auto;\n\t}\n\n\t/*\n\t * A child that is neither arriving nor leaving is waiting, and it must get\n\t * to the waiting position instantly rather than travel there.\n\t *\n\t * Losing .is-leaving — which happens on the following advance, when the\n\t * slot is restated — moves an element from the exit position back to the\n\t * entry position, the full width of the transition in reverse. The three\n\t * fading presets hide that at opacity 0, but slide has no fade, so an\n\t * animated reset sweeps a ghost straight back across the slot. Snapping\n\t * costs the fading presets nothing and is what makes slide correct.\n\t */\n\t> :not(.is-active):not(.is-leaving) {\n\t\ttransition: none;\n\t}\n}\n\n/*\n * Rise — the measured reference recipe. Arrives from below, leaves upward,\n * both ends blurred. Soft enough to sit under a headline without competing.\n */\n.brandy-rotator[data-preset=\"rise\"].is-live .brandy-rotator-slot {\n\t> * {\n\t\ttransform: translateY(8px);\n\t\tfilter: blur(4px);\n\t}\n\n\t> .is-active {\n\t\ttransform: none;\n\t\tfilter: blur(0);\n\t}\n\n\t> .is-leaving:not(.is-active) {\n\t\ttransform: translateY(-8px);\n\t\tfilter: blur(4px);\n\t}\n}\n\n/* Dissolve — the same idea with the travel removed. The quietest option. */\n.brandy-rotator[data-preset=\"dissolve\"].is-live .brandy-rotator-slot {\n\t> * {\n\t\tfilter: blur(4px);\n\t}\n\n\t> .is-active {\n\t\tfilter: blur(0);\n\t}\n}\n\n/* Flip — a split-flap board. Perspective belongs to the slot, not the child. */\n.brandy-rotator[data-preset=\"flip\"].is-live .brandy-rotator-slot {\n\tperspective: 600px;\n\n\t> * {\n\t\ttransform: rotateX(-90deg);\n\t\tbackface-visibility: hidden;\n\t}\n\n\t> .is-active {\n\t\ttransform: none;\n\t}\n\n\t> .is-leaving:not(.is-active) {\n\t\ttransform: rotateX(90deg);\n\t}\n}\n\n/*\n * Slide — an odometer, no fade.\n *\n * Stretching the children makes each one exactly cell-height, so\n * translateY(±100%) clears the cell precisely and the grid keeps sizing itself\n * to the tallest child. The alternative — a hardcoded slot height — is what\n * the reference does, and it is why its row cannot hold anything but 28px\n * logos.\n *\n * The cost is overflow: clip, which also clips shadows and focus rings on\n * children. That is confined to this preset.\n */\n.brandy-rotator[data-preset=\"slide\"].is-live .brandy-rotator-slot {\n\toverflow: clip;\n\n\t> * {\n\t\talign-self: stretch;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 1;\n\t\ttransform: translateY(100%);\n\t}\n\n\t> .is-active {\n\t\ttransform: none;\n\t}\n\n\t> .is-leaving:not(.is-active) {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n/*\n * Breakpoints retarget the column count itself rather than a track list, so the\n * slot's flex basis recalculates from the same single source.\n */\n@media (max-width: 1024px) {\n\t.brandy-rotator {\n\t\t--brandy-rotator-columns: var(--brandy-rotator-columns-tablet);\n\t}\n}\n\n@media (max-width: 600px) {\n\t.brandy-rotator {\n\t\t--brandy-rotator-columns: var(--brandy-rotator-columns-mobile);\n\t}\n}\n\n/*\n * view.js already refuses to start the clock under reduced motion. This is the\n * second line of defence, for a preference that changes after the block has\n * initialised.\n */\n@media (prefers-reduced-motion: reduce) {\n\t.brandy-rotator .brandy-rotator-slot > * {\n\t\ttransition: none;\n\t}\n}\n\n/*\n * Editor canvas, not playing.\n *\n * Same stacking and the same one-visible-child rule as the live state, so the\n * canvas shows the composed row rather than a pile of every alternate. Which\n * child is visible comes from the toolbar stepper, or from the selection when\n * an author picks a hidden one out of the List View.\n *\n * No transitions: stepping is navigation, not motion, and animating it would\n * make the canvas feel laggy rather than informative.\n */\n.brandy-rotator.is-editing .brandy-rotator-slot {\n\t> * {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition: none;\n\t}\n\n\t> .is-active {\n\t\topacity: 1;\n\t\tpointer-events: auto;\n\t}\n}\n\n/*\n * An empty slot has no child to show and would otherwise collapse to nothing,\n * leaving the author no target to click. Give it a minimum and a hint of an\n * outline so a freshly inserted rotator is visibly five slots waiting.\n */\n.brandy-rotator.is-editing .brandy-rotator-slot:not(:has(> *)) {\n\tmin-height: 40px;\n\toutline: 1px dashed currentColor;\n\toutline-offset: 4px;\n\topacity: 0.3;\n}\n\n.brandy-rotator__step-count {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0 4px;\n\tmin-width: 40px;\n\tjustify-content: center;\n\tfont-size: 12px;\n\tfont-variant-numeric: tabular-nums;\n\topacity: 0.7;\n}\n"],"names":[],"sourceRoot":""}