/* =============================================================
   DARK VELOCITY — Extended effects
   Loaded via custom-head.blade.php using themeAsset()?v=X.Y.Z
   This file is the CACHE-BUSTED entry point. Critical overrides go here so they
   take effect immediately on theme updates without users needing to hard-refresh.
   ============================================================= */

/* ── Fixed background — JS-driven approach (avoids bg-attachment: fixed glitches) ──
   The JS in custom-body-end.blade.php detects body[style*="background-image"], copies
   the image URL to #dv-fixed-bg below, and clears it from body. This achieves the
   "fixed" look without the per-scroll repaint flicker that bg-attachment: fixed has. */
#dv-fixed-bg {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;             /* sits behind body content but above body bg-color */
  will-change: transform;  /* hint compositor to keep on its own layer */
  /* When the scrim from skeleton-auto's body::before sits on top, the photo gets
     a tasteful dark veil while the cards remain glassmorphic over the photo. */
}

html body,
html body[style] {
  /* Once JS extracts the image to #dv-fixed-bg, body bg can scroll harmlessly. */
  background-attachment: scroll !important;
}

/* ── Readability scrim — applies whenever JS detected a custom bg.
   Mirrors the body[style*="background-image"] rules in skeleton-auto.css so they
   keep working after JS strips the inline style. */
html body[data-has-bg] .button {
  background:    rgba(13, 13, 22, 0.62) !important;
  border-color:  rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}
html body[data-has-bg] .button:hover,
html body[data-has-bg] .button:focus {
  background:    rgba(13, 13, 22, 0.78) !important;
  border-color:  rgba(99, 130, 255, 0.55) !important;
}
html body[data-has-bg] .social-icon,
html body[data-has-bg] i.social-icon {
  background: rgba(13, 13, 22, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html body[data-has-bg] .column h2,
html body[data-has-bg] .column h3,
html body[data-has-bg] .column h4,
html body[data-has-bg] .column h5 {
  color: #a8c0ff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
html body[data-has-bg] p,
html body[data-has-bg] .description-parent {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  color: rgba(238, 238, 245, 0.88) !important;
}
/* When user has bg, dim the orb gradient overlay (skeleton-auto draws it on body::before) */
html body[data-has-bg]::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,  rgba(99, 130, 255, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 90%, rgba(167, 139, 250, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(6, 6, 10, 0.55) 0%, rgba(6, 6, 10, 0.78) 100%) !important;
}

/* ── Critical override: center icon + text inside link buttons ──
   Default flex behavior is `justify-content: flex-start`. Force centering with
   higher specificity than skeleton-auto.css's `.button` rule (which may be cached). */
.column a.button,
.column .button-entrance a.button,
a.button.button-hover {
  justify-content: center !important;
  text-align:      center !important;
}

/* ── Cursor glow — supplementary effect, OS cursor stays visible ──
   Previously we set `cursor: none` and replaced it with custom elements.
   That backfired: if any browser quirk prevented the JS from running, users
   had NO cursor at all. Now the OS cursor is preserved and we add a soft
   glow ring + accent dot that follows the pointer. */
@media (pointer: fine) {
  /* Interactive elements keep `cursor: pointer` — let browser default reign.
     We're not hiding the OS cursor anymore, just augmenting it. */

  #dv-cursor-outer {
    position: fixed;
    width:  44px;
    height: 44px;
    left: 0; top: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(99, 130, 255, 0.65);
    background: rgba(99, 130, 255, 0.04);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-600px, -600px);
    transition:
      transform  0.16s cubic-bezier(0.16, 1, 0.3, 1),
      width      0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      height     0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      border-color 0.2s ease,
      opacity    0.2s ease;
    will-change: transform;
    mix-blend-mode: screen; /* gives the ring a luminous feel over any background */
  }

  #dv-cursor-dot {
    position: fixed;
    width:  8px;
    height: 8px;
    left: 0; top: 0;
    border-radius: 50%;
    background: var(--accent, #6382ff);
    box-shadow: 0 0 12px rgba(99, 130, 255, 0.8);
    pointer-events: none;
    z-index: 100000;
    transform: translate(-600px, -600px);
    transition: transform 0.04s linear;
    will-change: transform;
  }

  /* Ring expands on hover — uses .cursor-hover toggled by JS for cross-browser support */
  body.cursor-hover #dv-cursor-outer {
    width:  64px;
    height: 64px;
    border-color: rgba(99, 130, 255, 0.95);
    background: rgba(99, 130, 255, 0.08);
  }

  /* Compress on click */
  body.cursor-clicking #dv-cursor-outer {
    width:  28px;
    height: 28px;
    border-color: rgba(167, 139, 250, 0.95);
    background: rgba(167, 139, 250, 0.16);
  }
}

