/* Draggable vertical tags (behaviour in tag-drag.js). House tag sits left and drags right; about tag mirrors it. */
.drag-tag {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  color: rgba(245, 240, 225, 0.7);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* never the browser's own text drag */
  transform: translate(var(--drag, 0px), -50%);
  transition:
    transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
    color 0.3s ease;
}

.drag-tag:hover,
.drag-tag:focus-visible {
  color: #f5f0e1;
  outline: none;
}

.drag-tag.is-dragging {
  z-index: 55; /* above the blur (49) and veil (50), under the sliding preview (60) */
  will-change: transform;
  cursor: grabbing;
  transition: color 0.3s ease; /* follow the pointer exactly while dragging */
}

.drag-tag.is-ready {
  color: #f4a300;
}

.drag-tag-line {
  width: 1px;
  height: 48px;
  background-color: #f4a300;
}

.drag-tag * {
  -webkit-user-drag: none;
  pointer-events: none; /* presses always land on the tag itself */
}

.drag-tag-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* reads bottom to top */
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.drag-tag-text em {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #f5f0e1;
}

/* "Bybit": emphasised; on hover the letters ripple in a wave, then each stands upright */
.drag-tag-text em.bybit {
  display: inline-block;
  vertical-align: middle; /* centre on the line, so the half-turn spin doesn't swing it off to one side */
  font-size: 22px;
  font-weight: 500;
  color: #f4a300;
  letter-spacing: 0.05em;
  pointer-events: auto; /* hoverable on its own; presses still reach the tag's drag */
  /* bigger hover target: invisible padding, cancelled out by negative margin so nothing moves */
  padding: 16px 20px;
  margin: -16px -20px;
  transition:
    letter-spacing 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    rotate 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* after the wave: the word spins half a turn (so it reads B-y-b-i-t top to bottom)
   while each letter counter-turns to stand upright */
.drag-tag-text em.bybit:hover {
  letter-spacing: 0.6em; /* room for the letters once they stand up */
  rotate: 180deg;
  transition:
    letter-spacing 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0.45s,
    rotate 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.45s;
}

.drag-tag-text em.bybit:hover span {
  animation: bybit-ripple 0.5s ease-in-out calc(var(--i) * 60ms);
  rotate: -90deg;
  translate: var(--upright-nudge);
  transition:
    rotate 0.5s cubic-bezier(0.19, 1, 0.22, 1) calc(0.5s + var(--i) * 50ms),
    translate 0.5s cubic-bezier(0.19, 1, 0.22, 1) calc(0.5s + var(--i) * 50ms);
}

.drag-tag-arrow {
  animation: tag-nudge 2s ease-in-out infinite;
}

/* tug only what's inside: if the tag's own box moved, it would slide out from under the cursor,
   end the hover, stop, slide back, and flicker on and off */
.drag-tag:hover:not(.is-dragging) > :is(.drag-tag-line, .drag-tag-text, .drag-tag-arrow) {
  animation: tag-tug 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* bigger, invisible hover/grab area around the tag */
.drag-tag::before {
  content: "";
  position: absolute;
  inset: -20px -28px;
  z-index: -1; /* behind the contents, so "Bybit" still gets its own hover */
}

.drag-tag-hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f4a300;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.drag-tag-hint::before {
  content: "Drag";
}

.drag-tag-hint::after {
  content: "";
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.drag-tag:is(:hover, .is-dragging) .drag-tag-hint {
  opacity: 1;
  transform: translate(0, -50%);
}

.drag-tag:is(:hover, .is-dragging) .drag-tag-hint::after {
  width: 40px;
}

/* once you're dragging, the cue has done its job: fade it out over the first quarter of the pull */
.drag-tag.is-dragging .drag-tag-hint {
  opacity: calc(1 - var(--progress, 0) * 4);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* The next page, loaded in a frame, slides in behind the dragged tag */
.page-preview {
  position: fixed;
  inset: 0;
  z-index: 60;
  transform: translateX(calc(-100% - 80px)); /* parked far enough out that its shadow stays off-screen too */
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.page-preview.is-dragging {
  transition: none;
  will-change: transform;
}

.page-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background-color: rgb(10, 12, 20);
}

/* once fully slid in, the panel is the page: let it take clicks, scrolling and keys */
.page-preview.is-open {
  pointer-events: auto;
  box-shadow: none;
}

/* Page blur while a tag is dragged (amount set by tag-drag.js) */
.drag-blur {
  position: fixed;
  inset: 0;
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* blur only exists while a drag is happening or fading out */
.drag-blur.is-on {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  will-change: opacity;
}

.drag-blur.is-live {
  transition: none; /* follow the pointer exactly */
}

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgb(10, 12, 20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

@keyframes bybit-ripple {
  50% {
    scale: 1.4;
    text-shadow: 0 0 12px rgba(244, 163, 0, 0.8);
  }
}

@keyframes tag-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--nudge, 5px));
  }
}

@keyframes tag-tug {
  0%,
  60%,
  100% {
    translate: 0;
  }
  30% {
    translate: var(--tug, 10px);
  }
}

/* The arrow, exaggerated: the shaft stretches out in the drag direction with the head riding on its end,
   overshoots, then snaps back with a little squash, as if pulled; the whole arrow swings further too.
   --dir: 1 points right (the House tag), -1 left (the About page's tag) */
.drag-tag-arrow {
  --dir: 1;
  overflow: visible;
  --nudge: 10px;
}

.about-tag .drag-tag-arrow {
  --dir: -1;
  --nudge: -10px;
}

.drag-tag-arrow .arrow-shaft {
  transform-box: fill-box;
  transform-origin: left center;
  animation: arrow-stretch 2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.about-tag .drag-tag-arrow .arrow-shaft {
  transform-origin: right center;
}

.drag-tag-arrow .arrow-head {
  animation: arrow-ride 2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

/* shaft is 14 units long, so stretching it by k moves its tip 14 x (k - 1): the head goes with it */
@keyframes arrow-stretch {
  0%,
  100% {
    scale: 1 1;
  }
  35% {
    scale: 2.6 1;
  }
  52% {
    scale: 1.7 1;
  }
  66% {
    scale: 0.8 1;
  }
  80% {
    scale: 1.1 1;
  }
}

@keyframes arrow-ride {
  0%,
  100% {
    translate: 0;
  }
  35% {
    translate: calc(22.4px * var(--dir));
  }
  52% {
    translate: calc(9.8px * var(--dir));
  }
  66% {
    translate: calc(-2.8px * var(--dir));
  }
  80% {
    translate: calc(1.4px * var(--dir));
  }
}