/*
 Theme Name:   PrintItAll Child
 Theme URI:    https://printitall.co.za
 Description:  Flatsome child theme v4 — full design system. Buttons, backgrounds, cards, print marks, and all animation elements from the design reference. Apply classes directly to Elementor section, column and widget CSS Class fields.
 Author:       IWW Integrated Marketing — Theben Moodley & Teshen Naidoo
 Template:     flatsome
 Version:      5.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  printitall-child
*/

/* ═══════════════════════════════════════════════════════════════════
   § 0  GOOGLE FONTS
═══════════════════════════════════════════════════════════════════ */
/* Fonts loaded via wp_enqueue_style in functions.php — Fix 1 */


/* ═══════════════════════════════════════════════════════════════════
   § 1  DESIGN TOKENS
   Single source of truth. Reference via var() everywhere.
   Never hardcode hex values in layouts or widgets.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ──────────────────────────────────────── */
  --pia-blue:           #26abe2;
  --pia-blue-dark:      #1a8abf;
  --pia-blue-deeper:    #0e5a78;
  --pia-blue-glow:      rgba(38, 171, 226, 0.35);
  --pia-blue-subtle:    rgba(38, 171, 226, 0.10);
  --pia-blue-light:     rgba(38, 171, 226, 0.12);

  --pia-pink:           #d81378;
  --pia-pink-dark:      #ad0f61;
  --pia-pink-glow:      rgba(216, 19, 120, 0.35);
  --pia-pink-subtle:    rgba(216, 19, 120, 0.10);
  --pia-pink-light:     rgba(216, 19, 120, 0.12);

  --pia-yellow:         #fdc813;
  --pia-yellow-dark:    #d4a600;
  --pia-yellow-subtle:  rgba(253, 200, 19, 0.12);

  /* ── Backgrounds ────────────────────────────────── */
  --pia-dark:           #07090f;
  --pia-dark2:          #0d1117;
  --pia-dark3:          #111827;

  /* ── Glass / surfaces ───────────────────────────── */
  --pia-glass:          rgba(255, 255, 255, 0.04);
  --pia-gb:             rgba(255, 255, 255, 0.08);
  --pia-gbs:            rgba(255, 255, 255, 0.15);

  /* ── Text ───────────────────────────────────────── */
  --pia-text:           #f0f2f7;
  --pia-muted:          rgba(240, 242, 247, 0.55);
  --pia-dim:            rgba(240, 242, 247, 0.25);

  /* ── Typography ─────────────────────────────────── */
  --pia-font-head:      'Bricolage Grotesque', sans-serif;
  --pia-font-body:      'Syne', sans-serif;

  /* ── Spacing ────────────────────────────────────── */
  --pia-radius:         14px;
  --pia-radius-sm:      8px;
  --pia-radius-xs:      4px;

  /* ── Motion ─────────────────────────────────────── */
  --pia-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --pia-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --pia-swift:          cubic-bezier(0.77, 0, 0.18, 1);

  /* ── Print marks ─────────────────────────────────── */
  --pm-colour:          rgba(255, 255, 255, 0.25);
  --pm-size:            16px;
  --pm-offset:          18px;
}


/* ═══════════════════════════════════════════════════════════════════
   § 2  GLOBAL BASE
   Body, scrollbar, noise grain, scroll progress.
   Zero Flatsome nav selectors anywhere in this file.
═══════════════════════════════════════════════════════════════════ */
/* Fix 6: .pia-theme added to body by functions.php — beats Flatsome inline font override */
body.pia-theme,
body.pia-theme p,
body.pia-theme li,
body.pia-theme span:not([class*="elementor-icon"]):not([class*="fa-"]) {
  font-family: var(--pia-font-body) !important;
}
body.pia-theme h1,
body.pia-theme h2,
body.pia-theme h3,
body.pia-theme h4,
body.pia-theme h5,
body.pia-theme h6,
body.pia-theme .elementor-heading-title {
  font-family: var(--pia-font-head) !important;
}
/* Body background kept at body level */
body { background: var(--pia-dark); color: var(--pia-text); }

::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--pia-dark); }
::-webkit-scrollbar-thumb { background: var(--pia-blue); border-radius: 2px; }

/* Noise grain — subtle print texture on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9990;
}

/* Scroll progress bar — fixed top, managed by interactions.js */
.pia-scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pia-blue), var(--pia-pink) 50%, var(--pia-yellow));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  transition: transform 0.1s linear;
  pointer-events: none;
}

/* Elementor full-width page override — applied via PHP wp_head hook */
.pia-fullwidth-page .site-content,
.pia-fullwidth-page .page-wrapper {
  max-width: 100% !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   § 3  BUTTONS
   Base: .pia-btn   Variant: .pia-btn-*
   Apply both classes to Elementor Button widget CSS Class field.
   Do NOT use overflow:hidden — breaks translateY hover lift.
═══════════════════════════════════════════════════════════════════ */
.pia-btn {
  display: inline-flex !important;
  align-items: center!important;
  gap: 8px;
  font-family: var(--pia-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 5px 5px !important;
  border: none;
  cursor: pointer;
  position: relative;
  transition:
    transform  0.2s var(--pia-ease),
    box-shadow 0.2s var(--pia-ease),
    border-color 0.2s,
    color 0.2s !important;
}
.pia-btn:active {
  transform: scale(0.95) translateY(1px) !important;
  box-shadow: none !important;
}

/* ── Primary — animated blue shimmer pill ── */
.pia-btn-primary {
  background-image: linear-gradient(90deg, var(--pia-blue) 0%, #47c8f7 40%, var(--pia-blue) 60%, var(--pia-blue-dark) 100%) !important;
  background-size: 250% auto !important;
  color: #fff !important;
  border-radius: 100px !important;
  animation: piaBtnShimmerBlue 4s linear infinite;
}
.pia-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--pia-blue-glow);
}

/* ── Pink — animated pink shimmer pill ── */
.pia-btn-pink {
  background-image: linear-gradient(90deg, var(--pia-pink) 0%, #f04fa0 40%, var(--pia-pink) 60%, var(--pia-pink-dark) 100%) !important;
  background-size: 250% auto !important;
  color: #fff !important;
  border-radius: 100px !important;
  animation: piaBtnShimmerPink 4s linear infinite;
}
.pia-btn-pink:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--pia-pink-glow);
}

