/* RANA LEVY full-site — Hand, Work, and terminal handoff; quiet + mobile.
   Opening styles remain inline in index.html. */

:root {
  --ink: #020005;
  --cream: #fffaf5;
  --link-line: rgba(255, 250, 245, 0.55);
  --focus: rgba(215, 185, 255, 0.95);
}

/* ——— Accessibility shell ——— */

.skip-link,
.jump-nav a {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: var(--cream);
  background: rgba(2, 0, 5, 0.92);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  font-family: Garamond, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.3;
  z-index: 10000;
}

.skip-link:focus,
.jump-nav a:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.65rem 0.9rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.jump-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.jump-nav:focus-within {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  z-index: 10000;
  padding: 0.5rem 0.65rem;
  background: rgba(2, 0, 5, 0.92);
}

.jump-nav:focus-within a {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.35rem 0.45rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ——— Persistent mark (post-opening) ——— */

.site-header {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.persistent-mark {
  position: absolute;
  top: 5.2svh;
  left: 4.2vw;
  width: min(17vw, 240px);
  opacity: 0;
  pointer-events: none;
  transition: none;
  /* Filter lives on keyed canvas only — never the link box or source plate. */
  filter: none;
}

.persistent-mark.is-visible {
  pointer-events: auto;
}

.persistent-mark:focus {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.persistent-mark img,
.persistent-mark canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* CSS-pixel micro-halo after source downscale; drop-shadow follows canvas alpha only. */
.persistent-mark canvas {
  filter: drop-shadow(0 0 0.65px rgba(48, 22, 72, 0.92));
}


/* ——— Primary destinations (always reachable; never a drawer) ——— */

.site-primary-nav {
  position: absolute;
  top: 4.6svh;
  right: 4.2vw;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem 1.35rem;
  max-width: min(68vw, 36rem);
  pointer-events: auto;
}

.site-primary-nav a {
  color: var(--cream);
  font-family: Garamond, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.36);
  padding: 0.55rem 0.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.site-primary-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-line);
}

.site-primary-nav a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* ——— Shared movement frame ——— */

.site-main {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--cream);
}

.movement {
  position: relative;
  width: 100%;
}

/*
  Inter-movement continuity:
  Each later movement is pulled up by one viewport so its sticky pins in the
  same scroll instant the previous sticky would release. Descending z-index
  keeps the outgoing world covering the incoming one until JS retires it.
  Bridge layers (outgoing media already full-bleed on the next scene) plus
  angled mask-out perform the contract Turn — no horizontal split survives.
*/
.movement-opening {
  z-index: 5;
}

.movement-hand {
  z-index: 4;
  margin-top: -100svh;
}

.movement-work {
  z-index: 3;
  margin-top: -100svh;
}

/* Retire completed stickies so release cannot expose ordinary vertical flow. */
.movement.is-retired {
  visibility: hidden;
  pointer-events: none;
}

.movement-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.layer-media {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  transform-origin: center center;
}

.layer-media img,
.layer-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.layer video {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.layer video.is-live {
  opacity: 1;
}

.is-quiet .layer video {
  opacity: 0 !important;
}

.movement-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 0, 5, 0.08) 0%,
    rgba(2, 0, 5, 0) 40%,
    rgba(2, 0, 5, 0.34) 100%
  );
}

.junction-light {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 260% 100%;
  filter: blur(10px);
}

.thought {
  position: absolute;
  z-index: 30;
  left: 6vw;
  bottom: 11svh;
  max-width: min(34rem, 78vw);
  color: var(--cream);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.36);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  white-space: normal;
}

.thought-lg {
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
}

.thought-md {
  font-size: clamp(1.55rem, 2.8vw, 2.7rem);
  line-height: 1.18;
}

.thought-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

/* ——— M2 Hand ——— */

.movement-hand {
  /* 380svh total = 100svh sticky + 160svh choreography + 2 × 60svh holds
     (sticky travel 280svh). Direct ring→bench carrier carries the interval. */
  height: 380svh;
}

