{"version":3,"file":"blocks/ScrollStatement/style-index.css","mappings":";;;AAcA;EACC;AAbD;AAeC;EACC;EACA;EACA;EACA;EAKA;EACA;EACA;AAjBF;AAoBC;EACC;EACA;EACA;AAlBF;;AAsBA;EACC;EAKA;EACA;EACA;AAvBD;;AA4BA;EACC;AAzBD;AA2BC;EACC;EACA;EACA;AAzBF;AA4BC;EACC;EACA;AA1BF,C","sources":["webpack://brandy-blocks/./src/blocks/ScrollStatement/style.scss"],"sourcesContent":["// Scroll Statement\n//\n// The host is tall — it is the scroll runway. The viewport pins inside it and\n// clips. The track stays in normal flow: every line sits in the slot it would\n// occupy anyway and is pushed *down* by whatever is left of its own travel, so\n// it rises into place as its share of the scroll completes and then stays.\n//\n// One scalar per line drives everything: --statement-progress, 0 before the\n// line has started arriving and 1 once it has landed. It defaults to 1 so a\n// no-JS page shows the finished stack.\n//\n// The block takes no attributes. Only --statement-count (line count, sets the\n// runway) and --statement-gap (blockGap) come from PHP.\n\n.brandy-scroll-statement {\n\tmin-height: calc(var(--statement-count, 1) * 100vh + 100vh);\n\n\t&__viewport {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\theight: 100vh;\n\t\toverflow: hidden;\n\n\t\t// Normal flow alone would pin the stack to the top of the frame.\n\t\t// Centring is a layout property rather than a transform, so a landed\n\t\t// line still rests at its natural position with no offset applied.\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t}\n\n\t&__track {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--statement-gap, clamp(1rem, 3vh, 2.5rem));\n\t}\n}\n\n.brandy-statement-line {\n\t--statement-progress: 1;\n\n\t// Offset and opacity are driven by the same scalar — measured on the\n\t// reference, where an element 145px short of its slot sat at 0.55 opacity\n\t// against a 310px travel (1 - 145/310 = 0.53). No separate easing.\n\topacity: var(--statement-progress);\n\ttransform: translateY(calc((1 - var(--statement-progress)) * 300px));\n\twill-change: opacity, transform;\n}\n\n// Static mode — reduced motion, narrow viewport, a single line, or no JS.\n// The editor reuses this class so there is one static layout, not two.\n.brandy-scroll-statement--static {\n\tmin-height: 0;\n\n\t.brandy-scroll-statement__viewport {\n\t\tposition: static;\n\t\theight: auto;\n\t\toverflow: visible;\n\t}\n\n\t.brandy-statement-line {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n"],"names":[],"sourceRoot":""}