/* Hero for the UX Was Here and Quebec Winter Carnival case studies, built
   like the PhoenixRise and ALEASAT heroes: the shared header over a
   full-width scene, a centred title and subtitle, and the project image
   fading into the page.

   By default the scene is lavender, #ebe0fd (main.css's --light-purple),
   the colour the original hero images sat on; a page can set its own
   --case-hero-bg (UX Was Here uses sage). In dark mode the scene keeps its
   colour but dims to a deep, muted version of it (--case-hero-bg-dark: a
   deep purple here, a deep green for UX Was Here) so it blends into the
   dark page, with an off-white title and subtitle and the light lavender
   navigation of the other dark pages; the device screenshots keep their
   own colours. Both pages use cut-out hero images with the blend variation
   below, so the scene eases into the page instead of being painted over. */

.case-hero-shell {
  --case-hero-bg: #ebe0fd;
  --case-hero-bg-dark: #2a2140;
  --case-hero-ink: #0e0a1c;
  --case-hero-page-bg: var(--white, #ffffff);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  /* Full width past main.css's body padding, as the header does */
  width: calc(100% + 5rem);
  margin: calc(-2rem - 8px) 0 clamp(32px, 4vw, 56px) calc(-2rem - 8px);
  background-color: var(--case-hero-bg);
  /* A soft light at the top, gone before the image starts */
  background-image: radial-gradient(
    ellipse 60% 38% at 50% 0%,
    rgb(255 255 255 / 55%),
    transparent 70%
  );
  background-repeat: no-repeat;
}

/* The PhoenixRise hero's fade into the page (phoenixrise.css) */
.case-hero-shell::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.025) 12%,
    rgba(255, 255, 255, 0.07) 24%,
    rgba(255, 255, 255, 0.15) 38%,
    rgba(255, 255, 255, 0.29) 53%,
    rgba(255, 255, 255, 0.49) 68%,
    rgba(255, 255, 255, 0.71) 81%,
    rgba(255, 255, 255, 0.88) 91%,
    rgba(255, 255, 255, 0.97) 97%,
    var(--case-hero-page-bg) 100%
  );
  content: "";
  pointer-events: none;
}

:root[data-portfolio-theme="dark"] .case-hero-shell::after {
  background: linear-gradient(
    to bottom,
    rgba(14, 10, 28, 0) 0%,
    var(--case-hero-page-bg) 100%
  );
}

/* The header over the light scene (this outranks landing.css's dark
   case-study header) */
.case-hero-shell .portfolio-header.portfolio-header--case-study {
  --portfolio-top-bg: transparent;
  --portfolio-top-text: #4d317b;
  --portfolio-top-strong: #0e0a1c;
  --portfolio-top-focus: #4d317b;
  --portfolio-menu-bg: #ffffff;
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
}

/* Dark mode: the deep scene, off-white title and subtitle, and the light
   lavender navigation of the other dark pages */
:root[data-portfolio-theme="dark"] .case-hero-shell {
  --case-hero-bg: var(--case-hero-bg-dark);
  --case-hero-ink: #f5f1fa;
}

:root[data-portfolio-theme="dark"] .case-hero-shell .portfolio-header.portfolio-header--case-study {
  --portfolio-top-text: #c9a8ff;
  --portfolio-top-strong: #f5f1fa;
  --portfolio-top-focus: #f5f1fa;
  --portfolio-menu-bg: #0e0a1c;
}

.case-hero-shell .portfolio-nav {
  background: transparent;
}

/* Scoped to the shell so it beats main.css's margins, padding and border
   on id-less sections */
.case-hero-shell .case-hero {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1320px, calc(100% - clamp(40px, 8vw, 128px)));
  margin: 0 auto;
  padding: clamp(52px, 4.3vw, 66px) 0 0;
  border: 0;
  text-align: center;
}