.hand-bench {
  z-index: 1;
  opacity: 1;
}

.hand-bench .layer-media img,
.hand-bench .layer-media video {
  object-position: 42% 48%;
}

.hand-portrait {
  z-index: 3;
  opacity: 0;
}

/* Opening ring already full-bleed under the entry Turn into the bench/studio world. */
.hand-bridge {
  z-index: 6;
  /* No-JS rests on the destination world; JS reveals the bridge only for the Turn. */
  opacity: 0;
  visibility: hidden;
}

.hand-bridge .layer-media img,
.hand-bridge .layer-media video {
  object-position: 50% 48%;
}

.hand-portrait-frame {
  position: absolute;
  inset: 0;
}

.hand-portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Face is upper-right; keep Rana the subject, not the lap machine. */
  object-position: 82% 18%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.hand-thought-a,
.hand-thought-b {
  left: 6vw;
  bottom: 12svh;
}

.hand-thought-rest {
  left: 6vw;
  bottom: 11svh;
  max-width: min(36rem, 80vw);
}

/* ——— M3 Work (terminal) ——— */

.movement-work {
  /* 280svh choreography travel + sticky + 3 × 60svh completed-state holds */
  height: 500svh;
}

.work-world {
  z-index: 1;
  opacity: 0;
}

.work-world.is-base {
  opacity: 1;
}

/* Hand portrait already full-bleed under the entry Turn into the first work still.
   z-index stays above work worlds (JS stacks worlds at 1–4). */
.work-bridge {
  z-index: 8;
  opacity: 0;
  visibility: hidden;
}

.work-bridge .layer-media img {
  object-fit: cover;
  object-position: 82% 18%;
}

/* Fluid local darkening for rest type — caused light, not a card/panel. */
.work-rest-wash {
  position: absolute;
  z-index: 28;
  left: 0;
  bottom: 0;
  width: min(56rem, 100%);
  height: min(48svh, 420px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 85% 75% at 18% 82%,
    rgba(2, 0, 5, 0.72) 0%,
    rgba(2, 0, 5, 0.42) 38%,
    rgba(2, 0, 5, 0.12) 62%,
    transparent 78%
  );
}

.work-world .layer-media img {
  object-position: 50% 48%;
}

/* Square jewelry stills: continuous echo field with a deliberately larger,
   bleeding sharp subject. Vertical art-direction uses --work-subject-shift-y
   on the sharp image (object-position is inert for contained 1:1 in a 1:1 box). */
.work-world-0 {
  --work-echo-src: url("assets/ring-art-deco.webp");
  --work-subject-shift-y: 0svh;
}

.work-world-1 {
  --work-echo-src: url("assets/ring-heirloom.webp");
  --work-subject-shift-y: 0svh;
}

.work-world-2 {
  --work-echo-src: url("assets/ring-pink-star.webp");
  --work-subject-shift-y: 2svh;
}

/* Echo underlay lives on the world so angled Turns / opacity mask one continuous field. */
.work-world-0::before,
.work-world-1::before,
.work-world-2::before {
  content: "";
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  background-image: var(--work-echo-src);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(0.42) saturate(0.9);
  transform: scale(1.12);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}

.work-world-0 .layer-media,
.work-world-1 .layer-media,
.work-world-2 .layer-media {
  z-index: 1;
}

/* Direct sharp subject only — square source canvas, contain, far-perimeter feather.
   Translate is on the image so the parent stack's breath transform stays intact. */
#workStack0 > img,
#workStack1 > img,
#workStack2 > img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(86vw, 150svh);
  height: min(86vw, 150svh);
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate3d(0, var(--work-subject-shift-y, 0svh), 0);
  /* Jewelry / prongs / shoulders / reflection stay fully opaque; only far edge dissolves. */
  -webkit-mask-image: radial-gradient(
    closest-side,
    #000 70%,
    rgba(0, 0, 0, 0.92) 80%,
    rgba(0, 0, 0, 0.4) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    #000 70%,
    rgba(0, 0, 0, 0.92) 80%,
    rgba(0, 0, 0, 0.4) 92%,
    transparent 100%
  );
}

