/* =============================================================================
   Al-Andaluzza · Pattern v2 layer (Agent M · 2026-05-15)
   Authentic Andalusí pattern + motion vocabulary. Purely additive — never
   overrides an existing rule. Every motion is gated on
   prefers-reduced-motion: reduce.
   ========================================================================== */

/* Reduced-motion master switch ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aa-pat,
  .aa-pat-drift,
  .aa-pat-rotate,
  .aa-pat-sprout,
  .aa-callig path,
  .aa-callig__pen,
  .aa-dust {
    animation: none !important;
    transition: none !important;
  }
  .aa-pat-draw path,
  .aa-pat-draw polygon,
  .aa-pat-draw line,
  .aa-pat-draw circle,
  .aa-pat-draw ellipse {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ----------------------------------------------------------------- shared */
.aa-pat {
  pointer-events: none;
  color: currentColor;
}
.aa-pat svg, .aa-pat img {
  display: block;
  width: 100%;
  height: 100%;
}

/* tile fill via background-image (for SVGs we want repeated) */
.aa-pat--tile {
  background-repeat: repeat;
  background-position: 0 0;
}

/* ==========================================================================
   1 · HERO · sebka-1 drifting band
   - thin (44px) horizontal ribbon at the very top of the page
   - 60s ultra-slow drift, ~1px/s, almost imperceptible
   ========================================================================== */
.aa-pat-sebka-band {
  /* Sits inside .hero, pinned just below the fixed site-header so it streaks
     across the upper edge of the hero photo. Subtle bone-coloured mask. */
  position: absolute;
  inset-inline: 0;
  top: 86px;   /* under fixed header (--header-h ≈ 72-86px) */
  height: 50px;
  pointer-events: none;
  z-index: 4;
  -webkit-mask: url("/img/patterns/v2/sebka-1.svg?v=patv2") repeat-x center/200px 200px;
          mask: url("/img/patterns/v2/sebka-1.svg?v=patv2") repeat-x center/200px 200px;
  background: var(--bone);
  opacity: 0.22;
  animation: aaSebkaDrift 60s linear infinite;
}
@media (max-width: 720px) {
  .aa-pat-sebka-band { top: 60px; height: 40px; }
}
@keyframes aaSebkaDrift {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 200px 0; mask-position: 200px 0; }
}
[dir="rtl"] .aa-pat-sebka-band {
  animation-direction: reverse;
}

/* ==========================================================================
   2 · STORY · ataurique vine border on the right margin (left in RTL)
   ========================================================================== */
