/* ================================================================
   BYR — Image System v3.1
   WPCode: CSS Snippet | Site Wide Header | Priority: 11
   ================================================================
   Base: .byr-img wrapper required for all effects.
   Stack modifiers: shapes, chrome, glass, shadows, hovers, fades.
   Example: <figure class="byr-img byr-img-rounded byr-img-chrome
            byr-img-hover-lift byr-img-shadow-med">

   v3.1 CHANGES (2026-04):
   - Removed duplicate chrome palette from :root (authoritative
     copy lives in 01-core-tokens-base.css §9).
   - Removed redundant .mode-light chrome/chrome-thick gradient
     override — base rules use var(--byr-chrome-*) tokens which
     are already remapped by core .mode-light block.
   - chrome-spin light override kept (intentionally softer values).
   ================================================================ */



/* ============ 0) TOKENS & SYSTEM VARIABLES ============ */

:root {
  /* Chrome palette — defined in 01-core-tokens-base.css §9.
     Removed from here to avoid duplicate definitions. */

  /* Radii */
  --byr-img-radius-sm: 8px;
  --byr-img-radius-md: 16px;
  --byr-img-radius-lg: 24px;
  --byr-img-radius-xl: 32px;
  --byr-img-radius-full: 50%;

  /* Motion */
  --byr-img-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --byr-img-dur-fast: 0.25s;
  --byr-img-dur-med: 0.4s;
  --byr-img-dur-slow: 0.6s;

  /* DEPTH 0 — Inset: pressed into the surface */
  --byr-img-shadow-inset:
    inset 0 2px 6px rgba(0,0,0,0.7),
    inset 0 6px 20px rgba(0,0,0,0.5),
    inset 0 1px 2px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.04);

  /* DEPTH 1 — Flat: resting on the surface */
  --byr-img-shadow-flat:
    0 1px 1px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.4),
    0 0 1px rgba(255,255,255,0.06);

  /* DEPTH 2 — Low: slightly raised, card-like */
  --byr-img-shadow-low:
    0 1px 2px rgba(0,0,0,0.6),
    0 4px 10px rgba(0,0,0,0.45),
    0 8px 24px rgba(0,0,0,0.25),
    0 0 1px rgba(255,255,255,0.07);

  /* DEPTH 3 — Med: clearly floating above */
  --byr-img-shadow-med:
    0 2px 4px rgba(0,0,0,0.6),
    0 8px 20px rgba(0,0,0,0.5),
    0 20px 48px rgba(0,0,0,0.35),
    0 0 1px rgba(255,255,255,0.08);

  /* DEPTH 4 — High: dramatic elevation, hero-level */
  --byr-img-shadow-high:
    0 2px 6px rgba(0,0,0,0.7),
    0 12px 28px rgba(0,0,0,0.55),
    0 32px 72px rgba(0,0,0,0.4),
    0 0 2px rgba(255,255,255,0.09);

  /* Colored glows */
  --byr-img-glow-cyan:   0 4px 16px rgba(34,211,238,0.4), 0 0 48px rgba(34,211,238,0.2);
  --byr-img-glow-mint:   0 4px 16px rgba(16,185,129,0.35), 0 0 48px rgba(16,185,129,0.18);
  --byr-img-glow-coral:  0 4px 16px rgba(255,138,128,0.35), 0 0 48px rgba(255,138,128,0.18);
  --byr-img-glow-gold:   0 4px 16px rgba(255,213,79,0.4), 0 0 48px rgba(255,213,79,0.2);
  --byr-img-glow-purple: 0 4px 16px rgba(139,92,246,0.35), 0 0 48px rgba(139,92,246,0.18);
  --byr-img-glow-white:  0 0 24px rgba(255,255,255,0.15);

  /* Glass */
  --byr-img-glass-bg: rgba(255,255,255,0.03);
  --byr-img-glass-border: rgba(255,255,255,0.08);
  --byr-img-glass-blur: 12px;

  /* Caption */
  --byr-img-caption-font: system-ui, -apple-system, sans-serif;
  --byr-img-caption-size: 0.875rem;
  --byr-img-caption-color: rgba(255,255,255,0.65);
  --byr-img-caption-color-hover: rgba(255,255,255,0.90);

  /* Overlay */
  --byr-img-overlay-dark: rgba(10,10,15,0.55);
}