.work-thought-open {
  left: 6vw;
  bottom: 12svh;
}

.work-thought-rest {
  left: 6vw;
  bottom: 12svh;
  max-width: min(38rem, 82vw);
  pointer-events: none;
  text-shadow:
    0 1px 2px rgba(2, 0, 5, 0.55),
    0 2px 28px rgba(2, 0, 5, 0.55),
    0 0 40px rgba(2, 0, 5, 0.35);
}

.work-links {
  position: absolute;
  z-index: 32;
  left: 6vw;
  bottom: 7.5svh;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.6rem;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 10px rgba(2, 0, 5, 0.55));
}

.work-links.is-interactive {
  pointer-events: auto;
}

.choice-link {
  color: var(--cream);
  font-family: Garamond, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--link-line);
  background: none;
  border: 0;
  padding: 0.15rem 0;
  cursor: pointer;
}

.choice-link:hover {
  text-decoration-color: rgba(255, 250, 245, 0.9);
}

.choice-link:focus {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* Subtle film grain on surviving Hand/Work stickies — ordinary alpha only. */
.movement-grain {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ——— Mobile art direction ——— */

@media (max-width: 700px) {
  /* Mobile Hand: 340svh total = 100svh sticky + 120svh choreography +
     2 × 60svh unscaled holds (sticky travel 240svh). */
  .movement-hand {
    height: 340svh;
  }

  .movement-work {
    height: 450svh;
  }

  .site-primary-nav {
    top: 3.4svh;
    right: 4vw;
    left: auto;
    max-width: 10.5rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
  }

  .site-primary-nav a {
    font-size: 0.95rem;
    padding: 0.38rem 0.05rem;
    min-height: 40px;
  }

  .persistent-mark {
    top: 4svh;
    left: 5vw;
    width: 44vw;
  }

  .thought {
    left: 8vw;
    bottom: 11svh;
    max-width: 84vw;
  }

  .thought-lg {
    font-size: clamp(1.75rem, 8.4vw, 2.45rem);
    line-height: 1.1;
  }

  .thought-md {
    font-size: clamp(1.28rem, 5.8vw, 1.7rem);
    line-height: 1.2;
  }

  .hand-bench .layer-media img,
  .hand-bench .layer-media video {
    object-position: 32% 48%;
  }

  .hand-portrait-frame img {
    /* Bias decisively right so her face is the cover subject on tall viewports. */
    object-position: 100% 16%;
  }

  /* Mobile subjects already fit vertically — no vertical art-direction shift. */
  .work-world-0,
  .work-world-1,
  .work-world-2 {
    --work-subject-shift-y: 0svh;
  }

  #workStack0 > img,
  #workStack1 > img,
  #workStack2 > img {
    width: min(122vw, 150svh);
    height: min(122vw, 150svh);
  }

  .work-links {
    left: 8vw;
    bottom: 7svh;
    flex-direction: column;
    gap: 0.7rem;
  }

  /* Sit above the three-row .work-links stack with stable breath. */
  .work-thought-rest {
    bottom: calc(7svh + 8rem);
  }

  .work-rest-wash {
    width: 100%;
    height: min(56svh, 420px);
    background: radial-gradient(
      ellipse 95% 80% at 30% 85%,
      rgba(2, 0, 5, 0.76) 0%,
      rgba(2, 0, 5, 0.45) 40%,
      rgba(2, 0, 5, 0.14) 64%,
      transparent 80%
    );
  }

  .work-bridge .layer-media img {
    object-position: 100% 16%;
  }

  .hand-bridge .layer-media img,
  .hand-bridge .layer-media video {
    object-position: 50% 50%;
  }
}

@media (pointer: coarse) {
  .persistent-mark {
    /* touch: keep hit target usable without visual chrome */
  }
}