/* ==========================================================================
   Lambda Phi Epsilon — Alpha Xi Chapter
   DriftWall — vanilla port of the React Bits component of the same name.
   Structural CSS follows the reference; the palette is the chapter's
   royal-blue-and-white token set. Self-contained: styles nothing outside
   .drift-wall-band / .drift-wall.
   ========================================================================== */

/* ---- 1. The full-bleed band (the wrapper the page provides) ------------- */
.drift-wall-band {
  position: relative;
  width: 100%;
  height: clamp(360px, 46vw, 560px);
  overflow: hidden;
  /* One-family rule: the band is a beige plate in light mode... */
  background:
    radial-gradient(120% 110% at 50% 0%, #FAF7EF 0%, #F7F4EA 72%),
    #F7F4EA;
  border-block: 1px solid rgba(27, 48, 87, .14);
}
/* ...and a navy plate in dark mode. */
[data-theme="dark"] .drift-wall-band {
  /* Black bleeds over the start of the photos, then hands off to the blue
     plate: the black-to-blue transition off the hero. */
  background:
    linear-gradient(to bottom, #0A0F1C 0%, rgba(10, 15, 28, 0) 48%),
    radial-gradient(120% 110% at 50% 0%, #16223D 0%, #111B33 72%),
    #111B33;
  border-block: 1px solid rgba(255, 255, 255, .07);
}

.drift-wall-band > .drift-wall { height: 100%; }

/* ---- 2. Root ------------------------------------------------------------ */
.drift-wall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: var(--dw-perspective, 1200px);
  perspective-origin: 50% 50%;

  --dw-tile-w: 220px;
  --dw-tile-h: 145px;
  --dw-gap: 18px;
  --dw-radius: 8px;
  --dw-lift: 64px;
  --dw-dim: 0.88;
  --dw-gray: 0;
  --dw-overlay: #F5F1E6;   /* light wash; dark override below */
  --dw-edge: 45%;          /* (1 - fade) * 100 */

  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
}

[data-theme="dark"] .drift-wall { --dw-overlay: #0A0F1C; }

/* ---- 3. Plane, columns, tracks ----------------------------------------- */
.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
}

/* ---- 4. Tiles ----------------------------------------------------------- */
.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  outline: none;
  color: inherit;
  text-decoration: none;
  transform-style: preserve-3d;
}

.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  display: block;
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #061539;
  opacity: var(--dw-dim);
  transform: translateZ(0);
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.drift-wall__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(var(--dw-gray)) saturate(0.92);
  transition: filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.drift-wall__overlay {
  position: absolute;
  inset: 0;
  background: var(--dw-overlay);
  opacity: 0.14;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 5. Photo placeholder (no photography supplied yet) ----------------- */
/* The gradient is set inline per tile index so neighbouring tiles differ. */
.drift-wall__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.75rem;
  text-align: center;
  background-image: linear-gradient(150deg, #12296B 0%, #061539 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.drift-wall__ph-mark {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .34);
  letter-spacing: .04em;
}

.drift-wall__ph-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* ---- 6. Hover / focus lift ---------------------------------------------- */
.drift-wall__tile.is-active .drift-wall__inner,
.drift-wall__tile:focus-visible .drift-wall__inner {
  opacity: 1;
  transform: translateZ(var(--dw-lift));
  box-shadow: 0 24px 60px -18px rgba(6, 21, 57, .78);
}

.drift-wall__tile.is-active img,
.drift-wall__tile:focus-visible img {
  filter: grayscale(0) saturate(1.05);
}

.drift-wall__tile.is-active .drift-wall__overlay,
.drift-wall__tile:focus-visible .drift-wall__overlay {
  opacity: 0;
}

.drift-wall__tile:focus-visible .drift-wall__inner {
  box-shadow:
    0 24px 60px -18px rgba(6, 21, 57, .78),
    0 0 0 2px rgba(255, 255, 255, .9);
}

/* Only linked tiles are interactive; decorative copies keep the arrow. */
.drift-wall__plane { cursor: default; }
.drift-wall a.drift-wall__tile { cursor: pointer; }

/* ---- 7. No-JS fallback + screen-reader copy ----------------------------- */
/* Visible until the script replaces the band's contents. */
.drift-wall__fallback {
  position: absolute;
  inset: auto 0 auto 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  max-width: 46ch;
  padding: 0 var(--sp-5, 1.5rem);
  text-align: center;
  color: #C6D2F2;
  font-size: 0.95rem;
  line-height: 1.6;
}

.drift-wall__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 8. Responsive ------------------------------------------------------ */
/* Tile size and column count are driven from JS (the drift maths depends on
   them); only the band height changes here. */
@media (max-width: 720px) {
  .drift-wall-band { height: clamp(300px, 52vw, 420px); }
}

@media (max-width: 520px) {
  .drift-wall-band { height: 280px; }
  .drift-wall__ph-label { font-size: 0.58rem; letter-spacing: .06em; }
  .drift-wall__ph-mark { font-size: 1.15rem; }
}

/* ---- 9. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane,
  .drift-wall__track { will-change: auto; }
}