/* ── Outline ghost — dark backgrounds ── */
.pia-btn-outline {
  background: transparent !important;
  color: var(--pia-text) !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--pia-gbs) !important;
}
.pia-btn-outline:hover {
  border-color: var(--pia-blue) !important;
  color: var(--pia-blue) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(38, 171, 226, 0.15);
}

/* ── Outline dark — light backgrounds ── */
.pia-btn-outline-dark {
  background: transparent !important;
  color: rgba(0, 0, 0, 0.8) !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.25) !important;
}
.pia-btn-outline-dark:hover {
  border-color: rgba(0, 0, 0, 0.6) !important;
  color: rgba(0, 0, 0, 0.95) !important;
  transform: translateY(-3px);
}

/* ── Stamp — yellow, dashed inner, tilt ── */
.pia-btn-stamp {
  background: var(--pia-yellow) !important;
  color: #07090f !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
  outline: 1.5px dashed rgba(0, 0, 0, 0.18);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10);
}
.pia-btn-stamp:hover {
  color: #07090f !important;
  transform: rotate(-1.5deg) scale(1.04);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18), 3px 4px 0 rgba(0, 0, 0, 0.2);
}
.pia-btn-stamp:active {
  transform: rotate(0) scale(0.97) !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18) !important;
}

/* ── White — for coloured section backgrounds ── */
.pia-btn-white {
  background: #ffffff !important;
  color: var(--pia-dark) !important;
  border-radius: 100px !important;
}
.pia-btn-white:hover {
  color: var(--pia-dark) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ── Dark — for yellow section backgrounds ── */
.pia-btn-dark {
  background: var(--pia-dark) !important;
  color: #fff !important;
  border-radius: 100px !important;
}
.pia-btn-dark:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@keyframes piaBtnShimmerBlue {
  0%   { background-position: 100% center; }
  100% { background-position: -150% center; }
}
@keyframes piaBtnShimmerPink {
  0%   { background-position: 100% center; }
  100% { background-position: -150% center; }
}


/* ═══════════════════════════════════════════════════════════════════
   § 4  SECTION BACKGROUNDS
   Apply to Elementor section Advanced > CSS Classes.
   Colour sections auto-adjust text colour for their children.
═══════════════════════════════════════════════════════════════════ */

/* ── Solid dark bases ── */
.pia-bg-dark, .elementor-section.pia-bg-dark, .elementor-column.pia-bg-dark  { background: var(--pia-dark)  !important; }
.pia-bg-dark2, .elementor-section.pia-bg-dark2, .elementor-column.pia-bg-dark2 { background: var(--pia-dark2) !important; }
.pia-bg-dark3, .elementor-section.pia-bg-dark3, .elementor-column.pia-bg-dark3 { background: var(--pia-dark3) !important; }

/* ── Solid brand colours ── */
.pia-bg-blue, .elementor-section.pia-bg-blue, .elementor-column.pia-bg-blue     { background: var(--pia-blue)   !important; }
.pia-bg-pink, .elementor-section.pia-bg-pink, .elementor-column.pia-bg-pink     { background: var(--pia-pink)   !important; }
.pia-bg-yellow, .elementor-section.pia-bg-yellow, .elementor-column.pia-bg-yellow { background: var(--pia-yellow) !important; }

/* Fix 5: Scoped to .elementor-widget-container — avoids catching icons, SVGs, badge spans */
.pia-bg-blue .elementor-widget-container h1,
.pia-bg-blue .elementor-widget-container h2,
.pia-bg-blue .elementor-widget-container h3,
.pia-bg-blue .elementor-widget-container h4,
.pia-bg-blue .elementor-widget-container p,
.pia-bg-blue .elementor-heading-title { color: #fff !important; }

.pia-bg-pink .elementor-widget-container h1,
.pia-bg-pink .elementor-widget-container h2,
.pia-bg-pink .elementor-widget-container h3,
.pia-bg-pink .elementor-widget-container h4,
.pia-bg-pink .elementor-widget-container p,
.pia-bg-pink .elementor-heading-title { color: #fff !important; }

.pia-bg-yellow .elementor-widget-container h1,
.pia-bg-yellow .elementor-widget-container h2,
.pia-bg-yellow .elementor-widget-container h3,
.pia-bg-yellow .elementor-widget-container h4,
.pia-bg-yellow .elementor-widget-container p,
.pia-bg-yellow .elementor-heading-title { color: rgba(0,0,0,0.85) !important; }

/* ── Gradient backgrounds ── */
.pia-bg-hero {
  background:
    radial-gradient(ellipse at 55% 35%, rgba(38,171,226,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(216,19,120,0.08) 0%, transparent 50%),
    var(--pia-dark2) !important;
}
.pia-bg-blue-fade {
  background: radial-gradient(ellipse at 60% 40%, rgba(38,171,226,0.14) 0%, rgba(216,19,120,0.08) 50%, var(--pia-dark2) 100%) !important;
}
.pia-bg-pink-fade {
  background: radial-gradient(ellipse at 40% 60%, rgba(216,19,120,0.14) 0%, rgba(38,171,226,0.06) 60%, var(--pia-dark2) 100%) !important;
}

/* ── Animated overlays (add alongside bg class) ── */
.pia-bg-grain { position: relative; }
.pia-bg-grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 1;
}
.pia-bg-grid { position: relative; overflow: hidden; }
.pia-bg-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(38,171,226,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,171,226,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  animation: piaGridBreath 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes piaGridBreath { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Blob helpers — position manually ── */
.pia-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: piaBlobDrift 10s ease-in-out infinite;
}
.pia-blob-blue   { background: rgba(38,171,226,0.12); }
.pia-blob-pink   { background: rgba(216,19,120,0.10); }
.pia-blob-yellow { background: rgba(253,200,19,0.08); }
@keyframes piaBlobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(12px,-16px) scale(1.06); }
  66%     { transform: translate(-10px,8px) scale(0.96); }
}

/* ── Top rules ── */
.pia-rule-top { position: relative; }
.pia-rule-top::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pia-blue), var(--pia-pink) 50%, var(--pia-yellow));
  z-index: 2;
}
.pia-rule-blue::before   { background: var(--pia-blue) !important; height: 4px; }
.pia-rule-pink::before   { background: var(--pia-pink) !important; height: 4px; }
.pia-rule-yellow::before { background: var(--pia-yellow) !important; height: 4px; }

