/* The mobile room is a framed photo over a blurred extension of the same light. */
[data-mobile-home] .scene-ambience,
[data-mobile-home] .scene-ambience-shade,
[data-mobile-home] .mobile-entry-nav,
[data-mobile-home] .mobile-motion-controls { display: none; }

@media (max-width: 900px), (pointer: coarse) {
  html:has(> body[data-mobile-home]),
  body[data-mobile-home] { background: #000; }
  body[data-mobile-home] { --scene-background: #000; }
  [data-mobile-home] .portfolio-scene {
    container-type: size;
    touch-action: pinch-zoom;
    --mobile-inline: 8.63%;
    --mobile-header-top: 6.34%;
    --motion-feedback-top: max(calc(6.34cqh + 44px), calc(env(safe-area-inset-top) + 56px));
    --motion-entry-top: 25.21cqh;
    --room-overscan: 1.035;
    --room-feather: 8%;
    --room-source-top: .7%;
    --room-center-y: 50.7%;
    --ambient-blur: 32px;
    --ambient-bleed: 64px;
    --ambient-shade-top: #000;
    --ambient-shade-middle: rgba(0, 0, 0, .88);
    --ambient-shade-bottom: #000;
  }
  [data-mobile-home] .scene-ambience {
    display: block;
    position: absolute;
    inset: calc(-1 * var(--ambient-bleed));
    filter: blur(var(--ambient-blur));
    pointer-events: none;
  }
  [data-mobile-home] .scene-ambient {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 50.7%;
    clip-path: inset(var(--room-source-top) 0 0);
    opacity: 1;
    transition: opacity var(--scene-duration) ease;
  }
  [data-mobile-home] .scene-ambient--work,
  [data-mobile-home] .scene-ambient--about { opacity: 0; }
  [data-mobile-home] [data-state="work"] .scene-ambient--work.is-ready,
  [data-mobile-home] [data-state="about"] .scene-ambient--about.is-ready { opacity: 1; }
  [data-mobile-home] .scene-ambience-shade {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--ambient-shade-top), var(--ambient-shade-middle) 48%, var(--ambient-shade-bottom));
    pointer-events: none;
  }
  [data-mobile-home] .scene-images { left: 48%; top: var(--room-center-y); z-index: 1; }
  [data-mobile-home] .scene-image {
    transform: scale(var(--room-overscan));
    /* One alpha mask owns both the discarded export sliver and its fade.
       Explicit layer sizing also keeps WebKit's replaced-image mask aligned. */
    --room-edge-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) var(--room-source-top), #000 calc(var(--room-source-top) + var(--room-feather)), #000 calc(100% - var(--room-feather)), rgba(0, 0, 0, 0) 100%);
    -webkit-mask: var(--room-edge-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--room-edge-mask) 0 0 / 100% 100% no-repeat;
    mask-mode: alpha;
  }
  [data-mobile-home] [data-depth-state="active"] .scene-image,
  [data-mobile-home] [data-depth-state="leaving"] .scene-image { visibility: hidden; }
  [data-mobile-home] .site-header {
    top: max(var(--mobile-header-top), calc(env(safe-area-inset-top) + 12px));
    left: max(var(--mobile-inline), calc(env(safe-area-inset-left) + 16px));
    right: max(var(--mobile-inline), calc(env(safe-area-inset-right) + 16px));
    pointer-events: none;
  }
  [data-mobile-home] .identity-name { font-size: clamp(14px, 3.22cqw, 28px); }
  [data-mobile-home] .identity-role {
    max-width: none;
    margin-top: 8px !important;
    font-size: clamp(7px, 2.115cqw, 15px);
    letter-spacing: .04em;
    line-height: 1.35;
  }
  [data-mobile-home] .header-nav,
  [data-mobile-home] .scene-hotspot { display: none; }
  [data-mobile-home] .mobile-entry-nav { display: contents; }
  [data-mobile-home] .mobile-entry {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: 32.6%;
    height: 14.7cqw;
    min-height: 44px;
    display: grid;
    place-items: center;
    border: clamp(1px, .288cqw, 2px) solid var(--text-color);
    background: var(--glass-background);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--text-color);
    font-size: clamp(22px, 6cqw, 43px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    transition: background 180ms ease, opacity 250ms ease;
  }
  [data-mobile-home] .mobile-entry:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--focus-color); }
  [data-mobile-home] .mobile-entry--about { top: calc(var(--room-center-y) - var(--mobile-room-height) * .29); }
  [data-mobile-home] .mobile-entry--work { top: calc(var(--room-center-y) + var(--mobile-room-height) * .10); }
  [data-mobile-home] [data-state="about"] .mobile-entry--about,
  [data-mobile-home] [data-state="work"] .mobile-entry--work { background: rgba(34, 35, 60, .3); }
  [data-mobile-home] .mobile-motion-controls {
    position: absolute;
    z-index: 4;
    top: max(var(--mobile-header-top), calc(env(safe-area-inset-top) + 12px));
    right: max(var(--mobile-inline), calc(env(safe-area-inset-right) + 16px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  [data-mobile-home] .mobile-motion-controls button {
    min-height: 44px;
    min-width: 64px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(11px, 2.3cqw, 16px);
    line-height: 1.35;
    cursor: pointer;
    text-shadow: 0 1px 12px var(--scene-background);
  }
  [data-mobile-home] .mobile-motion-controls button[hidden] { display: none; }
  [data-mobile-home] .tilt-recalibrate { color: var(--text-soft); }
  [data-mobile-home] .headline {
    top: 75.62%;
    bottom: auto;
    left: max(5.68%, calc(env(safe-area-inset-left) + 16px));
    max-width: calc(100% - 32px);
  }
  [data-mobile-home] .headline-summary {
    margin-bottom: 0;
    font-size: clamp(10px, 2.86cqw, 21px);
    line-height: 1.3;
    letter-spacing: 0;
  }
  [data-mobile-home] .headline-year { font-size: clamp(30px, 8.13cqw, 60px); line-height: 1.05; }
  [data-mobile-home] .headline-title { margin-top: 2px; font-size: clamp(40px, 11.06cqw, 82px); line-height: 1.12; }
  [data-mobile-home] .mobile-motion-status {
    display: block;
    z-index: 3;
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    font-size: 11px;
    letter-spacing: .025em;
  }
  [data-mobile-home] .motion-status-message,
  [data-mobile-home] .motion-status-guidance { margin: 0; }
  [data-mobile-home] .motion-status-guidance { margin-top: 4px; font-size: 11px; }
  [data-mobile-home] .motion-status-actions { display: flex; align-items: center; gap: 8px; }
  [data-mobile-home] .motion-status-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    white-space: nowrap;
  }
  [data-mobile-home] .motion-status-actions a:focus-visible { outline-offset: -3px; }
  [data-mobile-home] .mobile-motion-status [hidden] { display: none; }
  [data-mobile-home] .mobile-motion-status[data-feedback="waiting"],
  [data-mobile-home] .mobile-motion-status[data-feedback="error"] {
    top: var(--motion-feedback-top);
    bottom: auto;
    left: max(16px, calc(env(safe-area-inset-left) + 8px));
    right: max(16px, calc(env(safe-area-inset-right) + 8px));
    z-index: 4;
    display: grid;
    gap: 4px;
    max-height: max(0px, calc(var(--motion-entry-top) - var(--motion-feedback-top) - 8px));
    padding: 6px 10px;
    overflow: auto;
    border: 1px solid var(--glass-border);
    background: var(--scene-background);
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    pointer-events: auto;
    touch-action: pan-y pinch-zoom;
  }
  [data-mobile-home] .asset-status { bottom: max(46px, calc(env(safe-area-inset-bottom) + 40px)); max-width: calc(100% - 32px); width: max-content; }
  [data-mobile-home] .is-leaving .mobile-entry-nav,
  [data-mobile-home] .is-leaving .mobile-entry,
  [data-mobile-home] .is-leaving .mobile-motion-controls { opacity: 0; pointer-events: none; }
  [data-mobile-home] [data-mobile-pending="true"] .mobile-entry { pointer-events: none; }
}

@media (max-height: 650px) and (max-aspect-ratio: 1/1) {
  [data-mobile-home] .headline { top: auto; bottom: max(9%, calc(env(safe-area-inset-bottom) + 44px)); }
}

@media (min-aspect-ratio: 1/1) and (max-width: 900px), (min-aspect-ratio: 1/1) and (pointer: coarse) {
  [data-mobile-home] .portfolio-scene {
    --mobile-inline: 5%;
    --mobile-header-top: 5%;
    --motion-feedback-top: max(calc(5cqh + 44px), calc(env(safe-area-inset-top) + 56px));
    --motion-entry-top: max(32cqh, calc(var(--motion-feedback-top) + 58px));
    --mobile-entry-height: max(44px, min(14.7cqw, 16cqh));
  }
  [data-mobile-home] .identity-name { font-size: 16px; }
  [data-mobile-home] .identity-role { margin-top: 4px !important; font-size: 8px; }
  [data-mobile-home] .mobile-motion-controls { flex-direction: row; gap: 8px; }
  [data-mobile-home] .mobile-motion-controls button { font-size: 11px; }
  [data-mobile-home] .mobile-entry {
    height: var(--mobile-entry-height);
    font-size: clamp(22px, 4.2cqw, 36px);
  }
  /* Keep the window/computer anchors; only constrain short viewports away
     from the unchanged header and headline. Both retain the base 50% centre. */
  [data-mobile-home] .mobile-entry--about { top: max(calc(var(--room-center-y) - var(--mobile-room-height) * .29), calc(var(--motion-feedback-top) + 8px + var(--mobile-entry-height) * .5)); }
  [data-mobile-home] .mobile-entry--work { top: min(calc(var(--room-center-y) + var(--mobile-room-height) * .10), calc(100% - max(12cqh, calc(env(safe-area-inset-bottom) + 35px)) - 64px - var(--mobile-entry-height) * .5)); }
  [data-mobile-home] .headline { top: auto; bottom: max(12%, calc(env(safe-area-inset-bottom) + 35px)); left: max(5%, calc(env(safe-area-inset-left) + 16px)); }
  [data-mobile-home] .headline-summary { font-size: 10px; margin-bottom: 3px; }
  [data-mobile-home] h1 { display: flex; align-items: baseline; gap: 12px; }
  [data-mobile-home] .headline-year { font-size: min(29px, 7.5cqh); }
  [data-mobile-home] .headline-title { font-size: min(34px, 8.75cqh); margin-top: 0; }
  [data-mobile-home] .mobile-motion-status[data-feedback="waiting"],
  [data-mobile-home] .mobile-motion-status[data-feedback="error"] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 2px;
  }
}

/* A very short landscape viewport scrolls through one complete composition
   instead of squeezing the window and computer controls onto each other. */
@media (max-height: 359px) and (min-aspect-ratio: 1/1) and (max-width: 900px), (max-height: 359px) and (min-aspect-ratio: 1/1) and (pointer: coarse) {
  [data-mobile-home] .portfolio-scene {
    min-height: calc(360px + env(safe-area-inset-top) + env(safe-area-inset-bottom));
    touch-action: pan-y pinch-zoom;
  }
}