/* =========================================================
   POLARIS — Procedural textures
   CSS-generated flake swatches, metallic swirls & photo
   placeholders. Replace .ph elements with real <img> later.
   ========================================================= */

/* ---------- Generic photo placeholder ---------- */
.ph {
  position: relative;
  width: 100%;
  /* height comes from aspect-ratio, an explicit rule, or absolute inset.
     Forcing height:100% here fights aspect-ratio and stretches tiles. */
  background:
    linear-gradient(135deg, var(--navy-600), var(--navy-800));
  overflow: hidden;
}
/* fill the whole parent when used as an absolute background or in a sized box */
.system-card__bg.ph,
.gallery-item .ph { height: 100%; }
.ph::before {
  /* subtle aurora sheen */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(45,212,191,0.18), transparent 60%),
    radial-gradient(70% 60% at 90% 100%, rgba(47,109,246,0.18), transparent 60%);
  mix-blend-mode: screen;
}
.ph::after {
  /* floor reflection lines */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 26px;
  mask-image: linear-gradient(0deg, rgba(0,0,0,0.9), transparent 70%);
  opacity: 0.5;
}
.ph[data-label]::before { z-index: 0; }
.ph[data-label] { display: grid; place-items: center; }
.ph[data-label] > .ph-label {
  position: relative; z-index: 2;
  font-family: var(--font-head);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; padding: 0.5rem;
}
.ph-label svg { opacity: 0.55; }


/* =========================================================
   FLAKE SWATCHES
   --base = resin base, --f1/--f2/--f3 = flake chip colors
   ========================================================= */
.flake {
  background-color: var(--base, #11151c);
  background-image:
    radial-gradient(circle, var(--f3) 40%, transparent 46%),
    radial-gradient(circle, var(--f1) 40%, transparent 46%),
    radial-gradient(circle, var(--f2) 40%, transparent 46%),
    radial-gradient(circle, var(--f1) 36%, transparent 42%),
    radial-gradient(circle, var(--f3) 36%, transparent 42%),
    radial-gradient(circle, var(--f2) 34%, transparent 40%),
    radial-gradient(circle, var(--f3) 32%, transparent 38%),
    radial-gradient(circle, var(--f1) 30%, transparent 36%);
  /* incommensurate sizes break up the grid; offsets scatter the chips */
  background-size:
    17px 17px, 23px 23px, 29px 29px,
    13px 13px, 19px 19px, 31px 31px,
    11px 11px, 25px 25px;
  background-position:
    0 0, 8px 13px, 19px 4px,
    5px 9px, 14px 21px, 26px 11px,
    3px 17px, 21px 25px;
  position: relative;
}
.flake::after {
  content: "";
  position: absolute; inset: 0;
  /* fractal noise scatters lightness so chips read as irregular, not tiled */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(120deg, rgba(255,255,255,0.14), transparent 38%),
    radial-gradient(120% 80% at 50% 115%, rgba(0,0,0,0.45), transparent 62%);
  background-size: 180px 180px, cover, cover;
  mix-blend-mode: overlay;
  opacity: 0.92;
}

/* Flake colorways */
.flake.arctic-blue    { --base:#1c2733; --f1:#5b86b3; --f2:#9fb4c9; --f3:#eef3f8; }
.flake.midnight-granite{ --base:#15171b; --f1:#3a3f47; --f2:#8b9099; --f3:#eef0f2; }
.flake.silver-glacier { --base:#23272c; --f1:#7d858f; --f2:#b9c0c8; --f3:#f4f6f8; }
.flake.desert-stone   { --base:#1d1813; --f1:#7a5c3e; --f2:#c2a079; --f3:#ece0cf; }
.flake.crimson-steel  { --base:#17110f; --f1:#9e2b22; --f2:#d65448; --f3:#f0e7e4; }
.flake.northern-emerald{ --base:#121a16; --f1:#2f7d5b; --f2:#7faf95; --f3:#eef4ef; }

/* light / medium / full coverage density via opacity of base */
.flake.cov-light::before {
  content:""; position:absolute; inset:0;
  background: var(--base); opacity:0.45; z-index:1;
}
.flake.cov-medium::before { content:""; position:absolute; inset:0; background:var(--base); opacity:0.12; z-index:1; }
/* full = no overlay (default) */

/* =========================================================
   METALLIC SWIRLS
   layered conic + radial gradients → marbled epoxy look
   ========================================================= */
.metallic {
  position: relative;
  background-color: var(--m-base, #0a0d12);
  overflow: hidden;
}
.metallic::before {
  content: "";
  position: absolute; inset: -30%;
  background:
    conic-gradient(from 200deg at 35% 40%, var(--m-1), var(--m-2), var(--m-3), var(--m-1)),
    radial-gradient(60% 50% at 70% 65%, var(--m-2), transparent 70%);
  filter: blur(22px) contrast(1.15);
  opacity: 0.95;
  animation: swirl 24s linear infinite;
}
.metallic::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 30% 25%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(50% 40% at 80% 80%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.12), transparent 40%);
  mix-blend-mode: screen;
}
@keyframes swirl {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

.metallic.graphite-smoke { --m-base:#0b0d10; --m-1:#15191f; --m-2:#5b636e; --m-3:#aab2bd; }
.metallic.liquid-gold    { --m-base:#0d0a06; --m-1:#1a140a; --m-2:#9a6f2b; --m-3:#e8c074; }
.metallic.ocean-storm    { --m-base:#070d16; --m-1:#0e2036; --m-2:#2f6db0; --m-3:#bcd6ee; }
.metallic.obsidian-black { --m-base:#050608; --m-1:#0c0e12; --m-2:#2a2f37; --m-3:#7f8893; }

/* reduce motion: freeze swirl */
@media (prefers-reduced-motion: reduce) {
  .metallic::before { animation: none; }
}