/* ==========================================================================
   LUCID SKETCHER — Premium Motion Layer
   Additive enhancement on top of styles.css. Adds Framer-grade motion:
   custom cursor, magnetic hover, mask/blur reveals, parallax, glass header,
   ambient depth. Nothing here changes layout, content, or breakpoints.
   All heavy motion is gated behind (prefers-reduced-motion: no-preference).
   ========================================================================== */

:root {
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --surface-glass: rgba(243, 240, 232, .68);
}

/* -------------------------------------------------------------- */
/* Ambient depth field — soft floating gradients, decorative only */
/* -------------------------------------------------------------- */
.ambient-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient-field span {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .28;
  will-change: transform;
}
.ambient-field span:nth-child(1) {
  top: -12%;
  left: -8%;
  background: radial-gradient(circle at 30% 30%, #d8c9a3, transparent 70%);
  animation: ambient-drift-a 34s ease-in-out infinite;
}
.ambient-field span:nth-child(2) {
  top: 32%;
  right: -12%;
  background: radial-gradient(circle at 60% 40%, #b9c6c2, transparent 70%);
  animation: ambient-drift-b 40s ease-in-out infinite;
}
.ambient-field span:nth-child(3) {
  bottom: -14%;
  left: 22%;
  background: radial-gradient(circle at 50% 50%, #c9b7c9, transparent 70%);
  animation: ambient-drift-c 46s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .ambient-field { display: none; }
}
@keyframes ambient-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 6vh, 0) scale(1.08); }
}
@keyframes ambient-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, 4vh, 0) scale(1.06); }
}
@keyframes ambient-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vw, -5vh, 0) scale(1.1); }
}

/* -------------------------------------------------------------- */
/* Custom cursor — desktop, fine pointer only                      */
/* -------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input {
    cursor: none;
  }
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--ink, #20211e);
  opacity: 0;
  transition: opacity 220ms ease, background-color 220ms ease;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(32, 33, 30, .45);
  opacity: 0;
  transition: opacity 220ms ease, width 320ms var(--ease-premium), height 320ms var(--ease-premium), border-color 320ms ease, background-color 320ms ease;
}
.cursor-dot.is-active,
.cursor-ring.is-active { opacity: 1; }
.cursor-ring.is-hovering {
  width: 62px;
  height: 62px;
  background: rgba(32, 33, 30, .06);
  border-color: rgba(32, 33, 30, .18);
}
.cursor-ring.is-text {
  width: 4px;
  height: 34px;
  border-radius: 3px;
  background: var(--ink, #20211e);
  border-color: transparent;
}

/* -------------------------------------------------------------- */
/* Reveal upgrade — blur-to-sharp, staggered, GPU-accelerated      */
/* -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition:
      opacity 900ms var(--ease-premium),
      transform 900ms var(--ease-premium),
      filter 900ms var(--ease-premium);
    transition-delay: var(--reveal-delay, 0ms);
    filter: blur(6px);
    transform: translate3d(0, 22px, 0);
  }
  .reveal.is-visible {
    filter: blur(0);
  }
}

/* Word-mask headline reveal (applied via motion.js to page <h1>s) */
.word-mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.word-mask-line .word {
  display: inline-block;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .word-mask-line .word {
    transform: translate3d(0, 112%, 0) rotate(1.5deg);
    transition: transform 950ms var(--ease-premium);
    transition-delay: var(--word-delay, 0ms);
  }
  .is-lettered .word-mask-line .word {
    transform: none;
  }
}

/* -------------------------------------------------------------- */
/* Header — glassmorphism refinement                               */
/* -------------------------------------------------------------- */
.site-header.is-condensed::before {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(32, 33, 30, .05);
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark, .desktop-nav a, .menu-toggle { transition: opacity 220ms ease, transform 320ms var(--ease-spring); }
}

/* -------------------------------------------------------------- */
/* Magnetic interactive elements                                   */
/* -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  [data-magnetic] {
    transition: transform 420ms var(--ease-spring);
    will-change: transform;
  }
}

/* -------------------------------------------------------------- */
/* Parallax targets                                                 */
/* -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] { will-change: transform; }
}

/* -------------------------------------------------------------- */
/* Hover elevation — cards, artwork, CTA tiles                     */
/* -------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .square-grid figure,
  .print-artwork,
  .tool-product {
    transition: transform 560ms var(--ease-premium), box-shadow 560ms var(--ease-premium);
  }
  .square-grid figure:hover,
  .print-artwork:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 28px 60px -28px rgba(32, 33, 30, .35);
  }
  .grid-cta {
    transition: background-color 400ms ease, transform 480ms var(--ease-spring), box-shadow 480ms var(--ease-premium);
  }
  .grid-cta:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 24px 48px -30px rgba(32, 33, 30, .4);
  }
  .text-link, .tool-link {
    position: relative;
  }
  .text-link::after, .tool-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -1px;
    height: 1px;
    background: var(--ink, #20211e);
    transition: right 420ms var(--ease-premium);
  }
  .text-link:hover::after, .tool-link:hover::after { right: 0; }
  .button {
    transition: transform 420ms var(--ease-spring), box-shadow 420ms var(--ease-premium), background-color 260ms ease;
  }
  .button:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 18px 34px -20px rgba(32, 33, 30, .45);
  }
}

/* -------------------------------------------------------------- */
/* Hero — soft depth on the primary image                          */
/* -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { transform: scale(1.04); transition: transform 1600ms var(--ease-premium); }
  .hero.is-resolved .hero-media img { transform: scale(1); }
}

/* -------------------------------------------------------------- */
/* Page-load veil — soft fade so the first paint feels intentional */
/* -------------------------------------------------------------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--paper, #f3f0e8);
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms var(--ease-premium);
}
.page-veil.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}

/* -------------------------------------------------------------- */
/* Sketchbook + artwork viewer — small refinements                 */
/* -------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .book-stage [data-book-prev], .book-stage [data-book-next] {
    transition: transform 320ms var(--ease-spring), opacity 220ms ease;
  }
  .book-stage [data-book-prev]:hover:not(:disabled),
  .book-stage [data-book-next]:hover:not(:disabled) {
    transform: translate3d(0, -2px, 0);
  }
}

@media print {
  .ambient-field, .cursor-dot, .cursor-ring, .page-veil { display: none !important; }
}