/* ── Diagonal clip transitions ── */
.pia-clip-bottom { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
.pia-clip-top    { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.pia-clip-both   { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); }


/* ═══════════════════════════════════════════════════════════════════
   § 5  GLASS / CARD SURFACES
═══════════════════════════════════════════════════════════════════ */
.pia-card, .elementor-widget-wrap.pia-card, .elementor-element.pia-card {
  background: var(--pia-glass) !important;
  border: 1px solid var(--pia-gb) !important;
  border-radius: var(--pia-radius) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.pia-card:hover {
  border-color: var(--pia-gbs) !important;
  transform: translateY(-5px);
}

.pia-card-on-colour {
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--pia-radius) !important;
  transition: border-color 0.3s, transform 0.3s;
}
.pia-card-on-colour:hover {
  background: rgba(0,0,0,0.28) !important;
  border-color: rgba(255,255,255,0.28) !important;
  transform: translateY(-5px);
}

.pia-card-yellow-bg {
  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: var(--pia-radius) !important;
  transition: background 0.3s, transform 0.3s;
}
.pia-card-yellow-bg:hover {
  background: rgba(255,255,255,0.5) !important;
  transform: translateY(-5px);
}

/* Top accent bar — draws left to right on hover */
.pia-card-accent { position: relative; overflow: hidden; }
.pia-card-accent::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pia-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--pia-ease);
  z-index: 2;
}
.pia-card-accent:hover::before { transform: scaleX(1); }
.pia-card-accent-pink::before   { background: var(--pia-pink); }
.pia-card-accent-yellow::before { background: var(--pia-yellow); }

/* Left colour bars */
.pia-card-bar-blue   { border-left: 4px solid var(--pia-blue) !important; }
.pia-card-bar-pink   { border-left: 4px solid var(--pia-pink) !important; }
.pia-card-bar-yellow { border-left: 4px solid var(--pia-yellow) !important; }
.pia-card-bar-dark   { border-left: 4px solid rgba(0,0,0,0.3) !important; }

/* Shimmer sweep on hover */
.pia-card-shimmer { overflow: hidden; position: relative; }
.pia-card-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
}
.pia-card-shimmer:hover::after {
  transform: translateX(100%);
  transition: transform 0.55s ease;
}

/* Glow border pulse */
.pia-glow-border {
  border: 1px solid var(--pia-blue) !important;
  border-radius: var(--pia-radius) !important;
  animation: piaGlowBorder 2.5s ease-in-out infinite;
}
.pia-glow-border-pink   { border-color: var(--pia-pink) !important; animation: piaGlowBorderPink 2.5s ease-in-out infinite; }
.pia-glow-border-yellow { border-color: var(--pia-yellow) !important; }
@keyframes piaGlowBorder     { 0%,100%{box-shadow:0 0 0 0 rgba(38,171,226,0.4)} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes piaGlowBorderPink { 0%,100%{box-shadow:0 0 0 0 rgba(216,19,120,0.4)} 50%{box-shadow:0 0 0 6px transparent} }


/* ═══════════════════════════════════════════════════════════════════
   § 6  TEXT UTILITIES
   Use in Elementor widget CSS Class or Advanced Typography.
═══════════════════════════════════════════════════════════════════ */

/* Font families */
.pia-font-head { font-family: var(--pia-font-head) !important; }
.pia-font-body { font-family: var(--pia-font-body) !important; }

/* Colour utilities */
.pia-text-blue   { color: var(--pia-blue)   !important; }
.pia-text-pink   { color: var(--pia-pink)   !important; }
.pia-text-yellow { color: var(--pia-yellow) !important; }
.pia-text-white  { color: #fff !important; }
.pia-text-dark   { color: rgba(0,0,0,0.85) !important; }
.pia-text-muted  { color: var(--pia-muted) !important; }
.pia-text-dim    { color: var(--pia-dim) !important; }

/* Background utilities */
.pia-bg-blue-text   { background: var(--pia-blue) !important; }
.pia-bg-pink-text   { background: var(--pia-pink) !important; }
.pia-bg-yellow-text { background: var(--pia-yellow) !important; }


/* ═══════════════════════════════════════════════════════════════════
   § 7  PRINT MARKS — ANIMATED
   ─────────────────────────────────────────────────────────────────
   HOW TO USE
   ──────────
   REQUIREMENT: The parent section/div must have position:relative.
   Elementor sections are position:relative by default. Columns and
   widget wrappers are NOT — add .pia-pos-relative to them if needed.

   OPTION A — Individual marks (most flexible):
     Drop a <div> inside the section with these classes:
       pia-pm pia-pm-tl pia-pm-white   → top-left crosshair
       pia-pm pia-pm-tr pia-pm-blue    → top-right crosshair
       pia-pm pia-pm-bl pia-pm-pink    → bottom-left crosshair
       pia-pm pia-pm-br pia-pm-yellow  → bottom-right crosshair
     Colour class REQUIRED — one of: pia-pm-white pia-pm-blue
     pia-pm-pink pia-pm-yellow pia-pm-dark

   OPTION B — All four corners in one class (on section wrapper):
       pia-marks-all pia-marks-white   → white crosshairs
       pia-marks-all pia-marks-blue    → blue crosshairs

   EXTRAS (absolutely positioned, add inside section):
       pia-pm-cmyk     → CMYK colour swatch bar, bottom-right area
       pia-pm-dots     → halftone dot cluster, top-right area
       pia-pm-inkbar   → vertical ink density bar, bottom-left area
                         add data-ink-pct="80" to control fill height

   CROP MARKS — add pia-pm-crop to any pia-pm element:
       pia-pm pia-pm-tl pia-pm-crop pia-pm-white
═══════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Default --pm-colour so marks render without colour class ── */
.pia-pm {
  --pm-colour: rgba(255, 255, 255, 0.28); /* safe default — always visible */
  position: absolute;
  width: var(--pm-size);
  height: var(--pm-size);
  pointer-events: none;
  z-index: 10;
}

/* Crosshair arms via background-image — two 1px lines crossing at centre */
.pia-pm::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* horizontal arm */
    linear-gradient(var(--pm-colour), var(--pm-colour));  /* vertical arm   */
  background-size:
    100% 1px,  /* full width, 1px tall */
    1px 100%;  /* 1px wide, full height */
  background-position: 0 50%, 50% 0; /* centred on each axis */
  background-repeat: no-repeat;
  animation: piaPmPulse 6s ease-in-out infinite;
}

/* Circle at crosshair centre */
.pia-pm::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  /* Use px-based size so circle stays consistent regardless of pm-size */
  width: 6px; height: 6px;
  border: 1px solid var(--pm-colour);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: piaPmPulse 6s ease-in-out infinite;
}

