/* EagleTagz demo: the whole logo on the home page on phones (October 2026).
 *
 * The home page fills the screen with one wide picture (1024x585) of the logo and its name,
 * scaled to cover the screen. On a phone held upright that scaling cut the name off at both
 * sides (only the middle quarter of the picture was visible). On upright phones the picture
 * is now sized so the name fills about 80% of the screen width, centred, with its top and
 * bottom edges fading into the black page. Computers, tablets and phones held sideways
 * keep the full-screen picture. */
@media (max-aspect-ratio: 4/5) {
  .image-container .fullscreen-image {
    top: 50%;
    left: 50%;
    width: 250vw;
    height: auto;
    max-width: none;
    object-fit: fill;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
}

/* ---------- "What would you like to do?" under the logo (16 Oct 2026) ----------
 * Two doors, as apps with two kinds of users do (Mobbin: 7shifts beside its brand picture, Vapi's dark role
 * cards, Ghost's one-line descriptions): "Create and protect" (first, Al's choice) opens Load Media,
 * "Market" opens /marketplace. Nobody picks a role for good; the top bar on every other page leads anywhere. Sign in sits at the
 * top right (account.css/js). The picture moves up a little to make room. */
.image-container:has(~ .etz-home-choice) .fullscreen-image { transform: translateY(-10vh); }
.etz-home-top { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 30; }
.etz-home-top .etz-tb-account { display: flex; }
.etz-home-top .etz-tb-account[hidden] { display: none; }
.etz-home-choice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 40px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78) 34%, rgba(0, 0, 0, 0.92));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.etz-home-ask { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; color: #d1d5db; text-align: center; }
.etz-home-cards { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 16px; }
.etz-home-card {
  min-height: 84px;
  box-sizing: border-box;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #2b3a4c;
  border-radius: 14px;
  background: rgba(18, 26, 34, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f9fafb;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.etz-home-card:hover { border-color: #f1c50e; background: rgba(26, 36, 48, 0.96); }
.etz-home-card:focus-visible { outline: 2px solid #f1c50e; outline-offset: 2px; }
.etz-home-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #2a2410; color: #f1c50e; font-size: 19px; }
.etz-home-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.etz-home-text b { font-size: 17px; line-height: 22px; font-weight: 700; }
.etz-home-text small { font-size: 13px; line-height: 18px; color: #9ca3af; }
.etz-home-arrow { flex: none; color: #f1c50e; font-size: 16px; }

/* phones held upright (and iPads): the logo a bit higher, the two cards one above the other on phones */
@media (max-aspect-ratio: 4/5) {
  .image-container:has(~ .etz-home-choice) .fullscreen-image { top: 40%; transform: translate(-50%, -50%); }
}
@media (max-width: 639px) {
  .etz-home-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .etz-home-choice { padding-top: 32px; gap: 12px; }
}
/* small phones: a smaller logo, higher up */
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .image-container:has(~ .etz-home-choice) .fullscreen-image { top: 33%; width: 200vw; }
}
/* very short upright phones (iPhone SE): no question line, so the logo's name stays clear */
@media (max-aspect-ratio: 4/5) and (max-height: 600px) {
  .etz-home-ask { display: none; }
}
/* short screens held sideways: no question line or descriptions, so the logo stays clear */
@media (min-aspect-ratio: 4/5) and (max-height: 560px) {
  .image-container:has(~ .etz-home-choice) .fullscreen-image { transform: translateY(-17vh); }
  .etz-home-ask, .etz-home-text small { display: none; }
  .etz-home-card { min-height: 56px; padding: 8px 14px; }
  .etz-home-choice { padding-top: 24px; }
}