/* ═══════════════════════════════════════════════════════════

       MEMBERS CANVAS — Interactive Band Mural
       Layered over the About section's right column.
    ═══════════════════════════════════════════════════════════ */

/* ─── ABOUT GRID OVERRIDES ─────────────────────────────────
   Canvas on the left, biography on the right (desktop).
   On mobile the natural HTML order is preserved (text → image).
   ────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  #about .about__grid {
    grid-template-columns: 1.45fr 0.55fr;
    align-items: center;
    gap: 4rem;
  }

  #about .about__left {
    order: 2;
  }

  #about .about__right {
    order: 1;
  }
}

/* Tablet (769–900px): stack like mobile */
@media (min-width: 769px) and (max-width: 900px) {
  #about .about__grid {
    grid-template-columns: 1fr;
  }

  #about .about__left {
    border-right: none;
    padding-right: 0;
    margin-bottom: 3rem;
  }

  #about .about__right {
    padding-left: 0;
  }
}

/* ─── CANVAS CONTAINER ─────────────────────────────────────
   The photo frame with a slight pinboard rotation and
   decorative masking-tape strip on top.
   ────────────────────────────────────────────────────────── */
.canvas-container {
  position: relative;
  width: 100%;
  border: 3px solid var(--color-gray);
  border-radius: 3px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(111, 97, 192, .15);
  background: #000;
}

/* Decorative tape strip */
.canvas-container::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(1.5deg);
  width: 160px;
  height: 30px;
  background: linear-gradient(135deg,
      rgba(255, 255, 230, .35),
      rgba(255, 255, 230, .2));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  z-index: 20;
  pointer-events: none;
}

/* Band photo */
.canvas-bg-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── SPOTLIGHT OVERLAYS ───────────────────────────────────
   Dark layers with radial-gradient masks that "cut out"
   a vertical column of light over each member.
   ────────────────────────────────────────────────────────── */
.spotlight-layer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: grayscale(70%) blur(1px);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}

/* Vertical spotlight masks — narrow horizontally, tall vertically */
.spotlight-layer.sl-juan {
  -webkit-mask-image: radial-gradient(10% 40% at 19% 50%, transparent 40%, black 100%);
  mask-image: radial-gradient(10% 40% at 19% 50%, transparent 40%, black 100%);
}

.spotlight-layer.sl-ronmel {
  -webkit-mask-image: radial-gradient(10% 40% at 32% 50%, transparent 40%, black 100%);
  mask-image: radial-gradient(10% 40% at 32% 50%, transparent 40%, black 100%);
}

.spotlight-layer.sl-karilyn {
  -webkit-mask-image: radial-gradient(12% 45% at 49% 55%, transparent 40%, black 100%);
  mask-image: radial-gradient(12% 45% at 49% 55%, transparent 40%, black 100%);
}

.spotlight-layer.sl-aura {
  -webkit-mask-image: radial-gradient(10% 40% at 66% 50%, transparent 40%, black 100%);
  mask-image: radial-gradient(10% 40% at 66% 50%, transparent 40%, black 100%);
}

.spotlight-layer.sl-fabricio {
  -webkit-mask-image: radial-gradient(10% 40% at 81% 50%, transparent 40%, black 100%);
  mask-image: radial-gradient(10% 40% at 81% 50%, transparent 40%, black 100%);
}

/* Activate the matching spotlight on hover */
.canvas-container:has(.ma-juan:hover) .sl-juan,
.canvas-container:has(.ma-ronmel:hover) .sl-ronmel,
.canvas-container:has(.ma-karilyn:hover) .sl-karilyn,
.canvas-container:has(.ma-aura:hover) .sl-aura,
.canvas-container:has(.ma-fabricio:hover) .sl-fabricio {
  opacity: 1;
}

/* ─── INTERACTIVE HIT AREAS ────────────────────────────────
   Invisible columns spanning the full height of the photo.
   ────────────────────────────────────────────────────────── */
.member-area {
  position: absolute;
  inset: 0 auto 0 auto;
  cursor: crosshair;
  z-index: 5;
}

.ma-juan {
  left: 0%;
  width: 20%;
}

.ma-ronmel {
  left: 20%;
  width: 20%;
}

.ma-karilyn {
  left: 40%;
  width: 20%;
}

.ma-aura {
  left: 60%;
  width: 20%;
}

.ma-fabricio {
  left: 80%;
  width: 20%;
}

/* ─── DOODLE LABELS ────────────────────────────────────────
   Hand-drawn style name + role labels with arrow pointers.
   ────────────────────────────────────────────────────────── */