/* Corner positions */
.pia-pm-tl { top: var(--pm-offset);    left: var(--pm-offset);  }
.pia-pm-tr { top: var(--pm-offset);    right: var(--pm-offset); }
.pia-pm-bl { bottom: var(--pm-offset); left: var(--pm-offset);  }
.pia-pm-br { bottom: var(--pm-offset); right: var(--pm-offset); }

/* Stagger animation so each corner pulses at a different phase */
.pia-pm-tr::before, .pia-pm-tr::after { animation-delay: -1.5s; }
.pia-pm-bl::before, .pia-pm-bl::after { animation-delay: -3.0s; }
.pia-pm-br::before, .pia-pm-br::after { animation-delay: -4.5s; }

/* ── Colour variants — REQUIRED on each .pia-pm ── */
.pia-pm-blue   { --pm-colour: rgba(38,  171, 226, 0.60); }
.pia-pm-pink   { --pm-colour: rgba(216,  19, 120, 0.60); }
.pia-pm-yellow { --pm-colour: rgba(253, 200,  19, 0.60); }
.pia-pm-white  { --pm-colour: rgba(255, 255, 255, 0.40); }
.pia-pm-dark   { --pm-colour: rgba(0,     0,   0, 0.25); }

/* Pulse keyframe — opacity breathes between 30% and 90% */
@keyframes piaPmPulse {
  0%, 100% { opacity: 0.30; }
  40%      { opacity: 0.90; }
  60%      { opacity: 0.90; }
}

/* ── FIX 5: Crop / bleed mark — L-shaped corner ticks ── */
/* Each corner gets two arms along its two edges only, no circle */
.pia-pm-crop::after { display: none; } /* no circle on crop marks */

/* FIX: use absolute pixel sizes so arms don't depend on pm-size maths */
.pia-pm-crop::before {
  background-image:
    linear-gradient(var(--pm-colour), var(--pm-colour)),
    linear-gradient(var(--pm-colour), var(--pm-colour));
  background-size: 10px 1px, 1px 10px; /* fixed 10px arms */
  background-repeat: no-repeat;
}
/* FIX: correct background-position per corner so arms hug the right edges */
.pia-pm-tl.pia-pm-crop::before {
  background-position: 0 0, 0 0;          /* left+top edges */
}
.pia-pm-tr.pia-pm-crop::before {
  background-position: 100% 0, 100% 0;   /* right+top edges — arm goes LEFT from right */
  /* Override: flip horizontal arm to sit at right edge going inward */
  background-position: calc(100% - 0px) 0, 100% 0;
}
.pia-pm-bl.pia-pm-crop::before {
  background-position: 0 100%, 0 100%;   /* left+bottom edges */
}
.pia-pm-br.pia-pm-crop::before {
  background-position: 100% 100%, 100% 100%; /* right+bottom edges */
}

/* ── FIX 2 & 3: All-four-corners helper ── */
/* Removed overflow:hidden — was clipping children in stacked contexts */
/* FIX 6: Added ::after for the four circles */
.pia-marks-all {
  position: relative;
  /* overflow:hidden REMOVED — was hiding marks behind Elementor stacking contexts */
}
.pia-marks-all::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 10;
  /* 8 gradients = 4 corners × 2 arms (H + V) each */
  background-image:
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* TL horizontal */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* TL vertical   */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* TR horizontal */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* TR vertical   */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* BL horizontal */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* BL vertical   */
    linear-gradient(var(--pm-colour), var(--pm-colour)),  /* BR horizontal */
    linear-gradient(var(--pm-colour), var(--pm-colour));  /* BR vertical   */
  background-size:
    var(--pm-size) 1px,  1px var(--pm-size), /* TL */
    var(--pm-size) 1px,  1px var(--pm-size), /* TR */
    var(--pm-size) 1px,  1px var(--pm-size), /* BL */
    var(--pm-size) 1px,  1px var(--pm-size); /* BR */
  background-position:
    /* TL: H arm at top-left, V arm at top-left */
    var(--pm-offset)                      var(--pm-offset),
    var(--pm-offset)                      var(--pm-offset),
    /* TR: H arm at top-right (arm extends leftward from right edge) */
    calc(100% - var(--pm-offset) - var(--pm-size)) var(--pm-offset),
    calc(100% - var(--pm-offset))          var(--pm-offset),
    /* BL: H arm at bottom-left, V arm at bottom-left */
    var(--pm-offset)                      calc(100% - var(--pm-offset)),
    var(--pm-offset)                      calc(100% - var(--pm-offset) - var(--pm-size)),
    /* BR: H arm at bottom-right, V arm at bottom-right */
    calc(100% - var(--pm-offset) - var(--pm-size)) calc(100% - var(--pm-offset)),
    calc(100% - var(--pm-offset))          calc(100% - var(--pm-offset) - var(--pm-size));
  background-repeat: no-repeat;
  animation: piaPmPulse 6s ease-in-out infinite;
}
/* FIX 6: Four circles drawn via ::after radial-gradient */
.pia-marks-all::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 10;
  background-image:
    radial-gradient(circle, transparent 3px, var(--pm-colour) 3px, var(--pm-colour) 4px, transparent 4px), /* TL */
    radial-gradient(circle, transparent 3px, var(--pm-colour) 3px, var(--pm-colour) 4px, transparent 4px), /* TR */
    radial-gradient(circle, transparent 3px, var(--pm-colour) 3px, var(--pm-colour) 4px, transparent 4px), /* BL */
    radial-gradient(circle, transparent 3px, var(--pm-colour) 3px, var(--pm-colour) 4px, transparent 4px); /* BR */
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-position:
    calc(var(--pm-offset) + var(--pm-size) / 2 - 5px) calc(var(--pm-offset) + var(--pm-size) / 2 - 5px),
    calc(100% - var(--pm-offset) - var(--pm-size) / 2 - 5px) calc(var(--pm-offset) + var(--pm-size) / 2 - 5px),
    calc(var(--pm-offset) + var(--pm-size) / 2 - 5px) calc(100% - var(--pm-offset) - var(--pm-size) / 2 - 5px),
    calc(100% - var(--pm-offset) - var(--pm-size) / 2 - 5px) calc(100% - var(--pm-offset) - var(--pm-size) / 2 - 5px);
  background-repeat: no-repeat;
  animation: piaPmPulse 6s ease-in-out infinite;
}

