/* Landing and sign-in: the house entrance. One object in a quiet room. */

.house {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--ground);
  overflow-x: hidden;
}

.house-top, .house-foot {
  padding: 28px clamp(20px, 5vw, 64px);
}
.house-top .logo { font-size: 24px; }
.house-foot {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* The stage: the box spans three rows so the middle row (the rule) sits
   exactly at the box's vertical centre, level with its ribbon. */
.stage {
  --box: clamp(220px, 34vmin, 380px);
  --tail: clamp(48px, 9vw, 150px);
  align-self: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 0;
  align-items: center;
  padding: 24px clamp(20px, 8vw, 128px) 48px;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

.box-wrap {
  grid-row: 1 / 4;
  grid-column: 1;
  display: flex;
  align-items: center;
}

.box {
  width: var(--box);
  height: calc(var(--box) * 376 / 360);
  flex: none;
  filter: drop-shadow(0 18px 28px rgb(11 42 63 / 0.18)) drop-shadow(0 3px 6px rgb(11 42 63 / 0.12));
}
.box .lid { fill: var(--ink); }
.box .lid-panel { fill: var(--ink-2); }
.box .seam {
  fill: none;
  stroke: var(--stitch);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
}
.box .seam-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.box .ribbon { fill: var(--brand-sky); }
.box .ribbon-sheen { stroke: rgb(255 255 255 / 0.35); stroke-width: 1.5; fill: none; }
.box .box-side { fill: var(--ink-3); }
.box .loop-back { fill: var(--ribbon-knot); }
.box .loop-shade { stroke: rgb(11 42 63 / 0.3); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.box .knot-shade { stroke: rgb(11 42 63 / 0.35); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.box .tail-l, .box .tail-r { filter: drop-shadow(0 1px 0 rgb(11 42 63 / 0.25)); }
.box .knot { fill: var(--ribbon-knot); }

.tail-v { display: none; }

.tail {
  width: var(--tail);
  height: calc(var(--box) * 30 / 360);
  flex: none;
  fill: var(--brand-sky);
  transform-origin: left center;
}

.title {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  padding-bottom: clamp(18px, 2.4vw, 30px);
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.75rem, 6.2vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rule {
  grid-row: 2;
  grid-column: 2;
  height: 3px;
  width: min(100%, 34rem);
  background: var(--brand-sky);
  border-radius: 0 2px 2px 0;
  transform-origin: left center;
}

.below {
  grid-row: 3;
  grid-column: 2;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: clamp(22px, 3vw, 34px);
  padding-top: clamp(18px, 2.4vw, 30px);
}
.line {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--muted);
  max-width: 34ch;
}

/* The one authored moment: the ribbon pulls out of the box into the rule,
   then the red seam stitches itself around the lid. Visible by default;
   only animated where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .tail { animation: pull 700ms var(--ease-out) 150ms both; }
  .tail-v { animation: drop 700ms var(--ease-out) 150ms both; }
  .rule { animation: pull 900ms var(--ease-out) 650ms both; }
  .box .seam-draw { animation: stitch 1600ms cubic-bezier(0.45, 0, 0.2, 1) 900ms both; }
  .title, .below { animation: rise 900ms var(--ease-out) 450ms both; }
}
@keyframes pull { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stitch { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sign-in form (login.html) shares the stage. */
.signin {
  width: min(100%, 22rem);
  display: grid;
  gap: 16px;
}
.signin .btn { width: 100%; margin-top: 4px; }

@media (max-width: 760px) {
  .stage {
    --box: clamp(150px, 44vw, 220px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 0;
    padding-top: 8px;
  }
  .box-wrap { grid-row: auto; grid-column: 1; margin-bottom: 18px; flex-direction: column; align-items: flex-start; }
  .tail { display: none; }
  /* Mobile: the ribbon drops from the box toward the title instead. */
  .tail-v {
    display: block;
    width: calc(var(--box) * 30 / 360);
    height: 44px;
    margin-left: calc(var(--box) * 165 / 360);
    fill: var(--brand-sky);
    transform-origin: top center;
  }
  .title, .rule, .below { grid-column: 1; grid-row: auto; }
}

/* Sign-in: a smaller box so the form leads. */
.stage-signin { --box: clamp(180px, 26vmin, 300px); }
.stage-signin .title { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.small-print { font-size: 13px; }
.house-foot a { color: var(--muted); }
.house-foot a:hover { color: var(--text); }

@media (max-width: 760px) {
  .stage-signin { --box: 120px; }
  .stage-signin .box-wrap { margin-bottom: 28px; }
}