/* ============================================================
   GZJ HOMEPAGE — desktop two-column layout
   ============================================================ */
@media (min-width: 901px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--web_blue) !important;
  }

  /* hide mobile-only elements */
  .mobile-top-nav,
  .mobile-index,
  .section-4 {
    display: none !important;
  }

  /* the two-column shell */
  .site-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
  }

  /* ---- LEFT SIDEBAR 1/5 ---- */
  .sidebar {
    flex: 0 0 20vw;
    width: 20vw;
    min-width: 190px;
    max-width: 290px;
    height: 100vh;
    background: transparent;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
  }

  /* top edge is 28px from the top -- matches .sidebar-contact's 28px from
     the bottom, so name and contact info sit symmetrically */
  .sidebar-contact:first-child { top: 28px; }

  /* ---- TABS ----
     page is divided into 5 equal rows (20vh each): the project list
     starts at the top of row 2, the bottom tabs at the top of row 4 */
  .sidebar-tabs {
    position: absolute;
    top: 20vh;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sidebar-tabs-bottom {
    position: absolute;
    top: 60vh;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
  }

  .tab-item {
    display: flex;
    align-items: center;
    padding: 4px 30px 2px 30px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-family: var(--web_font);
    font-size: var(--size-2);
    line-height: 28px;
    cursor: pointer;
    border: none;
    text-align: left;
    box-sizing: border-box;

    opacity: 0;
    animation: tab-cascade 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .tab-item:hover { text-decoration: underline; }

  .sidebar-tabs .tab-item:nth-child(1) { animation-delay: 0.08s; }
  .sidebar-tabs .tab-item:nth-child(2) { animation-delay: 0.17s; }
  .sidebar-tabs .tab-item:nth-child(3) { animation-delay: 0.26s; }
  .sidebar-tabs .tab-item:nth-child(4) { animation-delay: 0.35s; }
  .sidebar-tabs .tab-item:nth-child(5) { animation-delay: 0.44s; }

  .sidebar-tabs-bottom .tab-item:nth-child(1) { animation-delay: 0.53s; }
  .sidebar-tabs-bottom .tab-item:nth-child(2) { animation-delay: 0.62s; }
  .sidebar-tabs-bottom .tab-item:nth-child(3) { animation-delay: 0.71s; }

  @keyframes tab-cascade {
    to { opacity: 1; }
  }

  /* Once the cascade has played, pin the tabs visible with !important.
     Author !important beats a running animation in the cascade, so if a
     late-arriving stylesheet (p5's injected @font-face, the webfont) forces
     a style recalc that restarts the animation, the restart is invisible
     instead of flashing the sidebar off and back on. */
  .sidebar.tabs-settled .tab-item {
    opacity: 1 !important;
    animation: none !important;
  }

  .tab-icon {
    width: 20px;
    height: 20px;
    margin: -24px 0 -20px 8px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
  }

  /* ---- NAME + CONTACT ---- */
  .sidebar-contact {
    position: absolute;
    left: 0;
    right: 0;
    font-family: var(--web_font);
    color: var(--web-wht);
    font-size: var(--size-1);
    line-height: 18px;
    padding: 0 30px;
  }

  .sidebar-contact:last-child { bottom: 28px; }

  .sidebar-contact a {
    color: var(--web-wht);
    text-decoration: none;
  }

  .sidebar-contact a:hover { text-decoration: underline; }

  /* ---- RIGHT MAIN VIEW 4/5 ---- */
  .main-view {
    flex: 1 1 auto;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--web_blue);
  }

  #p5-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--web_blue);
    opacity: 0;
    /* slow, deliberate fade for the initial reveal */
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #p5-container.loaded { opacity: 1; }

  /* once the reveal has finished, drop back to a snappy duration so the
     About Me dim/undim doesn't feel sluggish */
  #p5-container.settled { transition-duration: 0.48s; }

  #p5-container.dimmed { opacity: 0; }

  /* ---- THUMBNAIL PREVIEW OVERLAY ---- */
  .preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    background: var(--web_blue);
    overflow: hidden;
  }

  .preview-overlay.active { opacity: 1; }

  .preview-slide {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .preview-video,
  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---- ABOUT ME PANEL ---- */
  /* Wipes in top-to-bottom on the same curve as the project previews, rather
     than cross-fading. The background is opaque so it covers the thumbnail
     held underneath it as it sweeps down -- see the aboutme handlers in
     index.html for the hold. */
  /* Spans the whole viewport (fixed, not absolute inside .main-view) so the
     wipe sweeps behind the index too, and sits at z-index 15 -- above the
     preview overlay (10) but below the sidebar (20), so the index stays
     legible on top while the blue washes in underneath it. The left padding
     re-creates the sidebar gutter that .main-view used to provide. */
  .aboutme-panel {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: var(--web_blue);
    color: var(--web-wht);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    padding: 28px 64px 80px calc(clamp(190px, 20vw, 290px) + 30px);
    box-sizing: border-box;
    pointer-events: none;
  }

  .aboutme-panel.active {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }

  .aboutme-panel .heading.leftside {
    color: var(--web-wht) !important;
    font-size: var(--size-2) !important;
    font-weight: 400 !important;
    line-height: 23px !important;
    margin: 0 0 20px;
  }

  @media (min-width: 901px) and (max-width: 1440px) {
    .tab-item { line-height: 21px; } /* 28px * 0.75 */
    .sidebar-contact { line-height: 13.5px; } /* 18px * 0.75 */
    .aboutme-panel .heading.leftside { line-height: 17.25px !important; } /* 23px * 0.75 */
  }

  .aboutme-panel .paragraph-l.aboutme {
    color: var(--web-wht) !important;
    max-width: 33.333%;
  }

  .aboutme-panel .aboutme-photo {
    display: block;
    margin-top: 40px;
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  /* ---- PAGE TRANSITION: right-to-left wipe into the project hero ---- */
  .page-wipe {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--web_blue);
    /* clipped to zero width at the right edge -- the reveal grows leftward */
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
  }

  .page-wipe.wiping {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  }

  .page-wipe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ============================================================
   MOBILE — hide the desktop layout
   ============================================================ */
@media (max-width: 900px) {
  .site-layout { display: none !important; }
  /* mobile gallery */
  .mgal { display: flex; flex-direction: column; width: 100%; }
  .mgal-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
  }
  .mgal-img, .mgal-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mgal-title {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
    color: #fff;
    font-family: var(--web_font);
    font-size: var(--size-1);
    line-height: 18px;
    padding: 9px 8px 5px;
  }
}