/* Title and subtitle at the same sizes as PhoenixRise and ALEASAT */
.case-hero-shell .case-hero__title {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--case-hero-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(46px, 5.2vw, 80px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-align: center;
}

.case-hero-shell .case-hero__subtitle {
  max-width: 900px;
  margin: clamp(12px, 1.6vw, 22px) auto 0;
  color: var(--case-hero-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2.35vw, 36px);
  font-weight: 400;
  line-height: 1.4;
}

.case-hero__art {
  position: relative;
  width: 100%;
  margin: clamp(32px, 2.8vw, 42px) 0 0;
}

/* The PhoenixRise phones' fade (phoenixrise.css): solid to 46%, then
   easing to transparent at the bottom edge */
.case-hero__image {
  --case-hero-mask: linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.94) 52%,
    rgba(0, 0, 0, 0.7) 62%,
    rgba(0, 0, 0, 0.46) 72%,
    rgba(0, 0, 0, 0.25) 82%,
    rgba(0, 0, 0, 0.09) 93%,
    transparent 100%
  );
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: var(--case-hero-mask);
  mask-image: var(--case-hero-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ----- Blend (UX Was Here, Quebec Winter Carnival) -----
   For a cut-out hero image on a scene colour that differs from the page:
   instead of an overlay painting the page colour on top (which turns a
   light scene grey in dark mode), the scene itself eases from its colour
   into the page colour (--case-hero-page-bg, so it follows the theme), and
   the image fades out through a mask into whatever is behind it. */
.case-hero-shell--blend {
  /* A soft light at the top: white on the light scene, a faint tint of the
     scene's own colour on the dark one */
  --case-hero-glow: rgb(255 255 255 / 55%);
  /* The scene colour holds through the title and the top of the laptops,
     then eases (slow, faster, slow) into the page colour at the very bottom */
  background-image:
    radial-gradient(ellipse 60% 38% at 50% 0%, var(--case-hero-glow), transparent 70%),
    linear-gradient(
      to bottom,
      var(--case-hero-bg) 0%,
      var(--case-hero-bg) 48%,
      color-mix(in oklab, var(--case-hero-bg) 96%, var(--case-hero-page-bg)) 56%,
      color-mix(in oklab, var(--case-hero-bg) 86%, var(--case-hero-page-bg)) 64%,
      color-mix(in oklab, var(--case-hero-bg) 68%, var(--case-hero-page-bg)) 72%,
      color-mix(in oklab, var(--case-hero-bg) 46%, var(--case-hero-page-bg)) 80%,
      color-mix(in oklab, var(--case-hero-bg) 25%, var(--case-hero-page-bg)) 87%,
      color-mix(in oklab, var(--case-hero-bg) 9%, var(--case-hero-page-bg)) 93%,
      color-mix(in oklab, var(--case-hero-bg) 2%, var(--case-hero-page-bg)) 97%,
      var(--case-hero-page-bg) 100%
    );
}

:root[data-portfolio-theme="dark"] .case-hero-shell--blend {
  --case-hero-glow: rgb(255 255 255 / 7%);
}

/* No overlay: the scene's own gradient does the fading */
.case-hero-shell--blend::after,
:root[data-portfolio-theme="dark"] .case-hero-shell--blend::after {
  content: none;
}

/* The laptops stay fully visible for their top ~58%, then fade out on an
   eased curve to transparent at the bottom edge */
.case-hero-shell--blend .case-hero__image {
  --case-hero-mask: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.96) 63%,
    rgba(0, 0, 0, 0.86) 68%,
    rgba(0, 0, 0, 0.68) 74%,
    rgba(0, 0, 0, 0.46) 80%,
    rgba(0, 0, 0, 0.26) 86%,
    rgba(0, 0, 0, 0.11) 92%,
    rgba(0, 0, 0, 0.03) 97%,
    transparent 100%
  );
}

/* Small screens, as PhoenixRise: the image is shown wider than the screen
   and centred, so the main device stays a readable size; the hero clips
   the sides */
@media (max-width: 768px) {
  .case-hero-shell .case-hero {
    width: calc(100% - 40px);
    padding-top: clamp(38px, 8vw, 56px);
  }

  .case-hero-shell .case-hero__title {
    font-size: clamp(40px, 11vw, 56px);
  }

  .case-hero-shell .case-hero__subtitle {
    max-width: 600px;
    font-size: clamp(19px, 5.5vw, 23px);
    line-height: 1.42;
  }

  .case-hero__art {
    margin-top: 34px;
  }

  /* --case-hero-focus is how far across the image its main device sits */
  .case-hero__image {
    width: var(--case-hero-mobile-width, 170vw);
    max-width: none;
    margin-left: 50%;
    transform: translateX(calc(-1 * var(--case-hero-focus, 50%)));
  }
}