/* ============ 1) BASE WRAPPER & IMAGE ELEMENT ============ */

.byr-img {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  vertical-align: middle;
  isolation: isolate;
}

.byr-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition:
    transform var(--byr-img-dur-med) var(--byr-img-ease),
    filter    var(--byr-img-dur-med) var(--byr-img-ease);
}


/* ============ 2) SHAPES & RATIOS ============ */

.byr-img-rounded-sm { border-radius: var(--byr-img-radius-sm); }
.byr-img-rounded    { border-radius: var(--byr-img-radius-md); }
.byr-img-rounded-lg { border-radius: var(--byr-img-radius-lg); }
.byr-img-rounded-xl { border-radius: var(--byr-img-radius-xl); }

.byr-img-circle { border-radius: var(--byr-img-radius-full); aspect-ratio: 1/1; }
.byr-img-circle img { aspect-ratio: 1/1; object-fit: cover; }

.byr-img-organic { border-radius: 60% 40% 50% 45% / 45% 55% 40% 60%; aspect-ratio: 1/1; }
.byr-img-organic img { aspect-ratio: 1/1; object-fit: cover; }

.byr-img-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); aspect-ratio: 1/1; }
.byr-img-diamond img { aspect-ratio: 1/1; object-fit: cover; }

.byr-img-hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); aspect-ratio: 1/1; }
.byr-img-hex img { aspect-ratio: 1/1; object-fit: cover; }

.byr-img-arch { border-radius: 999px 999px 0 0; }
.byr-img-slant { clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%); }

.byr-img-ticket {
  border-radius: var(--byr-img-radius-md);
  clip-path: polygon(0% 10%, 3% 10%, 3% 0%, 97% 0%, 97% 10%, 100% 10%,
                     100% 90%, 97% 90%, 97% 100%, 3% 100%, 3% 90%, 0% 90%);
}

.byr-img-ratio-16x9 { aspect-ratio: 16/9; }
.byr-img-ratio-4x3  { aspect-ratio: 4/3; }
.byr-img-ratio-1x1  { aspect-ratio: 1/1; }

.byr-img[class*="byr-img-ratio-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============ 3) CHROME BORDERS (PSEUDO-ELEMENT ::before) ============ */

.byr-img-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 210deg,
    var(--byr-chrome-a),
    var(--byr-chrome-b),
    var(--byr-chrome-c),
    var(--byr-chrome-b),
    var(--byr-chrome-d),
    var(--byr-chrome-b),
    var(--byr-chrome-a)
  );

  /* Mask to create a ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: var(--z-above-pseudo);
  opacity: 0.75;
  transition: opacity var(--byr-img-dur-fast) ease;
}

.byr-img-chrome:hover::before { opacity: 1; filter: brightness(1.15) saturate(1.1); }

.byr-img-chrome-thick::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3.5px;
  background: conic-gradient(
    from 210deg,
    var(--byr-chrome-a),
    var(--byr-chrome-b),
    var(--byr-chrome-c),
    var(--byr-chrome-b),
    var(--byr-chrome-d),
    var(--byr-chrome-b),
    var(--byr-chrome-a)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: var(--z-above-pseudo);
  opacity: 0.85;
  transition: opacity var(--byr-img-dur-fast) ease;
}

.byr-img-chrome-thick:hover::before { opacity: 1; filter: brightness(1.2) saturate(1.15); }

.byr-img-chrome-spin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(
    from 0deg,
    var(--byr-chrome-a),
    var(--byr-chrome-b),
    var(--byr-chrome-c),
    var(--byr-chrome-b),
    var(--byr-chrome-d),
    var(--byr-chrome-b),
    var(--byr-chrome-a)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: var(--z-above-pseudo);
  opacity: 0.7;
  animation: byr-chrome-rot 20s linear infinite;
}

.byr-img-chrome-spin:hover::before { opacity: 1; animation-duration: 8s; }

/* Accent overrides (cyan/mint/coral/gold) */
.byr-img-chrome-cyan.byr-img-chrome::before,
.byr-img-chrome-cyan.byr-img-chrome-thick::before {
  background: conic-gradient(from 180deg,
    rgba(34,211,238,0.9), rgba(34,211,238,0.15), rgba(255,255,255,0.6),
    rgba(34,211,238,0.15), rgba(34,211,238,0.9)
  );
}

