/* ==========================================================================
   Parlour Haus Salon: micro-interactions styles
   Everything is scoped under html.motion (added by the loader before the
   modules run). Colors come from the theme tokens only, so the light theme
   (html[data-theme="light"]) picks these up without a second block.
   Hover-only rules sit inside (hover:hover) and (pointer:fine) so touch
   devices get no sticky hover artifacts.
   ========================================================================== */

/* 1. Custom cursor: copper dot, lagging gold ring, optional "View" label.
      Injected by JS. No mix-blend-mode: difference turns copper blue on the
      white light theme, so the ring stays a solid token color with a faint
      halo for legibility over photos. */
html.motion .ph-cursor{position:fixed;top:0;left:0;z-index:1000;pointer-events:none;opacity:0;visibility:hidden;}
html.motion .ph-cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:var(--copper);}
html.motion .ph-cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;}
html.motion .ph-cursor-ring i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--noir) 16%,transparent);}
html.motion .ph-cursor-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:.2em;font-family:var(--sans);font-weight:400;font-size:.6rem;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 10px color-mix(in srgb,var(--noir) 55%,transparent);opacity:0;visibility:hidden;white-space:nowrap;}
html.motion.has-cursor a,
html.motion.has-cursor button,
html.motion.has-cursor .card,
html.motion.has-cursor .gal-grid figure,
html.motion.has-cursor .ig-strip a{cursor:none;}

/* 2. Scroll progress hairline. Sits above the header (200), grain (350)
      and skip link (400). JS sets the initial scaleX and scrubs it. */
html.motion .ph-progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:500;background:var(--metal);transform-origin:0 50%;pointer-events:none;}

/* 3. Service card light spot. The tilt itself is applied by gsap on .card;
      this is the injected radial highlight that trails the pointer.
      --gold-soft is used over --gold because the light theme's --gold is a
      deep bronze that reads as mud on a photo; gold-soft stays luminous
      in both palettes. Screen blend keeps it a light, not a tint. */
html.motion .card .ph-spot{position:absolute;left:-20%;top:-20%;width:140%;height:140%;z-index:3;pointer-events:none;border-radius:50%;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--gold-soft) 12%,transparent),transparent);}

/* 4. Instagram strip drag. Grab cursors for the no-custom-cursor case;
      snap is off only while the class is on so momentum can settle first.
      Touch is untouched: the class is only ever added for mouse pointers. */
@media (pointer:fine){
  html.motion .ig-strip{cursor:grab;}
  html.motion .ig-strip.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none;}
  html.motion .ig-strip.is-dragging a{pointer-events:none;}
  html.motion .ig-strip img{-webkit-user-drag:none;user-drag:none;}
}

/* 5. Hamburger bars into an X. Bars are 2px with 6px margins (collapsed),
      so centers sit 8px apart. Items stagger is handled in micro.js. */
html.motion .hamburger span{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease,background-color .3s ease;}
html.motion #navToggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
html.motion #navToggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);}
html.motion #navToggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* 6. Desktop nav underline: a metallic hairline drawn from the left.
      .btn inside the menu is excluded; that element belongs to the header module. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  html.motion .menu a:not(.btn){position:relative;}
  html.motion .menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--metal);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1);}
  html.motion .menu a:not(.btn):hover::after,
  html.motion .menu a:not(.btn):focus-visible::after{transform:scaleX(1);}
}

/* 7. Hours rows: the day name lifts to cream, the hairline to gold. */
html.motion .hours td{transition:color .3s ease,border-color .35s ease;}
@media (hover:hover) and (pointer:fine){
  html.motion .hours tr:hover td{border-bottom-color:var(--gold);}
  html.motion .hours tr:hover td:first-child{color:var(--cream);}
}

/* 8. Amenity pills: faint gold fill, 1px lift. */
html.motion .amen span{transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .35s ease,border-color .35s ease,color .35s ease;}
@media (hover:hover) and (pointer:fine){
  html.motion .amen span:hover{transform:translateY(-1px);color:var(--cream);background:var(--line);background:color-mix(in srgb,var(--gold) 9%,transparent);border-color:color-mix(in srgb,var(--gold) 45%,transparent);}
}

/* 9. Map frame: metallic 1px outline glow on hover. Drawn on the link, not
      the iframe, because the dark theme runs an invert() filter on .map that
      would flip any box-shadow placed on the frame itself to blue.
      .map becomes display:block only to remove the inline descender gap so
      the outline hugs the frame exactly. */
html.motion .map-link{position:relative;border-radius:3px;transition:box-shadow .5s ease;}
html.motion .map-link .map{display:block;}
html.motion .map-link::after{content:"";position:absolute;inset:0;border-radius:3px;padding:1px;background:var(--metal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease;pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  html.motion .map-link:hover::after{opacity:1;}
  html.motion .map-link:hover{box-shadow:0 24px 54px -28px color-mix(in srgb,var(--copper) 70%,transparent);}
}

/* Reduced motion: state changes land instantly; the cursor and tilt are
      never created (JS gates them), so nothing here needs hiding. */
@media (prefers-reduced-motion:reduce){
  html.motion .hamburger span,
  html.motion .menu a:not(.btn)::after,
  html.motion .hours td,
  html.motion .amen span,
  html.motion .map-link,
  html.motion .map-link::after{transition:none;}
}