/* ════════════════════════════════════════════════════════════════════════
   DamPhi Motion · Barba edition — engine support styles
   Custom cursor, page-transition overlays (wipe/panel/morph), transition
   switcher, split-open hover preview, depth hints, reduced-motion fallbacks.
   (Page AESTHETIC — cream/ink/accent — lives in styles.css.)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Pre-paint hiding so reveals don't flash before JS wires them ───────── */
[data-reveal],
[data-stagger-group] > * { will-change: transform, opacity, filter; }
html.dm-ready [data-reveal="chars"],
html.dm-ready [data-reveal="words"] { visibility: hidden; }
[data-parallax], [data-float], [data-magnetic], [data-scroll-x], [data-depth] { will-change: transform; }

/* ── data-scroll-x : giant horizontal type ─────────────────────────────── */
[data-scroll-x] { white-space: nowrap; will-change: transform; }
[data-scroll-x-section] { overflow: hidden; }

/* ── UPGRADE 2 · depth hints ────────────────────────────────────────────
   media-drift: the frame clips, the image is over-scaled (set in JS) and
   translated within. pin-content gets a transform hint. */
[data-media-drift] { overflow: hidden; }
[data-media-drift] img, [data-media-drift] .dm-drift-media { display: block; width: 100%; will-change: transform; }
[data-pin-content] { will-change: transform, opacity; }

/* ════════════════════════════════════════════════════════════════════════
   UPGRADE 3 · Page-transition overlays
   ════════════════════════════════════════════════════════════════════════ */