.byr-img-chrome-mint.byr-img-chrome::before,
.byr-img-chrome-mint.byr-img-chrome-thick::before {
  background: conic-gradient(from 180deg,
    rgba(16,185,129,0.9), rgba(16,185,129,0.15), rgba(255,255,255,0.6),
    rgba(16,185,129,0.15), rgba(16,185,129,0.9)
  );
}

.byr-img-chrome-coral.byr-img-chrome::before,
.byr-img-chrome-coral.byr-img-chrome-thick::before {
  background: conic-gradient(from 180deg,
    rgba(255,138,128,0.9), rgba(255,138,128,0.15), rgba(255,255,255,0.6),
    rgba(255,138,128,0.15), rgba(255,138,128,0.9)
  );
}

.byr-img-chrome-gold.byr-img-chrome::before,
.byr-img-chrome-gold.byr-img-chrome-thick::before {
  background: conic-gradient(from 180deg,
    rgba(255,213,79,0.9), rgba(255,213,79,0.15), rgba(255,255,255,0.6),
    rgba(255,213,79,0.15), rgba(255,213,79,0.9)
  );
}

/* Clip-path-friendly outline (no masking) */
.byr-img-chrome-outline {
  box-shadow:
    0 0 0 2px rgba(34,211,238,0.4),
    0 0 0 3px rgba(255,255,255,0.15),
    0 0 0 4px rgba(16,185,129,0.3);
  transition: box-shadow var(--byr-img-dur-fast) ease;
}

.byr-img-chrome-outline:hover {
  box-shadow:
    0 0 0 2px rgba(34,211,238,0.7),
    0 0 0 3px rgba(255,255,255,0.3),
    0 0 0 4px rgba(16,185,129,0.5);
}


/* ============ 4) SHADOWS & GLOWS ============ */

.byr-img-shadow-inset { box-shadow: var(--byr-img-shadow-inset); }
.byr-img-shadow-flat  { box-shadow: var(--byr-img-shadow-flat); }
.byr-img-shadow-low   { box-shadow: var(--byr-img-shadow-low); }
.byr-img-shadow-med   { box-shadow: var(--byr-img-shadow-med); }
.byr-img-shadow-high  { box-shadow: var(--byr-img-shadow-high); }

.byr-img-glow-cyan   { box-shadow: var(--byr-img-shadow-low), var(--byr-img-glow-cyan); }
.byr-img-glow-mint   { box-shadow: var(--byr-img-shadow-low), var(--byr-img-glow-mint); }
.byr-img-glow-coral  { box-shadow: var(--byr-img-shadow-low), var(--byr-img-glow-coral); }
.byr-img-glow-gold   { box-shadow: var(--byr-img-shadow-low), var(--byr-img-glow-gold); }
.byr-img-glow-purple { box-shadow: var(--byr-img-shadow-low), var(--byr-img-glow-purple); }


/* ============ 5) GLASS FRAME (WRAPPER PADDING + INNER RADIUS) ============ */

.byr-img-glass {
  padding: 10px;
  border-radius: var(--byr-img-radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(var(--byr-img-glass-blur));
  -webkit-backdrop-filter: blur(var(--byr-img-glass-blur));
  border: 1px solid var(--byr-img-glass-border);
  box-shadow:
    var(--byr-img-shadow-low),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}

.byr-img-glass img {
  border-radius: calc(var(--byr-img-radius-lg) - 6px);
}

.byr-img-glass:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow:
    var(--byr-img-shadow-med),
    inset 0 1px 0 rgba(255,255,255,0.12),
    var(--byr-img-glow-white);
}

.byr-img-glass.byr-img-chrome::before { padding: 1.5px; }

.byr-img-glass-cyan {
  background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(34,211,238,0.02) 100%);
  border-color: rgba(34,211,238,0.15);
}

