/* ============================================================
   CONCEPTO P — THE HELD ROOMS, in the stylesheet
   house/held.js builds the room: the wall and the name on it are drawn in
   WebGL; this sheet places the words under the name and the one quiet word
   at the foot, and says how the sheet lifts when the right phrase is given.

   The page is white and full: the wall is the page. Nothing here is a box,
   a button or a rule, except the baseline the field opens to, because that
   line is the thing (where to write).

   The words wait under the name wherever the window puts it: held.js writes
   --held-top / --held-bottom (the name's box), --held-cap (a capital's height)
   and --held-cy (its middle), all in CSS px from the top of the room.
   ============================================================ */

.held{
  position:relative;
  min-height:100vh; min-height:100svh;
  overflow:hidden;
  background:#FFFFFF;
  color:var(--ink);
  isolation:isolate;
  --held-top:38vh; --held-bottom:50vh; --held-cap:120px; --held-cy:44vh;
  --held-ink:rgba(26,24,20,.55);
}
.held-wall{ position:absolute; inset:0; z-index:0; }
/* the name drawn, before there is a picture of it and where there will never be one */
.held-flat{
  position:absolute; left:0; right:0; top:var(--held-flat-top, var(--held-top)); z-index:1;
  margin:0; padding:0 var(--gutter);
  font-family:var(--display); font-weight:400; font-size:var(--held-font, 120px); line-height:1;
  letter-spacing:var(--tr-display); text-align:center; white-space:nowrap;
  color:#7D8082;
  /* off the wall by its own shadow, a short one at its foot and a long soft one below, and the warm light behind it */
  text-shadow:0 .012em .006em rgba(26,24,20,.22), 0 .07em .12em rgba(26,24,20,.10), 0 0 .09em rgba(255,214,160,.55), 0 0 .3em rgba(255,226,190,.4);
  opacity:0;
  transition:opacity var(--slowest) var(--settle);
  pointer-events:none;
}
.held-flat .held-base{ display:inline-block; width:0; height:0; }
.held.is-flat .held-flat{ opacity:1; }

/* ---- the two lines: the sentence rises out of its line, the small one settles under it ---- */
.held-words{
  position:absolute; left:0; right:0; z-index:2;
  top:calc(var(--held-bottom) + clamp(30px, 5.4vh, 64px));
  padding:0 var(--gutter);
  text-align:center;
  pointer-events:none;
}
/* the words are the house's type scale (type.css): the line is .t-sub, the small one .t-label-s */
.held-line{ max-width:22em; margin:0 auto; color:var(--ink); }
.held-small{ margin:clamp(12px, 1.6vh, 18px) 0 0; color:var(--held-ink); }
/* the phone's keyboard has brought the field up over the words: they step back while it is there */
.held-words{ transition:opacity var(--slow) var(--settle); }
.held.is-keyed .held-words{ opacity:0; }
/* before the room is set nothing is said; held.js lets them come in order (rise.js arms them) */
.held:not(.is-said) .held-line{ visibility:hidden; }

/* ---- the word at the foot, and the line it opens to ---- */
.held-gate{
  position:absolute; left:50%; z-index:3;
  bottom:calc(clamp(10px, 2.6vh, 30px) + env(safe-area-inset-bottom, 0px));
  display:grid; justify-items:center; grid-template-rows:auto auto auto;
  width:min(19rem, calc(100% - 2 * var(--gutter)));
  margin:0;
  transform:translate3d(-50%, var(--held-lift, 0px), 0);
  opacity:0; visibility:hidden;
  transition:opacity var(--slowest) var(--settle), visibility 0s linear var(--slowest), transform var(--slow) var(--settle);
}
.held.is-asking .held-gate{ opacity:1; visibility:visible; transition:opacity var(--slowest) var(--settle), visibility 0s, transform var(--slow) var(--settle); }
/* the word is .t-label-s; here it is only placed, given a fingertip's area, and its ink */
.held-word{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:10px 22px; margin:0;
  color:var(--held-ink);
  background:none; border:0; border-radius:0; box-shadow:none;
  cursor:pointer;
  transition:color var(--slow) var(--settle);
}
.held-word:hover, .held-word:focus-visible, .held-gate.is-open .held-word{ color:rgba(26,24,20,.82); }
.held-gate.is-settled .held-word{ color:var(--held-ink); }

