create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/designs/atelier/globals.css

@@ -1,402 +1,402 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ---------------------------------------------------------------------------
-   Design system — "Atelier" (premium modern handcrafted-goods commerce)
-   Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
-   + functional destructive. Tokens only — never raw colors in components.
---------------------------------------------------------------------------- */
-
-@layer base {
-  :root {
-    --background: 40 33% 98%; /* warm white */
-    --foreground: 30 12% 13%; /* warm ink */
-    --primary: 163 34% 21%; /* deep forest */
-    --primary-foreground: 40 33% 98%;
-    --secondary: 40 28% 94%; /* warm sand */
-    --secondary-foreground: 30 12% 13%;
-    --muted: 40 28% 94%;
-    --muted-foreground: 30 8% 40%;
-    --accent: 40 24% 89%; /* deeper sand (hover) */
-    --accent-foreground: 30 12% 13%;
-    --destructive: 0 60% 44%;
-    --destructive-foreground: 40 33% 98%;
-    --border: 38 18% 86%;
-    --radius: 0.75rem;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  html {
-    scroll-behavior: smooth;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    html {
-      scroll-behavior: auto;
-    }
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-size: 1rem;
-    line-height: 1.6;
-  }
-
-  h1,
-  h2,
-  h3,
-  .font-display {
-    font-family: var(--font-serif), ui-serif, Georgia, serif;
-    @apply text-balance font-medium;
-    line-height: 1.2;
-  }
-
-  ::selection {
-    @apply bg-primary text-primary-foreground;
-  }
-
-  :focus-visible {
-    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
-  }
-}
-
-@layer components {
-  /* Layout rhythm */
-  /* Page container — near-full-bleed like the reference DTC sites (Mejuri /
-     Missoma): generous gutters instead of a narrow boxed column, capped only
-     on ultra-wide screens so lines never run away. */
-  .container-page {
-    @apply mx-auto w-full max-w-[105rem] px-4 sm:px-6 lg:px-10;
-  }
-  /* Contained variant for transactional / reading pages (cart, PDP) where
-     very long lines hurt more than the full-bleed look helps. */
-  .container-narrow {
-    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
-  }
-  .section-pad {
-    @apply py-14 sm:py-16 lg:py-20;
-  }
-
-  /* Small caps-like label (caption size — tracking OK for Hebrew at this size) */
-  .eyebrow {
-    @apply mb-3 block text-xs font-semibold uppercase tracking-widest text-primary;
-  }
-
-  /* Buttons */
-  .btn {
-    @apply inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50;
-  }
-  .btn-primary {
-    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_10px_28px_-10px_hsl(var(--primary)/0.55)] transition-[transform,box-shadow,background-color] hover:-translate-y-0.5 hover:shadow-[0_14px_34px_-10px_hsl(var(--primary)/0.6)];
-  }
-  .btn-outline {
-    @apply btn border border-foreground/20 bg-transparent text-foreground hover:border-foreground hover:bg-foreground hover:text-background;
-  }
-  .btn-soft {
-    @apply btn bg-secondary text-secondary-foreground hover:bg-accent;
-  }
-  .btn-ghost {
-    @apply btn text-foreground hover:bg-secondary;
-  }
-  .btn-md {
-    @apply h-11 px-6;
-  }
-  .btn-lg {
-    @apply h-12 px-8 text-base;
-  }
-  .btn-sm {
-    @apply h-9 px-4 text-sm;
-  }
-
-  /* Cards — oversized corners + forest-tinted lift on hover */
-  .card {
-    @apply rounded-2xl border bg-background shadow-sm;
-  }
-  .card-hover {
-    @apply transition-[transform,box-shadow] duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_-18px_hsl(var(--primary)/0.35)];
-  }
-
-  /* Glassy surface (token-blended, no raw colors) */
-  .glass {
-    @apply rounded-2xl border border-background/60 bg-background/75 shadow-lg backdrop-blur-md;
-  }
-
-  /* Badges / pills */
-  .badge {
-    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
-  }
-  .badge-primary {
-    @apply badge bg-primary text-primary-foreground;
-  }
-  .badge-soft {
-    @apply badge bg-secondary text-secondary-foreground;
-  }
-  .badge-destructive {
-    @apply badge bg-destructive/10 text-destructive;
-  }
-
-  /* Form controls */
-  .input {
-    @apply h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary;
-  }
-  .select {
-    @apply h-10 rounded-full border bg-background pe-8 ps-4 text-sm font-medium text-foreground;
-    appearance: none;
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23413b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-  }
-  [dir='rtl'] .select {
-    background-position: left 0.75rem center;
-  }
-
-  /* Product description prose (merchant HTML) */
-  .prose-store {
-    @apply text-[0.95rem] leading-7 text-muted-foreground;
-  }
-  .prose-store p {
-    @apply mb-3;
-  }
-  .prose-store strong {
-    @apply font-semibold text-foreground;
-  }
-  .prose-store ul {
-    @apply mb-3 list-disc ps-5;
-  }
-  .prose-store ol {
-    @apply mb-3 list-decimal ps-5;
-  }
-  .prose-store a {
-    @apply text-primary underline underline-offset-2;
-  }
-  .prose-store h1,
-  .prose-store h2,
-  .prose-store h3 {
-    @apply mb-2 mt-4 text-foreground;
-  }
-}
-
-@layer utilities {
-  /* Flip directional glyphs (arrows) so they point with the reading direction */
-  [dir='rtl'] .rtl-flip {
-    transform: scaleX(-1);
-  }
-
-  /* --- Atmosphere washes: soft blends of the SAME tokens (forest + sand) --- */
-  .wash-hero {
-    background:
-      radial-gradient(52rem 32rem at 85% -10%, hsl(var(--primary) / 0.1), transparent 60%),
-      radial-gradient(46rem 30rem at 8% 108%, hsl(var(--primary) / 0.08), transparent 55%),
-      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
-  }
-  [dir='rtl'] .wash-hero {
-    background:
-      radial-gradient(52rem 32rem at 15% -10%, hsl(var(--primary) / 0.1), transparent 60%),
-      radial-gradient(46rem 30rem at 92% 108%, hsl(var(--primary) / 0.08), transparent 55%),
-      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
-  }
-  .wash-sand {
-    background: linear-gradient(
-      180deg,
-      hsl(var(--background)),
-      hsl(var(--secondary) / 0.9) 30%,
-      hsl(var(--secondary) / 0.9) 70%,
-      hsl(var(--background))
-    );
-  }
-  .wash-forest {
-    background:
-      radial-gradient(40rem 24rem at 20% 0%, hsl(var(--primary-foreground) / 0.12), transparent 60%),
-      linear-gradient(160deg, hsl(var(--primary)), hsl(163 40% 15%));
-  }
-
-  /* Soft blurred glow blob (decorative, sits behind content) */
-  .glow-blob {
-    position: absolute;
-    border-radius: 9999px;
-    background: hsl(var(--primary) / 0.16);
-    filter: blur(64px);
-    pointer-events: none;
-  }
-
-  /* Marquee band — duplicated track scrolls seamlessly; guarded below */
-  .marquee {
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .marquee-track {
-    display: inline-flex;
-    align-items: center;
-    min-width: 200%;
-  }
-
-  /* Single orchestrated reveal — guarded for reduced motion */
-  .reveal {
-    opacity: 1;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    .reveal {
-      animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
-    }
-    .reveal-delay-1 {
-      animation-delay: 0.12s;
-    }
-    .reveal-delay-2 {
-      animation-delay: 0.24s;
-    }
-    .reveal-delay-3 {
-      animation-delay: 0.36s;
-    }
-    .img-zoom {
-      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-    }
-    .group:hover .img-zoom {
-      transform: scale(1.045);
-    }
-    .spin {
-      animation: spinner 0.8s linear infinite;
-    }
-
-    /* Gentle floating — hero cards & chips */
-    .float-slow {
-      animation: float-y 7s ease-in-out infinite;
-    }
-    .float-slower {
-      animation: float-y 9s ease-in-out 1.2s infinite;
-    }
-    .blob-drift {
-      animation: blob-drift 14s ease-in-out infinite alternate;
-    }
-
-    /* Scroll reveals (driven by the <Reveal> island adding .is-visible) */
-    .reveal-scroll {
-      opacity: 0;
-      transform: translateY(28px);
-      transition:
-        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
-        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
-    }
-    .reveal-scroll.is-visible {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    .marquee-track {
-      animation: marquee-ltr 32s linear infinite;
-    }
-    [dir='rtl'] .marquee-track {
-      animation-name: marquee-rtl;
-    }
-  }
-
-  @keyframes reveal-up {
-    from {
-      opacity: 0;
-      transform: translateY(16px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes float-y {
-    0%,
-    100% {
-      transform: translateY(0) rotate(var(--float-rotate, 0deg));
-    }
-    50% {
-      transform: translateY(-12px) rotate(var(--float-rotate, 0deg));
-    }
-  }
-
-  @keyframes blob-drift {
-    from {
-      transform: translate(0, 0) scale(1);
-    }
-    to {
-      transform: translate(3rem, -2rem) scale(1.15);
-    }
-  }
-
-  @keyframes marquee-ltr {
-    to {
-      transform: translateX(-50%);
-    }
-  }
-  @keyframes marquee-rtl {
-    to {
-      transform: translateX(50%);
-    }
-  }
-}
-
-/* Cart bump — the landing pad reacts when a flown item arrives */
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes cart-bump {
-    30% { transform: scale(1.3); }
-    60% { transform: scale(0.92); }
-  }
-  .cart-bump { animation: cart-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
-}
-
-/* Full-page loader — a soft pulsing core inside a thin rotating ring
-   (Atelier's breathing mark). No iconography, so it fits any store niche.
-   Static ring + core under reduced motion; the spin/breathe are additive. */
-.loader-ring {
-  position: relative;
-  display: flex;
-  height: 3.5rem;
-  width: 3.5rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  border: 1px solid hsl(var(--primary) / 0.15);
-}
-.loader-ring::before {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  border-radius: 9999px;
-  border: 1.5px solid transparent;
-  border-top-color: hsl(var(--primary) / 0.9);
-}
-.loader-ring-core {
-  height: 0.6rem;
-  width: 0.6rem;
-  border-radius: 9999px;
-  background: hsl(var(--primary));
-  box-shadow: 0 0 12px hsl(var(--primary) / 0.4);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .loader-ring::before {
-    animation: ring-spin 1.4s linear infinite;
-  }
-  .loader-ring-core {
-    animation: ring-breathe 2s ease-in-out infinite;
-  }
-  .loader-text {
-    animation: loader-breathe 2.2s ease-in-out infinite;
-  }
-  @keyframes ring-spin {
-    to { transform: rotate(360deg); }
-  }
-  @keyframes ring-breathe {
-    0%, 100% { opacity: 0.45; transform: scale(0.85); }
-    50% { opacity: 1; transform: scale(1); }
-  }
-  @keyframes loader-breathe {
-    0%, 100% { opacity: 0.55; }
-    50% { opacity: 1; }
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ---------------------------------------------------------------------------
+   Design system — "Atelier" (premium modern handcrafted-goods commerce)
+   Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
+   + functional destructive. Tokens only — never raw colors in components.
+--------------------------------------------------------------------------- */
+
+@layer base {
+  :root {
+    --background: 40 33% 98%; /* warm white */
+    --foreground: 30 12% 13%; /* warm ink */
+    --primary: 163 34% 21%; /* deep forest */
+    --primary-foreground: 40 33% 98%;
+    --secondary: 40 28% 94%; /* warm sand */
+    --secondary-foreground: 30 12% 13%;
+    --muted: 40 28% 94%;
+    --muted-foreground: 30 8% 40%;
+    --accent: 40 24% 89%; /* deeper sand (hover) */
+    --accent-foreground: 30 12% 13%;
+    --destructive: 0 60% 44%;
+    --destructive-foreground: 40 33% 98%;
+    --border: 38 18% 86%;
+    --radius: 0.75rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  h1,
+  h2,
+  h3,
+  .font-display {
+    font-family: var(--font-serif), ui-serif, Georgia, serif;
+    @apply text-balance font-medium;
+    line-height: 1.2;
+  }
+
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
+  }
+}
+
+@layer components {
+  /* Layout rhythm */
+  /* Page container — near-full-bleed like the reference DTC sites (Mejuri /
+     Missoma): generous gutters instead of a narrow boxed column, capped only
+     on ultra-wide screens so lines never run away. */
+  .container-page {
+    @apply mx-auto w-full max-w-[105rem] px-4 sm:px-6 lg:px-10;
+  }
+  /* Contained variant for transactional / reading pages (cart, PDP) where
+     very long lines hurt more than the full-bleed look helps. */
+  .container-narrow {
+    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+  .section-pad {
+    @apply py-14 sm:py-16 lg:py-20;
+  }
+
+  /* Small caps-like label (caption size — tracking OK for Hebrew at this size) */
+  .eyebrow {
+    @apply mb-3 block text-xs font-semibold uppercase tracking-widest text-primary;
+  }
+
+  /* Buttons */
+  .btn {
+    @apply inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50;
+  }
+  .btn-primary {
+    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_10px_28px_-10px_hsl(var(--primary)/0.55)] transition-[transform,box-shadow,background-color] hover:-translate-y-0.5 hover:shadow-[0_14px_34px_-10px_hsl(var(--primary)/0.6)];
+  }
+  .btn-outline {
+    @apply btn border border-foreground/20 bg-transparent text-foreground hover:border-foreground hover:bg-foreground hover:text-background;
+  }
+  .btn-soft {
+    @apply btn bg-secondary text-secondary-foreground hover:bg-accent;
+  }
+  .btn-ghost {
+    @apply btn text-foreground hover:bg-secondary;
+  }
+  .btn-md {
+    @apply h-11 px-6;
+  }
+  .btn-lg {
+    @apply h-12 px-8 text-base;
+  }
+  .btn-sm {
+    @apply h-9 px-4 text-sm;
+  }
+
+  /* Cards — oversized corners + forest-tinted lift on hover */
+  .card {
+    @apply rounded-2xl border bg-background shadow-sm;
+  }
+  .card-hover {
+    @apply transition-[transform,box-shadow] duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_-18px_hsl(var(--primary)/0.35)];
+  }
+
+  /* Glassy surface (token-blended, no raw colors) */
+  .glass {
+    @apply rounded-2xl border border-background/60 bg-background/75 shadow-lg backdrop-blur-md;
+  }
+
+  /* Badges / pills */
+  .badge {
+    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
+  }
+  .badge-primary {
+    @apply badge bg-primary text-primary-foreground;
+  }
+  .badge-soft {
+    @apply badge bg-secondary text-secondary-foreground;
+  }
+  .badge-destructive {
+    @apply badge bg-destructive/10 text-destructive;
+  }
+
+  /* Form controls */
+  .input {
+    @apply h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary;
+  }
+  .select {
+    @apply h-10 rounded-full border bg-background pe-8 ps-4 text-sm font-medium text-foreground;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23413b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+  }
+  [dir='rtl'] .select {
+    background-position: left 0.75rem center;
+  }
+
+  /* Product description prose (merchant HTML) */
+  .prose-store {
+    @apply text-[0.95rem] leading-7 text-muted-foreground;
+  }
+  .prose-store p {
+    @apply mb-3;
+  }
+  .prose-store strong {
+    @apply font-semibold text-foreground;
+  }
+  .prose-store ul {
+    @apply mb-3 list-disc ps-5;
+  }
+  .prose-store ol {
+    @apply mb-3 list-decimal ps-5;
+  }
+  .prose-store a {
+    @apply text-primary underline underline-offset-2;
+  }
+  .prose-store h1,
+  .prose-store h2,
+  .prose-store h3 {
+    @apply mb-2 mt-4 text-foreground;
+  }
+}
+
+@layer utilities {
+  /* Flip directional glyphs (arrows) so they point with the reading direction */
+  [dir='rtl'] .rtl-flip {
+    transform: scaleX(-1);
+  }
+
+  /* --- Atmosphere washes: soft blends of the SAME tokens (forest + sand) --- */
+  .wash-hero {
+    background:
+      radial-gradient(52rem 32rem at 85% -10%, hsl(var(--primary) / 0.1), transparent 60%),
+      radial-gradient(46rem 30rem at 8% 108%, hsl(var(--primary) / 0.08), transparent 55%),
+      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
+  }
+  [dir='rtl'] .wash-hero {
+    background:
+      radial-gradient(52rem 32rem at 15% -10%, hsl(var(--primary) / 0.1), transparent 60%),
+      radial-gradient(46rem 30rem at 92% 108%, hsl(var(--primary) / 0.08), transparent 55%),
+      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
+  }
+  .wash-sand {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--background)),
+      hsl(var(--secondary) / 0.9) 30%,
+      hsl(var(--secondary) / 0.9) 70%,
+      hsl(var(--background))
+    );
+  }
+  .wash-forest {
+    background:
+      radial-gradient(40rem 24rem at 20% 0%, hsl(var(--primary-foreground) / 0.12), transparent 60%),
+      linear-gradient(160deg, hsl(var(--primary)), hsl(163 40% 15%));
+  }
+
+  /* Soft blurred glow blob (decorative, sits behind content) */
+  .glow-blob {
+    position: absolute;
+    border-radius: 9999px;
+    background: hsl(var(--primary) / 0.16);
+    filter: blur(64px);
+    pointer-events: none;
+  }
+
+  /* Marquee band — duplicated track scrolls seamlessly; guarded below */
+  .marquee {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .marquee-track {
+    display: inline-flex;
+    align-items: center;
+    min-width: 200%;
+  }
+
+  /* Single orchestrated reveal — guarded for reduced motion */
+  .reveal {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .reveal-delay-1 {
+      animation-delay: 0.12s;
+    }
+    .reveal-delay-2 {
+      animation-delay: 0.24s;
+    }
+    .reveal-delay-3 {
+      animation-delay: 0.36s;
+    }
+    .img-zoom {
+      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .group:hover .img-zoom {
+      transform: scale(1.045);
+    }
+    .spin {
+      animation: spinner 0.8s linear infinite;
+    }
+
+    /* Gentle floating — hero cards & chips */
+    .float-slow {
+      animation: float-y 7s ease-in-out infinite;
+    }
+    .float-slower {
+      animation: float-y 9s ease-in-out 1.2s infinite;
+    }
+    .blob-drift {
+      animation: blob-drift 14s ease-in-out infinite alternate;
+    }
+
+    /* Scroll reveals (driven by the <Reveal> island adding .is-visible) */
+    .reveal-scroll {
+      opacity: 0;
+      transform: translateY(28px);
+      transition:
+        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .reveal-scroll.is-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .marquee-track {
+      animation: marquee-ltr 32s linear infinite;
+    }
+    [dir='rtl'] .marquee-track {
+      animation-name: marquee-rtl;
+    }
+  }
+
+  @keyframes reveal-up {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes float-y {
+    0%,
+    100% {
+      transform: translateY(0) rotate(var(--float-rotate, 0deg));
+    }
+    50% {
+      transform: translateY(-12px) rotate(var(--float-rotate, 0deg));
+    }
+  }
+
+  @keyframes blob-drift {
+    from {
+      transform: translate(0, 0) scale(1);
+    }
+    to {
+      transform: translate(3rem, -2rem) scale(1.15);
+    }
+  }
+
+  @keyframes marquee-ltr {
+    to {
+      transform: translateX(-50%);
+    }
+  }
+  @keyframes marquee-rtl {
+    to {
+      transform: translateX(50%);
+    }
+  }
+}
+
+/* Cart bump — the landing pad reacts when a flown item arrives */
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes cart-bump {
+    30% { transform: scale(1.3); }
+    60% { transform: scale(0.92); }
+  }
+  .cart-bump { animation: cart-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
+}
+
+/* Full-page loader — a soft pulsing core inside a thin rotating ring
+   (Atelier's breathing mark). No iconography, so it fits any store niche.
+   Static ring + core under reduced motion; the spin/breathe are additive. */
+.loader-ring {
+  position: relative;
+  display: flex;
+  height: 3.5rem;
+  width: 3.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid hsl(var(--primary) / 0.15);
+}
+.loader-ring::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 9999px;
+  border: 1.5px solid transparent;
+  border-top-color: hsl(var(--primary) / 0.9);
+}
+.loader-ring-core {
+  height: 0.6rem;
+  width: 0.6rem;
+  border-radius: 9999px;
+  background: hsl(var(--primary));
+  box-shadow: 0 0 12px hsl(var(--primary) / 0.4);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .loader-ring::before {
+    animation: ring-spin 1.4s linear infinite;
+  }
+  .loader-ring-core {
+    animation: ring-breathe 2s ease-in-out infinite;
+  }
+  .loader-text {
+    animation: loader-breathe 2.2s ease-in-out infinite;
+  }
+  @keyframes ring-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes ring-breathe {
+    0%, 100% { opacity: 0.45; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1); }
+  }
+  @keyframes loader-breathe {
+    0%, 100% { opacity: 0.55; }
+    50% { opacity: 1; }
+  }
+}