/*
  hjem.css: the opening screen (index.html, js/hjem.js; SA-03). Sizes from
  Standalone App/drafts/app-drafts.html frame 1 (phone) and
  drafts/web-chrome.html "Hjem" (wide). Tokens from css/tokens.css.

  Phone: no top bar and no tabs (the draft has neither). Since 2026-09-14 the
  phone's Hjem is the attic itself: the owner's plank wall fills the screen
  (assets/hero/wall.jpg, the lamp's light pool a little below the middle),
  Lars hangs out of the hatch at the top (assets/hero/lars-hatch.webp, the
  ladder fading into the wall), and the title, the intro, the circles and
  "Velg en bamse" sit on the planks below, white on dark, the button gold.
  The phone's static splash is the same wall with Lars centred; opening the
  app slides him to the top (Standalone App/03_ASSETS.md "The hero").
  From 768 px the page stays light: the web header and footer from
  css/app-shell.css, the site's section banner across the column
  (assets/hero/banner.jpg, finished like the sticker banners), then text and
  button on the left beside the circles on the right.
*/

.hjem-app { --pop-size: 66px; --hjem-wall: #08161e; }   /* the wall's own dark, also index.html's theme-color */

/* ------------------------------------------------------------- phone */

@media (max-width: 767.98px) {
  .hjem-app .ashell-bar,
  .hjem-app .ashell-tabs { display: none; }
  .app.hjem-app.has-app-shell.has-tabs { padding-bottom: 0; }

}

.hjem {
  display: block;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px 0;
}

/* The attic art. On the phone the figure alone (the wall is behind the whole
   page, above); on a wide screen the site's banner across the column, with
   the sticker banners' finish, and the figure hidden. */
.hjem-art { position: relative; border-radius: var(--radius-lg); }
.hjem-hero { display: block; width: 100%; height: auto; }
.hjem-banner-name { display: none; }
.hjem-word { display: none; }

.hjem-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "text" "pop" "go";
  row-gap: 14px;
  margin-top: 14px;
}
.hjem-text { grid-area: text; }
.hjem-pop { grid-area: pop; }
.hjem-go-wrap { grid-area: go; }

.hjem-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-heading);
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hjem-intro {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* "Velg en vokter": full width at the bottom, and on the phone it stays at
   the thumb over whatever scrolls under it. */
.hjem-go-wrap {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -16px;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(250, 250, 250, 0), var(--bg) 14px);
}
.hjem-go {
  min-height: 56px;
  font-size: 19px;
  text-decoration: none;
}

/* ------------------------------------------------------------- the pops */

.hjem-pop {
  position: relative;
  height: 240px;
}
.hjem-face {
  position: absolute;
  left: calc((100% - var(--pop-size)) * var(--fx, 0));
  top: calc((100% - var(--pop-size)) * var(--fy, 0));
  width: var(--pop-size);
  height: var(--pop-size);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  background: #eee7f0;
  display: grid;
  place-items: center;
  font-weight: var(--font-weight-heading);
  font-size: var(--text-lg);
  color: var(--plum);
  transform: scale(0);
}
.hjem-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.hjem-pop.is-popping .hjem-face {
  animation: hjem-pop .65s cubic-bezier(.2, 1.4, .4, 1) both;   /* js/hjem.js POP_DURATION_MS */
}
.hjem-pop.is-still .hjem-face {
  animation: none;
  transform: none;
}
@keyframes hjem-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hjem-pop .hjem-face { animation: none !important; transform: none; }
}

/* ------------------------------------------------------------- wide */

@media (min-width: 768px) {
  .hjem-app { --pop-size: 84px; }
  .hjem { padding: 26px 16px 40px; }
  .hjem-art {
    aspect-ratio: 1600 / 324;
    background: var(--hjem-wall) url(../assets/hero/banner.jpg) center / cover no-repeat;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .hjem-hero { display: none; }
  /* The title box on the banner, as the site draws it on every sticker page:
     white, left, vertically centred, the attic's name in plum capitals. */
  .hjem-banner-name {
    display: block;
    position: absolute;
    left: 5.5%;
    top: 50%;
    transform: translateY(-50%);
    padding: .45em 1em;
    border-radius: 8px;
    background: #fff;
    color: var(--plum);
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: var(--font-weight-wordmark, 900);
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hjem-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "text pop" "go pop";
    column-gap: 32px;
    row-gap: 20px;
    margin-top: 24px;
    align-items: start;
  }
  .hjem-title { font-size: var(--text-2xl); }
  .hjem-intro { font-size: var(--text-base); line-height: 1.55; max-width: 47ch; margin-top: 12px; }
  .hjem-go-wrap {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
  }
  .hjem-go { width: auto; padding: 0 28px; }
  .hjem-pop { height: 320px; }
}

/* ------------------------------------------------------------- the attic, phone */

@media (max-width: 767.98px) {
  /* The attic: the wall behind everything, fixed while the page scrolls. */
  .hjem-body,
  .hjem-app { background: var(--hjem-wall); }
  .hjem-app {
    background-image: url(../assets/hero/wall.jpg);
    background-position: center 55%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* Lars at rest: half the width it had, so the text and the circles fit
     on the first screen (Fleur, 2026-09-16). The box hugs the figure, so the
     opening can move and scale the box as one piece (js/hjem.js intro). */
  .hjem-art {
    width: 50%;
    max-width: 230px;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    background: none;
    transform-origin: 0 0;
  }
  .hjem-hero {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 24px rgba(255, 200, 90, .18));
  }

  /* THE OPENING, the first Hjem of a visit: Lars large in the middle with
     the word under him, as the app's splash; then he slides up and shrinks
     into place, the word fades, and the page fades in under him. js/hjem.js
     sets the transform and the classes; the word sits outside the flow, so
     it takes no room once the page is at rest. */
  .hjem-word {
    display: block;
    position: absolute;
    left: -50%;
    right: -50%;
    top: 100%;
    margin-top: 6px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: var(--font-weight-wordmark, 900);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .hjem-app.is-intro .hjem-word { opacity: 1; }
  .hjem-grid { transition: opacity .5s ease .25s; }
  .hjem-app.is-intro .hjem-grid { opacity: 0; transition: none; }

  /* Once every guardian has popped, they float (js/hjem.js float): the
     script owns their places from then on, so the pop's scale is dropped. */
  .hjem-pop.is-floating .hjem-face { animation: none; transform: none; }
  .hjem-title { color: #fff; }
  .hjem-intro { color: #ece6f0; }
  .hjem-face {
    border-color: var(--gold);
    background: #2a2d33;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  }
  .hjem-go-wrap {
    background: linear-gradient(rgba(8, 22, 30, 0), rgba(8, 22, 30, .9) 14px);
  }
  .hjem-go {
    background: var(--gold);
    color: #2a1e2c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  }
}