/* ======== HAUSFOTO — the photographed house of the hero ======== */
/* The layer is written by index.html (the first photograph) and by hausfoto.js (the other
   hours, the lit windows, the 14 window buttons). The hero's own text and fields: styles.css, HAUS. */

/* ======== HAUSFOTO — the layer and the box that carries the photograph ======== */
.hausfoto {
  position: absolute;
  inset: 0;
  z-index: 0;                          /* a stacking context of its own: the numbers below stay inside the layer */
  overflow: hidden;
}
.hausfoto[hidden] { display: none; }
/* A new season: its whole layer (photographs, lit windows, buttons, scrims) fades in
   over the season on screen, which stays opaque under it and is removed by
   hausfoto.js when this animation ends. Same reason as for the hours below. */
.hausfoto.is-neu { animation: hausfoto-kommt 1.4s var(--kurve) both; }
@keyframes hausfoto-kommt { from { opacity: 0; } }
/* Sized and placed in whole pixels by miss(): the photograph covers the stage,
   and everything inside is measured from the photograph's own corner. */
.hausfoto__kasten {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/* The hour that leaves stays fully visible UNDER the one that arrives and is
   switched off when the fade is over: two half-transparent photographs at once
   would let the dark stage show through in the middle of the change. */
.hausfoto__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0s linear 2.4s;
}
.hausfoto__bild.is-da {
  z-index: 1;
  opacity: 1;
  transition: opacity 2.4s var(--kurve);   /* slow: the hour changes with the clock, nobody pressed anything */
}
.hausfoto__bild img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ======== HAUSFOTO — a lit window is a piece of the second night photograph ======== */
/* Each element is the glass plus the glow on the wall around it (--l --r --t --b,
   in px, set by miss()). Opaque over the glass, fading out to the edge. */
.hausfoto__lichter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hausfoto__licht {
  position: absolute;
  opacity: 0;
  transition: opacity .7s var(--kurve);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--l), #000 calc(100% - var(--r)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--t), #000 calc(100% - var(--b)), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 var(--l), #000 calc(100% - var(--r)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--t), #000 calc(100% - var(--b)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The lights come on one after another, and only once the night photograph is
   mostly there (the first half second belongs to the change of the hour). */
.hausfoto__licht.is-an {
  opacity: 1;
  transition-delay: calc(.5s + var(--i) * 70ms);
}
/* The mirror image of a lit window in the lake (only where fenster.json has a
   "spiegel" box). The same element with the same --i, so it switches, waits and
   breathes with its window. Only the edge differs: water has no hard window
   frame, so the fade runs half as far again, into the box itself. */
.hausfoto__licht--spiegel {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 calc(var(--l) * 1.5), #000 calc(100% - var(--r) * 1.5), transparent),
    linear-gradient(to bottom, transparent, #000 calc(var(--t) * 1.5), #000 calc(100% - var(--b) * 1.5), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 calc(var(--l) * 1.5), #000 calc(100% - var(--r) * 1.5), transparent),
    linear-gradient(to bottom, transparent, #000 calc(var(--t) * 1.5), #000 calc(100% - var(--b) * 1.5), transparent);
}
/* The whole lit photograph, shifted so that this element shows its own place of it. */
.hausfoto__schein {
  position: absolute;
  inset: 0;
  background-image: var(--hausfoto-licht);
  background-repeat: no-repeat;
  background-size: var(--bw) var(--bh);
  background-position: var(--px) var(--py);
}

/* ======== HAUSFOTO — the 14 windows as buttons ======== */
/* A box of its own, set by miss() to the photograph's box. It is not inside .hausfoto: it stands
   after the hero's controls in the DOM (tab order), and over the photographs by source order. */
.hausfoto__knoepfe { position: absolute; pointer-events: none; }   /* the box itself must not catch taps meant for the controls under it */
.hausfoto__knoepfe > .hausfoto__knopf { pointer-events: auto; }
.hausfoto__knoepfe[hidden] { display: none; }
.hausfoto__knopf {
  position: absolute;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dauer) var(--kurve);
}
.hausfoto__knopf:hover,
.hausfoto__knopf.is-offen { border-color: var(--farbe-tinte); }
/* two rings, light on dark: visible on a lit window and on the night wall alike */
.hausfoto__knopf:focus-visible {
  outline: 2px solid var(--farbe-tinte);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--farbe-grund) 72%, transparent);
}

/* ======== HAUSFOTO — scrims where the hero puts its text ======== */
/* Measured against the stage, not the photograph, because the text is. Their
   heights end at the house (--hausfoto-oben / -unten from miss()). */
.hausfoto__schleier {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--farbe-grund) 74%, transparent),
      color-mix(in srgb, var(--farbe-grund) 42%, transparent) 55%,
      transparent) top / 100% var(--hausfoto-oben, 30%) no-repeat,
    linear-gradient(to top,
      color-mix(in srgb, var(--farbe-grund) 78%, transparent),
      color-mix(in srgb, var(--farbe-grund) 36%, transparent) 60%,
      transparent) bottom / 100% var(--hausfoto-unten, 26%) no-repeat;
}

/* ======== HAUSFOTO — motion ======== */
/* Still: the hour changes at once, the lights are simply on. */
@media (prefers-reduced-motion: reduce) {
  .hausfoto__bild,
  .hausfoto__bild.is-da,
  .hausfoto__licht,
  .hausfoto__licht.is-an,
  .hausfoto__knopf { transition: none; }
  .hausfoto.is-neu { animation: none; }   /* hausfoto.js does not set the class then; this is the belt to its braces */
}