/* ==========================================================================
   HyCube Works — Interaction Layer
   Custom cursor, ambient background motion, magnetic buttons, 3D tilt cards.
   Pure additive layer: doesn't touch existing layout, type, or color tokens.
   Everything here is disabled automatically on touch devices and scaled back
   under prefers-reduced-motion.
   ========================================================================== */

:root{
  /* Default cursor accent — overridden per-section by interactions.js as the
     user scrolls (see SECTION_COLORS in that file). */
  --cursor-color: #D97F3D;
  --cursor-color-soft: rgba(217, 127, 61, 0.35);
}

/* Only take over the cursor on devices that actually have a precise pointer —
   leave touchscreens completely alone. */
@media (hover: hover) and (pointer: fine){
  html.has-custom-cursor, html.has-custom-cursor *{ cursor: none !important; }
  /* ...except the contact-rail button, which already ships its own custom
     wave-emoji cursor image — don't fight it. */
  html.has-custom-cursor .rail-contact-btn,
  html.has-custom-cursor .rail-contact-btn *{
    cursor: url('assets/images/cursor-wave.png') 16 16, pointer !important;
  }
}

/* ---- Custom cursor ---- */
#cursor-dot,
#cursor-ring,
#cursor-glow{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%);
}
#cursor-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cursor-color);
  transition: background-color .4s ease, opacity .25s ease, width .25s ease, height .25s ease;
}
#cursor-ring{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--cursor-color);
  opacity: .8;
  transition: background-color .4s ease, border-color .4s ease, opacity .25s ease,
              width .3s cubic-bezier(.16,.8,.3,1), height .3s cubic-bezier(.16,.8,.3,1);
}
#cursor-glow{
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cursor-color-soft) 0%, transparent 70%);
  opacity: .55;
  filter: blur(2px);
  transition: background .4s ease, opacity .3s ease, width .4s ease, height .4s ease;
}
/* Hover state over interactive elements — ring grows and softens, dot tucks away */
#cursor-ring.is-hovering{
  width: 64px; height: 64px;
  background: var(--cursor-color-soft);
  opacity: .9;
}
#cursor-dot.is-hovering{ opacity: 0; }
#cursor-ring.is-pressed{ width: 30px; height: 30px; }
/* Text-hover state (headings/paragraphs) — thin outline only, no fill */
#cursor-ring.is-text{ width: 4px; height: 46px; border-radius: 3px; opacity: .5; }

@media (max-width: 900px), (hover: none), (pointer: coarse){
  #cursor-dot, #cursor-ring, #cursor-glow{ display: none; }
}

/* ---- Ambient background layer: parallax blobs + cursor-following spotlight ---- */
#bg-interactive-layer{
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#bg-interactive-layer .bg-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .28;
  will-change: transform;
  mix-blend-mode: normal;
}
#bg-interactive-layer .bg-blob--a{
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: -10%; left: -8%;
  background: radial-gradient(circle, #D97F3D 0%, transparent 70%);
}
#bg-interactive-layer .bg-blob--b{
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  top: 40%; right: -10%;
  background: radial-gradient(circle, #6B3FA0 0%, transparent 70%);
}
#bg-interactive-layer .bg-blob--c{
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
  bottom: -8%; left: 30%;
  background: radial-gradient(circle, #32c0bd 0%, transparent 70%);
  opacity: .18;
}
#bg-interactive-layer .bg-spotlight{
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.05), transparent 60%);
  transition: background .1s linear;
}
html.theme-dark-active #bg-interactive-layer .bg-spotlight,
.section-dark #bg-interactive-layer .bg-spotlight{
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.06), transparent 60%);
}

#particles-canvas{
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  #bg-interactive-layer .bg-blob{ display: none; }
  #particles-canvas{ display: none; }
}
@media (max-width: 640px){
  #particles-canvas{ display: none; } /* skip particle sim on small/likely-mobile devices */
}

/* ---- Magnetic buttons ---- */
/* JS applies the transform (translate) directly for the magnetic pull; this just
   ensures a smooth spring-back when the pointer leaves and a nice lift on hover. */
.magnetic-el{
  transition: transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease;
  will-change: transform;
}
.magnetic-el.is-magnet-active{ transition: transform .12s ease-out, box-shadow .35s ease; }
a.btn-primary.magnetic-el:hover,
button.btn-primary.magnetic-el:hover{
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}

/* ---- 3D tilt cards ---- */
/* JS sets rotateX/rotateY/translateZ via inline style on a wrapping perspective
   context; these rules just prep the elements so the tilt has somewhere to live
   and add a soft dynamic shadow + sheen that tracks the same pointer position. */
.tilt-el{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease;
  position: relative;
}
.tilt-el.is-tilting{ transition: transform .08s linear; }
.tilt-el::after{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--tilt-px, 50%) var(--tilt-py, 50%),
    rgba(255,255,255,.16), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.tilt-el.is-tilting::after{ opacity: 1; }

/* ---- Floating decorative drift (about-section accents, blobs, etc.) ---- */
.drift-float{ will-change: transform; }

/* ---- Contact form: glow on focus ---- */
.contact-input,
.contact-select,
.contact-textarea{
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus{
  outline: none;
  border-color: var(--cursor-color);
  box-shadow: 0 0 0 4px var(--cursor-color-soft);
}

/* ---- Scroll-linked micro life: nearby-tile subtle reaction ---- */
.tilt-el.is-neighbor-active{ transform: scale(1.012); }