.byr-img-glass-coral {
  background: linear-gradient(135deg, rgba(255,138,128,0.08) 0%, rgba(255,138,128,0.02) 100%);
  border-color: rgba(255,138,128,0.12);
}


/* ============ 6) HOVER EFFECTS (MOTION + FILTERS) ============ */

.byr-img-hover-lift {
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease),
              box-shadow var(--byr-img-dur-med) var(--byr-img-ease);
}
.byr-img-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--byr-img-shadow-high);
}

.byr-img-hover-zoom img {
  transition: transform var(--byr-img-dur-slow) var(--byr-img-ease);
}
.byr-img-hover-zoom:hover img { transform: scale(1.08); }

.byr-img-hover-zoom-lift {
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease),
              box-shadow var(--byr-img-dur-med) var(--byr-img-ease);
}
.byr-img-hover-zoom-lift:hover { transform: translateY(-4px); box-shadow: var(--byr-img-shadow-med); }
.byr-img-hover-zoom-lift:hover img { transform: scale(1.06); }

.byr-img-hover-tilt {
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease);
  transform-style: preserve-3d;
  perspective: 800px;
}
.byr-img-hover-tilt:hover {
  transform: perspective(800px) rotateX(-2deg) rotateY(3deg) scale(1.02);
  box-shadow: var(--byr-img-shadow-med);
}

.byr-img-hover-glow { transition: box-shadow var(--byr-img-dur-med) var(--byr-img-ease); }
.byr-img-hover-glow:hover {
  box-shadow: var(--byr-img-shadow-med), 0 0 30px rgba(34,211,238,0.25), 0 0 60px rgba(34,211,238,0.10);
}

.byr-img-hover-reveal img {
  filter: grayscale(0.7) brightness(0.85);
  transition: filter var(--byr-img-dur-slow) var(--byr-img-ease);
}
.byr-img-hover-reveal:hover img { filter: grayscale(0) brightness(1); }

.byr-img-hover-brighten:hover img { filter: brightness(1.1) contrast(1.05); }

.byr-img-hover-rotate {
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease);
}
.byr-img-hover-rotate:hover { transform: rotate(1.5deg) scale(1.02); }

.byr-img-kenburns img { animation: byr-kenburns 25s ease-in-out infinite alternate; }
.byr-img-kenburns:hover img { animation-play-state: paused; transform: scale(1.12); }


/* ============ 7) OVERLAYS & VIGNETTES (PSEUDO-ELEMENT ::after) ============ */

.byr-img-overlay-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: linear-gradient(to bottom,
    transparent 40%,
    rgba(10,10,15,0.35) 70%,
    rgba(10,10,15,0.75) 100%
  );
}

.byr-img-overlay-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: var(--byr-img-overlay-dark);
}

.byr-img-overlay-cyan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: rgba(34,211,238,0.12);
  mix-blend-mode: overlay;
}

.byr-img-overlay-warm::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: rgba(255,138,128,0.10);
  mix-blend-mode: overlay;
}

.byr-img-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(0,0,0,0.35) 85%,
    rgba(0,0,0,0.6) 100%
  );
}


/* ============ 8) STARLIGHT SWEEP (PSEUDO-ELEMENT ::after) ============ */

.byr-img-starlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.45) 48%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.45) 52%,
    rgba(255,255,255,0.08) 70%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: var(--z-raised);
  transition: none;
}

.byr-img-starlight:hover::after {
  left: 150%;
  transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============ 9) EDGE FADES (PSEUDO-ELEMENT ::after) ============ */

.byr-img-edge-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.3) 70%,
    rgba(0,0,0,0.7) 90%,
    rgba(0,0,0,1) 100%
  );
}

.byr-img-edge-fade-soft::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0.4) 100%
  );
}

.byr-img-fade-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: linear-gradient(to bottom,
    transparent 50%,
    rgba(10,10,15,0.6) 80%,
    rgba(10,10,15,1) 100%
  );
}

.byr-img-fade-right::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-pseudo);
  background: linear-gradient(to right,
    transparent 60%,
    rgba(10,10,15,1) 100%
  );
}