/* ── Click ripple effect ── */
@keyframes dv-ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(5);
    opacity: 0;
  }
}

.dv-ripple {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgba(99, 130, 255, 0.28);
  transform: scale(0);
  animation: dv-ripple 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 10;
  margin-left: -25px;
  margin-top:  -25px;
}

/* ── 3D card tilt wrapper ── */
.button-hover {
  perspective: 700px;
  transform-style: preserve-3d;
}

.button-hover .button {
  transform-style: preserve-3d;
  transition:
    background    0.25s ease,
    border-color  0.25s ease,
    box-shadow    0.3s ease,
    transform     0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Note: spinning gradient ring removed — in LinkStack, .button-hover IS the .button
   itself, and ::after is already used by the shimmer sweep. The ring would conflict. */

/* ── Social icon tooltip ── */
.social-hover {
  position: relative;
}

.social-hover::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(13, 13, 22, 0.92);
  color: rgba(238, 238, 245, 0.85);
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-hover:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Scroll progress bar (pure CSS element) ── */
#dv-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent, #6382ff), var(--accent2, #a78bfa));
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ── Container entrance animation ── */
@keyframes dv-container-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container {
  animation: dv-container-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

/* ── External link arrow indicator ── */
.button::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-top:   1.5px solid rgba(99, 130, 255, 0.35);
  border-right: 1.5px solid rgba(99, 130, 255, 0.35);
  transform: rotate(45deg) scale(0.8);
  opacity: 0;
  transition:
    opacity   0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button-hover:hover .button::before,
.button:hover::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Section heading accent line — handled in skeleton-auto.css for h2/h3/h4/h5 */

/* ── Avatar ring pulse ── */
@keyframes dv-ring-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(99, 130, 255, 0.25), 0 0 40px rgba(99,130,255,0.15), 0 0 80px rgba(99,130,255,0.06); }
  50%  { box-shadow: 0 0 0 8px rgba(99, 130, 255, 0),    0 0 50px rgba(99,130,255,0.22), 0 0 90px rgba(99,130,255,0.09); }
  100% { box-shadow: 0 0 0 0   rgba(99, 130, 255, 0.25), 0 0 40px rgba(99,130,255,0.15), 0 0 80px rgba(99,130,255,0.06); }
}

#avatar,
.rounded-avatar,
img[style*="border-radius: 50%"],
img[class*="avatar"],
.avatar {
  animation: avatarFloat 7s ease-in-out infinite, dv-ring-pulse 4s ease-in-out infinite !important;
}

/* ── Button shimmer: left-arrow icon offset fix ── */
.button img,
.button .hvr-icon {
  position: relative;
  z-index: 1;
}

/* ── Reduced-motion: also disable effects.css animations ── */
@media (prefers-reduced-motion: reduce) {
  .container         { animation: none; }
  .dv-ripple         { animation: none; }
  #dv-cursor-outer,
  #dv-cursor-dot     { transition: none; }
  .button-hover::after { animation: none; opacity: 0; }
  #avatar,
  .rounded-avatar,
  img[style*="border-radius: 50%"],
  img[class*="avatar"],
  .avatar            { animation: none !important; }
}

/* ── Tablet breakpoint ── */
@media (max-width: 768px) {
  .container { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
  #avatar, .rounded-avatar { width: 110px !important; height: 110px !important; }
  .social-hover { margin: 0 1px; }
}

/* ── Mobile breakpoint ── */
@media (max-width: 480px) {
  .container       { padding-left: 14px !important; padding-right: 14px !important; }
  #avatar, .rounded-avatar { width: 96px !important; height: 96px !important; }
  .social-icon, i.social-icon { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .button          { font-size: 0.88rem !important; padding: 13px 16px !important; }
  .button img,
  .button .hvr-icon { width: 20px !important; height: 20px !important; }
  .column h2, .column h3, .column h4, .column h5 {
    font-size: 0.66rem !important;
    gap: 8px !important;
    margin: 24px auto 10px !important;
  }
  .column h2::before, .column h2::after,
  .column h3::before, .column h3::after,
  .column h4::before, .column h4::after,
  .column h5::before, .column h5::after { max-width: 30px !important; }
  /* Disable cursor effects on touch screens regardless of pointer detection */
  #dv-cursor-outer, #dv-cursor-dot { display: none !important; }
}

/* ── Touch-pointer detection fallback ── */
@media (hover: none), (pointer: coarse) {
  #dv-cursor-outer, #dv-cursor-dot { display: none !important; }
  *, *::before, *::after { cursor: auto !important; }
}