/*
   777777   77     77 77        777777  77777777    777    77    77
  77    77  77     77 77       77    77    77      77 77   777   77
  77        77     77 77       77          77     77   77  7777  77
  77   7777 77     77 77        777777     77    77     77 77 77 77
  77    77  77     77 77             77    77    777777777 77  7777
  77    77  77     77 77       77    77    77    77     77 77   777
   777777    7777777  77777777  777777     77    77     77 77    77
*/

/* The house drawing, the contact cue and the contact card. */

.field {
  touch-action: none;
}

.house {
  --house-start: 0.55s;
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.house__view {
  position: relative;
  width: min(58vw, 940px, calc((100vh - 210px) * var(--k)));
  width: min(58vw, 940px, calc((100dvh - 210px) * var(--k)));
  aspect-ratio: var(--k);
}

.house__view--compact {
  display: none;
}

@media (max-width: 640px) {
  .house {
    top: 50%;
  }

  .house__view--full {
    display: none;
  }

  .house__view--compact {
    display: block;
    width: min(92vw, calc((100vh - 230px) * var(--k)));
    width: min(92vw, calc((100dvh - 230px) * var(--k)));
  }
}

.house__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.house__leaf {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.house__leaf .leaf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.house__door,
.house__year {
  position: absolute;
  display: block;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: url("/cursor-link.svg") 9 1, pointer;
  -webkit-tap-highlight-color: transparent;
}

.house__door:focus-visible,
.house__year:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 6px;
}

.is-moving .house__door,
.is-moving .house__year,
.is-away .house__door,
.is-away .house__year {
  pointer-events: none;
}

.house__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Drawing: line roles (--w width, --a opacity, --d delay, --dur duration) */
.house .ln {
  fill: none;
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: var(--w);
  stroke-opacity: var(--a);
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.house .many { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.house .flat { stroke-linecap: butt; }
.house .o { --w: 0.9; --a: 0.8; --d: 0s; --dur: 1.9s; }
.house .e { --w: 0.6; --a: 0.62; --d: 0.2s; --dur: 1.7s; }
.house .m { --w: 0.45; --a: 0.48; --d: 0.45s; --dur: 1.5s; }
.house .j { --w: 0.3; --a: 0.26; --d: 0.7s; --dur: 1.3s; }
.house .fr { --w: 0.6; --a: 0.72; --d: 0.55s; --dur: 1.5s; }
.house .gb { --w: 0.38; --a: 0.5; --d: 0.95s; --dur: 1.2s; }
.house .pn { --w: 0.55; --a: 0.55; --d: 0.85s; --dur: 1.3s; }
.house .bv { --w: 0.4; --a: 0.32; --d: 1.05s; --dur: 1.2s; }
.house .kn { --w: 0.8; --a: 1; --d: 0.85s; --dur: 1.1s; }
.house .kn--tip { --d: 0.9s; --dur: 0.5s; }
.house .kn--bar { --d: 1.6s; --dur: 0.35s; }
.house .lod-phone .ln { stroke-width: calc(var(--w) * 1.5); }
.house .lod-phone .fine { display: none; }

.house .stone { fill: var(--ink); fill-opacity: 0.045; }
.house .stone--lit { fill-opacity: 0.065; }
.house .sh { fill: #14020a; fill-opacity: 0.3; }
.house .sh--soft { fill-opacity: 0.16; }
.house .sh--deep { fill-opacity: 0.36; }
.house .glass { fill: #12020a; fill-opacity: 0.42; }

/* Animated in JS, so no CSS transitions (Safari can leave stale values) */
.house .lamp { opacity: 0; }

.house .fan-lit { opacity: 0; }
.house .fan-lit path { fill: none; stroke: #3d0817; stroke-opacity: 0.8; stroke-width: 0.38; stroke-linecap: round; stroke-linejoin: round; }
.house .lod-phone .fan-lit path { stroke-width: 0.57; }
.house .bronze { fill: #2a050f; }
.house .bronze--paint { fill: #2f0712; }
.house .door { fill: #2b0510; }
.house .turn { fill: #14020a; opacity: 0; }
.house .knob { fill: var(--ink); fill-opacity: 0.85; opacity: 0; }
.house .ripple { fill: none; stroke: var(--ink); stroke-width: 0.45; stroke-linecap: round; opacity: 0;
  transform-box: fill-box; transform-origin: center; }
.house .ripple + .ripple { stroke-opacity: 0.6; }
.house .glint { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 0.08 1.2;
  stroke-dashoffset: 0.08; opacity: 0; }
.house .ring-box { fill: none; }
.house .ring { transform-box: fill-box; transform-origin: 50% var(--pivot, 0%); opacity: 0.85; }

.house .cut { font-family: var(--font); fill: var(--ink); fill-opacity: 0.55; opacity: 0; }
.house .cut--shade { fill: #14020a; fill-opacity: 0.6; }
.house .inscr-family { opacity: 0; }

.house .label { font-family: var(--font); font-size: 14px; letter-spacing: 0.24em; fill: var(--ink); fill-opacity: 0.72; opacity: 0; }
.house .house__art:not(.lod-phone) .label { display: none; }

.house .star7 { fill: var(--ink); fill-opacity: 0.5; stroke: #ffe7b8; stroke-opacity: 0; stroke-width: 0.7; opacity: 0;
  transition: fill 0.6s var(--ease), fill-opacity 0.6s var(--ease); }
.house .lod-phone .star7 { fill-opacity: 0.62; }

.house .L-stone, .house .L-face, .house .L-glass, .house .L-metal, .house .L-shade { opacity: 0; }

/* Entrance */
@keyframes house-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 0.1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes house-show { from { opacity: 0; } to { opacity: 1; } }

.field.is-ready .house.is-ready .ln { animation: house-draw var(--dur) var(--ease-draw) calc(var(--house-start) + var(--d)) both; }
.field.is-ready .house.is-ready .many { animation: house-show 1s var(--ease) calc(var(--house-start) + var(--d) + 0.5s) both; }
.field.is-ready .house.is-ready .L-glass,
.field.is-ready .house.is-ready .L-metal { animation: house-show 1.2s var(--ease) calc(var(--house-start) + 0.8s) both; }
.field.is-ready .house.is-ready .L-stone,
.field.is-ready .house.is-ready .L-face { animation: house-show 1.4s var(--ease) calc(var(--house-start) + 1.2s) both; }
.field.is-ready .house.is-ready .L-shade { animation: house-show 1.4s var(--ease) calc(var(--house-start) + 1.7s) both; }
.field.is-ready .house.is-ready .knob { animation: house-show 0.8s var(--ease) calc(var(--house-start) + 0.85s) both; }
.field.is-ready .house.is-ready .cut,
.field.is-ready .house.is-ready .label { animation: house-show 1.2s var(--ease) calc(var(--house-start) + 1.7s) both; }

.house .star7 { transform-box: fill-box; transform-origin: center; }
.house .mod--p1 .star7s { --r: 1; }
.house .mod--p2 .star7s { --r: 2; }
.house .mod--pavr .star7s { --r: 3; }
.field.is-ready .house.is-ready .star7 {
  opacity: 1;
  animation: star-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--house-start) + 1.9s + var(--r, 0) * 0.2s + var(--i, 0) * 0.13s) backwards;
}

@keyframes star-in {
  0% { opacity: 0; transform: scale(0.2) rotate(-70deg); fill: #ffe7b8; fill-opacity: 1; }
  55% { opacity: 1; transform: scale(1.32) rotate(6deg); fill: #ffe7b8; fill-opacity: 0.95; }
  100% { opacity: 1; transform: none; }
}

/* Hover and the year's highlight */
.house.is-drawn .mod.is-hover .ring { animation: house-twitch 0.7s linear 0.08s both; }

@keyframes house-twitch {
  0% { transform: none; animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  30% { transform: scale(1.02, 0.8); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  52% { transform: none; animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1); }
  68% { transform: scale(1, 0.93); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  82%, 100% { transform: none; }
}

.house .seven { transition: stroke 0.6s var(--ease), stroke-opacity 0.6s var(--ease), stroke-width 0.6s var(--ease); }
.house.is-sevens-lit .seven { stroke: #f2cf86; stroke-opacity: 1; stroke-width: calc(var(--w) * 1.7); }
.house.is-sevens-lit .star7 { fill: #f2cf86; fill-opacity: 0.9; }
.house .seven-text { transition: fill 0.6s var(--ease), fill-opacity 0.6s var(--ease); }
.house.is-drawn .mod--year.is-hover .seven-text { fill-opacity: 0.88; }
.house.is-sevens-lit .seven-text { fill: #f2cf86; fill-opacity: 1; }

.house__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: -7%;
  margin: 0;
  text-align: center;
  font: 400 clamp(0.62rem, 0.9vw, 0.8rem) / 1 var(--font);
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  color: #f2cf86;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease);
}

.house.is-sevens-lit .house__hint { opacity: 0.9; }

/* Lights on (console: type Gulstan) */
.house.is-lit .lamp { animation: lamp-on 1.4s ease-out both; }
.house.is-lit .fan-lit { animation: lamp-on 1.4s ease-out 0.05s both; }
.house.is-lit .mod--b1 .lamp { animation-delay: 0.35s; }
.house.is-lit .mod--b1 .fan-lit { animation-delay: 0.4s; }
.house.is-lit .mod--b2 .lamp { animation-delay: 0.7s; }
.house.is-lit .mod--b2 .fan-lit { animation-delay: 0.75s; }

@keyframes lamp-on {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  18% { opacity: 0.15; }
  32% { opacity: 0.85; }
  38% { opacity: 0.5; }
  60%, 100% { opacity: 1; }
}

/* Contact cue */
.chamber__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3.2vh, 2rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.8rem;
  border: 0;
  background: none;
  transform: translateX(-50%);
  color: var(--ink-mute);
  font: 400 0.62rem / 1 var(--font);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: url("/cursor-link.svg") 9 1, pointer;
  opacity: 0;
  transition: color 0.35s var(--ease);
}

.chamber__cue-word { margin-right: -0.32em; }
.chamber__cue:hover,
.chamber__cue:focus-visible { color: var(--ink-soft); }
.chamber__cue:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 6px; }

.chamber__cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 2.2rem;
  overflow: hidden;
  background: rgba(255, 246, 234, 0.16);
}

.chamber__cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--ink-soft);
  animation: cue-fall 2.4s cubic-bezier(0.6, 0, 0.3, 1) 3.6s infinite;
  transform: translateY(-100%);
}

@keyframes cue-fall {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}

.field.is-ready .chamber__cue { animation: house-show 1.2s var(--ease) 3s both; }
.is-card .chamber__cue,
.is-moving .chamber__cue { opacity: 0 !important; pointer-events: none; }
.is-away .chamber__cue { pointer-events: none; }

.field__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(12, 1, 5, 0.38);
  opacity: 0;
  pointer-events: none;
}

/* Scroll journey and card */
.light-overlay {
  --halo: 30px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 0;
  height: 0;
  background: radial-gradient(ellipse 72% 80% at 50% 42%, #fff7ea 0%, #fdeedb 44%, #f8dec6 76%, #f2cfb6 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--halo), #000 calc(100% - var(--halo)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--halo), #000 calc(100% - var(--halo)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--halo), #000 calc(100% - var(--halo)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--halo), #000 calc(100% - var(--halo)), transparent 100%);
  mask-composite: intersect;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.card-page {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 5rem 1.25rem 5.5rem;
  perspective: 1200px;
  visibility: hidden;
  pointer-events: none;
}

.is-card .card-page {
  visibility: visible;
  pointer-events: auto;
}

.card-wrap {
  position: relative;
  width: min(100%, 33rem, calc((100vh - 9rem) * 1.6));
  width: min(100%, 33rem, calc((100dvh - 9rem) * 1.6));
}

@media (max-height: 520px) {
  .card-page { padding-top: 3.4rem; padding-bottom: 2.2rem; }
  .card-wrap { width: min(100%, 33rem, calc((100dvh - 6rem) * 1.6)); }
}

.card-page__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 32% 40% at 50% 47%, rgba(255, 226, 210, 0.16) 0%, rgba(240, 186, 176, 0.07) 55%, rgba(220, 150, 150, 0) 100%),
    radial-gradient(ellipse 64% 72% at 50% 48%, rgba(214, 120, 140, 0.16) 0%, rgba(200, 100, 130, 0.06) 50%, rgba(200, 100, 130, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1.6;
  padding: clamp(1.4rem, 5vw, 2.4rem) clamp(1.2rem, 5vw, 2.6rem);
  background: linear-gradient(170deg, #7d1c3e 0%, #6c1434 46%, #5c0d29 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 234, 0.06),
    inset 0 1px 0 rgba(255, 236, 210, 0.14),
    0 2.4rem 4.2rem -1.6rem rgba(16, 1, 7, 0.66),
    0 0.6rem 1.4rem rgba(16, 1, 7, 0.24);
  color: var(--ink);
  text-align: center;
  opacity: 0;
  -webkit-user-select: text;
  user-select: text;
}

.card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.card__ln {
  fill: none;
  stroke: var(--ink);
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.card__ln--outer { stroke-width: 0.7; stroke-opacity: 0.42; }
.card__ln--inner { stroke-width: 0.5; stroke-opacity: 0.2; }

.card > * { flex-shrink: 0; }

.star-trail {
  position: fixed;
  inset: 0;
  z-index: 21;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  display: none;
}

.card__rise, .card__name, .card__rule, .card__star { opacity: 0; }

.card__mark { width: 2.7rem; height: 2.7rem; margin-bottom: 0.75rem; overflow: visible; }
.card__star { fill: var(--ink); fill-opacity: 0.78; transform-box: fill-box; transform-origin: center; }

.card__name {
  margin: 0;
  font: 400 clamp(1rem, 3.4vw, 1.2rem) / 1 var(--font);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
}

.card__rule {
  display: block;
  width: 2.4rem;
  height: 1px;
  margin: 1.05rem 0 1rem;
  background: rgba(255, 246, 234, 0.3);
}

.card__line {
  margin: 0 0 0.55rem;
  font: 400 0.64rem / 1.4 var(--font);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
  color: rgba(255, 246, 234, 0.62);
}

.card__email {
  font: 400 clamp(0.95rem, 3.3vw, 1.1rem) / 1.3 var(--font);
  letter-spacing: 0.06em;
  margin-right: -0.06em;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
  padding-bottom: 0.22em;
  outline: none;
  cursor: url("/cursor-link.svg") 9 1, pointer;
  transition: background-size 0.5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.card__email:hover,
.card__email:focus-visible { background-size: 100% 1px; }

.card__copy {
  margin-top: 0.95rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  background: none;
  font: 400 0.58rem / 1 var(--font);
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  text-transform: uppercase;
  color: rgba(255, 246, 234, 0.5);
  outline: none;
  cursor: url("/cursor-link.svg") 9 1, pointer;
  transition: color 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.card__copy-label {
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
  padding-bottom: 0.3em;
  transition: background-size 0.5s var(--ease);
}

.card__copy:hover,
.card__copy:focus-visible,
.card__copy.is-done { color: rgba(255, 246, 234, 0.85); }
.card__copy:focus-visible .card__copy-label { background-size: 100% 1px; }

/* Blink only (house.js): layers for what moves or fades, so the page under it is not repainted every frame */
.is-chromium .chamber__scene { will-change: transform, opacity; }
.is-chromium .fade-overlay,
.is-chromium .field__dim,
.is-chromium .card-page__glow { will-change: opacity; }
.is-chromium .card { will-change: transform, opacity; }
.is-chromium .star-trail { will-change: transform; }

/* Blink draws a will-change layer once, at the screen's resolution in the layer's own size. Laid out at
   twice the size and shown at half, the drawing is drawn once with the detail for the camera's 1.78x
   look at the door, and the camera only ever scales it: no redraws while it moves. */
.is-chromium .house__art,
.is-chromium .house__leaf .leaf {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  will-change: transform;
}

/* Blink also gives every opacity-animated SVG element a layer, so there the lines appear by visibility,
   inherited once drawn so that a hidden bay or scene still hides them */
.is-chromium .house .ln:not(.many) { opacity: 1; visibility: hidden; }
.is-chromium .field.is-ready .house.is-ready .ln:not(.many) {
  visibility: inherit;
  animation: house-trace var(--dur) var(--ease-draw) calc(var(--house-start) + var(--d)) both,
    house-wait 1ms calc(var(--house-start) + var(--d)) backwards;
}

@keyframes house-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes house-wait { from, to { visibility: hidden; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .house .ln { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; transition: none; }
  .field.is-ready .house.is-ready .ln,
  .field.is-ready .house.is-ready .many,
  .field.is-ready .house.is-ready .L-glass,
  .field.is-ready .house.is-ready .L-metal,
  .field.is-ready .house.is-ready .L-stone,
  .field.is-ready .house.is-ready .L-face,
  .field.is-ready .house.is-ready .L-shade,
  .field.is-ready .house.is-ready .knob,
  .field.is-ready .house.is-ready .cut,
  .field.is-ready .house.is-ready .label,
  .field.is-ready .house.is-ready .star7,
  .field.is-ready .chamber__cue { animation: none; opacity: 1; }
  .is-chromium .house .ln:not(.many) { visibility: inherit; }
  .is-chromium .field.is-ready .house.is-ready .ln:not(.many) { animation: none; }
  .house.is-drawn .mod.is-hover .ring { animation: none; }
  .chamber__cue-line::after { animation: none; }
  .house .seven, .house .star7, .house__hint { transition: none; }
  .house.is-lit .lamp, .house.is-lit .fan-lit { animation: none; opacity: 1; }
  .is-card .card, .is-card .card__rise, .is-card .card__name, .is-card .card__rule, .is-card .card__star,
  .is-card .card-page__glow { opacity: 1; }
  .is-card .card__ln { opacity: 1; stroke-dashoffset: 0; }
}