/* ---------------------------------------------------------------
   Luna Creative — motion system.

   One idea: things RESOLVE, they do not slide in. The subject shoots
   photo and video under a stated constraint, so the vocabulary comes
   from the camera — an exposure coming up, a lens racking into focus.

   Two related motions, deliberately kept distinct:
     rack   blur -> sharp, on TYPE only (the subject of each section)
     settle rise + faint scale, on CARDS (frames onto a contact sheet)

   Type carries the blur because there are five headlines; cards do not
   because there are twelve of them and animating filter on twelve large
   elements drops frames on mid-range hardware.

   Everything animates only opacity / transform / filter, and every
   animation ends at the element's natural state, so final layout
   geometry is byte-identical to the static port.
   --------------------------------------------------------------- */

:root{
  --mo-shutter: 180ms;   /* mechanical: presses, hovers        */
  --mo-focus:   620ms;   /* a rack focus settling              */
  --mo-expose:  900ms;   /* the frame coming up                */

  /* Hard deceleration — a focus ring arriving at its mark. */
  --ease-rack:    cubic-bezier(.16,.84,.34,1);
  --ease-expose:  cubic-bezier(.22,.61,.36,1);
  --ease-shutter: cubic-bezier(.40,0,.20,1);

  --mo-stagger: 70ms;
}

/* =================================================================
   1. Hero exposure — the signature moment (Home)
   ================================================================= */

/* Base opacity is 0 so that if animations never run, the veil is
   simply absent rather than a black rectangle over the hero. */
.lc-expose-veil{
  position:absolute;
  inset:0;
  z-index:5;
  background:var(--ink-500);
  opacity:0;
  pointer-events:none;
  animation:lc-expose var(--mo-expose) var(--ease-expose) both;
}
@keyframes lc-expose{
  from{opacity:1}
  to  {opacity:0}
}

/* Hero lines carry no base opacity: the from-state lives in the
   keyframe, so without animation support they render normally. */
.lc-hero-line{animation:lc-rack var(--mo-focus) var(--ease-rack) both}
.lc-hero-line--1{animation-delay:260ms}
.lc-hero-line--2{animation-delay:380ms}
.lc-hero-line--3{animation-delay:540ms}
.lc-hero-line--4{animation-delay:660ms}

@keyframes lc-rack{
  from{opacity:0;filter:blur(8px);transform:translateY(12px) scale(1.014)}
  to  {opacity:1;filter:blur(0);  transform:none}
}

/* =================================================================
   2. Scroll reveals
   The hidden start state is gated behind .luna-motion, which a tiny
   inline script sets before first paint. No JS -> no hidden state ->
   content is never stranded invisible.
   ================================================================= */

.luna-motion .lc-reveal{
  opacity:0;
  transform:translateY(10px) scale(.994);
  transition:
    opacity   var(--mo-focus) var(--ease-rack),
    transform var(--mo-focus) var(--ease-rack);
  transition-delay:calc(var(--i, 0) * var(--mo-stagger));
}

.luna-motion .lc-reveal.is-in{
  opacity:1;
  transform:none;
}

/* Type variant: the rack focus proper. */
.luna-motion .lc-reveal--type{
  filter:blur(5px);
  transition:
    opacity   var(--mo-focus) var(--ease-rack),
    transform var(--mo-focus) var(--ease-rack),
    filter    var(--mo-focus) var(--ease-rack);
  transition-delay:calc(var(--i, 0) * var(--mo-stagger));
}
.luna-motion .lc-reveal--type.is-in{filter:blur(0)}

/* =================================================================
   3. Work cards — examine a frame
   ================================================================= */

.lc-card{
  transition:
    transform  var(--mo-focus) var(--ease-rack),
    box-shadow var(--mo-focus) var(--ease-rack);
}

/* The slow push-in: a video move, not a photo one. Clipped by the
   card's own overflow:hidden. */
.lc-card .lc-slot{transition:transform 900ms var(--ease-rack)}
.lc-card:hover .lc-slot,
.lc-card:focus-within .lc-slot{transform:scale(1.035)}

.lc-card:hover,
.lc-card:focus-within{transform:translateY(-3px)}

/* Paper cards (Work page, white on cream) deepen their shadow.
   The dark cards on Home deliberately do not — a drop shadow on
   ink-400 over ink-500 reads as grime, not lift. */
.lc-card--paper:hover,
.lc-card--paper:focus-within{
  box-shadow:0 2px 4px rgba(25,23,34,.08), 0 14px 34px rgba(25,23,34,.13);
}

/* =================================================================
   4. Controls — shutter-quick, physical
   ================================================================= */

.lc-btn-primary{transition:background var(--mo-shutter) var(--ease-shutter),
                            transform  var(--mo-shutter) var(--ease-shutter)}
.lc-btn-primary:active{transform:translateY(1px)}

.lc-filter-btn:active{transform:translateY(1px)}

/* =================================================================
   5. Reduced motion — hold everything at its final state
   ================================================================= */

@media (prefers-reduced-motion: reduce){
  .lc-expose-veil{display:none}

  .lc-hero-line{animation:none}

  .luna-motion .lc-reveal,
  .luna-motion .lc-reveal--type{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
    transition-delay:0s;
  }

  .lc-card,
  .lc-card .lc-slot,
  .lc-btn-primary{transition:none}

  .lc-card:hover,
  .lc-card:focus-within{transform:none}

  .lc-card:hover .lc-slot,
  .lc-card:focus-within .lc-slot{transform:none}

  .lc-btn-primary:active,
  .lc-filter-btn:active{transform:none}
}