Heading Level 1

<div class="flow">
  <p>First paragraph</p>
  <p>Default spacing above</p>
  <p class="flow-space-xl">Extra spacing above</p>
</div>

transition: background-color var(--transition-speed) ease;
transition: transform var(--transition-speed-slow) ease;

<article class="flow">
  <h2>Title</h2>
  <p>First paragraph...</p>
  <p>Second paragraph...</p>
</article>

<div class="wrapper">
  <!-- Content constrained to 75rem -->
</div>

<div class="wrapper" data-width="narrow">
  <!-- Content constrained to 60rem -->
</div>

<div class="cluster">
  <span class="tag">Photography</span>
  <span class="tag">Art</span>
  <span class="tag">Print</span>
</div>

<div class="sidebar" style="--sidebar-width: 15rem;">
  <aside>Filters</aside>
  <main>Product grid</main>
</div>

<div class="switcher">
  <div class="pricing-card">Basic</div>
  <div class="pricing-card">Pro</div>
  <div class="pricing-card">Enterprise</div>
</div>

<div class="auto-grid" style="--auto-grid-min-item-size: 16rem;">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="column-layout" data-columns="3">...</div>
<div class="column-layout" data-columns="60-40">...</div>

<div class="wrapper">
  <p>Wrapped content...</p>
  <div class="full-bleed">
    <!-- Full viewport width -->
  </div>
  <p>Back to wrapped...</p>
</div>

<div class="flex">
  <div>Item A</div>
  <div>Item B</div>
</div>

<div class="grid" style="grid-template-columns: 1fr 2fr; gap: var(--space-m);">
  <aside>...</aside>
  <main>...</main>
</div>

.text-step--3 through .text-step-5
.text-center | .text-start | .text-end

.measure-narrow      (max-inline-size: 45ch)
.measure             (max-inline-size: 65ch)
.measure-wide        (max-inline-size: 80ch)
.measure-extra-wide  (max-inline-size: unset)
.center-inline       (margin-inline: auto)
.justify-center      (justify-items: center)

.flow-space-3xs | .flow-space-2xs | .flow-space-xs
.flow-space-s | .flow-space-m | .flow-space-l
.flow-space-xl | .flow-space-2xl | .flow-space-3xl

.gap-3xs | .gap-2xs | .gap-xs
.gap-s | .gap-m | .gap-l
.gap-xl | .gap-2xl | .gap-3xl

<div class="flex items-center content-between gap-s">
  <span>Left</span>
  <span>Right</span>
</div>

.u-subtitle   (serif, step-1, italic)
.u-title      (text-wrap: balance)
.u-price-vat  (step--2, text-40 color)

.font-semibold       (font-family: var(--ff-semibold))
.u-caps              (uppercase + letter-spacing, customise via --_caps-tracking)
.u-nowrap            (white-space: nowrap)
.circle              (border-radius: 50%)
.rounded-l           (border-radius: var(--border-radius-l))
.u-cover-img         (width/height 100%, object-fit: cover, display: block)

<div class="u-img-swap">
  <img src="front.jpg" alt="..." />
  <img src="back.jpg" alt="..." />
</div>

<!-- On a button — hides label via color: transparent -->
<button class="u-button u-button--solid u-spinner" style="color: transparent;">
  Loading
</button>

<!-- Standalone -->
<span class="u-spinner-standalone"></span>

<div class="u-lined-link">
  <a href="#section-id">Link text ↓</a>
</div>

<!-- Compose multiple utilities -->
<a class="card u-hover-rise" href="...">
  <div class="u-hover-zoom"><img src="..." /></div>
  <span class="u-hover-arrow">Learn more →</span>
</a>

.u-reveal           /* scroll: fade + scale */
.u-reveal-up        /* scroll: fade + slide up */
.u-reveal-zoom      /* scroll: child image zoom */
.u-stagger          /* entrance: cascading fade-up (data-delay="1"–"6") */
.u-stagger-fade     /* entrance: pure opacity fade-in */

.u-shake   /* Horizontal shake animation, 0.5s ease */
/* Customise distance via --_shake-distance (default 4px) */

.visually-hidden
/* Hides content visually but keeps it accessible to screen readers */

/* Available keyframes */
@keyframes fade-in   /* opacity: 0 → 1 */
@keyframes fade-up   /* opacity + translateY */
@keyframes scale-up  /* opacity + scale */
@keyframes scale-in  /* scale only (for zoom effects) */
@keyframes spin      /* rotate 360° */

