/* =====================================================================
   HOME PAGE — project carousel
   Three layouts, all driven by the same markup:

   1. DESKTOP   (default)            original look, unchanged sizing
   2. COMPACT   (≤1380 wide or ≤640 tall, landscape)
                header becomes a single bar, carousel is sized from the
                space that's left so it stays wide-format with breathing
                room above and below
   3. SPLIT     (portrait, ≤1100 wide)
                small carousel on top, live (non-interactive) preview of
                the selected project below; tapping the preview opens it

   The track is its own horizontal scroller in every layout. The document
   never scrolls sideways, which is what stops touch browsers from zooming
   the page out to fit the whole strip.
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* ≈ gsap power1.out */
  --ease-out-2: cubic-bezier(0.215, 0.61, 0.355, 1);  /* ≈ gsap power2.out */
}

html:has(body.home) { overflow: hidden; }

body.home {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------------
   1. DESKTOP (default)
   --------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

#blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 12vh;
  background-color: var(--dark-primary);
  z-index: 0;
}

.home-main { position: relative; }
.carousel  { position: relative; }

.track {
  --card-h: 75vh;
  --card-w: 23vw;
  --card-w-active: 40vw;
  --dur: 1.5s;

  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  margin-top: 2vh;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }

.box {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  height: var(--card-h);
  width: var(--card-w);
  margin: 5px;
  text-align: center;
  color: #eceff4;
  font-size: 20px;
  background-color: var(--dark-accent);
  border: 2px solid var(--dark-accent);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition:
    width var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.box.active {
  width: var(--card-w-active);
  background-color: var(--dark-secondary);
  border-color: var(--dark-secondary);
}
.box:focus-visible {
  outline: 2px solid var(--light-primary);
  outline-offset: 2px;
}

/* thin divider between featured and older projects */
.spacer {
  flex: 0 0 auto;
  width: 2px;
  height: var(--card-h);
  margin: 5px;
  background-color: var(--dark-accent);
  border: 2px solid var(--dark-accent);
  border-radius: 12px;
}

/* card animations are looping videos encoded on black; "lighten" drops the
   black out over the card, the same as the transparent GIFs they replace */
.box video.anims { mix-blend-mode: lighten; }

.anims {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 200%;
  transform: translate(-51.5%, -55%);
  z-index: 1;
  pointer-events: none;
}

.index-label.cat {
  font-weight: 500;
  transform: translateY(-50%);
  opacity: 0.6;
}

.s-title {
  position: absolute;
  left: 50%;
  bottom: 4.7vh;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  z-index: 2;
  font-size: 1.5vw;
  font-weight: 500;
  white-space: nowrap;
  color: var(--light-primary);
  text-shadow: 0 0 4px #000;
  transition:
    font-size var(--dur) var(--ease-out-2),
    bottom var(--dur) var(--ease-out-2);
}
.box.active .s-title {
  font-size: 3vw;
  bottom: 9.7vh;
}

.see-more {
  position: absolute;
  left: 50%;
  bottom: 2.35vh;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.1vh 7%;
  font-size: 1.8vw;
  white-space: nowrap;
  color: var(--light-primary);
  background-color: var(--dark-accent);
  border: 2px solid var(--light-primary);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.box.active .see-more {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--ease-out), visibility 0s;
}
.see-more[aria-disabled="true"] {
  cursor: default;
  border-style: dashed;
  opacity: 0;
}
.box.active .see-more[aria-disabled="true"] { opacity: 0.55; }

.divider {
  position: absolute;
  bottom: 17.75vh;
  width: 50%;
  margin: 0 25%;
  z-index: 2;
  border: 1px solid var(--light-secondary);
  box-shadow: 0 0 3px #000;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.box.active .divider {
  opacity: 1;
  transition-duration: 1s;
}

.scrollbar {
  position: fixed;
  bottom: 4%;
  left: 42.5%;
  width: 15%;
  height: 10px;
  background-color: var(--dark-accent);
  border-bottom: 2px solid var(--dark-accent);
  border-radius: 10px;
  z-index: 1000;
}

.handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 120%;
  box-sizing: border-box;
  background-color: var(--dark-secondary);
  border: 2px solid var(--dark-secondary);
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
  z-index: 1001;
}
.handle:active { cursor: grabbing; }