.member-doodle {
  position: absolute;
  font-family: 'Caveat', cursive, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: .85;
  transition: opacity .3s ease, transform .3s ease;
}

.doodle-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  text-align: center;
}

.doodle-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

.doodle-role {
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-purple);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.doodle-arrow {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgba(255, 255, 255, .75);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

/* ─── INDIVIDUAL DOODLE POSITIONS ──────────────────────────
   Staggered top/bottom placement so they don't collide.
   ────────────────────────────────────────────────────────── */
.d-juan {
  bottom: 10%;
  left: 62%;
  transform: translateX(-50%);
}

.d-juan .doodle-arrow {
  transform: scaleY(-1);
  margin-bottom: 3px;
}

.d-ronmel {
  top: 10%;
  left: 62%;
  transform: translateX(-50%);
}

.d-ronmel .doodle-text {
  transform: rotate(2deg);
}

.d-ronmel .doodle-arrow {
  margin-top: 3px;
}

.d-karilyn {
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.d-karilyn .doodle-arrow {
  transform: scaleY(-1);
  margin-bottom: 3px;
}

.d-aura {
  top: 12%;
  left: 38%;
  transform: translateX(-50%);
}

.d-aura .doodle-text {
  transform: rotate(-2deg);
}

.d-aura .doodle-arrow {
  margin-top: 3px;
}

.d-fabricio {
  bottom: 14%;
  left: 38%;
  transform: translateX(-50%);
}

.d-fabricio .doodle-text {
  transform: rotate(1deg);
}

.d-fabricio .doodle-arrow {
  transform: scaleY(-1);
  margin-bottom: 3px;
}

/* ─── DOODLE HOVER BEHAVIOUR ───────────────────────────────
   All doodles dim when any member is hovered;
   the active member's doodle pops to full opacity + scale.
   ────────────────────────────────────────────────────────── */
.canvas-container:has(.member-area:hover) .member-doodle {
  opacity: .15;
}

.canvas-container:has(.member-area:hover) .member-area:hover .member-doodle {
  opacity: 1;
  transform: translateX(-50%) scale(1.1);
}

/* ─── ENTRANCE ANIMATIONS ─────────────────────────────────
   Cinematic scroll-reveal: canvas scales in with a glow pulse,
   then doodles pop in one-by-one with a springy bounce.
   ────────────────────────────────────────────────────────── */

/* Canvas entrance — scale + glow */
.canvas-container.reveal {
  transform: scale(.82);
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1),
    transform 1.2s cubic-bezier(.16, 1, .3, 1),
    box-shadow 1.4s ease;
}

.canvas-container.reveal.is-visible {
  transform: scale(1);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(111, 97, 192, .15),
    0 0 40px rgba(111, 97, 192, .12);
}

/* Doodle entrance — springy pop with overshoot */
@keyframes doodle-pop-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(.3);
  }

  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px) scale(1.15);
  }

  80% {
    transform: translateX(-50%) translateY(2px) scale(.97);
  }

  100% {
    opacity: .85;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.canvas-container.reveal.is-visible .member-doodle {
  animation: doodle-pop-in .8s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.canvas-container.reveal.is-visible .d-juan {
  animation-delay: .3s;
}

.canvas-container.reveal.is-visible .d-ronmel {
  animation-delay: .5s;
}

.canvas-container.reveal.is-visible .d-karilyn {
  animation-delay: .7s;
}

.canvas-container.reveal.is-visible .d-aura {
  animation-delay: .9s;
}

.canvas-container.reveal.is-visible .d-fabricio {
  animation-delay: 1.1s;
}

/* ─── RESPONSIVE — MOBILE (≤ 768px) ───────────────────── */
@media (max-width: 768px) {
  .canvas-container {
    transform: rotate(0);
    /* straighten on small screens */
    border-radius: 2px;
  }

  .canvas-container::after {
    width: 100px;
    height: 22px;
    top: -10px;
  }

  .member-doodle {
    transform: translateX(-50%) scale(.65);
  }

  .d-juan,
  .d-karilyn,
  .d-fabricio {
    bottom: 4%;
  }

  .d-ronmel,
  .d-aura {
    top: 4%;
  }

  .doodle-name {
    font-size: 1.1rem;
  }

  .doodle-role {
    font-size: .7rem;
  }

  .doodle-arrow {
    width: 22px;
    height: 22px;
  }

  /* Hover scale override for mobile */
  .canvas-container:has(.member-area:hover) .member-area:hover .member-doodle {
    transform: translateX(-50%) scale(.72);
  }
}