/* the field is always there (so nothing moves when it opens), drawn as nothing until it is opened */
.held-field{ display:block; position:relative; width:min(13.5rem, 100%); height:38px; }
.held-key{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:38px; box-sizing:border-box;
  margin:0; padding:0 .4em 6px; border:0; border-radius:0; outline:none; box-shadow:none;
  background-color:transparent;
  /* the baseline, drawn out from its middle; and a slip of ink that reads across it while the desk is asked */
  background-image:linear-gradient(90deg, transparent, rgba(26,24,20,.9) 50%, transparent), linear-gradient(rgba(26,24,20,.34), rgba(26,24,20,.34));
  background-repeat:no-repeat, no-repeat;
  background-position:-40% 100%, 50% 100%;
  background-size:0 1px, 0 1px;
  font-family:var(--num, var(--serif)); font-size:16px; line-height:1; letter-spacing:.24em; text-align:center;
  color:var(--ink); caret-color:var(--ink);
  opacity:0; pointer-events:none;
  transition:background-size var(--slower) var(--settle), opacity var(--slow) var(--settle);
}
.held-key::-ms-reveal{ display:none; }
.held-gate.is-open .held-key{ opacity:1; pointer-events:auto; background-size:0 1px, 100% 1px; }
.held-gate.is-open .held-key:focus{ background-image:linear-gradient(90deg, transparent, rgba(26,24,20,.9) 50%, transparent), linear-gradient(rgba(26,24,20,.62), rgba(26,24,20,.62)); }
/* the desk is reading: the line is read across, once and again, until it answers */
.held-gate.is-reading .held-key{ background-size:38% 1px, 100% 1px; animation:held-read 1.1s var(--breath) infinite; }
@keyframes held-read{ 0%{ background-position:-40% 100%, 50% 100%; } 100%{ background-position:140% 100%, 50% 100%; } }
/* a try that did not open: the line settles back, a little shorter and lighter, and waits */
.held-gate.is-open.is-settled .held-key{
  background-image:linear-gradient(90deg, transparent, rgba(26,24,20,.9) 50%, transparent), linear-gradient(rgba(26,24,20,.2), rgba(26,24,20,.2));
  background-size:0 1px, 72% 1px;
  transition:background-size var(--slowest) var(--settle), opacity var(--slow) var(--settle);
}
.held-gate.is-open.is-settled.is-writing .held-key{ background-size:0 1px, 100% 1px; }

/* the note: fine print under the line, .t-note (launch-note is kept on it for the translator only) */
.held-gate .held-note{
  position:static; z-index:auto;
  min-height:1.4em; margin:8px 0 0; padding:0;
  color:rgba(26,24,20,.5);
  opacity:0; transform:translate3d(0, .3em, 0);
  transition:opacity var(--slow) var(--settle), transform var(--slower) var(--settle);
  pointer-events:none;
}
.held-gate .held-note.is-on{ opacity:1; transform:none; }

/* ---- the right phrase: the sheet is lifted off the room that was made under it ---- */
.held.is-over{
  position:fixed; left:0; right:0; z-index:45;
  height:100vh; height:100svh;
}
/* the whole sheet goes up out of the window, the wall and the steel on it together, slowly at first as a sheet is lifted;
   its lower edge is told by the soft shadow it lets go of on the room under it, not by a line. The words leave first. */
.held.is-lifting{
  transform:translate3d(0, -100%, 0);
  box-shadow:0 2.6vh 7vh -1.6vh rgba(26,24,20,.16);
  transition:transform var(--slowest) var(--lift), box-shadow var(--slow) var(--settle);
  pointer-events:none;
}
.held.is-lifting .held-words, .held.is-lifting .held-gate{ opacity:0; transition:opacity var(--slow) var(--settle); }

/* ---- phone: the name to the width, the words under it, the word at the foot over the thumb ---- */
@media (max-width:759px){
  .held-line{ max-width:15em; }
  .held-gate{ bottom:calc(clamp(14px, 3.2vh, 28px) + env(safe-area-inset-bottom, 0px)); width:min(17rem, calc(100% - 2 * var(--gutter))); }
}

/* ---- reduced motion: the room is lit and still; everything is where it will be ---- */
@media (prefers-reduced-motion:reduce){
  .held-flat, .held-gate, .held-word, .held-key, .held-gate .held-note{ transition:none; }
  .held-gate.is-reading .held-key{ animation:none; background-size:0 1px, 100% 1px; }
  .held.is-lifting{ transition:none; transform:none; }
}