.preview { display: none; }


/* ---------------------------------------------------------------------
   2. COMPACT — small laptops, landscape tablets, Nest Hub, etc.
   Everything is sized from the card height (--card-h), which is itself
   derived from the space under the header.
   --------------------------------------------------------------------- */
@media (max-width: 1380px), (max-height: 640px) {

  body.home {
    display: flex;
    flex-direction: column;
  }

  body.home #blocker { display: none; }

  body.home .site-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    padding:
      max(12px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      10px
      max(20px, env(safe-area-inset-left));
    background-color: var(--dark-primary);
  }

  body.home .site-header #title {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    font-size: clamp(18px, 4.4vh, 34px) !important;
  }

  body.home .site-header .navigation {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0;
    flex: 0 1 auto;
    width: min(46vw, 480px) !important;
    height: clamp(28px, 5.5vh, 42px) !important;
    font-size: clamp(9px, 1.7vh, 13px) !important;
  }

  .home-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .carousel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .track {
    --card-h: 60vh;                    /* fallback, no container units */
    --card-w: calc(var(--card-h) * 0.5);
    --card-w-active: min(calc(var(--card-h) * 1.0), 78vw);
    --dur: 0.9s;

    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 max(14px, env(safe-area-inset-left));
  }

  @supports (height: 1cqh) {
    .carousel { container-type: size; }
    .track { --card-h: calc(84cqh - 26px); }
  }

  .box { font-size: 14px; }

  .index-label {
    margin: 0.9em 0 0.35em;
    font-size: clamp(8px, calc(var(--card-h) * 0.028), 14px);
    line-height: 1.2;
  }

  .s-title {
    width: 80%;
    white-space: normal;
    line-height: 1.15;
    font-size: clamp(9px, calc(var(--card-h) * 0.042), 22px);
    bottom: calc(var(--card-h) * 0.06);
  }
  .box.active .s-title {
    width: 90%;
    font-size: clamp(14px, calc(var(--card-h) * 0.072), 40px);
    bottom: calc(var(--card-h) * 0.13);
  }

  .see-more {
    bottom: calc(var(--card-h) * 0.035);
    padding: 0.3em 1.6em;
    font-size: clamp(9px, calc(var(--card-h) * 0.034), 16px);
  }

  .divider { bottom: calc(var(--card-h) * 0.25); }

  .scrollbar {
    position: relative;
    flex: 0 0 auto;
    left: auto;
    bottom: auto;
    width: min(30%, 260px);
    height: 8px;
    margin: 6px auto max(14px, env(safe-area-inset-bottom));
  }
}


