/* =============================================================================
   glarno - Regional motif layer
   -----------------------------------------------------------------------------
   Loads AFTER styles.css. Adds:
     - placement + tinting for the six regional motifs (motifs.svg)
     - section accents and refined surfaces on top of the flat Clay system
     - calm scroll / hover / parallax-lite motion, layered, never load-bearing
   Built only on the existing CSS custom properties (--paper, --pino-*, --coral-*,
   --border, --dur-*, --ease-*, --radius-*, --space-*). No new colours invented.

   MOTION CONTRACT
     Every motif renders in its FINAL state by default. Animation is progressive
     enhancement, triggered when the existing IntersectionObserver adds
     .is-visible to a [data-reveal] ancestor (see app.js). With JS off, motifs
     are fully drawn. With prefers-reduced-motion: reduce, all motion is removed
     and final state holds. No motion is ever needed to read or use the page.

   RULES HELD
     - No em-dash anywhere. Hyphen or rewrite only.
     - Blueberry leads. Dragonfruit (pink) appears at most once per screenful.
     - Flat surfaces, hairline borders, whitespace for depth. One shadow rule
       lives in styles.css (the phone mockup); nothing here adds new shadows.
     - Motifs sit BEHIND content at low opacity, never over text. All decorative,
       all aria-hidden by contract.
     - Zero JS dependency. CSS only.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. MOTIF LOCAL TOKENS
   Derived from the existing palette, kept local so the rest of the system is
   untouched. These never replace a styles.css token; they only compose new
   tints from blueberry and the warm greys.
----------------------------------------------------------------------------- */
:root {
  /* Faint blueberry washes for backdrops and behind-content motifs. */
  --motif-faint:     rgba(20, 110, 245, 0.07);   /* hero Cementine backdrop */
  --motif-faint-2:   rgba(20, 110, 245, 0.05);   /* separator bands */
  --motif-line:      rgba(20, 110, 245, 0.14);   /* visible-but-quiet strokes */
  --motif-line-soft: rgba(20, 110, 245, 0.10);

  /* The single allowed pink accent, kept low so it stays a guest. */
  --motif-pink:      rgba(255, 82, 194, 0.85);
  --motif-pink-soft: rgba(255, 82, 194, 0.16);

  /* Sand fill for one intarsio shard, from the warm paper family. */
  --motif-sand:      #e7e0d2;

  /* On dark (ink / blueberry-900) bands, motifs lift to a soft light tint. */
  --motif-on-dark:        rgba(131, 196, 255, 0.20); /* --pino-300 at low alpha */
  --motif-on-dark-line:   rgba(131, 196, 255, 0.34);

  /* Motif-specific motion timing, slightly longer than the UI base so a draw
     reads as deliberate, not flashy. */
  --motif-draw:  640ms;
  --motif-grow:  560ms;
  --motif-stamp: 380ms;
}

/* -----------------------------------------------------------------------------
   1. SHARED MOTIF PRIMITIVES
   A `.motif` is any inline <svg> that pulls a symbol from motifs.svg. It is
   decorative, sits in its own layer, and inherits its tint via currentColor.
----------------------------------------------------------------------------- */
.motif {
  display: block;
  fill: none;
  pointer-events: none;
  color: var(--pino-600);   /* default blueberry tint via currentColor */
}

/* Background motif layers: full-bleed within a positioned ancestor, behind
   content. The ancestor (a .section or .hero) must be position: relative. */