/* Colour variants — set --pm-colour on the section wrapper */
/* FIX 1: Default provided so marks render even without colour class */
.pia-marks-all         { --pm-colour: rgba(255,255,255,0.28); }
.pia-marks-blue        { --pm-colour: rgba(38, 171,226,0.55); }
.pia-marks-pink        { --pm-colour: rgba(216, 19,120,0.55); }
.pia-marks-yellow      { --pm-colour: rgba(253,200, 19,0.55); }
.pia-marks-dark        { --pm-colour: rgba(0,   0,  0,0.22);  }

/* ── CMYK swatch bar ── */
/* Position: bottom-right corner of parent. Parent must be position:relative */
.pia-pm-cmyk {
  display: flex;
  height: 6px; width: 72px;
  border-radius: 2px; overflow: hidden;
  position: absolute;
  bottom: var(--pm-offset);
  right: calc(var(--pm-offset) + 10px);
  pointer-events: none; z-index: 10;
  animation: piaCmykPulse 8s ease-in-out infinite;
}
.pia-pm-cmyk span { flex: 1; }
.pia-pm-cmyk span:nth-child(1) { background: #00aeef; }
.pia-pm-cmyk span:nth-child(2) { background: #ec008c; }
.pia-pm-cmyk span:nth-child(3) { background: #fff200; }
.pia-pm-cmyk span:nth-child(4) { background: #231f20; }
@keyframes piaCmykPulse { 0%,100%{opacity:0.30} 50%{opacity:0.55} }

/* ── Halftone dot cluster ── */
/* Position: top-right corner of parent. Inherits --pm-colour if set */
.pia-pm-dots {
  position: absolute;
  top: calc(var(--pm-offset) + 4px);
  right: calc(var(--pm-offset) + 10px);
  width: 50px; height: 40px;
  pointer-events: none; z-index: 10;
  background-image: radial-gradient(circle, var(--pm-colour) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  animation: piaHalftoneBreathe 5s ease-in-out infinite;
}
@keyframes piaHalftoneBreathe {
  0%,100% { opacity: 0.35; transform: scale(1);    }
  50%     { opacity: 0.65; transform: scale(1.05); }
}

/* ── Ink density bar ── */
/* Position: bottom-left corner of parent */
/* Set --ink-pct via inline style or JS. Default 75% */
.pia-pm-inkbar {
  position: absolute;
  width: 4px; height: 60px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
  pointer-events: none; z-index: 10;
  bottom: calc(var(--pm-offset) + 10px);
  left: calc(var(--pm-offset) + 10px);
}
.pia-pm-inkbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--ink-pct, 75%);
  background: linear-gradient(to top, var(--pia-blue), var(--pia-pink));
  border-radius: 2px;
  transition: height 1s ease;
  animation: piaInkRise 3s ease-in-out infinite;
}
@keyframes piaInkRise { 0%,100%{opacity:0.5} 50%{opacity:0.9} }

/* ── Overprint stamp ── */
/* FIX 10: Removed opacity from base CSS — JS entrance no longer conflicts with :hover */
.pia-stamp {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--pia-font-head) !important;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pia-blue);
  border: 2px solid var(--pia-blue);
  border-radius: 3px;
  padding: 4px 10px;
  outline: 1px solid var(--pia-blue);
  outline-offset: 2px;
  /* opacity set by JS entrance, then cleared — CSS hover works freely */
  transform: rotate(-4deg);
  transition: opacity 0.2s, transform 0.2s;
}
.pia-stamp:hover { opacity: 1 !important; transform: rotate(-4deg) scale(1.05); }
.pia-stamp-pink   { color: var(--pia-pink);   border-color: var(--pia-pink);   outline-color: var(--pia-pink); }
.pia-stamp-yellow { color: var(--pia-yellow);  border-color: var(--pia-yellow); outline-color: var(--pia-yellow); transform: rotate(2deg); }
.pia-stamp-yellow:hover { transform: rotate(2deg) scale(1.05); }
.pia-stamp-white  { color: #fff; border-color: rgba(255,255,255,0.6); outline-color: rgba(255,255,255,0.3); }


/* ═══════════════════════════════════════════════════════════════════
   § 8  SCROLL REVEAL
   JS-driven — IntersectionObserver in interactions.js toggles .pia-in
═══════════════════════════════════════════════════════════════════ */
.pia-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--pia-ease), transform 0.7s var(--pia-ease);
}
.pia-reveal.pia-in { opacity: 1; transform: none; }

/* Stagger delays */
.pia-d1  { transition-delay: 0.10s; }
.pia-d2  { transition-delay: 0.20s; }
.pia-d3  { transition-delay: 0.30s; }
.pia-d4  { transition-delay: 0.40s; }
.pia-d5  { transition-delay: 0.50s; }
.pia-d6  { transition-delay: 0.60s; }
.pia-d8  { transition-delay: 0.80s; }
.pia-d10 { transition-delay: 1.00s; }


/* ═══════════════════════════════════════════════════════════════════
   § 9  ANIMATION CLASSES
   All CSS-only unless noted. Apply to any Elementor element.
═══════════════════════════════════════════════════════════════════ */

