/*---------------------------------------
   UNVEIL INTRO
   Stages (classes on <body>, set by js/unveil.js):
     (none)        copper logo on brand green
     .is-glowing   copper fades, the photo shows through the letters
     .is-opening   zoom through the "T" stem, image comes into focus
     .is-unveiled  headline and overlay fade in
-----------------------------------------*/

  .unveil {
    --brand-green: #113120;
    --logo-width: min(80vw, 880px);

    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--brand-green);
  }

  .unveil-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 42% 60%;
    filter: blur(8px);
    transform: scale(1.12);
    transition: filter 2.6s ease-out, transform 3.4s cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .unveil-mask,
  .unveil-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .unveil-mask img,
  .unveil-logo img {
    width: var(--logo-width);
    max-width: none;
  }

  /* Green layer with white letters, multiplied over the image:
     green tints the photo to the brand colour, white lets it through */
  .unveil-mask {
    background: var(--brand-green);
    mix-blend-mode: multiply;
    transition: opacity 0.7s ease 1.3s;
  }

  .unveil-mask img {
    filter: brightness(0) invert(1);
    /* Centre of the "T" stem in avantra-logo.png, so the zoom fills the screen with photo */
    transform-origin: 65.42% 51.37%;
    will-change: transform;
    transition: transform 2s cubic-bezier(0.75, 0, 0.25, 1);
  }

  /* The copper logo, drawn exactly over the mask */
  .unveil-logo {
    transition: opacity 1.4s ease;
  }

  .unveil-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + var(--logo-width) * 0.1723 + 28px);
    text-align: center;
    color: rgba(236, 190, 154, 0.75);
    font-size: 12px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    transition: opacity 0.6s ease;
  }

  .is-glowing .unveil-logo {
    opacity: 0;
  }

  .is-opening .unveil-image {
    filter: blur(0);
    transform: scale(1);
  }

  .is-opening .unveil-mask {
    opacity: 0;
  }

  .is-opening .unveil-mask img {
    transform: scale(200);
  }

  .is-opening .unveil-caption {
    opacity: 0;
  }

  /* Headline waits for the reveal */
  .overlay,
  .home-info {
    opacity: 0;
    transition: opacity 1.4s ease;
  }

  .home-info {
    transform: translateY(12px);
    transition: opacity 1.4s ease, transform 1.4s ease;
  }

  .is-unveiled .overlay,
  .is-unveiled .home-info {
    opacity: 1;
    transform: none;
  }

  /* Lighter overlay than the slideshow's, so the scene shows through while text stays legible */
  .overlay {
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%),
      linear-gradient(to top, rgba(20,10,5,0.55) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.3) 100%);
  }

  .home-info h1,
  .home-info h5 {
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  }

  /* Skipped or reduced motion: jump straight to the end state */
  .unveil-instant .unveil-image,
  .unveil-instant .unveil-logo,
  .unveil-instant .unveil-caption,
  .unveil-instant .overlay,
  .unveil-instant .home-info {
    transition: none !important;
  }

  .unveil-instant .unveil-mask {
    display: none;
  }

  @media (max-width: 767px) {
    .unveil {
      --logo-width: 88vw;
    }

    .unveil-caption {
      font-size: 11px;
    }
  }