:root {
  --background: #050505;
  --white: #ffffff;

  --expanded-panel: 65%;
  --collapsed-panel: 35%;

  --animation-time: 850ms;
  --animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==============================
   RESET
   ============================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;

  background: var(--background);
  color: var(--white);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

a {
  color: inherit;
}


/* ==============================
   MAIN PAGE
   ============================== */

.location-page {
  position: relative;

  display: flex;

  width: 100%;
  height: 100vh;
  height: 100svh;

  overflow: hidden;

  background: var(--background);

  opacity: 0;

  animation:
    pageFadeIn 1.2s ease forwards;
}

@keyframes pageFadeIn {
  to {
    opacity: 1;
  }
}


/* ==============================
   LOCATION PANELS
   ============================== */

.location-panel {
  position: relative;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;

  min-width: 0;
  height: 100%;

  overflow: hidden;

  color: var(--white);
  text-decoration: none;

  isolation: isolate;

  transition:
    flex-basis var(--animation-time) var(--animation-easing),
    filter var(--animation-time) ease,
    opacity var(--animation-time) ease;
}


/* ==============================
   BACKGROUND IMAGES
   ============================== */

.location-panel__image {
  position: absolute;

  inset: -5%;

  z-index: -4;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  filter:
    grayscale(100%)
    brightness(0.7)
    contrast(1.08);

  transform: scale(1.08);

  transition:
    transform 1400ms var(--animation-easing),
    filter 900ms ease;
}


/*
  TEST PHOTOS.

  Later replace these URLs with your own photos.
*/

.location-panel--durham .location-panel__image {
  background-image: url("/images/durham-slide.jpg?v=10");
  background-position: center;
  background-size: cover;
}

.location-panel--newcastle .location-panel__image {
  background-image: url("/images/ncstl-slide.png?v=10");
  background-position: center;
  background-size: cover;
}

/* ==============================
   DARK CINEMATIC OVERLAY
   ============================== */

.location-panel__overlay {
  position: absolute;

  inset: 0;

  z-index: -3;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.58) 35%,
      rgba(0, 0, 0, 0.12) 72%,
      rgba(0, 0, 0, 0.46) 100%
    );

  transition:
    opacity 900ms ease;
}


/* ==============================
   LIGHT TEXTURE
   ============================== */

.location-panel__texture {
  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: 0.11;

  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px,
      transparent 10px
    );

  mix-blend-mode: overlay;
}


/* ==============================
   LOCATION CONTENT
   ============================== */

.location-panel__content {
  position: absolute;

  bottom: clamp(105px, 18vh, 190px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: min(80%, 750px);

  transition:
    transform var(--animation-time) var(--animation-easing),
    opacity 600ms ease;
}


/*
  Important:
  text is shifted away from the centre line.
*/

.location-panel--durham .location-panel__content {
  left: clamp(35px, 8vw, 185px);
  right: auto;
}

.location-panel--newcastle .location-panel__content {
  right: clamp(35px, 7vw, 145px);
  left: auto;
}


/* ==============================
   SMALL BRAND ABOVE CITY
   ============================== */

.location-panel__brand {
  margin-bottom: 14px;

  font-size: clamp(0.6rem, 0.8vw, 0.82rem);
  font-weight: 600;

  letter-spacing: 0.28em;
  text-transform: uppercase;

  opacity: 0.84;

  transition:
    opacity 500ms ease,
    transform 600ms var(--animation-easing);
}


/* ==============================
   CITY TITLE
   ============================== */

.location-panel__city {
  margin: 0;

  font-family:
    Impact,
    "Arial Narrow",
    sans-serif;

  font-size: clamp(4.4rem, 9.3vw, 10.5rem);
  font-weight: 500;

  line-height: 0.82;

  letter-spacing: -0.025em;
  text-transform: uppercase;

  white-space: nowrap;

  transform-origin: left center;

  transition:
    transform 750ms var(--animation-easing),
    opacity 600ms ease,
    text-shadow 600ms ease;
}


/* ==============================
   SELECT LOCATION BUTTON
   ============================== */

.location-panel__button {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 24px;

  margin-top: 32px;
  padding-bottom: 12px;

  font-size: clamp(0.6rem, 0.75vw, 0.78rem);
  font-weight: 600;

  letter-spacing: 0.23em;
  text-transform: uppercase;

  opacity: 0.8;

  transform: translateY(8px);

  transition:
    opacity 500ms ease,
    transform 600ms var(--animation-easing);
}

.location-panel__button::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: rgba(255, 255, 255, 0.9);

  transform: scaleX(0.72);
  transform-origin: left;

  transition:
    transform 700ms var(--animation-easing);
}

