/* =========================
   ABOUT — ROOT SCALE
   ========================= */

:root{
  /* ===== wide screen scaling ===== */
  /*
    1   = old behavior, stops at the 1920px design size
    1.5 = continues growing to 150% of the old max caps
    2   = continues growing to 200% of the old max caps
  */
  --wide-scale: 2;

  --about-full-w: clamp(760px, calc(1401 / 1920 * 100vw), 1401px);
  --about-stage-min-h: clamp(920px, calc(1698 / 1920 * 100vw), 1698px);

  --about-stacked-track-w: clamp(260px, calc(1031 / 1920 * 100vw), 1031px);
  --about-top-to-track-ratio: 1.359;

  --about-photo-w: clamp(320px, calc(620 / 1920 * 100vw), 620px);
  --about-photo-shift-y: clamp(72px, calc(148 / 1920 * 100vw), 148px);

  --about-gap-md: clamp(16px, calc(24 / 1920 * 100vw), 24px);
  --about-gap-lg: clamp(20px, calc(32 / 1920 * 100vw), 32px);

  --about-stacked-photo-mt: clamp(-5px, calc(20 / 1499 * 100vw), 35px);
  --about-stacked-bot-mt: clamp(0px, calc(20 / 1499 * 100vw), 35px);
}


/* =========================================
   WIDE SCREEN UPSCALE ONLY
   nothing changes at or below 1920px
   ========================================= */

@media (min-width: 1920px){
  :root{
    --about-full-w: clamp(1401px, calc(1401 / 1920 * 100vw), calc(1401px * var(--wide-scale)));
    --about-stage-min-h: clamp(1698px, calc(1698 / 1920 * 100vw), calc(1698px * var(--wide-scale)));

    --about-stacked-track-w: clamp(1031px, calc(1031 / 1920 * 100vw), calc(1031px * var(--wide-scale)));

    --about-photo-w: clamp(620px, calc(620 / 1920 * 100vw), calc(620px * var(--wide-scale)));
    --about-photo-shift-y: clamp(148px, calc(148 / 1920 * 100vw), calc(148px * var(--wide-scale)));

    --about-gap-md: clamp(24px, calc(24 / 1920 * 100vw), calc(24px * var(--wide-scale)));
    --about-gap-lg: clamp(32px, calc(32 / 1920 * 100vw), calc(32px * var(--wide-scale)));

    /*
      These are only used in stacked mode, which currently ends at 1499px.
      They are included for completeness in case the stacked breakpoint is
      changed later.
    */
    --about-stacked-photo-mt: clamp(35px, calc(35 / 1920 * 100vw), calc(35px * var(--wide-scale)));
    --about-stacked-bot-mt: clamp(35px, calc(35 / 1920 * 100vw), calc(35px * var(--wide-scale)));
  }
}


/* =========================
   PAGE WIDTH
   ========================= */

.about-page{
  width: min(100%, var(--about-full-w));
  margin: 0 auto;
}

.info-page .info-head,
.info-page .info-body {
  width: min(100%, clamp(520px, calc(860 / 1920 * 100vw), 760px));
}

@media (min-width: 1920px){
  .info-page .info-head,
  .info-page .info-body {
    width: min(100%, clamp(760px, calc(760 / 1920 * 100vw), calc(760px * var(--wide-scale))));
  }
}

/* =========================
   STAGE
   ========================= */

.about-stage{
  width: 100%;
  margin: var(--about-gap-md) auto var(--about-gap-lg);
}

.about-stage__desktop{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--about-stage-min-h);
}

.about-stage__stacked{
  display: none;
}


/* =========================
   ARTWORK
   ========================= */

.about-art{
  display: flex;
  justify-content: center;
  margin: 0;
}

.about-art--full{
  width: var(--about-full-w);
}

.about-art img,
.about-photo img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}

.about-art img{
  border-radius: 0 !important;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.25))
    drop-shadow(0 0 8px rgba(255,255,255,0.04));
}


/* =========================
   PHOTO OVERLAY
   ========================= */

.about-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--about-gap-lg);
  pointer-events: none;
  transform: translateY(var(--about-photo-shift-y));
}