/* Customizable properties */
.my-element {
  --_fade-distance: 1.5rem;   /* fade-up travel distance */
  --_scale-from: 0.98;        /* scale-up starting scale */
  --_scale-to: 1.03;          /* scale-in ending scale */
}

<div class="u-reveal">Fades in with scale</div>
<div class="u-reveal-up">Slides up into view</div>
<div class="u-reveal-zoom">
  <img src="..." alt="..." />  <!-- Image zooms as you scroll -->
</div>

<!-- Hover zoom on image -->
<div class="u-hover-zoom">
  <img src="..." alt="..." />
</div>

<!-- Works with <picture> too -->
<div class="u-hover-zoom">
  <picture>
    <img src="..." alt="..." />
  </picture>
</div>

<!-- Combine with other hover utilities -->
<a class="card u-hover-rise" href="...">
  <div class="u-hover-zoom"><img src="..." alt="..." /></div>
</a>

<!-- Staggered entrance (hero pattern) -->
<p class="| u-stagger" data-delay="1">...</p>
<h1 class="| u-stagger" data-delay="2">...</h1>
<p class="| u-stagger" data-delay="3">...</p>

<!-- Pure fade for visuals -->
<div class="hero__visual | u-stagger-fade">
  <img src="..." alt="..." />
</div>

import Spinner from "@components/ui/Spinner.astro";

<!-- Default (2rem, terracotta) -->
<Spinner />

<!-- Custom size + color -->
<Spinner size="3rem" color="var(--clr-cta)" />

<!-- Small spinner for inline/button use -->
<Spinner size="1rem" color="white" />

<!-- Custom screen reader label -->
<Spinner label="Loading products…" />

/* Custom entry animation */
.my-element {
  --_fade-distance: 2rem;
  animation: fade-up 0.6s ease-out both;
}

/* Staggered children */
.my-list > * {
  animation: fade-up 0.4s ease-out both;
}
.my-list > *:nth-child(1) { animation-delay: 0ms; }
.my-list > *:nth-child(2) { animation-delay: 100ms; }
.my-list > *:nth-child(3) { animation-delay: 200ms; }

<p class="section-subtitle | center-inline">The art of fine printing</p>

<p class="callout-card | center-inline flow-space-s">
  Key statement or description text here.
</p>

<div class="column-layout" data-columns="40-60">
  <div class="accent-border">
    <h3>Heading</h3>
  </div>
  <div class="accent-border__text">
    <p>Supporting text...</p>
  </div>
</div>

<header class="text-center flow flow-space-xs">
  <p class="u-label u-label--dashed">Eyebrow</p>
  <h2>Section Title</h2>
  <p class="section-subtitle | center-inline">Accent subtitle</p>
  <p class="callout-card | center-inline flow-space-s">
    Key statement in a highlight card.
  </p>
</header>

<Button variant="solid" icon="arrow-right">
  Get Started
</Button>

<Button variant="outline" size="sm">
  Cancel
</Button>

<Button href="/about" icon="arrow-right">
  Learn More
</Button>

<button class="u-button u-button--solid">
  Label
  <Icon name="arrow-right" />
</button>

<button class="u-button u-button--ghost">Cancel</button>

<button class="u-button u-button--danger u-button--lg">
  Delete Account
</button>

<button class="u-button u-button--solid" disabled>
  Processing...
</button>

<span class="u-label">Our Services</span>

<span class="u-label u-label--dashed">Featured</span>

<span class="u-label u-label--dashed u-label--dash-start">New</span>

<span class="u-badge">
  <Icon name="sparkle" />
  Premium
</span>

---
import Icon from "@components/ui/Icon.astro";
---

<Icon name="arrow-right" />

<!-- Scales with font-size -->
<span style="font-size: 2rem">
  <Icon name="star" />
</span>

<!-- Trigger -->
<button data-open-dialog="my-modal">Open</button>

<!-- Modal -->
<DialogPanel id="my-modal" variant="modal" title="Hello">
  <p>Content here</p>
  <button data-close-dialog>Close</button>
</DialogPanel>

<!-- Drawer -->
<DialogPanel id="cart" variant="drawer" position="right" title="Cart">
  ...
</DialogPanel>

