/* =========================================================
   HOME-INTRO.CSS
   The first-visit intro on the home page: a pale sheet lying
   over the site with SILANDE set very large and tone-on-tone,
   which lifts away to reveal the hero underneath.

   Home page only. Nothing else on the site is touched -- not
   the hero or its entrance, not the header, not the mega menu,
   not the page transition or its veil, not the SILANDE rule.
   This is a separate layer that exists for about a second and a
   half and then is gone.

   TONES, sampled from the supplied reference rather than
   guessed:
     sheet          #F8F7F6   a warm off-white
     the word       #E9E9E9   ~15 units darker, nothing more
     sheet's edge   #E4E4E3   the darkest point of its shadow
     under layer    #F5F5F5   a touch lighter and more neutral
   The shadow below the edge recovers from #E6E5E5 back up to
   #F0EFEE over roughly 38px in the reference, which is what the
   two box-shadow layers below reproduce.

   ---------------------------------------------------------
   NO LAYOUT SHIFT, AND NO WAY TO GET STUCK

   The layer is `position: fixed` and is never in the document
   flow, so nothing under it can move. It carries
   `pointer-events: none` from its first frame to its last, so
   even if it somehow stayed on screen it could not take a
   click.

   It is also driven entirely by CSS. The only script involved
   is the one line in index.html's <head> that decides whether
   this visit gets an intro at all; after that no JavaScript has
   to run for the sheet to leave. A failed or slow script can
   never leave the site covered.

   And it only exists when that line has run: without
   .sil-intro-on on <html> the whole layer is display:none, so
   with scripting off the home page simply renders as it always
   did.
   ========================================================= */

:root {
  /* Smooth, monotonic, landing exactly on 1 -- no bounce and no
     overshoot, in the same family as the site's other curves. */
  --si-ease: cubic-bezier(0.50, 0, 0.12, 1);
  --si-hold: 420ms;    /* the pause before it moves */
  --si-lift: 1000ms;   /* the rise itself (total 1.42s) */

  --si-sheet: #F8F7F6;

  /* How far up from the bottom of the screen the sheet's own
     edge sits. Measured off the reference: its edge is at
     96.28% of the frame, so the band under it is 3.72vh. */
  --si-edge: 3.72vh;
}

.sil-intro { display: none; }

/* `!important` here has one job: the layer also carries an inline
   display:none in the markup, so that a missing stylesheet can
   never leave it sitting in the flow. An inline style is beaten
   by nothing except !important, so this is where it belongs. */
.sil-intro-on .sil-intro {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 9998;          /* under the page transition's own veil */
  pointer-events: none;   /* never, at any point, takes a click */
  background-color: var(--si-sheet);
  /* `forwards` holds the finished frame, which is off-screen and
     invisible -- so the layer stays gone without anything having
     to remove it. */
  animation: sil-intro-lift var(--si-lift) var(--si-ease) var(--si-hold) forwards;
}

/* The whole group moves as one: the sheet, the word on it and
   the shadow at its edge. The word does not fade on its own --
   it rides up with the paper it is printed on. 105vh rather
   than 100 so the last row of pixels clears the top edge. */
@keyframes sil-intro-lift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -105vh, 0); visibility: hidden; }
}

/* The sheet stops just short of the bottom of the screen, so
   its edge and the shadow under it are visible before anything
   moves -- which is what makes it read as a sheet of paper
   lying on a surface rather than a full-screen colour.

   SILANDE itself is the artwork you supplied, placed as an
   image and anchored to the sheet's bottom edge. `100% auto`
   ties its size to the width of the screen, so the word is
   cropped left and right exactly as it is in your reference,
   and the sheet's own flat colour fills everything above it --
   the artwork's background is the same #F8F7F6, so there is no
   seam. The image is cut off at the sheet's edge; the edge and
   its shadow below are drawn in CSS, so they stay crisp and
   keep their proportion at any screen size.

   The shadow is measured, not guessed: in the reference the
   tone drops from #F7F7F7 to #E7E7E7 immediately under the
   edge (alpha 0.077 of this ink) and recovers over 3.7% of the
   frame height, which is what these two layers reproduce. */
.sil-intro__sheet {
  position: absolute;
  inset: 0 0 var(--si-edge) 0;
  background-color: var(--si-sheet);
  background-image: url("../homepage-images/intro-silande.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* The shadow the sheet casts on the surface below it.

   A box-shadow could not hold this shape -- it falls off far
   too fast -- so this is a gradient traced from the reference
   itself. Sampled there, the tone drops to alpha 0.077 of this
   ink immediately under the edge and climbs back to nothing
   almost linearly across the band, which is exactly what the
   two stops below do. It sits on the sheet's own ::after, so
   it rises with the sheet and needs no separate element. */
.sil-intro__sheet::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--si-edge);
  background-image: linear-gradient(
    to bottom,
    rgba(40, 38, 36, 0.077),
    rgba(40, 38, 36, 0)
  );
}

/* ---------------------------------------------------------
   REDUCED MOTION

   Nothing travels. The declaration below swaps the lift for a
   plain fade, and in practice the site's own global switch in
   reset.css (animation-duration: 0.01ms !important) then
   collapses that fade to nothing at all -- so with the
   preference set the sheet is never seen and the home page
   opens straight on the hero, which is the behaviour every
   other entrance on the site already has.

   The fade is still written out rather than `animation: none`
   because the end frame is what takes the layer away. With
   `none` the sheet would simply sit there forever.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sil-intro-on .sil-intro {
    animation: sil-intro-fade 400ms linear 260ms forwards;
  }

  @keyframes sil-intro-fade {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
  }
}