/* ── Float ── */
.pia-float  { animation: piaFloat  5s ease-in-out infinite; }
.pia-floatB { animation: piaFloatB 7s ease-in-out infinite; }
.pia-floatC { animation: piaFloatC 4s ease-in-out infinite; }
@keyframes piaFloat  { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-10px)} }
@keyframes piaFloatB { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-14px)} }
@keyframes piaFloatC { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-7px)}  }

/* ── Breathe ── */
.pia-breathe { animation: piaBreathe 4s ease-in-out infinite; }
@keyframes piaBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* ── Pulse dot ── */
.pia-pulse { animation: piaPulseDot 2s ease-in-out infinite; }
@keyframes piaPulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.6)} }

/* ── Spring pop entrance ── */
.pia-pop { animation: piaPop 0.5s var(--pia-spring) both; }
@keyframes piaPop { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }

/* ── Slide up entrance ── */
.pia-slide-up { animation: piaSlideUp 0.6s var(--pia-ease) both; }
@keyframes piaSlideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* ── Slide left entrance ── */
.pia-slide-left { animation: piaSlideLeft 0.6s var(--pia-ease) both; }
@keyframes piaSlideLeft { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }

/* ── Neon flicker ── */
.pia-neon-flicker { color: var(--neon-color, var(--pia-blue)); text-shadow: 0 0 4px var(--neon-color, var(--pia-blue)), 0 0 12px var(--neon-color, var(--pia-blue)), 0 0 30px var(--neon-color, var(--pia-blue)); animation: piaFlicker 5s linear infinite; }
.pia-neon-pink   { --neon-color: var(--pia-pink); }
.pia-neon-yellow { --neon-color: var(--pia-yellow); }
@keyframes piaFlicker { 0%,94%,100%{opacity:1} 95%{opacity:.08} 96%{opacity:1} 97.5%{opacity:.05} 98.5%{opacity:.95} }

/* ── Register shift (CMYK misregistration) ── */
/* Requires data-text attribute matching element text content */
.pia-register-shift { position: relative; display: inline-block; }
.pia-register-shift::before, .pia-register-shift::after { content: attr(data-text); position: absolute; top: 0; left: 0; font-family: inherit; font-weight: inherit; font-size: inherit; pointer-events: none; }
.pia-register-shift::before { color: var(--pia-blue); mix-blend-mode: screen; animation: piaRegC 6s steps(1) infinite; }
.pia-register-shift::after  { color: var(--pia-pink); mix-blend-mode: screen; animation: piaRegM 6s steps(1) infinite; }
@keyframes piaRegC { 0%,84%,100%{transform:translate(0);opacity:0} 86%{transform:translate(-4px,1px);opacity:.8} 89%{transform:translate(2px,-1px);opacity:.5} 92%{transform:translate(0);opacity:0} }
@keyframes piaRegM { 0%,84%,100%{transform:translate(0);opacity:0} 86%{transform:translate(4px,-1px);opacity:.7} 89%{transform:translate(-2px,1px);opacity:.4} 92%{transform:translate(0);opacity:0} }

/* ── Paint stroke underline ── */
.pia-paint-underline { position: relative; display: inline-block; }
.pia-paint-underline::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 10px; background: var(--stroke-color, var(--pia-yellow)); opacity: .55; transform: scaleX(0) skewX(-8deg); transform-origin: left; border-radius: 2px; animation: piaPaintStroke 2.2s var(--pia-swift) infinite; }
@keyframes piaPaintStroke { 0%,100%{transform:scaleX(0) skewX(-8deg)} 35%,65%{transform:scaleX(1) skewX(-8deg)} }
.pia-paint-blue   { --stroke-color: var(--pia-blue); }
.pia-paint-pink   { --stroke-color: var(--pia-pink); }
.pia-paint-yellow { --stroke-color: var(--pia-yellow); }

/* ── Halftone wipe ── */
.pia-halftone-wipe { position: relative; overflow: hidden; }
.pia-halftone-wipe::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--pia-blue) 1px, transparent 1px); background-size: 14px 14px; opacity: 0; animation: piaHalftoneReveal 3s ease-in-out infinite; z-index: 1; pointer-events: none; }
.pia-halftone-wipe-pink::before   { background-image: radial-gradient(circle, var(--pia-pink) 1px, transparent 1px); }
.pia-halftone-wipe-yellow::before { background-image: radial-gradient(circle, var(--pia-yellow) 1px, transparent 1px); }
@keyframes piaHalftoneReveal { 0%,100%{opacity:0;background-size:14px 14px} 40%{opacity:.35;background-size:14px 14px} 60%{opacity:.5;background-size:20px 20px} }
.pia-halftone-content { position: relative; z-index: 2; }

/* ── Ink bleed ── */
.pia-ink-bleed { position: relative; overflow: hidden; }
.pia-ink-bleed::before { content: ''; position: absolute; width: 300%; height: 300%; border-radius: 50%; top: -100%; left: -100%; background: var(--bleed-color, var(--pia-blue)); transform: scale(0); opacity: .15; animation: piaBleedOut 4s ease-out infinite; }
@keyframes piaBleedOut { 0%{transform:scale(0);opacity:.2} 60%{transform:scale(1);opacity:.09} 100%{transform:scale(1.1);opacity:0} }
.pia-bleed-pink   { --bleed-color: var(--pia-pink); }
.pia-bleed-yellow { --bleed-color: var(--pia-yellow); }

/* ── Split reveal ── */
.pia-split-reveal { overflow: hidden; display: inline-block; }
.pia-split-top { display: block; animation: piaSplitTop 2.8s var(--pia-swift) infinite; }
.pia-split-bot { display: block; animation: piaSplitBot 2.8s var(--pia-swift) infinite; }
@keyframes piaSplitTop { 0%,100%{transform:translateY(-108%)} 20%,78%{transform:translateY(0)} }
@keyframes piaSplitBot { 0%,100%{transform:translateY(108%)}  20%,78%{transform:translateY(0)} }

