/* Let2 house-cube — shared component (the 2D logo unfolds into a 3D house and back).
 * Pair with house-cube.js, which injects the markup into any <div class="hc-cube">.
 * Size it by setting --S on the .hc-cube element, e.g. style="--S:28px".
 * Add the class "spinning" (or "hc-busy") to speed the loop up while something is loading.
 * All classes are hc-prefixed to avoid clashing with page styles.
 */
.hc-cube{
  --half: calc(var(--S) / 2);
  --L:    calc(var(--S) * 0.635);   /* (S/2)/cos(38°) — apex sits over the centre */
  --tiltX: 52deg;                   /* 90 - pitch */
  --qy:    1.269;                   /* L/(S/2): maps the logo's half-height onto the slant */
  --dur:   42.5s;                   /* reveal-loop duration: 37.5s motion + 5s rest */
  flex-shrink:0;
  width:var(--S); height:var(--S);
  display:inline-flex; align-items:center; justify-content:center;
}
.hc-cube.spinning, .hc-cube.hc-busy{ --dur: 20s; }   /* 15s motion + 5s rest */

.hc-scene{ width:var(--S); height:var(--S); perspective:calc(var(--S) * 11.25);
  overflow:visible; flex:none; display:flex; align-items:center; justify-content:center }
.hc-tilt { transform-style:preserve-3d; animation:hc-elev var(--dur) ease-in-out infinite }
.hc-house{ position:relative; width:var(--S); height:var(--S); transform-style:preserve-3d;
  animation:hc-azi var(--dur) linear infinite }
/* busy/spinning swaps in the faster-mode keyframes (a true 5s rest at 20s total) */
.hc-cube.spinning .hc-tilt, .hc-cube.hc-busy .hc-tilt { animation-name:hc-elev-busy }
.hc-cube.spinning .hc-house,.hc-cube.hc-busy .hc-house{ animation-name:hc-azi-busy }

/* two axes animated separately: steady horizontal turn + swooping vertical dips.
 * A 5s rest on the flat 2D logo sits at the cycle boundary (= before the sequence
 * AND before each repeat); the half-way roof crossing is a pass-through, no rest.
 * Both axes hold together through the rest so the logo stays still, not spinning flat.
 * NORMAL: 42.5s total -> rest ends at 5/42.5 = 11.76%; 4 swoop legs of 22.06% each. */
@keyframes hc-azi{ 0%,11.76%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} }
@keyframes hc-elev{
  0%,11.76%{transform:rotateX(-90deg)}  /* rest on the flat 2D logo */
  33.82% {transform:rotateX(-14deg)}    /* swoop down to the FRONT (¼ turn) */
  55.88% {transform:rotateX(-90deg)}    /* climb back over the roof (no rest) */
  77.94% {transform:rotateX(-14deg)}    /* swoop down to the BACK (¾ turn) */
  100%   {transform:rotateX(-90deg)}    /* climb to the roof, then rest */
}
/* BUSY: 20s total -> rest ends at 5/20 = 25%; 4 swoop legs of 18.75% each. */
@keyframes hc-azi-busy{ 0%,25%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} }
@keyframes hc-elev-busy{
  0%,25% {transform:rotateX(-90deg)}    /* rest on the flat 2D logo */
  43.75% {transform:rotateX(-14deg)}    /* swoop down to the FRONT (¼ turn) */
  62.5%  {transform:rotateX(-90deg)}    /* climb back over the roof (no rest) */
  81.25% {transform:rotateX(-14deg)}    /* swoop down to the BACK (¾ turn) */
  100%   {transform:rotateX(-90deg)}    /* climb to the roof, then rest */
}

/* cube walls (no floor — never shown) */
.hc-face{ position:absolute; width:var(--S); height:var(--S); backface-visibility:hidden }
.hc-face.hc-front{transform:translateZ(var(--half))}
.hc-face.hc-back {transform:rotateY(180deg) translateZ(var(--half))}
.hc-face.hc-right{transform:rotateY(90deg)  translateZ(var(--half))}
.hc-face.hc-left {transform:rotateY(-90deg) translateZ(var(--half))}
.hc-face.hc-top  {transform:rotateX(90deg)  translateZ(var(--half))}

/* roof: each slope = one diagonal quadrant of the logo, folded up */
.hc-roof{ position:absolute; width:var(--S); height:var(--L); left:0; top:0;
  transform-origin:50% 100%; backface-visibility:hidden; overflow:hidden;
  clip-path:polygon(50% 0, 0% 100%, 100% 100%) }
.hc-roof.hc-s0{transform:rotateY(0deg)   translate3d(0, calc(-1 * var(--L)), var(--half)) rotateX(var(--tiltX))}
.hc-roof.hc-s1{transform:rotateY(90deg)  translate3d(0, calc(-1 * var(--L)), var(--half)) rotateX(var(--tiltX))}
.hc-roof.hc-s2{transform:rotateY(180deg) translate3d(0, calc(-1 * var(--L)), var(--half)) rotateX(var(--tiltX))}
.hc-roof.hc-s3{transform:rotateY(270deg) translate3d(0, calc(-1 * var(--L)), var(--half)) rotateX(var(--tiltX))}

.hc-qmap{ position:absolute; left:0; top:0; width:var(--S); height:var(--S);
  transform-origin:0 0; transform:translateY(calc(-1 * var(--L))) scaleY(var(--qy)) }
.hc-roof.hc-s0 .hc-qmap svg{transform:rotate(0deg)}
.hc-roof.hc-s1 .hc-qmap svg{transform:rotate(90deg)}
.hc-roof.hc-s2 .hc-qmap svg{transform:rotate(180deg)}
.hc-roof.hc-s3 .hc-qmap svg{transform:rotate(270deg)}
.hc-qmap svg{transform-origin:50% 50%}

.hc-face>svg,.hc-qmap svg{display:block;width:var(--S);height:var(--S)}
.hc-face .hc-overlay{position:absolute;left:0;top:0;width:var(--S);height:var(--S)}

/* window occupants (child / cat / mother): a warm, lightly translucent tone so they
 * read as figures seen through the glass rather than black stickers. Tune here.
 * The nested <svg> keeps its own x/y/width/height (it is not a direct .hc-face child,
 * so the rule above does not resize it). */
.hc-face .hc-occ{ opacity:0.66 }
.hc-face .hc-occ, .hc-face .hc-occ *{ fill:#5e4636 }
.hc-face .hc-occ.hc-occ-soft{ opacity:1 }   /* the mother: fully opaque so the kitchen behind doesn't show through her */
/* the mother: a neutral grey in the logo-grey family (WALL #d2d0cd), not the warm brown */
.hc-face .hc-occ.hc-occ-soft, .hc-face .hc-occ.hc-occ-soft *{ fill:#8a8884 }