/*
 * BIC Village 2026 "temporal fracture" frame: palette tokens, the glitch layer
 * stack, and the era readout. Shared by the event landing page and the event
 * session scoreboard, so it holds nothing page-specific.
 *
 * Drives app/client/static/js/bic-village-glitch.js. The image itself is set on
 * the element as --bic-hero-image from the template, not from here: the
 * blob -> CDN response rewrite only touches HTML and JSON bodies, never text/css.
 *
 * Palette is verbatim from the BIC Village 2026 Branding / Media Kit.
 */

.bic-2026,
.bic-fracture,
.bic-2026-scoreboard {
  /* 2026 event palette */
  --bic-cream: #F5EBDD;
  --bic-juke-green: #3E5F4A;
  --bic-deep-moss: #284233;
  --bic-brass: #B88A44;

  /* Official Alaafia State University colors */
  --bic-legacy-blue: #153A6B;
  --bic-victory-gold: #D4A72C;

  /* Cultural heritage palette */
  --bic-liberation-red: #B22222;
  --bic-heritage-black: #111111;
  --bic-unity-green: #008751;

  /* Firebird / future accents */
  --bic-copper: #A25E2B;
  --bic-flux-amber: #FFB347;
  --bic-midnight-navy: #0C1F3F;

  /* Derived */
  --bic-ink: var(--bic-heritage-black);
  --bic-rule: rgba(184, 138, 68, 0.32);
  --bic-split: 0px;

  /* Type roles, per the kit's TYPOGRAPHY DIRECTION page:
       Collegiate     -> headlines        (varsity block, the banner voice)
       Vintage Serif  -> subheadings      (aged campus archive)
       Campus Sans    -> body copy / info (neutral, institutional)
       Retro Sci-Fi   -> tech + accents   (the fractured-time layer)
     Each role has exactly one job. Do not reach for a different one to get a
     size or weight: change the size or weight instead. */
  /* Graduate is single-weight (400) and drawn for caps, so collegiate headlines
     set text-transform: uppercase and never ask for a bolder weight.
     Glyph limit worth knowing: it covers Latin-1, so "Àlàáfíà" is fine, but it
     has no U+1E63 (the s-with-dot in "Òṣun"). Keep Òṣun out of headlines, or it
     falls back mid-word. Body copy is Inter, which does have it. */
  --bic-display: 'Graduate', 'Copperplate', 'Trajan Pro', Georgia, serif;
  --bic-serif: 'Libre Baskerville', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --bic-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bic-tech: 'Chakra Petch', 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

/* ------------------------------------------------------------------ */
/* The frame                                                          */
/* ------------------------------------------------------------------ */

.bic-fracture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bic-midnight-navy);
}

.bic-fracture-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bic-fracture-plate,
.bic-fracture-slice {
  position: absolute;
  inset: 0;
  background-image: var(--bic-hero-image);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  will-change: transform, filter, opacity;
}

.bic-fracture-plate {
  transition: filter 620ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Channel-shifted copies. Screen blending at low opacity turns the horizontal
 * offset into chromatic aberration instead of three legible images. */
.bic-fracture-chan {
  mix-blend-mode: screen;
  opacity: 0.5;
}

.bic-fracture-chan-red {
  transform: translate3d(calc(var(--bic-split) * -1), 0, 0);
  background-color: var(--bic-liberation-red);
  background-blend-mode: multiply;
}

.bic-fracture-chan-cyan {
  transform: translate3d(var(--bic-split), 0, 0);
  background-color: #00cfd8;
  background-blend-mode: multiply;
}

/* Tear slices: each is the frame clipped to a horizontal band and shoved
 * sideways, so the image reads as coming apart across eras. */
.bic-fracture-slices {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.bic-fracture.is-tearing .bic-fracture-slices {
  opacity: 1;
}

.bic-fracture-slice {
  animation: bic-slice-shove 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--bic-slice-delay, 0ms);
}

@keyframes bic-slice-shove {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  18% { transform: translate3d(var(--bic-slice-shift), 0, 0); opacity: 1; }
  62% { transform: translate3d(calc(var(--bic-slice-shift) * -0.35), 0, 0); opacity: 0.85; }
  100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

/* Static CRT scanlines with a slow drift. */
.bic-fracture-scan {
  position: absolute;
  inset: -100% 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
  animation: bic-scan-drift 8s linear infinite;
}

@keyframes bic-scan-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 3px, 0); }
}

/* Film grain, weighted per era (older eras are grainier). */
.bic-fracture-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity 620ms ease;
}

/* A single bright band crossing the frame at the moment of the tear. */
.bic-fracture-sweep {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 179, 71, 0.05) 44%,
    rgba(245, 235, 221, 0.5) 50%,
    rgba(255, 179, 71, 0.05) 56%,
    transparent 100%
  );
}

.bic-fracture-sweep.is-running {
  animation: bic-sweep 650ms cubic-bezier(0.4, 0, 0.6, 1) 1;
}

@keyframes bic-sweep {
  0% { opacity: 0; transform: translate3d(0, -100%, 0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 100%, 0); }
}

/* Readability scrim, so cream type stays legible over every era grade. */
.bic-fracture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(40, 66, 51, 0.94) 0%,
    rgba(40, 66, 51, 0.78) 38%,
    rgba(12, 31, 63, 0.62) 100%
  );
}

/* Reduced motion: eras still change, as a plain crossfade. No tearing, no
 * slices, no drifting scanlines, no chromatic split. */
@media (prefers-reduced-motion: reduce) {
  .bic-fracture-slices,
  .bic-fracture-sweep,
  .bic-fracture-chan {
    display: none;
  }

  .bic-fracture-scan {
    animation: none;
  }

  .bic-fracture-plate {
    transition: filter 900ms ease, opacity 900ms ease;
  }
}

/* ------------------------------------------------------------------ */
/* Era pills: the manual time-travel control, and the only era readout */
/* ------------------------------------------------------------------ */

.bic-era-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bic-era-pill {
  font-family: var(--bic-tech);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(245, 235, 221, 0.68);
  background: rgba(17, 17, 17, 0.34);
  border: 1px solid var(--bic-rule);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.bic-era-pill:hover,
.bic-era-pill:focus-visible {
  color: var(--bic-cream);
  border-color: var(--bic-victory-gold);
  outline: none;
}

.bic-era-pill.is-active {
  color: var(--bic-heritage-black);
  background: var(--bic-victory-gold);
  border-color: var(--bic-victory-gold);
}