/* ================================================================== Bloum — site styles Geometry & typography extracted from Figma (1440 frame, see design/). Fonts: Inter (nav/body), Averia Serif Libre (flower quotes). TODO before production: self-host fonts (GDPR) instead of Google CDN. Layout model (cf. mindmarket.com): an accent-coloured hero that opens with the page's own words (kicker/tagline/intro) and the flower scene, with a full-bleed off-white sheet below it: .page carries the papier surface edge-to-edge (big rounded top corners, no visible container), pads its content down to the Figma column, and runs long: card, then the secties story blocks, then the giant wordmark closing the page above the footer. The flower, vases and menu are FIXED to the viewport, with the scene in the FOREGROUND — sized so it never crosses the text column. scene.js adds scroll-driven sway and stamps .is-in on the scene for the entrance reveal; the sprouts (flowers from other pages) then grow out of the vase mouths after a long beat. ================================================================== */ :root { /* Scheme accents */ --bladgroen: #53a058; --koraalrood: #f9434f; --violetpaars:#7e25b7; --zonnegeel: #fec339; /* Palette */ --inkt: #040404; --wit: #ffffff; --papier: #f3efe3; --accent: var(--bladgroen); --col: 566px; /* content column, from Figma */ /* Averia's track, straight from the huisstijl handboek: "Letterafstand (Letter Spacing): -80" — Adobe tracking, 1/1000 em, so -.08em. In em and not px because the handbook sets it once for every size: a quote at theatre size has to track as tight as a card line, and a fixed px value drifts open as the type grows. */ --serif-track: -.08em; } /* --accent (and the two inks derived from it) are REGISTERED so they animate: the one-pager flips data-scheme on while you scroll and every accent-derived colour — canvas, tagline tint, quote bands — crossfades through the transition on html below. --ink-on: ALL text ON the accent canvas, taglines included (the design bans greys and tints on type). Ink everywhere except violetpaars, which is too dark for ink (2.8:1) and flips to papier (7.4:1). --tint-deep: a darkened accent tint (lightened on violetpaars). No longer carries display type; it survives on the small solid accents: the theatre's quiet type. */ @property --accent { syntax: ''; inherits: true; initial-value: #53a058; } @property --ink-on { syntax: ''; inherits: true; initial-value: #040404; } @property --tint-deep { syntax: ''; inherits: true; initial-value: #234325; } /* --accent-ink: the ink for anything PAINTED IN THE ACCENT — the nav's active chip, the mobile menusheet. It used to be --ink-on, and that was right while the canvas WAS the accent. Since the 2026-08 split it is not: --ink-on now answers to [data-canvas], which is paper or white or green on the one-pager and therefore always ink — so the Shop chip painted itself violetpaars and then wrote on it in BLACK (2.8:1, and it looked like a hole). This one answers to the scheme, where the accent actually lives. Registered so it crossfades with it. */ @property --accent-ink { syntax: ''; inherits: true; initial-value: #040404; } /* --leaf-light/--leaf-dark: the two leaf greens every flower SVG is inked with (templates/_svg, fill="var(--leaf-…)"). Registered so the foliage recolours THROUGH a scheme crossfade like everything else: leaves must keep contrast against whatever canvas is behind them — on bladgroen the light leaves would sink into the canvas, on violetpaars the dark ones sink instead (overrides below). */ @property --leaf-light { syntax: ''; inherits: true; initial-value: #53a058; } @property --leaf-dark { syntax: ''; inherits: true; initial-value: #007553; } /* --canvas: THE SURFACE, split out from --accent (2026-08). Four full-bleed ~full-saturation hues, one per screen, read as children's illustration however good the shapes are — and on the photo sections the canvas fought the photographs, which carry their own coloured grounds (purple on yellow on green). So the accent stops painting the page. --accent still flips per section and still drives everything SMALL — type accents, CTA fills, leaf tints, bloom marks, the nav chip — while --canvas carries the surface, and the surface is paper almost everywhere. Colour became an event. Default: the canvas IS the accent. The one-pager opts out per section via [data-canvas] below. */ @property --canvas { syntax: ''; inherits: true; initial-value: #f3efe3; } /* NB: each scheme's --tint-deep mixes from its own STATIC palette var, never from the animating --accent — a transition toward a value that is itself mid-transition would chase its target and lag. */ :root { --ink-on: var(--inkt); --accent-ink: var(--inkt); --tint-deep: color-mix(in srgb, var(--bladgroen) 42%, var(--inkt)); --leaf-light: #53a058; --leaf-dark: #007553; --canvas: var(--accent); } html { transition: --accent .9s ease, --ink-on .9s ease, --tint-deep .9s ease, --leaf-light .9s ease, --leaf-dark .9s ease, --canvas .9s ease, --accent-ink .9s ease; } /* ---- the one-pager's surfaces ---- onepage.js writes [data-canvas] on from each panel's data-panel-canvas, defaulting to papier. The scheme keeps flipping underneath, so the accent crossfade still runs — you just stop seeing it as a wall of colour. Down the page: paper, GREEN, paper, WHITE, GREEN, paper. --ink-on is restated per surface because it means "all text ON the canvas" and the canvas is no longer the accent: ink clears 6.5:1 on bladgroen and ~15:1 on papier and wit, so every surface here takes ink. Qualified with html so these OUTRANK the [data-scheme] blocks below, which also set --ink-on and sit later in the file: on the white carousel the scheme is still violetpaars, and its papier ink turned the headline invisible. Canvas decides the ink; scheme no longer can. */ html[data-canvas="papier"] { --canvas: var(--papier); --ink-on: var(--inkt); } html[data-canvas="wit"] { --canvas: var(--wit); --ink-on: var(--inkt); } html[data-canvas="bladgroen"] { --canvas: var(--bladgroen); --ink-on: var(--inkt); } /* --accent-ink per scheme: measured against the ACCENT (6.5:1 on bladgroen, 6:1 on koraalrood, 13:1 on zonnegeel — violetpaars is too dark for ink at 2.8:1 and takes papier at 6.4:1). */ [data-scheme="bladgroen"] { --accent: var(--bladgroen); --accent-ink: var(--inkt); /* bladgroen leaves on the bladgroen canvas are invisible: all foliage goes donker groen here (the over-bloum hero's own ink) */ --leaf-light: #007553; } [data-scheme="koraalrood"] { --accent: var(--koraalrood); --accent-ink: var(--inkt); --tint-deep: color-mix(in srgb, var(--koraalrood) 42%, var(--inkt)); } [data-scheme="violetpaars"] { --accent: var(--violetpaars); --ink-on: var(--papier); --accent-ink: var(--papier); --tint-deep: color-mix(in srgb, var(--violetpaars) 32%, var(--papier)); /* donker groen sinks into the deep violet: dark leaves lighten up (moot on the one-pager, where the whole violet scene flattens lilac — this serves any subpage on the scheme) */ --leaf-dark: #53a058; } [data-scheme="zonnegeel"] { --accent: var(--zonnegeel); --accent-ink: var(--inkt); --tint-deep: color-mix(in srgb, var(--zonnegeel) 42%, var(--inkt)); } /* ---- per-page scene geometry ---- Each flower is a different illustration; offsets are % of the illustration box, sizes are vw at the 1440 reference frame. --quote-* places the quote inside the bloom (cx = horizontal center). [data-page] carries the FLOWER + quote geometry; the vase pair lives in its own [data-vases] scope so the one-pager can remix pairs per section. */ [data-page="over-bloum"] { --bubble-ink: #ffffff; --flower-w: 34.72vw; --flower-right: -2.22vw; --flower-ar: 0.4643; --quote-top: 28.4%; --quote-cx: 49.1%; --quote-w: 66%; --quote-fs: 4.8cqw; } [data-page="waar-te-koop"] { --bubble-ink: #040404; --flower-w: 46.18vw; --flower-right: -8.95vw; --flower-ar: 0.6159; --quote-top: 23.5%; --quote-cx: 53.7%; --quote-w: 34%; --quote-fs: 3.61cqw; } [data-page="producten"] { --bubble-ink: #040404; --flower-w: 44.35vw; --flower-right: -11.43vw; --flower-ar: 0.5941; --quote-top: 21.5%; --quote-cx: 42.2%; --quote-w: 45%; --quote-fs: 3.76cqw; } /* ---- per-pair vase geometry ---- --sprout-* places each DEFAULT guest flower (the server-rendered pair) so its stem base sits INSIDE its vase's black mouth oval: l/b/w position the sprout in the vases box, o is the grow origin = the measured stem-base point of that flower's artwork, and `water` is the waterline — the y (% of the sprout box) of the mouth oval's centre, where the stem visually enters the vase (the sprout is clipped there, see .sprout). All derived from SVG geometry: mouth-oval bbox centres and lowest dark stem point per flower, measured by rasterizing the artwork (canvas rig). At every waterline only the stem crosses the line, inside the mouth oval — so the clipped edge is always hidden black-on-black. When JS re-guests a vase (section changes on the one-pager, vase clicks), placeSprout() recomputes the same numbers from the FLOWER_ANCHOR/VASE_MOUTH tables in scene.js. */ [data-vases="over-bloum"] { --vases-w: 16.23vw; --vases-ar: 0.8432; --vase-a-l: 0%; --vase-a-t: 25.61%; --vase-a-w: 63.18%; --vase-a-z: 2; --vase-b-l: 57.33%; --vase-b-t: 0%; --vase-b-w: 42.67%; --vase-b-z: 1; --sprout-a-l: 1.2%; --sprout-a-b: 69.3%; --sprout-a-w: 58.1%; --sprout-a-o: 49.8% 99.6%; --sprout-a-water: 98.37%; /* sprout-b statics fit MARGRIET (the one-pager's opening guest) */ --sprout-b-l: 56.59%; --sprout-b-b: 95.67%; --sprout-b-w: 39.26%; --sprout-b-o: 48.6% 99.5%; --sprout-b-water: 98.3%; } [data-vases="waar-te-koop"] { --vases-w: 15.39vw; --vases-ar: 0.7782; /* vase-b deliberately small (it used to rival vase-a in height and the two guest flowers tangled): floored via t = boxH − w/ar. */ --vase-a-l: 0%; --vase-a-t: 0%; --vase-a-w: 63.32%; --vase-a-z: 1; --vase-b-l: 50%; --vase-b-t: 22.66%; --vase-b-w: 46%; --vase-b-z: 2; --sprout-a-l: -1.8%; --sprout-a-b: 86.4%; --sprout-a-w: 58.3%; --sprout-a-o: 51.5% 90.6%; --sprout-a-water: 89.68%; --sprout-b-l: 44.61%; --sprout-b-b: 73.16%; --sprout-b-w: 42.3%; --sprout-b-o: 64.2% 100%; --sprout-b-water: 98.8%; } [data-vases="producten"] { --vases-w: 15.86vw; --vases-ar: 0.8126; --vase-a-l: 0%; --vase-a-t: 27.53%; --vase-a-w: 62.06%; --vase-a-z: 2; --vase-b-l: 38.54%; --vase-b-t: 0%; --vase-b-w: 61.46%; --vase-b-z: 1; --sprout-a-l: 3.1%; --sprout-a-b: 58.3%; --sprout-a-w: 57.1%; --sprout-a-o: 51.5% 90.6%; --sprout-a-water: 89.38%; --sprout-b-l: 29.7%; --sprout-b-b: 95.5%; --sprout-b-w: 56.5%; --sprout-b-o: 64.2% 100%; --sprout-b-water: 98.76%; } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } /* two-stop canvas bg: rubber-band overscroll shows the canvas above the page and papier below it, matching the hero/sheet split (on the one-pager's paper surfaces the two stops collapse into one) */ html { -webkit-text-size-adjust: 100%; background: linear-gradient(to bottom, var(--canvas) 0 50%, var(--papier) 50%); } body { margin: 0; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; } body { min-height: 100svh; display: flex; flex-direction: column; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--inkt); background: var(--canvas); -webkit-font-smoothing: antialiased; } /* ================================================================== Menu — fixed white pill, floats over everything: wordmark on the left (home link), page links in the middle, socials on the right. Hover/active: off-white chip, text in the TARGET page's accent (--nav-accent, set per link in _layout.twig; mixed with a little ink so light accents like zonnegeel stay readable on the chip). ================================================================== */ .topnav { position: fixed; z-index: 20; top: 20px; left: 50%; transform: translateX(-50%); width: min(1040px, calc(100vw - 32px)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--wit); padding: 11px 20px; border-radius: 10px; box-shadow: 0 4px 5px rgba(0, 0, 0, .1); font-size: .875rem; font-weight: 600; line-height: 1.5; } .topnav__brand { display: block; } .topnav__brand img { height: 32px; width: auto; } .topnav__links { display: flex; gap: 2px; } .topnav__link { text-decoration: none; white-space: nowrap; padding: 7px 14px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; } .topnav__link:hover { background: var(--papier); color: var(--nav-accent, var(--accent)); color: color-mix(in srgb, var(--nav-accent, var(--accent)) 68%, var(--inkt)); } /* The active chip wears the TARGET section's accent, so its ink has to be the target's too: --nav-ink, set per link beside --nav-accent in _nav.twig. It used to ask --ink-on, which since the canvas/accent split belongs to the surface you are standing on and is ink on all three one-pager canvases — so the violet Shop chip got black text at 2.8:1 and read as a hole in the pill. */ .topnav__link.is-active { background: var(--nav-accent, var(--accent)); color: var(--nav-ink, var(--accent-ink)); } .topnav__social { display: flex; gap: 4px; } .topnav__social a { display: block; padding: 8px; border-radius: 8px; color: var(--inkt); transition: color .15s ease, background-color .15s ease; } .topnav__social a:hover { background: var(--papier); } .topnav__social svg { width: 17px; height: 17px; fill: currentColor; } /* ---- the small-screen menu (≤760px): the pill keeps the wordmark and a menu button; links and socials move onto the MENUSHEET, an accent sheet that springs up from the bottom edge the way a page transition does (nav.js). The sheet rides UNDER the pill (z 18 < 20), so the button stays on top and its two bars spring into a cross. The canvas is the LIVE accent: mid-one-pager the menu opens in the current section's colour, with scheme-aware inks — and the active section wears the same papier chip as the desktop links. ---- */ .topnav__menu, .menusheet { display: none; } @media (max-width: 760px) { .topnav__menu { display: grid; gap: 5px; border: 0; padding: 13px 10px; /* a ~44px tap target… */ margin-block: -8px; /* …that doesn't fatten the slim pill */ background: none; border-radius: 8px; cursor: pointer; } .topnav__menu-bar { width: 20px; height: 2px; border-radius: 1px; background: var(--inkt); transition: translate .3s ease, rotate .45s cubic-bezier(.34, 1.56, .64, 1); } .topnav__menu[aria-expanded="true"] .topnav__menu-bar:first-child { translate: 0 3.5px; rotate: 45deg; } .topnav__menu[aria-expanded="true"] .topnav__menu-bar:last-child { translate: 0 -3.5px; rotate: -45deg; } .menusheet { position: fixed; inset: 0; z-index: 18; display: flex; flex-direction: column; gap: 24px; padding: calc(92px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom)); /* the sheet IS the accent, so its ink is the accent's — not the canvas's (--ink-on), which opened the menu in black on violet */ background: var(--accent); color: var(--accent-ink); border-radius: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px) 0 0; box-shadow: 0 -16px 48px rgba(4, 4, 4, .25); translate: 0 103%; /* a hair past 100% so the shadow starts offscreen */ overflow-y: auto; /* tiny landscape screens still reach */ overscroll-behavior: contain; /* …the socials; the page stays put */ } .menusheet[hidden] { display: none; } .menusheet.is-open { translate: 0 0; } .menusheet__links { display: grid; justify-items: start; gap: 6px; margin-block: auto; } .menusheet__link { padding: 6px 16px; margin-left: -16px; /* the chip pad stays off the text's left rhythm */ border-radius: 14px; text-decoration: none; font-size: clamp(1.9rem, 9.5vw, 2.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.25; color: var(--accent-ink); } .menusheet__link.is-active { /* same vibrant chip as the topnav — but the sheet IS the accent, so the chip inverts: papier chip, accent text. The accent is mixed with ink exactly as the topnav's hover does it: zonnegeel at full strength on papier is 1.4:1, a yellow ghost. */ background: var(--papier); color: color-mix(in srgb, var(--nav-accent, var(--accent)) 68%, var(--inkt)); } .menusheet__social { display: flex; gap: 12px; } .menusheet__social a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--papier); color: var(--inkt); } .menusheet__social svg { width: 22px; height: 22px; fill: currentColor; } } @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .menusheet { transition: translate .6s cubic-bezier(.2, .9, .3, 1.15); } /* the words follow the sheet up, one beat apart, springing to rest; closing drops the delays so everything leaves with the sheet */ .menusheet__link, .menusheet__social { opacity: 0; translate: 0 26px; transition: opacity .35s ease, translate .55s cubic-bezier(.3, 1.4, .45, 1); } .menusheet.is-open .menusheet__link, .menusheet.is-open .menusheet__social { opacity: 1; translate: 0 0; transition-delay: calc(.1s + var(--mi, 4) * .055s); } } /* ================================================================== Hero — the colored section opens with the page's own words (mindmarket-style): a giant tagline in a darkened tint of the page accent, then the intro. Text keeps left so the fixed foreground flower owns the right side; min-height leaves the sheet edge peeking at the fold, inviting scroll. ================================================================== */ .hero { position: relative; z-index: 1; /* hero + .page's accent top margin together stay under ~94svh, so the sheet edge peeks above the fold and invites the scroll */ min-height: 80svh; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); padding: calc(88px + 5.5vw) clamp(20px, 7.8vw, 128px) clamp(64px, 10svh, 140px); color: var(--ink-on); } .hero__tagline { margin: 0; max-width: min(58vw, 10ch); font-size: clamp(3rem, 8.8vw, 8.25rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; /* full-strength ink (papier on violetpaars): no tints, no greys */ color: var(--ink-on); } /* ---- springy taglines: scrollfx.js splits each headline into .word/ .ltr spans and stamps .is-live whenever it scrolls into view; every visit replays the letter-by-letter pop. The split only happens when JS (and motion) is on, so the plain headline stands without it. ---- */ .hero__tagline .word { display: inline-block; white-space: nowrap; } .hero__tagline .ltr { display: inline-block; } .hero__tagline .ltr:nth-child(even) { --tilt: -1; } .hero__tagline.is-split .ltr { opacity: 0; transform: translateY(.6em) scale(.4) rotate(calc(var(--tilt, 1) * -8deg)); } .hero__tagline.is-split.is-live .ltr { animation: ltr-pop .55s cubic-bezier(.3, 1.4, .4, 1) calc(var(--i, 0) * .04s) forwards; } @keyframes ltr-pop { 0% { opacity: 0; transform: translateY(.6em) scale(.4) rotate(calc(var(--tilt, 1) * -8deg)); } 60% { opacity: 1; transform: translateY(-.09em) scale(1.06) rotate(calc(var(--tilt, 1) * 3deg)); } 100% { opacity: 1; transform: none; } } .wordmark img { width: 100%; height: auto; } /* ================================================================== Scene — flower + vases, fixed to the viewport (scene.js animates). Sits ABOVE the content (z 4 > .page's 3): the flower is never eclipsed by anything — its width is capped instead so it cannot cross the text column (see .flower). ================================================================== */ .scene { position: fixed; inset: 0; z-index: 4; pointer-events: none; } .flower { position: absolute; /* Foreground flower must never block text: cap the width so the left edge stays a 24px gutter away from the centred column. Short pages shrink it further via --flower-scale (set by scene.js); at the end of the one-pager --scene-scale (html.is-end) makes room for the wordmark. */ --flower-w-r: calc(min(clamp(230px, var(--flower-w), 780px), calc(50vw - var(--col) / 2 - 24px - var(--flower-right))) * var(--flower-scale, 1) * var(--scene-scale, 1)); /* Hangs level with the hero tagline — but anchored to the floor: on tall viewports the flower slides down so the stem's end stays ≥12.5% of the viewport below the bottom edge, deeper than the max scroll rise (12vh, scene.js), so the stem never lifts out of the page bottom. (112.5% = scene height + reserve; .scene is the containing block.) */ top: max(calc(88px + 5.5vw), calc(112.5% - var(--flower-w-r) / var(--flower-ar))); /* the offscreen shift scales with the flower, keeping the same crop — BOTH scales: without --scene-scale the producten flower (×.55) kept its full-size shift and all but vanished off the right edge */ right: calc(var(--flower-right) * var(--flower-scale, 1) * var(--scene-scale, 1)); width: var(--flower-w-r); aspect-ratio: var(--flower-ar); container-type: inline-size; transform-origin: 55% 88%; will-change: transform; } .flower__inner { width: 100%; height: 100%; transform-origin: 55% 95%; animation: flower-sway 11s ease-in-out infinite alternate; } .flower__inner svg { width: 100%; height: 100%; display: block; overflow: visible; } .flower__text { position: absolute; top: var(--quote-top); left: var(--quote-cx); transform: translateX(-50%) rotate(calc(var(--wind, 0) * 4deg)); transform-origin: 50% 130%; width: var(--quote-w); margin: 0; text-align: center; font-family: "Averia Serif Libre", Georgia, serif; font-size: var(--quote-fs); line-height: 1.2; letter-spacing: var(--serif-track); color: var(--bubble-ink); } /* ---- the bloemtekst is TYPED into the bloom and nothing else: no fade, no scale, no rotate, no transition of any kind on the quote. The only motion is characters arriving (scene.js) — the element is simply there from the start, holding an empty string until the typewriter fills it. Anything that eased the whole line in read as a zoom, which the flower (flat paper artwork) can never be. The typed line lives on .flower__tease; the real .flower__text is hidden outright and kept for assistive tech. Keyed on .js: without JS there is no tease element and the quote simply shows. The flower's painted shapes take the pointer (visiblePainted), so only the artwork is clickable, never its empty bounding box. ---- */ .js .flower .flower__text:not(.flower__tease) { opacity: 0; pointer-events: none; } .js .flower .flower__tease { white-space: pre-line; /* typed text keeps its line breaks */ pointer-events: auto; cursor: pointer; } .js .flower.has-quote .flower__inner svg { pointer-events: visiblePainted; cursor: pointer; } /* The caret: an ink stroke riding the end of the line. It holds STEADY through the keystrokes — a caret blinking while the letters land is two rhythms fighting — then blinks a few times at the finished sentence and is gone, so the quote is left as a clean line of type. An empty ::after sits on the text baseline and inherits the quote's own colour and size. */ .js .flower .flower__tease::after { content: ""; display: inline-block; width: .07em; height: .82em; margin-left: .06em; vertical-align: -.1em; background: currentColor; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .js .flower.is-typing .flower__tease::after { opacity: .72; } .js .flower.is-open:not(.is-typing) .flower__tease::after { animation: quote-caret .62s steps(1) 4 forwards; } @keyframes quote-caret { 0%, 50% { opacity: .72; } 50.01%, 100% { opacity: 0; } } } /* ---- flower parts: idle breathing (individual `rotate` keyframes) composes with the wind response (`transform`, driven by --wind from scene.js). transform-box makes origins local to each part. The stem stays rigid inside the SVG — whole-plant sway lives on .flower/.flower__inner — so hinged parts never drift off it. ---- */ .f-bloom, .f-leaf, .f-stamen, .f-sprig { transform-box: fill-box; transform: rotate(calc(var(--wind, 0) * var(--winddir, 1) * var(--amp, 4deg))); } .f-bloom { --amp: 5deg; animation: sway-soft 6.5s -2.1s ease-in-out infinite alternate; } .f-leaf { --amp: 6deg; animation: sway-leaf 5.5s ease-in-out infinite alternate; } .f-leaf-2 { --amp: -5deg; animation-duration: 7.2s; animation-delay: -1.6s; } .f-leaf-3 { --amp: 7deg; animation-duration: 6.1s; animation-delay: -3.1s; } .f-stamen { --amp: 13deg; animation: sway-stamen 4.6s ease-in-out infinite alternate; } .f-stamen-2 { animation-delay: -1.4s; animation-duration: 5.3s; } .f-stamen-3 { animation-delay: -2.6s; animation-duration: 4.1s; } .f-sprig { --amp: 5deg; animation: sway-leaf 7.6s -2.4s ease-in-out infinite alternate; } /* This artwork is mirrored by a wrapper ; flip its wind response so the parts lean the same way as the (screen-space) container sway. */ [data-flower="waar-te-koop"] { --winddir: -1; } /* Hinge points — measured from the SVG geometry (closest point of each part's outline to the stem centerline; scratchpad/measure.html rig). Each part pivots exactly where it attaches — leaves/sprigs on the stem, the bloom on the stem overlap, stamens where they sit on the bloom (and they ride inside the bloom group) — so attachments cannot open up during movement. Keyed on the