/* ── Liquid fill ── */
.pia-liquid-fill { position: relative; overflow: hidden; border-radius: var(--pia-radius-sm); background: var(--pia-dark3); border: 1px solid var(--pia-gb); }
.pia-liquid-level { position: absolute; bottom: 0; left: 0; right: 0; background: var(--fill-color, var(--pia-blue)); opacity: .22; animation: piaLiquidRise 3.5s ease-in-out infinite; }
.pia-liquid-surface { position: absolute; left: -10%; right: -10%; height: 8px; background: var(--fill-color, var(--pia-blue)); opacity: .45; border-radius: 50%; animation: piaLiquidRise 3.5s ease-in-out infinite, piaLiquidWave 2.2s ease-in-out infinite; }
@keyframes piaLiquidRise  { 0%{bottom:-2px} 50%,100%{bottom:calc(var(--fill-pct,70%) - 4px)} }
@keyframes piaLiquidWave  { 0%,100%{transform:translateX(-5%) scaleY(1)} 50%{transform:translateX(5%) scaleY(1.6)} }
.pia-liquid-content { position: relative; z-index: 2; }
.pia-liquid-blue   { --fill-color: var(--pia-blue); }
.pia-liquid-pink   { --fill-color: var(--pia-pink); }
.pia-liquid-yellow { --fill-color: var(--pia-yellow); }

/* ── Morph blob ── */
.pia-morph { animation: piaMorph 8s ease-in-out infinite; }
@keyframes piaMorph {
  0%,100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
  20%     { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
  40%     { border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; }
  60%     { border-radius: 30% 70% 60% 40% / 70% 30% 70% 30%; }
  80%     { border-radius: 50% 50% 40% 60% / 30% 60% 40% 70%; }
}

/* ── Ink wipe reveal ── */
.pia-ink-wipe { position: relative; overflow: hidden; }
.pia-ink-wipe::before { content: ''; position: absolute; inset: 0; background: var(--wipe-color, var(--pia-blue)); transform: translateX(-101%); animation: piaInkWipeIn 2s var(--pia-swift) infinite; z-index: 1; }
.pia-ink-wipe::after  { content: ''; position: absolute; inset: 0; background: var(--wipe-color, var(--pia-blue)); transform: translateX(0%); animation: piaInkWipeOut 2s var(--pia-swift) infinite; z-index: 2; }
@keyframes piaInkWipeIn  { 0%{transform:translateX(-101%)} 45%,55%{transform:translateX(0%)} 100%{transform:translateX(0%)} }
@keyframes piaInkWipeOut { 0%,45%{transform:translateX(0%)} 100%{transform:translateX(101%)} }
.pia-ink-wipe-content { position: relative; z-index: 3; }
.pia-wipe-pink   { --wipe-color: var(--pia-pink); }
.pia-wipe-yellow { --wipe-color: var(--pia-yellow); }

/* ── Colour streak ── */
.pia-streak { height: 4px; border-radius: 2px; overflow: hidden; position: relative; background: var(--pia-dark3); }
.pia-streak::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pia-blue), var(--pia-pink), var(--pia-yellow)); animation: piaStreakSlide 2.5s ease-in-out infinite; border-radius: 2px; }
@keyframes piaStreakSlide { 0%{left:-100%} 50%{left:0%} 100%{left:100%} }

/* ── Float pill ── */
.pia-float-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(7,9,15,0.85); border: 1px solid var(--pia-gb);
  backdrop-filter: blur(12px);
  animation: piaFloat 3s ease-in-out infinite;
}
.pia-float-pill-2 { animation-delay: -0.8s; }
.pia-float-pill-3 { animation-delay: -1.6s; }

/* ── Paper feed ── */
.pia-paper-roller { height: 14px; background: linear-gradient(180deg,#1a2535 0%,#0d1117 60%,#1a2535 100%); border-radius: 4px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.pia-paper-roller::after { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: rgba(38,171,226,.25); box-shadow: 0 0 6px rgba(38,171,226,.3); }
.pia-paper-feed-wrap { overflow: hidden; }
.pia-paper-feed { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.4); animation: piaPaperSlide 3s var(--pia-ease) infinite; position: relative; }
.pia-paper-feed::before { content: ''; position: absolute; inset: 8px; background: repeating-linear-gradient(transparent,transparent 10px,rgba(0,0,0,.05) 10px,rgba(0,0,0,.05) 11px); }
@keyframes piaPaperSlide { 0%{transform:translateY(0);opacity:0} 10%{opacity:1} 65%{transform:translateY(-80%);opacity:1} 85%,100%{transform:translateY(-120%);opacity:0} }

/* ── Spotlight mouse follow (JS sets --sx --sy) ── */
.pia-spotlight { position: relative; overflow: hidden; }
.pia-spotlight::before { content: ''; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(38,171,226,.12) 0%, transparent 70%); opacity: 0; z-index: 1; transition: opacity .3s; pointer-events: none; }
.pia-spotlight:hover::before { opacity: 1; }

/* ── Scramble text (JS drives it — add class for font) ── */
.pia-scramble { font-family: var(--pia-font-head) !important; font-weight: 800 !important; display: inline-block; }

