/* ==========================================================================
   The way in
   A plain sheet carrying the studio's name, held over the page until the
   reader scrolls. Then it opens: an arch grows upward through the middle
   and the two halves left standing lift away.

   It is a phone's screen only, and it is never shown without JavaScript —
   the sheet is display: none until a script in the head says otherwise, so
   a browser that cannot lift it never sees it in the first place.
   ========================================================================== */
.intro { display: none; }

@media (max-width: 760px) {
  html.is-intro,
  html.is-intro body { overflow: hidden; height: 100%; }

  html.is-intro .intro {
    /* black under the dark theme, white under the light one */
    --sheet: #000000;
    --ink: #F6F1E9;
    --dim: rgba(246, 241, 233, .55);
    --gold: #C9A24A;

    --arch-w: 46vw;
    --arch-h: calc(var(--arch-w) * 2.6);
    --arch-y: 100%;
    /* The cap on the shrinking middle column: square at the top, a half
       round at the foot. The opening it leaves below is therefore arch
       headed, and stays so the whole way up. The viewBox is 100 by 260,
       the same 2.6 the height is set from, so nothing is stretched. */
    --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 260'%3E%3Cpath d='M0 0 H100 V210 A50 50 0 0 1 0 210 Z' fill='%23000'/%3E%3C/svg%3E");

    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    padding: clamp(1.6rem, 6vh, 2.8rem) var(--page-x);
    background: var(--sheet);
    color: var(--ink);

    /* Four pieces: the two flanks, the middle column, and the arch that
       caps it. Shrink the middle and the arch rides up with it, so the
       opening is arch-headed the whole way. */
    -webkit-mask-image:
      linear-gradient(#000, #000), linear-gradient(#000, #000),
      linear-gradient(#000, #000), var(--arch);
    mask-image:
      linear-gradient(#000, #000), linear-gradient(#000, #000),
      linear-gradient(#000, #000), var(--arch);
    -webkit-mask-size:
      calc(50% - (var(--arch-w) / 2) + 1px) 100%, calc(var(--arch-w) + 2px) var(--arch-y),
      calc(50% - (var(--arch-w) / 2) + 1px) 100%, var(--arch-w) var(--arch-h);
    mask-size:
      calc(50% - (var(--arch-w) / 2) + 1px) 100%, calc(var(--arch-w) + 2px) var(--arch-y),
      calc(50% - (var(--arch-w) / 2) + 1px) 100%, var(--arch-w) var(--arch-h);
    -webkit-mask-position: left top, center top, right top, center var(--arch-y);
    mask-position: left top, center top, right top, center var(--arch-y);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;

    transition: transform .62s cubic-bezier(.76, 0, .24, 1),
                opacity .4s linear .34s;
  }
  [data-theme='light'] html.is-intro .intro,
  html.is-intro[data-theme='light'] .intro {
    --sheet: #FFFFFF;
    --ink: #14130F;
    --dim: rgba(20, 19, 15, .55);
  }

  /* A hairline held in from the edge with its corners cut away — an
     octagon rather than a rectangle. Two clipped layers make the outline:
     the lower one is the line, the upper one is the sheet again, inset by
     a pixel, and what survives between them is the frame. A clipped border
     would lose its own corners; this keeps them. */
  .intro__frame {
    position: absolute;
    inset: clamp(9px, 3.2vw, 16px);
    z-index: 0;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    clip-path: polygon(
      26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px),
      calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);
    pointer-events: none;
  }
  .intro__frame::after {
    content: '';
    position: absolute; inset: 1px;
    background: var(--sheet);
    clip-path: polygon(
      25px 0, calc(100% - 25px) 0, 100% 25px, 100% calc(100% - 25px),
      calc(100% - 25px) 100%, 25px 100%, 0 calc(100% - 25px), 0 25px);
  }
  /* Everything else stands over it. */
  .intro__top, .intro__mid, .intro__foot { position: relative; z-index: 1; }

  /* ── What it carries ─────────────────────────────────────────────── */
  .intro__top,
  .intro__foot { text-align: center; }

  /* A span is inline, and width means nothing to an inline box — without
     this the mark filled the top of the sheet. */
  .intro__ornament { display: block; width: clamp(30px, 8.5vw, 38px); height: clamp(30px, 8.5vw, 38px); color: var(--gold); }
  .intro__ornament svg { width: 100%; height: 100%; display: block; }

  /* The name sits below the middle, not on it, and the line hangs well
     under the name — the proportions of the reference rather than of a
     box centred for the sake of it. */
  .intro__mid {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(3.4rem, 13vh, 6rem);
    padding-top: clamp(2rem, 9vh, 5rem);
  }

  .intro__name {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 12vw, 3.2rem);
    line-height: 1;
    letter-spacing: .15em;
    text-indent: .15em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
  }
  .intro__name b {
    display: block;
    margin-top: .5rem;
    font-weight: 300;
    font-size: clamp(.78rem, 3.6vw, .98rem);
    letter-spacing: .42em;
    text-indent: .42em;
  }
  /* The gold stroke through the A, as on the hero. */
  .intro__a { position: relative; display: inline-block; font-style: normal; }
  .intro__a svg {
    position: absolute; left: -9%; top: 5%;
    width: 118%; height: 88%;
    overflow: visible;
    pointer-events: none;
  }

  /* A line that fills for as long as the sheet stands. */
  .intro__bar {
    position: relative;
    width: 1px; height: clamp(46px, 9vh, 74px);
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    overflow: hidden;
  }
  .intro__bar::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--gold);
    transform: translateY(-100%);
    /* Full by the time the sheet goes, not cut off half drawn. */
    animation: introFill 1.05s cubic-bezier(.65, 0, .35, 1) .1s forwards;
  }
  @keyframes introFill { to { transform: translateY(0); } }

  .intro__foot {
    display: grid; gap: .5rem; justify-items: center;
    font-family: var(--sans);
    font-size: .55rem; font-weight: 500;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--dim);
  }

  /* ── The opening ─────────────────────────────────────────────────── */
  /* The middle column runs to nothing, so the arch climbs the screen. */
  html.is-opening .intro { --arch-y: 0%; }
  /* Then the two flanks left standing lift away. */
  html.is-gone .intro { transform: translateY(-100%); opacity: 0; }

  /* Everything inside goes before the sheet does. */
  html.is-opening .intro__frame,
  html.is-opening .intro__top,
  html.is-opening .intro__mid,
  html.is-opening .intro__foot {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .45s ease, transform .6s cubic-bezier(.76, 0, .24, 1);
  }

  /* Where masks are not understood the sheet simply lifts; the reader still
     gets in, and never sees a panel that will not move. */
  @supports not ((-webkit-mask-composite: source-over) or (mask-composite: add)) {
    html.is-intro .intro { -webkit-mask-image: none; mask-image: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.is-intro .intro { transition: opacity .3s linear; }
    .intro__bar::after { animation: none; }
  }
}