/* ============================================================
   MY PHOTO CORNER — Experience layer
   Pointer depth, 3D tiles, journey interludes, custom cursor,
   cross-page view transitions. Loaded on every page after
   styles.css (and collections.css where present).
   ============================================================ */

/* ---------- Cross-page view transitions (progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.38s; }
::view-transition-new(root) { animation-duration: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   HERO — pointer depth planes (transforms set inline by JS)
   ============================================================ */
.hero__media, .hero__title { will-change: transform; }
html.no-motion .hero__title { transform: none !important; }

/* ============================================================
   PORTFOLIO TILES — 3D tilt toward the cursor
   ============================================================ */
@media (pointer: fine) {
  .gallery-row { perspective: 1200px; }
  .tile {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 0.7s var(--ease);
  }
  .tile:hover { transition: transform 0.16s ease-out; }
}
html.no-motion .tile, html.tilt-off .tile { transform: none !important; }

/* ============================================================
   QUOTE — scroll-driven "uncrop" (zoom-out as you pass through)
   ============================================================ */
.quote { overflow: hidden; }
.quote__bg image-slot {
  transform: scale(var(--qs, 1));
  transform-origin: center;
  will-change: transform;
}
html.no-motion .quote__bg image-slot,
html.parallax-off .quote__bg image-slot { transform: none !important; }

/* ============================================================
   JOURNEY — full-bleed interlude with oversized serif line
   ============================================================ */
.journey {
  position: relative; min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
  padding: var(--pad);
  background: var(--ink);
}
.journey__bg { position: absolute; inset: -6% 0; z-index: 0; }
.journey__bg image-slot {
  width: 100%; height: 112%;
  transform: scale(var(--js, 1));
  transform-origin: center;
  will-change: transform;
}
html.no-motion .journey__bg image-slot,
html.parallax-off .journey__bg image-slot { transform: none !important; }
.journey__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.32) 45%, rgba(10, 9, 8, 0.55));
}
.journey__line { position: relative; z-index: 2; color: var(--paper); }
.journey__kicker {
  display: block;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: clamp(18px, 3vh, 34px);
  opacity: 0; transition: opacity 1.2s var(--ease) 0.1s;
}
.journey__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7.2vw, 124px);
  line-height: 1.06; max-width: 16ch; margin: 0 auto;
  text-wrap: balance;
}
.journey__text em { font-style: italic; color: var(--accent); }
.jw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.jw > span { display: inline-block; transform: translateY(112%); transition: transform 1.15s var(--ease); }
.journey__line.in .journey__kicker { opacity: 1; }
.journey__line.in .jw > span { transform: translateY(0); }
.journey__line.in .jw:nth-child(2) > span { transition-delay: 0.07s; }
.journey__line.in .jw:nth-child(3) > span { transition-delay: 0.14s; }
.journey__line.in .jw:nth-child(4) > span { transition-delay: 0.21s; }
.journey__line.in .jw:nth-child(5) > span { transition-delay: 0.28s; }
.journey__line.in .jw:nth-child(6) > span { transition-delay: 0.35s; }
.journey__line.in .jw:nth-child(7) > span { transition-delay: 0.42s; }
html.no-motion .journey__kicker { opacity: 1 !important; transition: none; }
html.no-motion .jw > span { transform: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .journey__kicker { opacity: 1; }
  .jw > span { transform: none; }
}

/* ============================================================
   CUSTOM CURSOR — dot + trailing ring, labels over media
   ============================================================ */
.xc { display: none; }
@media (pointer: fine) {
  html.mpc-cursor-on body, html.mpc-cursor-on a, html.mpc-cursor-on button,
  html.mpc-cursor-on .tile, html.mpc-cursor-on .film,
  html.mpc-cursor-on select, html.mpc-cursor-on label { cursor: none; }
  html.mpc-cursor-on input, html.mpc-cursor-on textarea { cursor: text; }

  html.mpc-cursor-on .xc { display: block; }
  .xc { position: fixed; left: 0; top: 0; z-index: 12000; pointer-events: none; }
  .xc__dot {
    position: fixed; left: 0; top: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #A8927A);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
  }
  .xc__ring {
    position: fixed; left: 0; top: 0;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(246, 242, 236, 0.9);
    mix-blend-mode: difference;
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.45s var(--ease, ease), background 0.35s ease,
                border-color 0.35s ease, opacity 0.3s ease;
  }
  .xc__label {
    font-family: var(--font-sans, sans-serif);
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #1C1A17; opacity: 0; transition: opacity 0.25s ease;
    white-space: nowrap;
  }
  .xc.is-link .xc__ring { transform: translate(-50%, -50%) scale(1.45); }
  .xc.is-media .xc__ring {
    width: 38px; height: 38px;
    transform: translate(-50%, -50%) scale(2.05);
    background: rgba(246, 242, 236, 0.94);
    border-color: rgba(246, 242, 236, 0.94);
    mix-blend-mode: normal;
  }
  .xc.is-media .xc__label { opacity: 1; transition-delay: 0.12s; }
  .xc.is-media .xc__dot { opacity: 0; }
  .xc.hide .xc__dot, .xc.hide .xc__ring { opacity: 0; }
}

@media (max-width: 680px) {
  .journey { min-height: 70vh; }
}