.motif-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Any positioned section that hosts a motif layer keeps its content above it. */
.has-motif { position: relative; isolation: isolate; }
.has-motif > .container,
.has-motif > .site-header__inner { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   2. MOTIF A - "Cementine"
   Signature backdrop + separator band. Faint blueberry on paper.
----------------------------------------------------------------------------- */

/* Full-bleed backdrop behind the hero, replacing the flat radial tint feel.
   The pattern fill is its own colour, so we set it on the host and let the
   <pattern> stroke pick up currentColor. Opacity stays in the 6 to 10% range. */
.motif-cementine {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: var(--motif-line);    /* drives the <pattern> stroke colour */
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 78% 0%, #000 30%, transparent 78%);
}
/* Hero variant: faintest, so the headline always wins. */
.hero .motif-cementine { color: rgba(20, 110, 245, 0.09); }

/* The slim repeating strip that separates major sections. Drop a
   <div class="motif-separator"> between sections, or use .section--cementine. */
.motif-separator {
  height: 1.75rem;
  width: 100%;
  color: var(--motif-line-soft);
  opacity: 1;
  pointer-events: none;
}
.motif-separator svg { width: 100%; height: 100%; display: block; }

/* A section can carry a faint cementine wash itself (e.g. the logos band). */
.section--cementine { position: relative; isolation: isolate; }
.section--cementine > .motif-cementine {
  color: var(--motif-faint-2);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.section--cementine > .container { position: relative; z-index: 1; }

/* Scaled-up single tile, the brand ornament (e.g. corner of a dark band). */
.motif-tile {
  width: 8rem;
  height: 8rem;
  color: var(--motif-line);
}

/* -----------------------------------------------------------------------------
   3. MOTIF B - "Portico"
   Arcade that frames a section header or the comparison table. Draws left to
   right on reveal.
----------------------------------------------------------------------------- */
.motif-portico {
  width: min(30rem, 100%);
  height: 3.25rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  color: var(--motif-line);
  display: block;
}
.motif-portico--start { margin-inline: 0; }   /* left-aligned section heads */

/* Single arch sitting above one column header. */
.motif-arch {
  width: 3rem;
  height: 3rem;
  color: var(--pino-400);
  margin-bottom: var(--space-3);
}

/* On a dark band, the arcade lifts to a soft light stroke. */
.section--dark .motif-portico,
.section--dark .motif-arch { color: var(--motif-on-dark-line); }

/* -----------------------------------------------------------------------------
   4. MOTIF C - "Intarsio"
   The "everything connected in one place" mark. Three shards: blueberry, sand,
   one pink, with hairline (paper) seams between them.
----------------------------------------------------------------------------- */
.motif-intarsio {
  width: 8.5rem;
  height: 8.5rem;
}
.motif-intarsio .m-intarsio__a { fill: var(--pino-500); }
.motif-intarsio .m-intarsio__b { fill: var(--motif-sand); }
.motif-intarsio .m-intarsio__c { fill: var(--coral-500); }   /* the one pink */

/* Seam colour follows the surface it sits on. */
.motif-intarsio g { stroke: var(--paper); }
.section--alt .motif-intarsio g { stroke: var(--surface-alt); }
.section--dark .motif-intarsio g { stroke: var(--surface-inverse); }

/* Small chip inside a feature-card icon tile: quieter, no pink unless asked. */
.feature-card__icon .motif-intarsio-chip,
.motif-intarsio-chip {
  width: 1.6rem;
  height: 1.6rem;
}
.motif-intarsio-chip .m-intarsio__a { fill: var(--pino-500); }
.motif-intarsio-chip .m-intarsio__b { fill: var(--pino-200); }
.motif-intarsio-chip .m-intarsio__c { fill: var(--pino-400); }
.motif-intarsio-chip g { stroke: var(--surface-card); }

/* -----------------------------------------------------------------------------
   5. MOTIF D - "Terrazza"
   Stacked climbing bars for the ROI / time-saved block. A blueberry tint ramp,
   darkest at the top step. Bars grow on reveal.
----------------------------------------------------------------------------- */
.motif-terrazza {
  width: 9rem;
  height: 7.5rem;
  color: var(--pino-500);
}
/* Ramp the four steps from light to deep so they read as climbing. */
.motif-terrazza .m-terrazza__bar:nth-child(1) { fill: var(--pino-200); }
.motif-terrazza .m-terrazza__bar:nth-child(2) { fill: var(--pino-300); }
.motif-terrazza .m-terrazza__bar:nth-child(3) { fill: var(--pino-500); }
.motif-terrazza .m-terrazza__bar:nth-child(4) { fill: var(--pino-700); }

/* -----------------------------------------------------------------------------
   6. MOTIF E - "Bollo"
   The seal of approval. Lives on trust cards, the approval card, use-case
   cards, and the final CTA. Soft single scale-in on reveal, like a stamp.
----------------------------------------------------------------------------- */
.motif-bollo {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--pino-600);
}
.motif-bollo--lg { width: 5.5rem; height: 5.5rem; }
.motif-bollo--xl { width: 9rem; height: 9rem; }

/* Pink seal is allowed once per screenful, for a single trust accent. */
.motif-bollo--pink { color: var(--coral-600); }

/* Seal sitting in a card corner. */
.motif-bollo--corner {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

/* On a dark band, the closing seal glows softly behind the CTA. */
.section--dark .motif-bollo,
.cta-band .motif-bollo { color: var(--pino-300); }
.cta-band .motif-bollo--xl {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vw, 3rem);
  opacity: 0.5;
  z-index: 0;
}

/* -----------------------------------------------------------------------------
   7. MOTIF F - "Tessera"
   The smallest unit. List bullets and chip dots. Crafted, not default.
----------------------------------------------------------------------------- */
.motif-tessera {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--pino-500);
  flex: none;
}
.motif-tessera--pink { color: var(--coral-600); }   /* the single guest chip */

