/* Design page — Phase 1: loading sequence + navigation architecture.
   Project sections are placeholders; real layouts land in later phases. */

html, body {
  overscroll-behavior: none;
}

body.is-loading {
  overflow: hidden;
}

/* ---------- fixed interface (identical across pages) ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--page-padding);
  z-index: 50;
  pointer-events: none;
}

.site-header a {
  pointer-events: auto;
}

.logo {
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.primary-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2em;
  pointer-events: auto;
}

.primary-nav a {
  position: relative;
  font-weight: 700;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-footer-meta {
  position: fixed;
  bottom: var(--page-padding);
  right: var(--page-padding);
  left: auto;
  font-weight: 800;
  z-index: 50;
}

@media (min-width: 641px) {
  .site-header {
    padding-top: calc(var(--page-padding) * 0.5);
  }

  .logo {
    font-size: clamp(1.4rem, 1.96vw, 1.75rem);
  }

  .primary-nav a {
    font-size: clamp(1.02rem, 1.2vw, 1.26rem);
  }

  .site-footer-meta {
    font-size: 1.495rem;
    bottom: calc(var(--page-padding) * 0.35);
  }
}

/* ---------- loading sequence ---------- */

.design-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease;
}

.design-loading.is-hidden {
  opacity: 0;
}

.design-loading-frame {
  position: relative;
  width: min(14vw, 180px);
  height: min(14vw, 180px);
}

.design-loading-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(0) scale(0.78);
  transition: opacity 200ms ease, transform 220ms ease;
}

.design-loading-img.stack-0 {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 4;
}

.design-loading-img.stack-1 {
  opacity: 0.55;
  transform: translateY(9px) scale(0.92);
  z-index: 3;
}

.design-loading-img.stack-2 {
  opacity: 0.3;
  transform: translateY(16px) scale(0.85);
  z-index: 2;
}

.design-loading-img.stack-3 {
  opacity: 0.15;
  transform: translateY(22px) scale(0.78);
  z-index: 1;
}

/* ---------- navigation architecture ---------- */

.design-nav {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--color-bg);
  opacity: 1;
  transition: opacity 500ms ease;
}

body.is-loading .design-nav {
  opacity: 0;
}