/* ---------------------------------------------------------------------
   3. SPLIT — portrait phones & tablets
   --------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 1100px) {

  body.home .site-header {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding:
      max(14px, env(safe-area-inset-top))
      4vw
      10px;
  }

  body.home .site-header #title {
    text-align: center !important;
    font-size: clamp(20px, 6.2vw, 32px) !important;
  }

  body.home .site-header .navigation {
    width: 100% !important;
    max-width: 560px;
    height: clamp(26px, 3.8vh, 36px) !important;
    font-size: clamp(9px, 2.7vw, 12.5px) !important;
  }

  .home-main {
    display: grid;
    grid-template-rows: minmax(0, 40fr) minmax(0, 60fr);
  }

  .carousel {
    justify-content: flex-end;
    padding-top: 18px;            /* breathing room under the nav */
  }

  .track {
    --card-h: 26vh;
    --card-w: calc(var(--card-h) * 0.52);
    --card-w-active: min(calc(var(--card-h) * 1.05), 66vw);
    --dur: 0.7s;

    padding: 0 4vw;
  }

  @supports (height: 1cqh) {
    .track { --card-h: calc(100cqh - 34px); }
  }

  .box { margin: 4px; }
  .spacer { margin: 4px 3px; }

  .s-title {
    font-size: clamp(8px, calc(var(--card-h) * 0.052), 15px);
    bottom: calc(var(--card-h) * 0.06);
  }
  .box.active .s-title {
    font-size: clamp(12px, calc(var(--card-h) * 0.08), 26px);
    bottom: calc(var(--card-h) * 0.07);
  }

  /* the preview pane is the "open" action in this layout */
  .see-more,
  .divider { display: none; }

  .scrollbar {
    width: min(36%, 220px);
    height: 6px;
    margin: 8px auto 10px;
  }

  /* ---- preview pane ---- */

  .preview {
    --ps: 0.72;   /* how far the project page is zoomed out inside the pane */

    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 4vw max(14px, env(safe-area-inset-bottom));
  }

  .preview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--dark-primary);
    border-radius: 12px;
  }

  /* The frame holds the live project page. It stays fully opaque so the
     browser keeps painting it (GIFs only animate and videos only play when
     painted), and a navy layer on top hides it; the canvas reads its media
     and draws the dither above both. For other sites the cover is removed
     and the canvas becomes a navy sheet with dot-shaped holes. */
  .preview-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--ps));
    height: calc(100% / var(--ps));
    border: 0;
    transform: scale(var(--ps));
    transform-origin: 0 0;
    background-color: var(--dark-primary);
    pointer-events: none;
  }
  .preview-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--dark-primary);
    pointer-events: none;
  }
  .preview-stage.is-live::after { display: none; }
  /* light pages from other sites (tubaa.dev): flip to dark, keep the hues */
  .preview-frame.is-inverted { filter: invert(1) hue-rotate(180deg) brightness(0.92); }

  .preview-dither {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }


  .preview-loading {
    position: absolute;
    top: calc(50% + 34px);
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .preview[data-state="loading"] .preview-loading {
    opacity: 0.55;
    animation: preview-blink 1.1s ease-in-out infinite;
  }

  .preview-open {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--light-primary);
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
  }
  .preview-open:focus-visible {
    outline: 2px solid rgba(240, 240, 240, 0.6);
    outline-offset: -4px;
  }

  /* frosted patch behind the label that feathers out to nothing:
     the blur and tint live on a pseudo-element masked with a soft ellipse */
  .preview-cta {
    position: relative;
    isolation: isolate;
    padding: 1.6em 2.8em;
    font-size: clamp(10px, 3vw, 13px);
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: rgba(240, 240, 240, 0.92);
    text-shadow: 0 0 6px rgba(5, 18, 32, 0.8);
  }
  .preview-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(110, 145, 180, 0.22), rgba(110, 145, 180, 0.1) 60%, rgba(110, 145, 180, 0));
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
    transition: background 0.2s ease;
  }
  .preview-open:active .preview-cta::before {
    background: radial-gradient(closest-side, rgba(110, 145, 180, 0.38), rgba(110, 145, 180, 0.16) 60%, rgba(110, 145, 180, 0));
  }
  .preview-open[aria-disabled="true"] { cursor: default; }
  .preview-open[aria-disabled="true"] .preview-cta { opacity: 0.6; }

  .preview-open.nudge .preview-cta {
    animation: preview-nudge 0.5s var(--ease-out-2);
  }
}

@keyframes preview-blink {
  50% { opacity: 0.25; }
}
@keyframes preview-nudge {
  30% { transform: scale(1.08); }
}


/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .track { --dur: 0.01s; }
  .preview[data-state="loading"] .preview-loading { animation: none; }
}