<DialogPanel id="example" variant="modal">
  <div data-pane="main">
    <h3>Choose an Option</h3>
    <button data-slide-to="option-a">Option A →</button>
  </div>

  <div data-pane="option-a">
    <div class="dialog-panel__pane-header">
      <button class="dialog-panel__back" data-slide-back aria-label="Back">
        <Icon name="chevron-left" />
      </button>
      <span>Option A Details</span>
    </div>
    <p>Content for option A...</p>
  </div>
</DialogPanel>

<!-- Click trigger -->
<button popovertarget="info">Info</button>
<PopoverPanel id="info" trigger="click">
  Content here
</PopoverPanel>

<!-- Hover trigger with anchor positioning -->
<li style="anchor-name: --nav-anchor-0">
  <button data-popover-hover="menu">Menu</button>
  <PopoverPanel id="menu" trigger="hover" anchorIndex={0}>
    Dropdown content
  </PopoverPanel>
</li>

<Tabs id="product" tabs={[
  { id: "overview", label: "Overview" },
  { id: "specs", label: "Specifications" },
]}>
  <section id="product-panel-overview" class="tabs__panel"
           role="tabpanel" aria-labelledby="product-tab-overview">
    Overview content
  </section>
  <section id="product-panel-specs" class="tabs__panel"
           role="tabpanel" aria-labelledby="product-tab-specs" hidden>
    Specs content
  </section>
</Tabs>

<!-- Single accordion -->
<Accordion open>
  <span slot="summary">Question?</span>
  <p>Answer here.</p>
</Accordion>

<!-- Exclusive group -->
<div data-accordion-group="faq">
  <Accordion group="faq">
    <span slot="summary">Q1</span>
    <p>A1</p>
  </Accordion>
  <Accordion group="faq">
    <span slot="summary">Q2</span>
    <p>A2</p>
  </Accordion>
</div>

<Card variant="elevated">
  <img slot="media" src="..." alt="..." />
  <span slot="eyebrow">Category</span>
  <span slot="title">Card Title</span>
  <p>Card description text.</p>
  <Button slot="footer" size="sm">Learn More</Button>
</Card>

<!-- Discrete with navigation -->
<Carousel id="gallery" navigation pagination>
  <img src="1.jpg" alt="..." />
  <img src="2.jpg" alt="..." />
</Carousel>

<!-- Continuous smooth scrolling -->
<Carousel id="marquee" continuous speed={0.5}>
  <div>Item 1</div>
  <div>Item 2</div>
</Carousel>

<!-- Discrete autoplay (4 seconds) -->
<Carousel id="hero" autoplay={4000} pagination>
  ...
</Carousel>

---
import AiImageCompare from "../components/AiImageCompare.astro";
---

<!-- With local images (auto .webp/.jpg) -->
<AiImageCompare
  srcBefore="/images/photo-before"
  srcAfter="/images/photo-after"
  width={800}
  height={600}
/>

<!-- With resolved URLs (external images) -->
<AiImageCompare
  srcBefore="https://example.com/before.jpg"
  srcAfter="https://example.com/after.jpg"
  width={800}
  height={600}
  altBefore="Original photo"
  altAfter="Enhanced photo"
  resolvedUrls={true}
/>

/* Internal animation parameters */
SPEED: 0.00048      // Base sweep speed
PAUSE: 800ms        // Pause at each end
HALF_LIFE: 80ms     // Easing smoothness on hover

/* Cursor tracking uses exponential easing:
   pos += diff * (1 - 0.5^(dt / HALF_LIFE))
   This creates smooth, responsive following */

<!-- Standalone usage -->
<Viewer360 frames={frameUrls} alt="Product 360° view" />

<!-- In product gallery (via MDX frontmatter) -->
gallery:
  - { src: "", label: "360°", is360: "acrylux-classic" }
  - { src: "product-front.jpg", label: "Front" }
  - { src: "product-side.jpg", label: "Side" }

360/                              ← parent album
  Solo/                           ← category album
    acrylux-classic/                  ← product album (= product slug)
      acrylux-classic-01.jpg          ← frame 1 of 36
      acrylux-classic-02.jpg
      ...
      acrylux-classic-36.jpg
      acrylux-classic-thumbnail.jpg   ← gallery thumbnail

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb-list" role="list">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/products">Products</a></li>
    <li class="breadcrumb-item current" aria-current="page">Gallery</li>
  </ol>
</nav>

<LanguageSelector lang={lang} />