.design-track {
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

.design-project {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.design-project-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.design-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.design-slide-index {
  font-weight: 800;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  letter-spacing: 0.1em;
  opacity: 0.4;
}

.design-slide-label {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ---------- indicators ---------- */

.design-indicators {
  position: fixed;
  left: var(--page-padding);
  bottom: var(--page-padding);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.design-project-dots,
.design-slide-dots {
  display: flex;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.design-project-dots li,
.design-slide-dots li {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 400ms ease;
}

.design-project-dots li.is-active,
.design-slide-dots li.is-active {
  opacity: 1;
}

.design-slide-dots li {
  width: 4px;
  height: 4px;
}

/* ---------- condón project (slide 1) ---------- */

.condon-slide-full {
  padding: 0;
}

.condon-slide-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.condon-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.condon-scene-bg {
  position: absolute;
  top: 0;
  left: -30%;
  width: 160%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}

.condon-scene-03,
.condon-scene-04 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.condon-scene-03 {
  gap: 2vw;
}

.condon-card {
  will-change: transform, opacity;
}

.condon-card-tarjeta1,
.condon-card-tarjeta2 {
  height: 46vh;
  aspect-ratio: 1626 / 915;
  object-fit: cover;
  opacity: 0;
}

.condon-scene-04 {
  gap: 2vw;
}

.condon-card-c3,
.condon-card-c1 {
  height: 62vh;
  aspect-ratio: 800 / 1100;
  object-fit: cover;
  opacity: 0;
}

.condon-card-c2 {
  height: 62vh;
  aspect-ratio: 800 / 1100;
  object-fit: contain;
  background: #fff;
  padding: 1.6vw;
  opacity: 0;
}

/* ---------- szk project (slide 2) ---------- */

.szk-slide-full {
  padding: 0;
}

.szk-slide-full img,
.szk-slide-full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The fixed interface stays white for the entire Design page, except
   during loading (below), where it shows in black over the plain
   background before the first project's colors are behind it. */
.site-header,
.site-header a,
.site-footer-meta {
  color: #fff;
  transition: color 500ms ease;
}

body.is-loading .site-header,
body.is-loading .site-header a,
body.is-loading .site-footer-meta {
  color: #000;
}

/* ---------- papel project (slide 3) ---------- */

.papel-slide-full {
  padding: 0;
}

.papel-slide-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px);
  transition: filter 0.35s ease-out;
}

.papel-slide-full img.papel-cover-sharp {
  filter: blur(0);
}

.papel-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.papel-scene-bg {
  position: absolute;
  top: 0;
  left: -15%;
  width: 130%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}

.papel-scene-02,
.papel-scene-03,
.papel-scene-04 {
  position: absolute;
  inset: 0;
}

/* explicit stacking so scene 04's clickable items are never intercepted
   by scene 03's full-area paste-up click layer underneath them */
.papel-scene-03 {
  z-index: 1;
}

.papel-scene-04 {
  z-index: 2;
}

.papel-card,
.papel-sheet,
.papel-item {
  position: absolute;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  will-change: transform, opacity;
}

.papel-card {
  width: 34vw;
  aspect-ratio: 1626 / 915;
}

.papel-card-title {
  top: 32%;
  left: 55%;
}

.papel-card-text {
  top: 60%;
  left: 42%;
}

.papel-sheet {
  aspect-ratio: 4000 / 2250;
}

.papel-sheet-base {
  width: 51vw;
  top: 50%;
  left: 50%;
  z-index: 1;
}

.papel-sheet-detail {
  width: 48vw;
  top: 64%;
  left: 58%;
  z-index: 2;
}

.papel-scene-03 {
  pointer-events: auto;
  cursor: pointer;
}

.papel-item-pez { top: 32%; left: 8%; height: 48vh; }
.papel-item-chili { top: 8%; left: 56%; height: 44vh; }
.papel-item-lobster { top: 6%; left: 92%; height: 48vh; }
.papel-item-can { top: 34%; left: 27%; height: 38vh; }
.papel-item-sprite { top: 26%; left: 76%; height: 32vh; }
.papel-item-olive { top: 60%; left: 90%; height: 28vh; }
.papel-item-sillas { top: 74%; left: 50%; height: 44vh; }
.papel-item-lighter { top: 90%; left: 8%; height: 40vh; }
.papel-item-peper { top: 88%; left: 93%; height: 44vh; }

/* ---------- seguir juntos project (slide 4) ---------- */

.seguir-slide-full {
  padding: 0;
}

.seguir-slide-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- custom cursor (Design page only) ---------- */

body.design-cursor-active,
body.design-cursor-active * {
  cursor: none !important;
}

.design-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 200ms ease;
}

.design-cursor.is-visible {
  opacity: 1;
}

.design-cursor-dot {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.design-cursor-label {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.5em;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 0.6rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- phone: nav → hamburger menu ----------
   Same markup/classes/behavior as Photography's mobile menu (white
   panel, olive text); applies whenever the viewport is phone-sized,
   in either orientation, since Design's primary-nav is desktop-only. */

.menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

@media (max-width: 500px), (orientation: landscape) and (max-height: 500px) {
  .primary-nav {
    display: none;
  }

  .logo br {
    display: none;
  }

  .logo {
    font-size: 1.3rem;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 32px;
    height: 23px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
  }

  .menu-toggle span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #f6f5f0;
  }

  .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #f6f5f0;
    color: #b9b14c;
    padding: var(--page-padding);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 320ms ease, visibility 0s linear 320ms;
  }

  .mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 320ms ease;
  }

  /* Name/close strip: local-y (top/height) 0-12% is the screen-horizontal
     axis once rotated, so this is a thin full-height strip near one
     screen-width edge, with Julia Robelly and X at its two local-x ends
     (screen-top and screen-bottom respectively). */
  .mobile-menu-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.4em;
    border-bottom: 1px solid #b9b14c;
  }

  .mobile-menu-name {
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .mobile-menu-close {
    font-size: 1.75rem;
    line-height: 1;
    color: #b9b14c;
    cursor: pointer;
  }

  /* Visual top-half zone: local-x (left/width) is the screen-vertical axis
     once the frame is rotated, so confining width (not height) here is what
     keeps the nav columns out of the screen's bottom half. Height now runs
     12%-100% of local-y (screen-horizontal) together with .mobile-menu-top's
     0-12%, so the column dividers span the full nav zone instead of
     stopping halfway across the screen. */
  .mobile-menu-nav {
    position: absolute;
    top: 12%;
    left: 0;
    width: 50%;
    height: 88%;
    padding: 0 1.4em;
    border-bottom: 1px solid #b9b14c;
  }

  .mobile-menu-nav ul {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mobile-menu-nav li {
    flex: 1;
    border-bottom: 1px solid #b9b14c;
  }

  .mobile-menu-nav a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    gap: 0.6em;
    padding: 0.5em 0.4em;
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #b9b14c;
  }

  .mobile-menu-nav a::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #b9b14c;
    flex-shrink: 0;
  }

  /* Visual bottom-half zone: confined via left/right (local-x), the
     screen-vertical axis post-rotation. Anchored via flex + inset on all
     four sides (not a bare height) so the text deliberately sits at the
     zone's outer/bottom corner instead of wherever block flow happens
     to leave it. */
  .mobile-menu-brand {
    position: absolute;
    top: 62%;
    bottom: 6%;
    left: 50%;
    right: 6%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    font-weight: 800;
    font-size: clamp(2.5rem, 13vw, 3.25rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #b9b14c;
  }
}

/* ---------- phone: rotate-device intro ----------
   Orientation-recommendation overlay shown only on entry, on phones,
   while in portrait. Non-blocking: pointer-events stay off so the
   real Design page underneath is already usable during playback. */

.design-phone-intro {
  display: none;
}

.design-phone-intro.is-active {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #b9b14c;
  color: #f6f5f0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.design-phone-intro.is-exiting {
  transform: translateX(100%);
}

.design-phone-intro-logo,
.design-phone-intro-meta {
  position: absolute;
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}

