/* Atelier Noir on a phone: an app, not a shrunken website.
   One full-screen scene at a time, a tab bar at the thumb, light that moves
   with the phone and the finger. Everything here is phone-only (< 768px). */

@layer app {
  /* Hidden on larger screens. */
  .tabbar,
  .app-scenes,
  .deck,
  .swipe-hint,
  .pager {
    display: none;
  }

  @media (max-width: 767px) {
    :root {
      --tabbar-h: 64px;
      --tabbar-gap: 10px;
      --safe-b: env(safe-area-inset-bottom, 0px);
      --app-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) * 2 + var(--safe-b));
    }

    /* ---------- Shell ---------- */

    .hdr .menu-btn {
      display: none;
    }

    .hdr {
      padding-top: env(safe-area-inset-top, 0px);
      height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    }

    .tabbar {
      position: fixed;
      left: var(--tabbar-gap);
      right: var(--tabbar-gap);
      bottom: calc(var(--tabbar-gap) + var(--safe-b));
      z-index: 70;
      display: block;
      height: var(--tabbar-h);
      background: rgb(13 13 12 / 0.72);
      border: 1px solid rgb(235 230 222 / 0.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      backdrop-filter: blur(18px) saturate(1.2);
      view-transition-name: tabbar;
    }

    .tabbar__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      height: 100%;
    }

    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 100%;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--mute);
      -webkit-tap-highlight-color: transparent;
      transition: color 400ms var(--ease);
    }

    .tab__mark {
      width: 16px;
      height: 1.5px;
      background: currentColor;
      opacity: 0.4;
      transform: rotate(-68deg);
      transition: opacity 400ms var(--ease), box-shadow 400ms var(--ease), width 400ms var(--ease);
    }

    .tab[aria-current="page"] {
      color: var(--light);
    }

    .tab[aria-current="page"] .tab__mark {
      width: 20px;
      opacity: 1;
      box-shadow: 0 0 12px 2px rgb(244 236 220 / 0.55);
    }

    .tab:active {
      transform: scale(0.94);
    }

    /* Room for the tab bar under the last content of every page. */
    body:not(.page-home) {
      padding-bottom: var(--app-bottom);
    }

    .menu {
      display: none !important;
    }

    /* ---------- Home: one scene at a time ---------- */

    /* Scenes snap to the very top of the screen. The site-wide scroll padding
       (room for the header when jumping to an anchor) would put every scene
       64px low, and ask the first one to sit above the top of the page,
       which made the page fight the pull-to-refresh bounce. */
    html:has(.page-home) {
      scroll-snap-type: y mandatory;
      scroll-padding-top: 0;
    }

    .page-home main > section:not(.hero),
    .page-home .ftr {
      display: none;
    }

    .page-home .hero,
    .scene {
      height: 100svh;
      min-height: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .page-home .hero__content {
      padding-bottom: calc(var(--app-bottom) + 3.25rem);
    }

    .page-home .hero__foot {
      display: none;
    }

    .swipe-hint {
      position: absolute;
      left: 50%;
      bottom: calc(var(--app-bottom) + 0.75rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-size: 0.6875rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mute);
      transform: translateX(-50%);
    }

    .swipe-hint span {
      width: 1px;
      height: 28px;
      background: linear-gradient(var(--light), transparent);
      animation: swipe-hint 2.2s var(--ease) infinite;
      transform-origin: top;
    }

    @keyframes swipe-hint {
      0% { transform: scaleY(0); opacity: 0; }
      40% { transform: scaleY(1); opacity: 1; }
      100% { transform: scaleY(1) translateY(16px); opacity: 0; }
    }

    .app-scenes {
      display: block;
    }

    .scene {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: var(--space-3);
      padding: calc(var(--header-h) + var(--space-4)) var(--margin) calc(var(--app-bottom) + var(--space-3));
      overflow: hidden;
    }

    /* Room on the right for the pager. */
    .scene,
    .scene__link {
      padding-right: calc(var(--margin) + 14px);
    }

    .scene .link-arrow {
      align-self: flex-start;
    }

    /* On the home the bar stays out of the way: no panel, just a shade for the logo. */
    .page-home .hdr,
    .page-home .hdr.is-scrolled {
      background: transparent;
      border-color: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .page-home .hdr::before {
      content: "";
      position: absolute;
      inset: 0 0 -40px;
      z-index: -1;
      background: linear-gradient(180deg, rgb(13 13 12 / 0.7), rgb(13 13 12 / 0));
      pointer-events: none;
    }

    .scene__title {
      font-family: var(--serif);
      font-size: clamp(3rem, 15vw, 4.5rem);
      line-height: 0.9;
      letter-spacing: -0.03em;
    }

    /* Statement */
    .scene--statement {
      justify-content: center;
    }

    .scene__statement {
      font-family: var(--serif);
      font-size: clamp(2.25rem, 10.5vw, 3rem);
      line-height: 1.04;
      letter-spacing: -0.02em;
    }

    .scene__statement em {
      color: var(--light);
      text-shadow: 0 0 30px rgb(244 236 220 / 0.35);
    }

    /* Projects */
    .scene--project {
      padding: 0;
    }

    .scene__link {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--margin) calc(var(--app-bottom) + var(--space-3));
      color: var(--bone);
      -webkit-tap-highlight-color: transparent;
    }

    .scene__media {
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    .scene__media img {
      transform: scale(1.08) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0);
      transition: opacity 900ms var(--ease), transform 1600ms var(--ease);
    }

    .scene.is-active .scene__media img {
      transform: scale(1.02) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0);
    }

    .scene__media::before {
      content: "";
      position: absolute;
      inset: 30% 0 0;
      z-index: 1;
      background: linear-gradient(0deg, rgb(13 13 12 / 0.92) 8%, rgb(13 13 12 / 0.55) 45%, rgb(13 13 12 / 0));
    }

    .scene__body {
      display: grid;
      gap: var(--space-2);
    }

    .scene__line {
      max-width: 22rem;
      font-family: var(--serif);
      font-size: 1.25rem;
      line-height: 1.25;
      color: rgb(235 230 222 / 0.86);
    }

    .scene__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      justify-self: start;
      margin-top: var(--space-1);
      padding: 0.8rem 1.1rem;
      border: 1px solid rgb(235 230 222 / 0.35);
      font-size: 0.8125rem;
      font-weight: 500;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .scene__link:active .scene__cta {
      background: var(--light);
      color: var(--ink-0);
    }

    /* Light study you can play with */
    /* Everything fits the screen: the drawing takes what the rest leaves, so
       the slider always sits clear of the tab bar, whatever the phone. */
    .scene--light {
      justify-content: flex-end;
      gap: var(--space-2);
      padding-bottom: calc(var(--app-bottom) + var(--space-2));
    }

    .scrub__head {
      display: grid;
      gap: var(--space-1);
    }

    .scrub__head .scene__title {
      font-size: clamp(2.5rem, 12vw, 3.25rem);
    }

    .scrub__dwg {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      margin-inline: calc(var(--margin) * -0.5);
      touch-action: pan-y;
    }

    .scrub__dwg .dwg {
      height: 100%;
      max-height: 100%;
    }

    .scene--light .dwg {
      --dwg-bg: rgb(13 13 12 / 0.9);
      color: var(--bone);
    }

    .scene--light .dwg .lbl text {
      fill: var(--mute);
      font-size: 24px;
    }

    .scene--light .dwg .glass {
      stroke: var(--light);
    }

    .scene--light .dwg .light {
      fill: #f2d9a8;
      fill-opacity: 0.66;
      filter: drop-shadow(0 0 16px rgb(242 217 168 / 0.5));
    }

    .scrub__read {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: end;
      gap: var(--space-3);
      min-height: 5.5rem;
    }

    .scrub__clock {
      font-family: var(--serif);
      font-size: 3.25rem;
      line-height: 0.9;
      font-variant-numeric: tabular-nums;
    }

    .scrub__text {
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--mute);
    }

    /* The slider: a hairline to read, a 60px band to hold. The sun is big
       enough to find with a thumb, and pulses until it has been touched. */
    .scrub__track {
      position: relative;
      flex: 0 0 auto;
      height: 60px;
      margin-inline: -6px;
      touch-action: none;
      cursor: grab;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }

    .scrub__track::before {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgb(235 230 222 / 0.35) 10%, rgb(235 230 222 / 0.35) 90%, transparent);
    }

    .scrub__track:focus-visible {
      outline-offset: 2px;
    }

    .scrub__sun {
      position: absolute;
      top: 50%;
      left: calc(6px + var(--sun, 0.66) * (100% - 12px));
      width: 24px;
      height: 24px;
      margin: -12px 0 0 -12px;
      border-radius: 50%;
      background: var(--light);
      box-shadow: 0 0 20px 5px rgb(244 236 220 / 0.55);
      pointer-events: none;
      transition: transform 200ms var(--ease);
    }

    .scrub__sun::after {
      content: "";
      position: absolute;
      inset: -10px;
      border: 1px solid rgb(244 236 220 / 0.45);
      border-radius: 50%;
      animation: sun-ring 2.4s var(--ease) infinite;
    }

    html:not(.motion) .scrub__sun::after,
    .scene--light.is-touched .scrub__sun::after {
      animation: none;
      opacity: 0;
    }

    .scene--light.is-dragging .scrub__sun {
      transform: scale(1.3);
    }

    @keyframes sun-ring {
      from {
        transform: scale(0.7);
        opacity: 0.9;
      }

      to {
        transform: scale(1.5);
        opacity: 0;
      }
    }

    .scrub__hint {
      color: var(--mute);
    }

    /* Studios */
    .scene--studios {
      justify-content: center;
      gap: var(--space-5);
    }

    .scene__city {
      display: grid;
      gap: var(--space-1);
    }

    .scene--studios .link-arrow {
      justify-self: start;
    }

    /* Write to us */
    .scene--write {
      justify-content: center;
      gap: var(--space-4);
    }

    .scene--write .cta-btn {
      max-width: none;
    }

    .scene__legal {
      font-size: 0.6875rem;
      line-height: 1.5;
      color: var(--mute);
    }

    /* Scenes arrive: the body rises when its scene becomes the current one. */
    .motion .scene > *:not(.scene__link),
    .motion .scene__body > * {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    }

    .motion .scene.is-active > *:not(.scene__link),
    .motion .scene.is-active .scene__body > * {
      opacity: 1;
      transform: none;
    }

    .motion .scene.is-active > *:nth-child(2),
    .motion .scene.is-active .scene__body > *:nth-child(2) { transition-delay: 90ms; }
    .motion .scene.is-active > *:nth-child(3),
    .motion .scene.is-active .scene__body > *:nth-child(3) { transition-delay: 180ms; }
    .motion .scene.is-active > *:nth-child(4),
    .motion .scene.is-active .scene__body > *:nth-child(4) { transition-delay: 270ms; }
    .motion .scene.is-active > *:nth-child(5) { transition-delay: 360ms; }

    /* Pager: which scene you are in, like an app's page dots. */
    .pager {
      position: fixed;
      right: 6px;
      top: 50%;
      z-index: 40;
      display: grid;
      gap: 10px;
      transform: translateY(-50%);
    }

    .pager button {
      display: block;
      width: 20px;
      height: 12px;
      position: relative;
    }

    .pager button::before {
      content: "";
      position: absolute;
      right: 6px;
      top: 50%;
      width: 6px;
      height: 1.5px;
      background: rgb(235 230 222 / 0.35);
      transition: width 500ms var(--ease), background-color 500ms var(--ease), box-shadow 500ms var(--ease);
    }

    .pager button[aria-current="true"]::before {
      width: 14px;
      background: var(--light);
      box-shadow: 0 0 10px rgb(244 236 220 / 0.7);
    }

    /* ---------- Work: a deck of full-screen cards ---------- */

    /* The title is a snap point too. Without it, the first card was the
       nearest one to the top, and the browser could snap to it on arrival
       and hide the title. Scroll padding at 0 for the same reason as on the
       home: the cards keep their room under the header with scroll-margin. */
    html:has(.page-work) {
      scroll-snap-type: y proximity;
      scroll-padding-top: 0;
    }

    .page-work .page-hero {
      padding-bottom: var(--space-4);
      scroll-snap-align: start;
    }

    .index-list {
      display: grid;
      gap: 10px;
      border-top: 0;
    }

    .index-item {
      border-bottom: 0;
      scroll-snap-align: start;
      scroll-margin-top: var(--header-h);
    }

    .index-link {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: var(--space-1);
      min-height: calc(100svh - var(--header-h) - var(--app-bottom) - 10px);
      margin-inline: calc(var(--margin) * -1);
      padding: 0 var(--margin) var(--space-4);
      overflow: hidden;
    }

    .index-thumb,
    .index-item--r .index-thumb {
      position: absolute;
      inset: 0;
      z-index: -1;
      margin: 0;
      aspect-ratio: auto !important;
    }

    .index-thumb::before {
      content: "";
      position: absolute;
      inset: 35% 0 0;
      z-index: 1;
      background: linear-gradient(0deg, rgb(13 13 12 / 0.9), rgb(13 13 12 / 0));
    }

    .index-title {
      font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .index-link:active .index-title {
      color: var(--light);
    }

    /* ---------- Case study: swipe the photographs, drag the drawing ---------- */

    .case-hero {
      height: 100svh;
    }

    .case-hero__nav {
      display: none;
    }

    .case-facts .facts--bar {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: max-content;
      gap: var(--space-4);
      overflow-x: auto;
      scrollbar-width: none;
      margin-inline: calc(var(--margin) * -1);
      padding-inline: var(--margin);
    }

    .case-facts .facts--bar::-webkit-scrollbar {
      display: none;
    }

    .seq--full,
    .seq--wide,
    .seq--pair,
    .seq--split .seq__img {
      display: none;
    }

    .seq--split {
      margin-bottom: var(--space-6);
    }

    .deck {
      display: block;
      margin-bottom: var(--space-6);
    }

    .deck__track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-inline: var(--margin);
      scroll-padding-inline: var(--margin);
      overscroll-behavior-x: contain;
    }

    .deck__track::-webkit-scrollbar {
      display: none;
    }

    .deck__slide {
      flex: 0 0 86vw;
      scroll-snap-align: center;
    }

    .deck__media {
      aspect-ratio: 4 / 5;
    }

    .deck__slide figcaption {
      margin-top: 12px;
      padding-right: var(--space-3);
    }

    .deck__slide .t-num {
      margin-right: 0.5rem;
      color: var(--light);
    }

    /* Drawings fit the screen whole. */
    .case-dwg__fig .dwg {
      width: 100%;
    }

    .case-dwg__fig .dwg .lbl text {
      font-size: 22px;
    }

    .next__media {
      height: 70svh;
    }

    /* ---------- Studio: the method as cards to swipe ---------- */

    .method__list {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-inline: calc(var(--margin) * -1);
      padding-inline: var(--margin);
      scroll-padding-inline: var(--margin);
    }

    /* The tab bar already holds the navigation. */
    .ftr__nav {
      display: none;
    }

    .method__list::-webkit-scrollbar {
      display: none;
    }

    .step {
      flex: 0 0 78vw;
      scroll-snap-align: start;
      padding: var(--space-3);
      border: 1px solid var(--paper-line);
      background: rgb(255 255 255 / 0.25);
    }

    .step__n {
      font-size: 4.5rem;
    }
  }
}