.aa-pat-vine {
  position: absolute;
  top: 8%;
  bottom: 8%;
  inset-inline-end: max(8px, 2vw);
  width: 56px;
  color: var(--olive);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  /* "sprout from bottom" — preserve IO visibility (no clip-path), scaleY on
     a bottom anchor grows the band upward. */
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 1800ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.aa-pat-vine.is-sprouting {
  transform: scaleY(1);
}
.aa-pat-vine svg {
  width: 100%;
  height: 100%;
  /* tiles vertically */
  display: block;
}
.aa-pat-vine--tile {
  background-image: url("/img/patterns/v2/ataurique-vine.svg?v=patv2");
  background-repeat: repeat-y;
  background-size: 56px auto;
  background-position: top center;
  -webkit-mask: url("/img/patterns/v2/ataurique-vine.svg?v=patv2") repeat-y top center / 56px auto;
          mask: url("/img/patterns/v2/ataurique-vine.svg?v=patv2") repeat-y top center / 56px auto;
  background: var(--olive);
}
@media (max-width: 720px) {
  .aa-pat-vine { display: none; }
}

/* ==========================================================================
   3 · TERROIR · mezquita columns watermark
   ========================================================================== */
.aa-pat-mezquita {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: url("/img/patterns/v2/mezquita-columns.svg?v=patv2") no-repeat center bottom / min(1200px, 96%) auto;
          mask: url("/img/patterns/v2/mezquita-columns.svg?v=patv2") no-repeat center bottom / min(1200px, 96%) auto;
  background: var(--bone);
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   4 · METHOD · laceria-12 rosette behind the 4-step path
   ========================================================================== */
.aa-pat-laceria {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(340px, 38vw, 520px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  color: var(--gold-leaf);
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
  animation: aaLaceriaRotate 180s linear infinite;
}
.aa-pat-laceria svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes aaLaceriaRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Method section must position-relative for the rosette to anchor */
#metodo { position: relative; overflow: hidden; }
#metodo .container { position: relative; z-index: 1; }

/* ==========================================================================
   5 · CERTS · alcazar-window frame around each cert card
   ========================================================================== */
.aa-pat-alcazar-frame {
  position: relative;
}
.aa-pat-alcazar-frame::before {
  content: "";
  position: absolute;
  inset: -22px -16px -10px -16px;
  background-image: url("/img/patterns/v2/alcazar-window.svg?v=patv2");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  -webkit-mask: url("/img/patterns/v2/alcazar-window.svg?v=patv2") no-repeat top center / contain;
          mask: url("/img/patterns/v2/alcazar-window.svg?v=patv2") no-repeat top center / contain;
  background: var(--terracotta);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.aa-pat-alcazar-frame > * { position: relative; z-index: 1; }

/* ==========================================================================
   6 · FOOTER · muqarnas-row band replaces the existing zellige strip
   ========================================================================== */
.aa-pat-muqarnas-band {
  width: 100%;
  height: 64px;
  background-image: url("/img/patterns/v2/muqarnas-row.svg?v=patv2");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 800px 200px;
  -webkit-mask: url("/img/patterns/v2/muqarnas-row.svg?v=patv2") repeat-x top center / 800px 200px;
          mask: url("/img/patterns/v2/muqarnas-row.svg?v=patv2") repeat-x top center / 800px 200px;
  background: var(--gold-leaf);
  opacity: 0.55;
}

/* ==========================================================================
   7 · CALLIGRAPHY BREAK · scroll-passed flourish that "writes itself"
   ========================================================================== */
.aa-callig {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: clamp(40px, 6vw, 96px) auto;
  color: var(--indigo);
  opacity: 0.75;
}
.aa-callig svg {
  display: block;
  width: 100%;
  height: auto;
}
.aa-callig path,
.aa-callig circle {
  stroke-dasharray: var(--aa-len, 1200);
  stroke-dashoffset: var(--aa-len, 1200);
  transition: stroke-dashoffset 2400ms cubic-bezier(.22,.61,.36,1);
}
.aa-callig.is-writing path,
.aa-callig.is-writing circle {
  stroke-dashoffset: 0;
}
/* pen-tip — a tiny gold dot that travels along the path tip */
.aa-callig__pen {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-leaf);
  box-shadow: 0 0 6px var(--gold-leaf);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
  transition: opacity 240ms ease;
}
.aa-callig.is-writing .aa-callig__pen { opacity: 1; }
.aa-callig.is-done    .aa-callig__pen { opacity: 0; transition-delay: 200ms; }

/* ==========================================================================
   8 · GENERIC PATTERN REVEAL · stroke-draw for any .aa-pat-draw on scroll
   ========================================================================== */
.aa-pat-draw {
  overflow: visible;
}
.aa-pat-draw path,
.aa-pat-draw polygon,
.aa-pat-draw line,
.aa-pat-draw circle:not([fill="currentColor"]):not([fill="var(--gold-leaf)"]),
.aa-pat-draw ellipse {
  stroke-dasharray: var(--aa-len, 1200);
  stroke-dashoffset: var(--aa-len, 1200);
  transition: stroke-dashoffset 1400ms cubic-bezier(.22,.61,.36,1);
}
.aa-pat-draw.is-drawing path,
.aa-pat-draw.is-drawing polygon,
.aa-pat-draw.is-drawing line,
.aa-pat-draw.is-drawing circle,
.aa-pat-draw.is-drawing ellipse {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   9 · GOLD-DUST hover trail on primary CTAs
   Particles spawned by JS as <span class="aa-dust"> children of the button's
   ::before pointer-host (an absolute wrapper). Each particle fades up + out.
   ========================================================================== */
.aa-dust-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.aa-dust {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-leaf);
  box-shadow: 0 0 4px var(--gold-leaf), 0 0 8px rgba(196,162,75,0.5);
  opacity: 0.9;
  pointer-events: none;
  animation: aaDustRise 800ms cubic-bezier(.22,.61,.36,1) forwards;
  will-change: transform, opacity;
}
@keyframes aaDustRise {
  0%   { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) translateY(-20px) scale(0.6); opacity: 0; }
}
@media (max-width: 720px), (hover: none), (pointer: coarse) {
  .aa-dust-host { display: none; }
}

/* CTA must position-relative so the dust host anchors correctly */
.aa-dust-cta { position: relative; isolation: isolate; }
.aa-dust-cta > *:not(.aa-dust-host) { position: relative; z-index: 1; }
.aa-dust-cta > .aa-dust-host { position: absolute; inset: 0; width: auto; height: auto; }

/* ==========================================================================
   10 · SAMPLE / STYLEGUIDE helpers (page-only — no harm on landing)
   ========================================================================== */
.aa-pat-demo {
  display: grid;
  place-items: center;
  background: var(--bone-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 18px;
}