/* EXPERIMENT: give portrait phones the desktop "fan" composition instead of
   the stacked scrolling layout. Loaded only by Homepage.html, after styles.css.
   Remove the <link> in Homepage.html to revert to the stacked layout.

   Scoped to portrait phones with room to breathe. Landscape phones (short
   viewports) keep the stacked layout, where a fixed composition has no room. */

@media (max-width: 560px) and (min-height: 600px) and (orientation: portrait) {
  body.page-home {
    overflow: hidden;
  }

  /* ---- hero: back to a fixed block, scaled for the phone ---- */
  body.page-home .topText {
    position: fixed;
    top: calc(120px + env(safe-area-inset-top, 0px));
    top: calc(clamp(84px, 15dvh, 165px) + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
    width: min(94vw, 380px);
    max-width: none;
    padding: 0 16px;
  }

  body.page-home .topText h1 {
    font-size: clamp(27px, 8.6vw, 34px);
  }

  body.page-home .topText p {
    margin-top: 0;
    width: 100%;
    max-width: 330px;
    font-size: clamp(12px, 3.4vw, 13.5px);
    line-height: 1.45;
  }

  /* ---- gallery: restore the fan, overlapped so 7 cards fit ---- */
  body.page-home .gallery-container {
    --card-w: clamp(72px, 30vw, 148px);
    --card-w: clamp(72px, min(30vw, 17dvh), 148px);

    position: fixed;
    top: 54%;
    top: 54dvh;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 12px;
    gap: 0;
    pointer-events: none;
    animation: galleryReveal 1s var(--ease-apple-soft) 0.08s both;
  }

  body.page-home .gallery-item {
    width: var(--card-w);
    /* Overlap is tuned so the whole fan spans ~91vw at any phone width:
       total = card-w * (7 - 12 * 0.346). Grow --card-w and this holds. */
    margin-inline: calc(var(--card-w) * -0.346);
    aspect-ratio: 9 / 16;
    border-radius: clamp(14px, 4vw, 22px);
    transform: translate3d(var(--x), var(--offset), 0) rotate(var(--angle));
    animation: fadeUp 1s var(--ease-apple-soft) both;
    animation-delay: var(--delay);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  }

  /* offsets/rotations scaled down from desktop's ~280px card to a ~78px one */
  body.page-home .gallery-item-1 { --offset: calc(var(--card-w) * 0.157); --angle: -9deg; --x: 2px; z-index: 1; }
  body.page-home .gallery-item-2 { --offset: calc(var(--card-w) * 0.071); --angle: -6deg; z-index: 2; }
  body.page-home .gallery-item-3 { --offset: calc(var(--card-w) * 0.021); --angle: -3deg; z-index: 3; }
  body.page-home .gallery-item-4 { --offset: 0px;                          --angle: 0deg;  z-index: 10; }
  body.page-home .gallery-item-5 { --offset: calc(var(--card-w) * 0.021); --angle: 3deg;  z-index: 3; }
  body.page-home .gallery-item-6 { --offset: calc(var(--card-w) * 0.071); --angle: 6deg;  z-index: 2; }
  body.page-home .gallery-item-7 { --offset: calc(var(--card-w) * 0.157); --angle: 9deg;  --x: -2px; z-index: 1; }

  /* the stacked layout kills this transform; the fan needs it back */
  body.page-home .gallery-item.is-fading {
    transform: translate3d(var(--x), calc(var(--offset) + 14px), 0) rotate(var(--angle)) scale(0.98);
  }
}