/* ============ 10) CAPTIONS (FIGCAPTION MODES) ============ */

.byr-img-caption {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.byr-img-caption figcaption {
  font-family: var(--byr-img-caption-font);
  font-size: var(--byr-img-caption-size);
  color: var(--byr-img-caption-color);
  padding: 0.65em 0.25em 0.25em;
  text-align: center;
  transition: color var(--byr-img-dur-fast) ease;
}

.byr-img-caption:hover figcaption { color: var(--byr-img-caption-color-hover); }

.byr-img-caption-overlay figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5em 1em 1em;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  color: rgba(255,255,255,0.9);
  z-index: var(--z-above-pseudo);
  text-align: left;
  line-height: 1.4;
  font-family: var(--byr-img-caption-font);
  font-size: var(--byr-img-caption-size);
}

.byr-img-caption-slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2em 1em;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.9);
  z-index: var(--z-above-pseudo);
  line-height: 1.4;
  font-family: var(--byr-img-caption-font);
  font-size: var(--byr-img-caption-size);
  transform: translateY(100%);
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease);
}

.byr-img-caption-slide:hover figcaption { transform: translateY(0); }


/* ============ 11) GALLERIES & LAYOUTS ============ */

.byr-gallery { display: grid; gap: 1.25rem; width: 100%; }
.byr-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.byr-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.byr-gallery-4 { grid-template-columns: repeat(4, 1fr); }

.byr-gallery .byr-img { width: 100%; }
.byr-gallery .byr-img img { width: 100%; height: 100%; object-fit: cover; }

.byr-gallery-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem;
}

.byr-gallery-bento .byr-img-featured { grid-column: span 2; grid-row: span 2; }
.byr-gallery-bento .byr-img-wide { grid-column: span 2; }

.byr-gallery-scatter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
  gap: 0;
}

.byr-gallery-scatter .byr-img {
  transform: rotate(var(--scatter-rotate, 0deg));
  margin: -0.5rem;
  box-shadow: var(--byr-img-shadow-med);
  transition: transform var(--byr-img-dur-med) var(--byr-img-ease);
}

.byr-gallery-scatter .byr-img:nth-child(1) { --scatter-rotate: -3deg; }
.byr-gallery-scatter .byr-img:nth-child(2) { --scatter-rotate: 2deg; }
.byr-gallery-scatter .byr-img:nth-child(3) { --scatter-rotate: -1.5deg; }
.byr-gallery-scatter .byr-img:nth-child(4) { --scatter-rotate: 4deg; }

.byr-gallery-scatter .byr-img:hover {
  transform: rotate(0deg) scale(1.08) translateY(-8px);
  z-index: var(--z-component-ui);
}


/* ============ 12) CLUSTERS ============ */

.byr-cluster-trio {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.byr-cluster-trio .byr-img:first-child { grid-row: 1 / -1; }

.byr-cluster-filmstrip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.byr-cluster-filmstrip .byr-img { flex: 0 0 auto; scroll-snap-align: start; }


/* ============ 13) LOADING STATES (SHIMMER) ============ */

.byr-img-loading {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: byr-shimmer 1.8s ease infinite;
}

.byr-img-loading img { opacity: 0; transition: opacity var(--byr-img-dur-slow) ease; }
.byr-img-loading.byr-img-loaded img { opacity: 1; }


/* ============ 14) LIGHT MODE OVERRIDES ============ */

/* Chrome/chrome-thick: base rules already use var(--byr-chrome-*)
   tokens. Core .mode-light remaps those tokens automatically.
   Only chrome-spin needs a manual override (intentionally softer). */

.mode-light .byr-img-chrome-spin::before {
  background: conic-gradient(from 0deg,
    rgba(0,0,0,0.70),
    rgba(0,0,0,0.12),
    rgba(34,211,238,0.45),
    rgba(0,0,0,0.12),
    rgba(16,185,129,0.40),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.70)
  );
}