/* Tessera-bulleted list. Replaces the default bullet with a mosaic chip.
   Apply .list-tessera to a <ul>; each <li> gets a chip via the inline svg the
   markup provides, or via this ::before fallback when no inline svg is present. */
.list-tessera { display: grid; gap: var(--space-3); }
.list-tessera > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--text-secondary);
}
/* Fallback chip for plain <li> (no inline svg): a small rounded square. */
.list-tessera > li:not(:has(.motif-tessera))::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.5rem;
  border-radius: 0.28rem;
  background: var(--pino-500);
  flex: none;
}

/* Crafted divider: a trio of tesserae centred between sections. */
.motif-tessera-trio {
  width: 3.5rem;
  height: 1rem;
  margin-inline: auto;
  color: var(--pino-400);
}
.motif-tessera-trio .m-tessera__chip:nth-child(2) { fill: var(--coral-500); }

/* -----------------------------------------------------------------------------
   8. SECTION ACCENTS + REFINED SURFACES
   Small, tasteful lifts on top of the flat Clay system. Hairlines and tint,
   never new shadows.
----------------------------------------------------------------------------- */

/* A thin blueberry rule under a section head, the printed-margin feel. */
.section-head--ruled { position: relative; padding-bottom: var(--space-4); }
.section-head--ruled::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--pino-500);
  border-radius: 2px;
}
.section-head--center.section-head--ruled::after { left: 50%; transform: translateX(-50%); }

/* Cards refined: warmer hairline, a hint of inner paper grain via a 1px top
   highlight. Stays flat. Pairs with the existing .feature-card / .price-card. */
.card-refined {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}
.card-refined::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

/* Use-case mini-story card: bordered, paper, with room for a corner Bollo. */
.usecase-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  padding-top: var(--space-7);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft);
}
.usecase-card:hover { transform: translateY(-4px); border-color: var(--pino-200); }
.usecase-card p { color: var(--text-secondary); }
.usecase-card .link-arrow { margin-top: auto; }
/* One tint accent per card, set with a modifier; blueberry default, pink once. */
.usecase-card--accent { border-top: 3px solid var(--pino-500); }
.usecase-card--accent-pink { border-top: 3px solid var(--coral-500); }

/* Trust card with its sealed corner. Built to sit beside the existing
   .trust-badge system without replacing it. */
.trust-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.trust-card h4 { margin-bottom: var(--space-2); }
.trust-card p { color: var(--text-secondary); font-size: var(--step-base); }

/* The expanded 3-way comparison: glarno column wins with a blueberry frame. */
.compare-col {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
}
.compare-col--win {
  border-color: var(--pino-600);
  box-shadow: inset 0 0 0 1px var(--pino-600);   /* doubled hairline, no glow */
}
.compare-col--win .compare-col__name { color: var(--pino-700); }