.dm-wipe, .dm-panel {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; will-change: clip-path, transform;
}
.dm-wipe  { background: var(--accent, #ff4d2e); }   /* bold colour field sweep */
.dm-panel { background: var(--ink, #14110f); }      /* solid ink panel slide   */
.dm-morph {
  position: fixed; z-index: 9000; pointer-events: none;
  background-size: cover; background-position: center;
  box-shadow: 0 40px 120px -40px rgba(20,17,15,0.5);
  will-change: transform, opacity;
}

/* On-page transition switcher (dev affordance — bottom-left) */
.dm-switch {
  position: fixed; left: 22px; bottom: 22px; z-index: 9600;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #14110f) 92%, transparent);
  font-family: var(--mono, ui-monospace), monospace; font-size: 0.72rem;
}
.dm-switch__lbl { color: rgba(255,255,255,0.55); letter-spacing: 0.16em; text-transform: uppercase; margin-right: 4px; }
.dm-switch button {
  border: 0; cursor: pointer; padding: 7px 13px; border-radius: 999px;
  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.06em;
  background: transparent; color: rgba(255,255,255,0.62); transition: all 0.25s ease;
}
.dm-switch button:hover { color: #fff; }
.dm-switch button.on { background: var(--accent, #ff4d2e); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   UPGRADE 1 · WORD SPLITS OPEN (hover)
   The word becomes a positioned host holding a reveal panel + two clipped
   half-copies of its own text. At rest the halves stack into a solid word;
   on hover JS parts them and the preview shows in the gap.
   ════════════════════════════════════════════════════════════════════════ */
.dm-split-host { position: relative; display: inline-block; }
/* the original text: kept for layout + accessibility, painted transparent */
.dm-split__src { color: transparent; }
/* the two halves — exact copies, each clipped to one half of the line */
.dm-split__half {
  position: absolute; left: 0; top: 0; width: 100%;
  white-space: nowrap; pointer-events: none;
  color: var(--ink, #14110f);
  will-change: transform; backface-visibility: hidden;
}
.dm-split__half--top    { clip-path: inset(0 0 50% 0); }
.dm-split__half--bottom { clip-path: inset(50% 0 0 0); }
/* the preview that lives IN the opening gap */
.dm-split__reveal {
  position: absolute; left: -1.5%; right: -1.5%; top: 50%;
  height: var(--dm-gap, 1em);
  overflow: hidden; border-radius: 5px;
  pointer-events: none;
  box-shadow: 0 24px 60px -22px rgba(20,17,15,0.5);
  will-change: transform, opacity;
}
.dm-split__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--accent, #ff4d2e);   /* warm base while the image paints */
  will-change: transform;
}
.dm-split__view {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; padding: 6px 15px; border-radius: 999px;
  background: var(--cream, #f4efe6); color: var(--ink, #14110f);
  font-family: var(--mono, ui-monospace), monospace;
  font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
/* the halves warm to the accent on row hover (matches the existing row cue) */
.work-row:hover .dm-split__half { color: var(--accent, #ff4d2e); }

/* ════════════════════════════════════════════════════════════════════════
   Custom cursor — ink dot + trailing ring on cream
   ════════════════════════════════════════════════════════════════════════ */
html.dm-has-cursor, html.dm-has-cursor * { cursor: none !important; }
.dm-cursor-dot, .dm-cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 99999; border-radius: 50%; will-change: transform;
}
.dm-cursor-dot { width: 6px; height: 6px; background: var(--ink, #14110f); }
.dm-cursor-ring {
  width: 40px; height: 40px;
  border: 1.5px solid color-mix(in srgb, var(--ink, #14110f) 55%, transparent);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.dm-cursor-ring--hover {
  border-color: var(--accent, #ff4d2e);
  background: color-mix(in srgb, var(--accent, #ff4d2e) 12%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   Multilingual greeting cover (first load) — untouched this pass
   ════════════════════════════════════════════════════════════════════════ */
.dm-greet {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  background: var(--ink, #14110f); color: var(--cream, #f4efe6);
}
.dm-greet__word {
  font-family: var(--display, system-ui), sans-serif; font-weight: 800;
  font-size: clamp(4rem, 12vw, 10rem); letter-spacing: -0.03em; display: inline-block;
  white-space: pre;   /* keep scramble spaces from collapsing */
}
html.dm-greeting-active, html.dm-greeting-active body { overflow: hidden; height: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   Accessibility — prefers-reduced-motion: everything instant & visible
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.dm-ready [data-reveal],
  html.dm-ready [data-reveal="chars"],
  html.dm-ready [data-reveal="words"],
  html.dm-ready [data-stagger-group] > * {
    visibility: visible !important; opacity: 1 !important; filter: none !important; transform: none !important;
  }
  [data-scroll-x], [data-depth], [data-media-drift] img { transform: none !important; }
  .dm-wipe, .dm-panel, .dm-morph, .dm-greet,
  .dm-cursor-dot, .dm-cursor-ring { display: none !important; }
  /* word-split is never built on reduced-motion (JS-guarded) — word stays solid */
  html.dm-has-cursor, html.dm-has-cursor * { cursor: auto !important; }
}
@media (hover: none), (pointer: coarse) {
  .dm-cursor-dot, .dm-cursor-ring { display: none !important; }
  html.dm-has-cursor, html.dm-has-cursor * { cursor: auto !important; }
}

/* ── No-JS safety: reveal everything if the engine never boots ─────────── */
html:not(.dm-ready) [data-reveal],
html:not(.dm-ready) [data-reveal="chars"],
html:not(.dm-ready) [data-reveal="words"],
html:not(.dm-ready) [data-stagger-group] > * {
  visibility: visible !important; opacity: 1 !important; filter: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   EXIMIUS · showcase lightbox (data-lightbox) — cinematic full-screen open
   Opens on tile click (no page navigation / no Barba). Closes on click/Esc.
   ════════════════════════════════════════════════════════════════════════ */
.dm-lightbox {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  padding: 5vmin; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink, #14110f) 88%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dm-lightbox.dm-lightbox--on { pointer-events: auto; }
.dm-lightbox__img {
  max-width: 92vw; max-height: 88vh; border-radius: 8px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 92vw; height: 88vh;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,0.7);
  will-change: transform, opacity;
}
.dm-lightbox__close {
  position: fixed; top: 26px; right: 30px; z-index: 9701;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 20px; line-height: 1;
}
.dm-lightbox__close:hover { background: var(--accent, #ff4d2e); border-color: var(--accent, #ff4d2e); }
/* ════════════════════════════════════════════════════════════════════════
   Service-card demo video (data-video) — click a card, its YouTube demo plays
   in an on-page player. Empty data-video = no cue, not clickable.
   ════════════════════════════════════════════════════════════════════════ */
.service-card.has-video { cursor: pointer; }
.dm-watch { display: inline-block; margin-top: 18px; font-family: var(--mono, ui-monospace), monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #ff4d2e); }
.dm-video {
  position: fixed; inset: 0; z-index: 9800; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 5vmin;
  background: color-mix(in srgb, var(--ink, #14110f) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dm-video.dm-video--on { display: flex; }
.dm-video__frame { width: min(92vw, 1280px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 60px 140px -40px rgba(0,0,0,0.7); }
.dm-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.dm-video__close {
  position: fixed; top: 26px; right: 30px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); color: #fff; font-size: 20px; line-height: 1;
}
.dm-video__close:hover { background: var(--accent, #ff4d2e); border-color: var(--accent, #ff4d2e); }
.dm-video__yt { font-family: var(--mono, ui-monospace), monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.dm-video__yt:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .dm-lightbox { backdrop-filter: none; } }