.design-phone-intro-logo {
  top: var(--page-padding);
  left: var(--page-padding);
  font-size: 1.3rem;
}

.design-phone-intro-meta {
  bottom: var(--page-padding);
  right: var(--page-padding);
}

.design-phone-intro-body {
  margin: auto;
  display: flex;
  align-items: center;
  gap: 1.1em;
  transform: rotate(0deg);
  transition: transform 700ms ease;
}

.design-phone-intro.step-rotate .design-phone-intro-body {
  transform: rotate(90deg);
}

.design-phone-intro-icon {
  width: 15vw;
  max-width: 70px;
  height: auto;
  flex-shrink: 0;
  color: #f6f5f0;
  transition: opacity 500ms ease, transform 500ms ease;
}

.design-phone-intro.step-phone-out .design-phone-intro-icon {
  opacity: 0;
  transform: translateX(-24px);
}

.design-phone-intro-divider {
  width: 2px;
  align-self: stretch;
  background: #f6f5f0;
}

.design-phone-intro-msg {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.5rem, 8vw, 2.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- phone: forced-landscape frame ----------
   Design is a landscape-only experience. On a phone-sized viewport it
   never collapses into a stacked/responsive layout — the real
   landscape composition stays intact, presented rotated to fill the
   screen. Gated on width alone (not orientation/orientationchange):
   a phone's width only ever drops into this range in portrait, so the
   canvas always faces the same single fixed direction and never
   re-flips mid-rotation. A true phone-landscape width (>640) simply
   never matches, so the page renders unrotated and fills the screen
   normally there — width is only ever used for that on/off sizing
   decision, never to pick between two different facings. */

@media (max-width: 640px) {
  .design-phone-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    overflow: hidden;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .design-phone-frame .design-project {
    height: 100dvw;
  }

  /* Condón scroll-reveal cards (03) and poster stack (04): same assets,
     order and timing as desktop, just scaled down ~40% so individual
     cards stay visible over the pink background instead of filling/
     cropping the phone-landscape frame. Parent flex centering already
     re-centers them at the smaller size. */
  .condon-card-tarjeta1,
  .condon-card-tarjeta2 {
    height: 27.6vh;
  }

  .condon-card-c3,
  .condon-card-c1,
  .condon-card-c2 {
    height: 37.2vh;
  }

  /* Papel cover slide: no blur on phone (desktop/iPad keep the
     blur-to-sharp reveal; the JS cover-sharp toggle still runs, it's
     just a no-op here since there's no blur left to remove). */
  .papel-slide-full img {
    filter: none;
  }

  /* Papel scene 02 (explica) cards: sized so the text reads on phone.
     Anchored via translate(-50%, -50%) in JS, so growing the width
     keeps them centered on their existing top/left position. */
  .papel-card {
    width: 85vw;
  }

  /* Papel scene 03 (paste up) sheets: doubled, same centered anchor. */
  .papel-sheet-base {
    width: 132.6vw;
  }

  .papel-sheet-detail {
    width: 124.8vw;
  }

  /* Papel scene 04 (final) watercolor pieces: down to 80% of their
     current phone size to reduce collisions; same centered anchor. */
  .papel-item-pez { height: 30.72vh; }
  .papel-item-chili { height: 28.16vh; }
  .papel-item-lobster { height: 30.72vh; }
  .papel-item-can { height: 24.32vh; }
  .papel-item-sprite { height: 20.48vh; }
  .papel-item-olive { height: 17.92vh; }
  .papel-item-sillas { height: 28.16vh; }
  .papel-item-lighter { height: 25.6vh; }
  .papel-item-peper { height: 28.16vh; }
}

/* ---------- iPad: forced-landscape frame ----------
   Same rotation mechanism as the phone frame above, triggered in its own
   width range so phone's rules (including its per-project sizing overrides)
   stay untouched. The permanent header/footer nav is left unmodified —
   .site-header/.primary-nav/.site-footer-meta already land in the correct
   final corners once wrapped in this rotated frame (no hamburger swap here,
   unlike phone). Gated on pointer:coarse + orientation:portrait so a
   desktop browser window resized into this pixel range isn't affected. */

@media (pointer: coarse) and (orientation: portrait) and (min-width: 641px) and (max-width: 1024px) {
  .design-phone-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    overflow: hidden;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .design-phone-frame .design-project {
    height: 100dvw;
  }
}

/* ---------- iPad: force permanent nav, never the phone hamburger ----------
   The hamburger block above (.menu-toggle/.mobile-menu shown, .primary-nav
   hidden) is gated by "(max-width: 500px), (orientation: landscape) and
   (max-height: 500px)" — either clause can end up matching on some iPad/
   Safari states (e.g. a narrow multitasking width, or viewport-height
   quirks while the toolbar is visible in landscape). This override wins
   the cascade for the iPad pointer+width range regardless of which clause
   fired, restoring the existing permanent .site-header nav (its own
   pre-hamburger default values) and keeping the hamburger fully hidden. */
@media (min-width: 501px) and (max-width: 1024px) {
  .primary-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-menu {
    display: none;
  }
}