/* The ROI preset cards, the no-JS "calculator" feel. */
.roi-preset {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.roi-preset__result {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  font-weight: 800;
  color: var(--pino-700);
  letter-spacing: var(--ls-tight);
}
.roi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.roi-row__bar { width: 6rem; height: 1rem; color: var(--pino-500); }

/* Placeholder logo slot for the social-proof band, honest and visibly empty. */
.logo-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  height: 2.75rem;
  padding-inline: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--grey-500);
  font-size: var(--step-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-snug);
  background: color-mix(in srgb, var(--surface-card) 70%, transparent);
}

/* AI-first pillar on the dark band: a plain row with a Bollo or Intarsio mark. */
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pillar__mark { width: 2.5rem; height: 2.5rem; flex: none; color: var(--pino-300); }
.pillar h4 { color: #fff; margin-bottom: var(--space-1); }
.pillar p { color: var(--pino-100); font-size: var(--step-base); }

/* -----------------------------------------------------------------------------
   9. HOVER MOTION (calm, under 240ms)
   Buttons already lift in styles.css. Here: card lift, link-arrow nudge on
   motif links, and a quiet seal warm on hover for sealed cards.
----------------------------------------------------------------------------- */
.usecase-card .motif-bollo,
.trust-card .motif-bollo {
  transition: color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}
.usecase-card:hover .motif-bollo,
.trust-card:hover .motif-bollo {
  color: var(--pino-500);
  transform: rotate(-4deg) scale(1.04);
}

/* Motif link arrows reuse the existing .link-arrow nudge; nothing to add. */

/* -----------------------------------------------------------------------------
   10. PARALLAX-LITE (CSS only, no scroll-jacking)
   A very small, optional depth cue: backdrop motifs sit on a fixed-ish plane so
   they drift a touch slower than content as the page scrolls. This is the only
   parallax allowed by the brief's spirit: subtle, never required, and only on
   pointer + fine input devices that also allow motion. It uses background
   attachment, not JS, so there is no scroll handler and nothing can jank.
----------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Translate a hosted background motif slightly on a CSS scroll-driven
     timeline where supported. Falls back to static everywhere else. */
  @supports (animation-timeline: scroll()) {
    .motif-parallax {
      animation: motif-drift linear both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }
    @keyframes motif-drift {
      from { transform: translateY(-1.5%); }
      to   { transform: translateY(1.5%); }
    }
  }
}

/* -----------------------------------------------------------------------------
   11. MOTIF DRAW-IN / GROW-IN / STAMP (scroll motion)
   Triggered by the existing observer adding .is-visible to a [data-reveal]
   ancestor. DEFAULT (no .is-visible required to read): final state. The hidden
   start states below only apply WHILE the page can animate, so that with JS off
   the elements never get stuck hidden: see the guard at the top of each block.
----------------------------------------------------------------------------- */