.mode-light {
  --byr-img-shadow-inset: 0 1px 2px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.10);
  --byr-img-shadow-low:   0 1px 2px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --byr-img-shadow-med:   0 1px 3px rgba(0,0,0,0.16), 0 6px 18px rgba(0,0,0,0.14), 0 14px 40px rgba(0,0,0,0.10);
  --byr-img-shadow-high:  0 2px 4px rgba(0,0,0,0.18), 0 10px 28px rgba(0,0,0,0.16), 0 22px 56px rgba(0,0,0,0.12);

  --byr-img-glow-cyan:   0 4px 20px rgba(34,211,238,0.30), 0 0 40px rgba(34,211,238,0.15);
  --byr-img-glow-mint:   0 4px 20px rgba(16,185,129,0.28), 0 0 40px rgba(16,185,129,0.14);
  --byr-img-glow-coral:  0 4px 20px rgba(255,138,128,0.28), 0 0 40px rgba(255,138,128,0.14);
  --byr-img-glow-gold:   0 4px 20px rgba(255,213,79,0.32), 0 0 40px rgba(255,213,79,0.16);
  --byr-img-glow-purple: 0 4px 20px rgba(139,92,246,0.28), 0 0 40px rgba(139,92,246,0.14);

  --byr-img-glass-border: rgba(0,0,0,0.10);
  --byr-img-caption-color: rgba(0,0,0,0.55);
  --byr-img-caption-color-hover: rgba(0,0,0,0.85);
}

.mode-light .byr-img-glass {
  background: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%);
  border-color: rgba(0,0,0,0.08);
}

.mode-light .byr-img-edge-fade::after {
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.3) 70%,
    rgba(255,255,255,0.7) 90%,
    rgba(255,255,255,1) 100%
  );
}

.mode-light .byr-img-fade-bottom::after {
  background: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,1) 100%);
}

.mode-light .byr-img-caption-slide figcaption {
  background: rgba(255,255,255,0.9);
  color: rgba(0,0,0,0.85);
}

.mode-light .byr-img-chrome-outline {
  box-shadow:
    0 0 0 2px rgba(34,211,238,0.25),
    0 0 0 3px rgba(0,0,0,0.10),
    0 0 0 4px rgba(16,185,129,0.20);
}


/* ============ 15) ACCESSIBILITY ============ */

@media (prefers-reduced-motion: reduce) {
  .byr-img, .byr-img img, .byr-img::before, .byr-img::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.byr-img:focus-visible {
  outline: 3px solid var(--color-focus-ring, #FFD54F);
  outline-offset: 4px;
}

.byr-img img:not([alt]) {
  outline: 3px dashed rgba(255,0,0,0.5);
}

@media (prefers-contrast: high) {
  .byr-img-chrome::before,
  .byr-img-chrome-thick::before,
  .byr-img-chrome-spin::before {
    opacity: 1;
    padding: 3px;
  }

  .byr-img-glass {
    border-width: 2px;
    border-color: rgba(255,255,255,0.4);
  }
}


/* ============ 16) RESPONSIVE ============ */

@media (max-width: 1024px) {
  .byr-gallery-4 { grid-template-columns: repeat(2, 1fr); }
  .byr-gallery-bento { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .byr-gallery-3 { grid-template-columns: repeat(2, 1fr); }
  .byr-gallery-bento { grid-template-columns: 1fr; }
  .byr-gallery-bento .byr-img-featured,
  .byr-gallery-bento .byr-img-wide { grid-column: span 1; }

  .byr-cluster-trio { grid-template-columns: 1fr; grid-template-rows: auto; }
  .byr-cluster-trio .byr-img:first-child { grid-row: auto; }

  .byr-gallery-scatter .byr-img {
    margin: 0.25rem;
    transform: rotate(0deg) !important;
  }
}

@media (max-width: 480px) {
  .byr-gallery-2,
  .byr-gallery-3,
  .byr-gallery-4 { grid-template-columns: 1fr; }

  .byr-img-glass { padding: 6px; }

  :root {
    --byr-img-radius-lg: 16px;
    --byr-img-radius-xl: 20px;
  }
}


/* ============ 17) KEYFRAMES ============ */

@keyframes byr-chrome-rot {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@keyframes byr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes byr-kenburns {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.1) translate(-2%,-1%); }
  100% { transform: scale(1.05) translate(1%,-2%); }
}