.location-panel__arrow {
  font-size: 1.2rem;

  transition:
    transform 500ms var(--animation-easing);
}


/* ==============================
   DIVIDER
   ============================== */

.location-divider {
  position: absolute;

  top: 0;
  bottom: 70px;
  left: 50%;

  z-index: 20;

  width: 1px;

  background: rgba(255, 255, 255, 0.82);

  transform: translateX(-50%);

  pointer-events: none;

  transition:
    left var(--animation-time) var(--animation-easing),
    opacity 500ms ease,
    box-shadow 600ms ease;
}

.location-divider__light {
  position: absolute;

  top: 48%;
  left: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 7px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.9),
    0 0 38px rgba(255, 255, 255, 0.55);

  transform: translate(-50%, -50%);

  opacity: 0.8;

  transition:
    opacity 500ms ease,
    box-shadow 600ms ease;
}


/* ==============================
   TOP LOGO
   SIZE IS NOT INCREASED
   ============================== */

.location-header {
  position: absolute;

  top: clamp(28px, 4vh, 48px);
  left: 50%;

  z-index: 30;

  text-align: center;

  transform: translateX(-50%);

  pointer-events: none;

  opacity: 0;

  animation:
    headerFadeIn 1s ease 300ms forwards;
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.location-header__logo {
  display: block;

  font-size: clamp(0.8rem, 1.05vw, 1.05rem);
  font-weight: 600;

  letter-spacing: 0.28em;
  text-transform: uppercase;

  text-decoration: none;
  white-space: nowrap;

  pointer-events: auto;
}

.location-header__subtitle {
  margin: 12px 0 0;

  font-size: clamp(0.52rem, 0.65vw, 0.68rem);

  letter-spacing: 0.3em;
  text-transform: uppercase;

  opacity: 0.7;
}


/* ==============================
   FOOTER
   ============================== */

.location-footer {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 25;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  height: 70px;

  padding:
    0
    clamp(30px, 4.5vw, 75px);

  border-top:
    1px solid rgba(255, 255, 255, 0.12);

  background:
    rgba(2, 2, 2, 0.72);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: clamp(0.5rem, 0.6vw, 0.64rem);

  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.location-footer__copyright {
  justify-self: start;

  opacity: 0.66;
}

.location-footer__centre {
  display: flex;
  align-items: center;

  gap: 22px;

  opacity: 0.7;
}

.location-footer__centre a {
  font-size: 1.5rem;

  text-decoration: none;
}

.location-footer__links {
  display: flex;

  justify-self: end;

  gap: 45px;
}

.location-footer__links a {
  position: relative;

  text-decoration: none;
}

.location-footer__links a::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: -7px;
  left: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: right;

  transition:
    transform 400ms ease;
}

.location-footer__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ==============================
   DESKTOP HOVER
   ============================== */

@media (min-width: 769px) and (hover: hover) {

  /*
    Durham expands
  */

  .location-page:has(.location-panel--durham:hover)
  .location-panel--durham {
    flex-basis: var(--expanded-panel);
  }

  .location-page:has(.location-panel--durham:hover)
  .location-panel--newcastle {
    flex-basis: var(--collapsed-panel);

    opacity: 0.62;
  }

  .location-page:has(.location-panel--durham:hover)
  .location-divider {
    left: var(--expanded-panel);

    box-shadow:
      0 0 18px rgba(255, 255, 255, 0.38);
  }


  /*
    Newcastle expands
  */

  .location-page:has(.location-panel--newcastle:hover)
  .location-panel--newcastle {
    flex-basis: var(--expanded-panel);
  }

  .location-page:has(.location-panel--newcastle:hover)
  .location-panel--durham {
    flex-basis: var(--collapsed-panel);

    opacity: 0.62;
  }

  .location-page:has(.location-panel--newcastle:hover)
  .location-divider {
    left: var(--collapsed-panel);

    box-shadow:
      0 0 18px rgba(255, 255, 255, 0.38);
  }


  /*
    Selected panel becomes colour
  */

  .location-panel:hover .location-panel__image {
    filter:
      grayscale(0%)
      brightness(0.86)
      contrast(1.02);

    transform:
      scale(1.01)
      translate3d(0, 0, 0);
  }

  .location-panel:hover .location-panel__overlay {
    opacity: 0.75;
  }

  .location-panel:hover .location-panel__city {
    transform: scale(1.025);

    text-shadow:
      0 8px 40px rgba(0, 0, 0, 0.7);
  }

  .location-panel:hover .location-panel__brand {
    opacity: 1;

    transform: translateY(-2px);
  }

  .location-panel:hover .location-panel__button {
    opacity: 1;

    transform: translateY(0);
  }

  .location-panel:hover
  .location-panel__button::after {
    transform: scaleX(1);
  }

  .location-panel:hover
  .location-panel__arrow {
    transform: translateX(7px);
  }


  /*
    Text movement while panel grows.
    It remains away from the central line.
  */

  .location-panel--durham:hover
  .location-panel__content {
    transform: translateX(16px);
  }

  .location-panel--newcastle:hover
  .location-panel__content {
    transform: translateX(-16px);
  }
}


/* ==============================
   CLICK TRANSITION
   ============================== */

.location-page.is-navigating
.location-panel {
  pointer-events: none;
}

.location-page.is-navigating
.location-panel.is-selected {
  position: absolute;

  inset: 0;

  z-index: 50;

  width: 100%;
  height: 100%;

  flex-basis: 100%;

  opacity: 1;

  transition:
    width 850ms var(--animation-easing),
    height 850ms var(--animation-easing),
    inset 850ms var(--animation-easing),
    opacity 500ms ease;
}

.location-page.is-navigating
.location-panel.is-selected
.location-panel__image {
  filter:
    grayscale(0%)
    brightness(0.65);

  transform: scale(1);
}

.location-page.is-navigating
.location-panel:not(.is-selected) {
  opacity: 0;
}

.location-page.is-navigating
.location-divider,
.location-page.is-navigating
.location-header,
.location-page.is-navigating
.location-footer {
  opacity: 0;
}


/* Final black fade */

.page-transition {
  position: fixed;

  inset: 0;

  z-index: 100;

  background: #000000;

  pointer-events: none;

  opacity: 0;

  transition:
    opacity 450ms ease;
}

.page-transition.is-visible {
  opacity: 1;
}


/* ==============================
   MOBILE
   ============================== */

@media (max-width: 768px) {

  body {
    overflow: hidden;
  }

  .location-page {
    flex-direction: column;
  }

  .location-panel {
    flex-basis: 50%;

    width: 100%;
    height: 50%;
  }

  .location-panel__image {
    inset: -3%;

    filter:
      grayscale(70%)
      brightness(0.7)
      contrast(1.05);
  }


  /*
    Horizontal dividing line
  */

  .location-divider {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;

    width: 100%;
    height: 1px;

    transform: translateY(-50%);
  }

  .location-divider__light {
    top: 50%;
    left: 50%;
  }


  /*
    Text positioning on mobile
  */

  .location-panel__content {
    bottom: 24px;

    width: calc(100% - 44px);
  }

  .location-panel--durham
  .location-panel__content,
  .location-panel--newcastle
  .location-panel__content {
    right: auto;
    left: 22px;
  }

  .location-panel__brand {
    margin-bottom: 8px;

    font-size: 0.5rem;
  }

  .location-panel__city {
    font-size: clamp(3.2rem, 15.5vw, 5.5rem);

    line-height: 0.85;
  }

  .location-panel__button {
    gap: 15px;

    margin-top: 14px;
    padding-bottom: 7px;

    font-size: 0.52rem;

    opacity: 1;

    transform: none;
  }


  /*
    Logo stays small
  */

  .location-header {
    top: 15px;

    padding:
      7px
      11px;

    background:
      rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .location-header__logo {
    font-size: 0.63rem;
  }

  .location-header__subtitle {
    display: none;
  }

  .location-footer {
    display: none;
  }

  .location-panel.is-touched
  .location-panel__image {
    filter:
      grayscale(0%)
      brightness(0.82);

    transform: scale(1.01);
  }

  .location-panel.is-touched
  .location-panel__city {
    transform: scale(1.02);
  }

  .location-panel.is-touched
  .location-panel__arrow {
    transform: translateX(6px);
  }
}


/* ==============================
   SMALL PHONES
   ============================== */

@media (max-width: 390px) {

  .location-panel__city {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
  }

  .location-panel__button {
    margin-top: 10px;
  }
}


/* ==============================
   REDUCED MOTION
   ============================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}