/* Only arm the start-states when motion is allowed AND JS-driven reveals are in
   play. We scope every "hidden" start to a [data-reveal] ancestor, which the
   observer flips to .is-visible. If the observer never runs (JS off) the brief
   states this should render final; styles.css already forces [data-reveal] to
   visible under reduced motion, and app.js forces .is-visible when JS is off via
   IntersectionObserver fallback. To be safe with JS fully absent, we also clear
   start-states under no-JS using the .no-js hook if present, and never hide a
   motif that lacks a [data-reveal] ancestor. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Portico: arches draw left to right ---- */
  [data-reveal] .motif-portico .m-portico__arches,
  [data-reveal] .motif-arch .m-portico__arches,
  [data-reveal] .motif-portico .m-portico__base {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset var(--motif-draw) var(--ease-out);
  }
  [data-reveal] .motif-arch .m-portico__arches {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
  }
  [data-reveal].is-visible .motif-portico .m-portico__arches,
  [data-reveal].is-visible .motif-arch .m-portico__arches,
  [data-reveal].is-visible .motif-portico .m-portico__base {
    stroke-dashoffset: 0;
  }
  /* the baseline draws first, then the arches a beat later */
  [data-reveal].is-visible .motif-portico .m-portico__arches { transition-delay: 120ms; }

  /* ---- Cementine pattern: a soft fade-in of the backdrop on first reveal ---- */
  [data-reveal] .motif-cementine,
  [data-reveal] .motif-separator {
    opacity: 0;
    transition: opacity var(--motif-draw) var(--ease-out);
  }
  [data-reveal].is-visible .motif-cementine,
  [data-reveal].is-visible .motif-separator { opacity: 1; }

  /* ---- Terrazza: bars grow upward from the baseline, one after another ---- */
  [data-reveal] .motif-terrazza .m-terrazza__bar {
    transform: scaleY(0);
    transform-origin: 50% 100%;   /* anchored to each bar's own bottom edge */
    transform-box: fill-box;
    transition: transform var(--motif-grow) var(--ease-out);
  }
  [data-reveal].is-visible .motif-terrazza .m-terrazza__bar { transform: scaleY(1); }
  [data-reveal].is-visible .motif-terrazza .m-terrazza__bar:nth-child(1) { transition-delay: 60ms; }
  [data-reveal].is-visible .motif-terrazza .m-terrazza__bar:nth-child(2) { transition-delay: 160ms; }
  [data-reveal].is-visible .motif-terrazza .m-terrazza__bar:nth-child(3) { transition-delay: 260ms; }
  [data-reveal].is-visible .motif-terrazza .m-terrazza__bar:nth-child(4) { transition-delay: 360ms; }

  /* ---- Intarsio: shards settle into place (a small slide to centre) ---- */
  [data-reveal] .motif-intarsio .m-intarsio__a,
  [data-reveal] .motif-intarsio .m-intarsio__b,
  [data-reveal] .motif-intarsio .m-intarsio__c {
    opacity: 0;
    transform-box: fill-box;
    transition: opacity var(--motif-grow) var(--ease-out),
                transform var(--motif-grow) var(--ease-out);
  }
  [data-reveal] .motif-intarsio .m-intarsio__a { transform: translateX(-6%); }
  [data-reveal] .motif-intarsio .m-intarsio__b { transform: translate(6%, -6%); }
  [data-reveal] .motif-intarsio .m-intarsio__c { transform: translate(6%, 6%); }
  [data-reveal].is-visible .motif-intarsio .m-intarsio__a,
  [data-reveal].is-visible .motif-intarsio .m-intarsio__b,
  [data-reveal].is-visible .motif-intarsio .m-intarsio__c {
    opacity: 1;
    transform: none;
  }
  [data-reveal].is-visible .motif-intarsio .m-intarsio__b { transition-delay: 90ms; }
  [data-reveal].is-visible .motif-intarsio .m-intarsio__c { transition-delay: 180ms; }

  /* ---- Bollo: a single soft stamp scale-in (0.92 to 1). Once. No loop. ---- */
  [data-reveal] .motif-bollo {
    transform: scale(0.92);
    opacity: 0;
    transition: transform var(--motif-stamp) var(--ease-out),
                opacity var(--motif-stamp) var(--ease-out);
  }
  [data-reveal].is-visible .motif-bollo {
    transform: scale(1);
    opacity: 1;
  }
  /* the dotted inner ring rotates a hair as the seal presses down, like ink
     settling. Tiny, once. */
  [data-reveal] .motif-bollo .m-bollo__ring--inner {
    transform-box: view-box;
    transform-origin: 32px 32px;
    transform: rotate(-12deg);
    transition: transform var(--motif-draw) var(--ease-out);
  }
  [data-reveal].is-visible .motif-bollo .m-bollo__ring--inner { transform: rotate(0deg); }

  /* the approval tick draws on after the seal lands */
  [data-reveal] .motif-bollo .m-bollo__tick {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset var(--motif-draw) var(--ease-out) 160ms;
  }
  [data-reveal].is-visible .motif-bollo .m-bollo__tick { stroke-dashoffset: 0; }

  /* ---- Tessera: chips pop in, lightly staggered ---- */
  [data-reveal] .motif-tessera-trio .m-tessera__chip {
    opacity: 0;
    transform: scale(0.6);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: opacity var(--motif-stamp) var(--ease-out),
                transform var(--motif-stamp) var(--ease-out);
  }
  [data-reveal].is-visible .motif-tessera-trio .m-tessera__chip { opacity: 1; transform: scale(1); }
  [data-reveal].is-visible .motif-tessera-trio .m-tessera__chip:nth-child(2) { transition-delay: 70ms; }
  [data-reveal].is-visible .motif-tessera-trio .m-tessera__chip:nth-child(3) { transition-delay: 140ms; }
}

