/* file: resources/css/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}

@layer components {
  .grain-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: theme('backgroundImage.noise-soft');
  }

  #custom-cursor {
    z-index: 10001;
  }

  .custom-cursor {
    width: 28px;
    height: 28px;
    opacity: 0;
    visibility: hidden;
  }

  .custom-cursor.custom-cursor--on {
    opacity: 1;
    visibility: visible;
  }

  .custom-cursor__ring,
  .custom-cursor__dot,
  .custom-cursor__xp {
    display: none !important;
  }

  .custom-cursor__circle {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 4px 22px rgba(0, 0, 0, 0.35),
      inset 0 0 14px rgba(255, 255, 255, 0.06);
    transition:
      transform 0.2s theme('transitionTimingFunction.outexpo'),
      border-color 0.2s ease,
      background 0.2s ease;
    will-change: transform;
  }

  .custom-cursor.is-hover .custom-cursor__circle {
    transform: scale(1.2);
    border-color: rgba(125, 211, 252, 0.95);
    background: rgba(56, 189, 248, 0.1);
  }

  .custom-cursor__label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow:
      0 0 8px rgba(0, 0, 0, 0.85),
      0 1px 2px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
  }

  .custom-cursor.is-label .custom-cursor__label {
    opacity: 1;
  }

  /* Hide system cursor while custom ring is active */
  html.xp-cursor-active *,
  html.xp-cursor-active *::before,
  html.xp-cursor-active *::after {
    cursor: none !important;
  }

  html.xp-cursor-active input[type='text'],
  html.xp-cursor-active input[type='email'],
  html.xp-cursor-active input[type='search'],
  html.xp-cursor-active input[type='url'],
  html.xp-cursor-active input[type='tel'],
  html.xp-cursor-active input[type='password'],
  html.xp-cursor-active input[type='number'],
  html.xp-cursor-active textarea,
  html.xp-cursor-active [contenteditable='true'] {
    cursor: text !important;
  }

  .page-transition {
    background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.15), #0a0a0b 70%);
    transition: opacity 0.6s theme('transitionTimingFunction.outexpo');
  }

  .page-transition.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .preloader {
    transition: opacity 0.8s theme('transitionTimingFunction.outexpo'), visibility 0.8s;
  }

  .preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .menu-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.55s linear;
  }

  .menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu-overlay__texture {
    background: conic-gradient(from 180deg at 50% 50%, rgba(139, 92, 246, 0.08), transparent, rgba(14, 165, 233, 0.08));
    animation: texture-drift 18s linear infinite;
  }

  @keyframes texture-drift {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-overlay__texture {
      animation: none;
    }
  }

  /* Home hero — touch ripples (animation 1) */
  #touch-ripples {
    position: absolute;
    inset: 0;
  }

  .touch-ripple {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    animation: touch-ripple-expand 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
  }

  @keyframes touch-ripple-expand {
    0% {
      transform: scale(0.2);
      opacity: 0.9;
    }
    100% {
      transform: scale(14);
      opacity: 0;
    }
  }

  .home-orb {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  [data-home-touch-root] {
    cursor: crosshair;
  }

  html.xp-cursor-active [data-home-touch-root] {
    cursor: none !important;
  }

  @media (pointer: coarse) {
    [data-home-touch-root] {
      cursor: auto;
    }

    html.xp-cursor-active [data-home-touch-root] {
      cursor: auto !important;
    }
  }
}