/* ─────────────────────────────────────────────────────────
   PORTFOLIO TRANSITIONS & ANIMATIONS (andrewreff.com style)
─────────────────────────────────────────────────────────── */

html.nav-transitioning body {
  opacity: 0 !important;
}

:root {
  --sel-accent: #e9b872; /* matches var(--accent) in user's index.html */
  --sel-bg: #0c0a08;     /* matches var(--bg) */
  --sel-redline: #f43f5e; /* Figma redline color (rose-500) */
}

/* 1. Custom Figma Cursor */
.you-cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10100;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 250ms ease;
  will-change: transform;
}

.you-cur.on {
  opacity: 1;
}

.you-cur svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.you-tag {
  display: inline-block;
  background: var(--sel-accent);
  color: var(--sel-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 10px;
  margin-top: 2px;
  white-space: nowrap;
}

body {
  cursor: none !important;
}

.cursor-dot,
.cursor-ring {
  display: none !important;
}

/* Fallbacks for mobile or touch */
@media (max-width: 900px), (hover: none) {
  body {
    cursor: auto !important;
  }
  .you-cur {
    display: none !important;
  }
}

/* 2. Figma-Style Page Transition Overlay */
.sel-transition {
  position: fixed;
  inset: 0;
  z-index: 10200;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

.sel-transition.active {
  display: block;
}

.sel-box {
  position: absolute;
  border: 1.5px solid var(--sel-accent);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  will-change: transform, width, height, left, top, opacity;
  box-shadow: 0 0 0px rgba(233, 184, 114, 0);
  transition: box-shadow 300ms ease;
}

.sel-box.show-shadow {
  box-shadow: 0 0 30px rgba(233, 184, 114, 0.25);
}

.sel-handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--sel-accent);
  border: 1px solid var(--sel-bg);
  box-sizing: border-box;
  transform: scale(0);
  transition: transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sel-handle.tl { top: -4px; left: -4px; }
.sel-handle.tr { top: -4px; right: -4px; }
.sel-handle.bl { bottom: -4px; left: -4px; }
.sel-handle.br { bottom: -4px; right: -4px; }

.sel-box.active-handles .sel-handle {
  transform: scale(1);
}

.sel-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: -2px;
  background: var(--sel-accent);
  color: var(--sel-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.sel-box.active-handles .sel-label {
  opacity: 1;
  transform: translateY(0);
}

.sel-dims {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--sel-accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}

.sel-box.active-handles .sel-dims {
  opacity: 1;
}

.sel-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(0px) brightness(1);
  -webkit-backdrop-filter: blur(0px) brightness(1);
  z-index: -1;
  background: rgba(12, 10, 8, 0);
  transition: backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease, background 300ms ease;
}

.sel-blur.active {
  backdrop-filter: blur(6px) brightness(0.7);
  -webkit-backdrop-filter: blur(6px) brightness(0.7);
  background: rgba(12, 10, 8, 0.45);
}

.sel-flash {
  position: absolute;
  inset: 0;
  background: var(--sel-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 100ms ease;
}

/* 3. Project Table Row Hover Outlines (WW Row Style) */
.project-title {
  color: rgba(244, 237, 225, 0.35) !important;
  -webkit-text-stroke: 1px rgba(244, 237, 225, 0.25);
  transition: color 450ms cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-color 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project:hover .project-title {
  color: var(--accent) !important;
  -webkit-text-stroke-color: transparent !important;
  transform: translateX(18px) !important;
}

/* 4. Draggable Hero Text Elements Sandbox */
.draggable-hero-element {
  position: relative;
  cursor: grab !important;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.draggable-hero-element:active {
  cursor: grabbing !important;
}

/* Outline selection box while dragging or hovering over sandbox items */
.sandbox-sel-outline {
  position: absolute;
  border: 1.5px solid var(--sel-accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 10;
}

.sandbox-sel-outline.active {
  opacity: 1;
}

/* Redline alignment canvas */
.redline-svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 150ms ease;
}

.redline-svg-container.active {
  opacity: 1;
}

.redline-pill {
  position: absolute;
  background: var(--sel-redline);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Figma-style Developer Comment Bubble */
.figma-comment {
  position: absolute;
  background: var(--sel-accent);
  color: var(--sel-bg);
  padding: 6px 12px;
  border-radius: 0 10px 10px 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: top left;
  transition: opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 99;
  white-space: nowrap;
}

.figma-comment.flip-left {
  border-radius: 10px 0 10px 10px;
  transform-origin: top right;
}

.figma-comment.active {
  opacity: 1;
  transform: scale(1);
}

.chat-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: currentColor;
  vertical-align: middle;
  margin-left: 2px;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* 5. Camera Track & Scroll-Zoom Artboards */
.camera-track {
  width: 100vw;
  height: 100vh;
  perspective: 1500px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.artboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-radius;
  box-sizing: border-box;
  background: var(--bg);
  overflow: hidden;
}

.hero-artboard {
  background: var(--bg);
  z-index: 2;
}

.intro-artboard {
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Figma selection borders inside zoomed-out artboards */
.intro-asel {
  position: absolute;
  border: 1.5px solid var(--sel-accent);
  background: rgba(233, 184, 114, 0.03);
  pointer-events: none;
  z-index: 10;
  will-change: transform, width, height;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 200ms ease;
}

.intro-asel-lbl {
  position: absolute;
  bottom: calc(100% + 6px);
  left: -2px;
  background: var(--sel-accent);
  color: var(--sel-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* AI / Ghost cursors moving around */
.ac-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 99;
  will-change: transform;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 250ms ease, transform 150ms ease-out;
}

.ac-cursor svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.ac-tag {
  background: var(--sel-accent);
  color: var(--sel-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 10px;
  margin-top: 2px;
  white-space: nowrap;
}