/* -----------------------------------------------------------------------------
   12. NO-JS SAFETY NET
   If a page is served with a `no-js` class on <html> (removed by app.js when it
   boots), force every motif to its final, fully-drawn state so nothing is ever
   stuck hidden without scripting. This is belt-and-braces on top of app.js's
   own "add .is-visible to everything" fallback.
----------------------------------------------------------------------------- */
html.no-js [data-reveal] .motif-portico .m-portico__arches,
html.no-js [data-reveal] .motif-portico .m-portico__base,
html.no-js [data-reveal] .motif-arch .m-portico__arches { stroke-dashoffset: 0 !important; }
html.no-js [data-reveal] .motif-cementine,
html.no-js [data-reveal] .motif-separator { opacity: 1 !important; }
html.no-js [data-reveal] .motif-terrazza .m-terrazza__bar { transform: scaleY(1) !important; }
html.no-js [data-reveal] .motif-intarsio .m-intarsio__a,
html.no-js [data-reveal] .motif-intarsio .m-intarsio__b,
html.no-js [data-reveal] .motif-intarsio .m-intarsio__c { opacity: 1 !important; transform: none !important; }
html.no-js [data-reveal] .motif-bollo { opacity: 1 !important; transform: none !important; }
html.no-js [data-reveal] .motif-bollo .m-bollo__ring--inner { transform: rotate(0deg) !important; }
html.no-js [data-reveal] .motif-bollo .m-bollo__tick { stroke-dashoffset: 0 !important; }
html.no-js [data-reveal] .motif-tessera-trio .m-tessera__chip { opacity: 1 !important; transform: none !important; }

/* -----------------------------------------------------------------------------
   13. REDUCED MOTION
   styles.css already neutralises transitions and reveals globally. We make the
   intent explicit for motifs: everything in final state, no draw, no grow, no
   stamp, no parallax. Reading the page never needs motion.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .motif-portico .m-portico__arches,
  .motif-portico .m-portico__base,
  .motif-arch .m-portico__arches { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .motif-cementine, .motif-separator { opacity: 1 !important; }
  .motif-terrazza .m-terrazza__bar { transform: none !important; }
  .motif-intarsio .m-intarsio__a,
  .motif-intarsio .m-intarsio__b,
  .motif-intarsio .m-intarsio__c { opacity: 1 !important; transform: none !important; }
  .motif-bollo { opacity: 1 !important; transform: none !important; }
  .motif-bollo .m-bollo__ring--inner { transform: rotate(0deg) !important; }
  .motif-bollo .m-bollo__tick { stroke-dashoffset: 0 !important; }
  .motif-tessera-trio .m-tessera__chip { opacity: 1 !important; transform: none !important; }
  .motif-parallax { animation: none !important; transform: none !important; }
  /* hover transforms held off too */
  .usecase-card:hover .motif-bollo,
  .trust-card:hover .motif-bollo { transform: none !important; }
}

/* -----------------------------------------------------------------------------
   14. RESPONSIVE TRIMS
   Keep motifs out of the way on small screens: shrink, hide the heaviest
   backdrops where they would compete with copy on a phone.
----------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .motif-portico { height: 2.5rem; margin-bottom: var(--space-4); }
  .motif-intarsio { width: 6.5rem; height: 6.5rem; }
  .motif-terrazza { width: 7.5rem; height: 6.25rem; }
  .cta-band .motif-bollo--xl { opacity: 0.35; width: 6rem; height: 6rem; }
  /* The hero Cementine backdrop stays, but even fainter, so phone copy wins. */
  .hero .motif-cementine { color: rgba(20, 110, 245, 0.06); }
}