/* ── Ticker tape ── */
.pia-ticker { overflow: hidden; }
.pia-ticker-inner { display: inline-flex; white-space: nowrap; animation: piaTickerScroll 20s linear infinite; }
.pia-ticker:hover .pia-ticker-inner { animation-play-state: paused; }
@keyframes piaTickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.pia-ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; font-family: var(--pia-font-head); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ── Marquee strip ── */
.pia-marquee { overflow: hidden; white-space: nowrap; }
.pia-marquee-inner { display: inline-flex; animation: piaMarqueeScroll 18s linear infinite; }
.pia-marquee:hover .pia-marquee-inner { animation-play-state: paused; }
.pia-marquee-reverse .pia-marquee-inner { animation-direction: reverse; }
@keyframes piaMarqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.pia-marquee-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 20px; font-family: var(--pia-font-head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── Card stack fan ── */
.pia-card-stack { position: relative; padding-bottom: 20px; padding-right: 20px; }
.pia-stack-item { position: absolute; top: 0; left: 0; right: 0; border-radius: var(--pia-radius); border: 1px solid var(--pia-gb); background: var(--pia-dark3); animation: piaCardFan 4s ease-in-out infinite; }
.pia-stack-item:nth-child(1) { z-index: 3; }
.pia-stack-item:nth-child(2) { z-index: 2; background: #0e1520; top: 8px; left: 8px; right: -8px; animation-delay: .15s; }
.pia-stack-item:nth-child(3) { z-index: 1; background: #0a1018; top: 16px; left: 16px; right: -16px; animation-delay: .3s; }
@keyframes piaCardFan { 0%,100%{transform:rotate(0) translateY(0)} 25%{transform:rotate(-3deg) translateY(-5px)} 75%{transform:rotate(2deg) translateY(-3px)} }
.pia-stack-front { position: relative; z-index: 4; }

/* ── Particle burst (JS animates these) ── */
.pia-particle-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pia-particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; }
.pia-particle-blue   { background: var(--pia-blue); }
.pia-particle-pink   { background: var(--pia-pink); }
.pia-particle-yellow { background: var(--pia-yellow); }

/* ── Progress ring (SVG, see interactions.js) ── */
.pia-progress-ring-track  { fill: none; stroke: var(--pia-gb); stroke-width: 4; }
.pia-progress-ring-fill   { fill: none; stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.pia-ring-blue   { stroke: var(--pia-blue); }
.pia-ring-pink   { stroke: var(--pia-pink); }
.pia-ring-yellow { stroke: var(--pia-yellow); }

/* ── Count row ── */
.pia-count-row { display: flex; }
.pia-count-cell { flex: 1; text-align: center; padding: 28px 16px; position: relative; border-right: 1px solid var(--pia-gb); }
.pia-count-cell:last-child { border-right: none; }
.pia-count-cell::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px; background: var(--cell-color, var(--pia-blue)); transform: scaleX(0); transform-origin: left; animation: piaCountUnderline 2s var(--pia-ease) forwards; animation-delay: var(--cell-delay, 0s); }
.pia-count-cell:nth-child(1) { --cell-color:var(--pia-blue);   --cell-delay:.1s; }
.pia-count-cell:nth-child(2) { --cell-color:var(--pia-pink);   --cell-delay:.3s; }
.pia-count-cell:nth-child(3) { --cell-color:var(--pia-yellow); --cell-delay:.5s; }
.pia-count-cell:nth-child(4) { --cell-color:var(--pia-blue);   --cell-delay:.7s; }
@keyframes piaCountUnderline { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.pia-count-num { font-family: var(--pia-font-head); font-size: 40px; font-weight: 800; letter-spacing: -2px; line-height: 1; margin-bottom: 6px; animation: piaCountPop .6s var(--pia-spring) both; animation-delay: var(--cell-delay, .1s); }
.pia-count-cell:nth-child(1) .pia-count-num { color: var(--pia-blue); }
.pia-count-cell:nth-child(2) .pia-count-num { color: var(--pia-pink); }
.pia-count-cell:nth-child(3) .pia-count-num { color: var(--pia-yellow); }
@keyframes piaCountPop { from{opacity:0;transform:scale(.7) translateY(10px)} to{opacity:1;transform:none} }
.pia-count-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pia-muted); }

/* ── Ink drip ── */
.pia-drip-wrap { position: relative; height: 80px; overflow: visible; }
.pia-drip { position: absolute; bottom: 0; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; animation: piaDripDrop 2.4s ease-in-out infinite; transform-origin: top center; }
.pia-drip-tail { position: absolute; width: 2px; top: 0; border-radius: 1px; transform-origin: top; animation: piaDripTail 2.4s ease-in-out infinite; }
@keyframes piaDripDrop { 0%{transform:scaleY(0);opacity:0} 20%{transform:scaleY(.3);opacity:1} 60%{transform:scaleY(1);opacity:1} 80%{transform:scaleY(1) translateY(4px);opacity:.8} 100%{transform:scaleY(1) translateY(20px);opacity:0} }
@keyframes piaDripTail { 0%,15%{transform:scaleY(0);opacity:0} 30%{transform:scaleY(1);opacity:1} 80%{transform:scaleY(1);opacity:.6} 100%{transform:scaleY(1);opacity:0} }
.pia-drip-blue   { background: var(--pia-blue); }
.pia-drip-pink   { background: var(--pia-pink); }
.pia-drip-yellow { background: var(--pia-yellow); }
.pia-drip-tail-blue   { background: var(--pia-blue); }
.pia-drip-tail-pink   { background: var(--pia-pink); }
.pia-drip-tail-yellow { background: var(--pia-yellow); }

/* ── Scanner line ── */
.pia-scanner { position: relative; overflow: hidden; }
.pia-scanner-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pia-blue), transparent); box-shadow: 0 0 12px var(--pia-blue), 0 0 4px var(--pia-blue); animation: piaScanMove 2.5s ease-in-out infinite; pointer-events: none; z-index: 2; }
@keyframes piaScanMove { 0%{top:0%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }

/* ── Typewriter cursor ── */
.pia-typewriter { font-family: var(--pia-font-head); font-weight: 800; border-right: 2px solid var(--pia-blue); white-space: nowrap; overflow: hidden; animation: piaTypeCursor .75s step-end infinite; }
@keyframes piaTypeCursor { 0%,100%{border-color:var(--pia-blue)} 50%{border-color:transparent} }


/* ═══════════════════════════════════════════════════════════════════
   § 10  WOOCOMMERCE
   Loads on WC pages only — see functions.php
═══════════════════════════════════════════════════════════════════ */
/* Base styles in woocommerce.css, loaded conditionally */


/* ═══════════════════════════════════════════════════════════════════
   § 11  ELEMENTOR HELPERS
   Apply to Elementor section/column/widget CSS Class fields.
═══════════════════════════════════════════════════════════════════ */

/* Remove Elementor default padding when using colour blocks */
.pia-no-pad.elementor-section { padding: 0 !important; }

/* Full-bleed inner section container */
.pia-full-bleed .elementor-container { max-width: 100% !important; }

/* Glassmorphism widget background */
.pia-glass-widget {
  background: var(--pia-glass) !important;
  border: 1px solid var(--pia-gb) !important;
  border-radius: var(--pia-radius) !important;
  backdrop-filter: blur(12px);
}

/* Position helpers for print marks inside Elementor widgets */
.pia-pos-relative { position: relative !important; }
.pia-overflow-hidden { overflow: hidden !important; }

/* Section label style */
.pia-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pia-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pia-blue);
}
.pia-section-label::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: currentColor;
}