.about-photo{
  width: var(--about-photo-w);
  pointer-events: auto;
}

.about-photo img{
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,0.28))
    drop-shadow(0 0 8px rgba(255,255,255,0.05));
}

/* =========================
   ABOUT PHOTO CAROUSEL
   ========================= */

.about-carousel{
  position: relative;
}

.about-carousel img{
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}

.about-carousel__btn{
  position: absolute;
  top: 50%;
  z-index: 5;

  width: clamp(34px, calc(44 / 1920 * 100vw), 44px);
  height: clamp(48px, calc(64 / 1920 * 100vw), 64px);

  padding: 0;
  border: 0;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.14),
      rgba(0,0,0,0.28)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 8px 18px rgba(0,0,0,0.28);

  cursor: pointer;
  opacity: 0.72;

  transform: translateY(-50%);
  transition:
    opacity 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.about-carousel__btn:hover{
  opacity: 1;
  filter:
    drop-shadow(0 0 8px var(--hover-glow))
    drop-shadow(0 0 18px var(--hover-glow));
}

.about-carousel__btn:active{
  transform: translateY(-50%) scale(0.96);
}

.about-carousel__btn--prev{
  left: clamp(10px, calc(18 / 1920 * 100vw), 18px);
}

.about-carousel__btn--next{
  right: clamp(10px, calc(18 / 1920 * 100vw), 18px);
}

.about-carousel__btn::before{
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.about-carousel__btn--prev::before{
  border-top: clamp(8px, calc(11 / 1920 * 100vw), 11px) solid transparent;
  border-bottom: clamp(8px, calc(11 / 1920 * 100vw), 11px) solid transparent;
  border-right: clamp(12px, calc(17 / 1920 * 100vw), 17px) solid rgba(255,255,255,0.92);
  margin-left: -2px;
}

.about-carousel__btn--next::before{
  border-top: clamp(8px, calc(11 / 1920 * 100vw), 11px) solid transparent;
  border-bottom: clamp(8px, calc(11 / 1920 * 100vw), 11px) solid transparent;
  border-left: clamp(12px, calc(17 / 1920 * 100vw), 17px) solid rgba(255,255,255,0.92);
  margin-right: -2px;
}

@media (min-width: 1920px){
  .about-carousel__btn{
    width: clamp(44px, calc(44 / 1920 * 100vw), calc(44px * var(--wide-scale)));
    height: clamp(64px, calc(64 / 1920 * 100vw), calc(64px * var(--wide-scale)));
  }

  .about-carousel__btn--prev{
    left: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
  }

  .about-carousel__btn--next{
    right: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
  }

  .about-carousel__btn--prev::before{
    border-top-width: clamp(11px, calc(11 / 1920 * 100vw), calc(11px * var(--wide-scale)));
    border-bottom-width: clamp(11px, calc(11 / 1920 * 100vw), calc(11px * var(--wide-scale)));
    border-right-width: clamp(17px, calc(17 / 1920 * 100vw), calc(17px * var(--wide-scale)));
  }

  .about-carousel__btn--next::before{
    border-top-width: clamp(11px, calc(11 / 1920 * 100vw), calc(11px * var(--wide-scale)));
    border-bottom-width: clamp(11px, calc(11 / 1920 * 100vw), calc(11px * var(--wide-scale)));
    border-left-width: clamp(17px, calc(17 / 1920 * 100vw), calc(17px * var(--wide-scale)));
  }
}


/* =========================
   STACKED MODE
   ========================= */

@media (max-width: 1499px){
  .about-stage__desktop{
    display: none;
  }

  .about-stage__stacked{
    display: block;
    width: 100%;
  }

  .about-stage__stacked > *{
    position: relative;
    left: 50%;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
  }

  .about-photo--stacked{
    width: var(--about-stacked-track-w);
    margin-top: var(--about-stacked-photo-mt);
  }

  .about-art--bot{
    width: var(--about-stacked-track-w);
    margin-top: var(--about-stacked-bot-mt);
  }

  .about-art--top{
    width: calc(var(--about-stacked-track-w) * var(--about-top-to-track-ratio));
    max-width: none;
  }
}