/* ============================================================
   THE TALK OF LIFE — motion layer
   One-time reveals and light interaction feedback. This file is
   intentionally separate so the site's existing design stays intact.
   ============================================================ */

:root{
  --motion-ease:cubic-bezier(.2,.72,.25,1);
  --motion-duration:760ms;
  --motion-distance:38px;
}

/* One-time page-load polish for the global navigation. */
.site-header{
  animation:motionHeaderIn 680ms var(--motion-ease) both;
}

.header-logo-image{
  animation:motionLogoIn 760ms var(--motion-ease) 80ms both;
}

@media (min-width:901px){
  .nav > a{
    animation:motionNavIn 520ms var(--motion-ease) both;
  }
  .nav > a:nth-child(1){animation-delay:120ms}
  .nav > a:nth-child(2){animation-delay:165ms}
  .nav > a:nth-child(3){animation-delay:210ms}
  .nav > a:nth-child(4){animation-delay:255ms}
  .nav > a:nth-child(5){animation-delay:300ms}
  .nav > a:nth-child(6){animation-delay:345ms}
  .nav > a:nth-child(7){animation-delay:390ms}
}

@keyframes motionHeaderIn{
  from{opacity:0;translate:0 -18px}
  to{opacity:1;translate:0 0}
}

@keyframes motionLogoIn{
  from{opacity:0;transform:scale(.94);filter:blur(5px) drop-shadow(0 4px 14px rgba(0,0,0,.34))}
  to{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 4px 14px rgba(0,0,0,.34))}
}

@keyframes motionNavIn{
  from{opacity:0;translate:0 -10px}
  to{opacity:1;translate:0 0}
}

/* Directional variants extend the site's existing one-time .reveal system. */
.reveal.motion-left{transform:translate3d(calc(var(--motion-distance) * -1),0,0)}
.reveal.motion-right{transform:translate3d(var(--motion-distance),0,0)}
.reveal.motion-scale{transform:translate3d(0,18px,0) scale(.975)}
.reveal.motion-left.in,
.reveal.motion-right.in,
.reveal.motion-scale.in{transform:none}

/* Stagger important children only after their section enters the viewport. */
.motion-enhanced .motion-stagger > .motion-child{
  opacity:0;
  translate:0 22px;
  transition:
    opacity 620ms var(--motion-ease),
    translate 620ms var(--motion-ease),
    filter 620ms var(--motion-ease),
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
  --motion-stagger-delay:calc(var(--motion-order,0) * 72ms + 90ms);
  transition-delay:
    var(--motion-stagger-delay),
    var(--motion-stagger-delay),
    var(--motion-stagger-delay),
    0ms,
    0ms,
    0ms;
  filter:blur(3px);
}

.motion-enhanced .reveal.in.motion-stagger > .motion-child,
.motion-enhanced .reveal.in .motion-stagger > .motion-child{
  opacity:1;
  translate:0 0;
  filter:blur(0);
}

/* Image groups reveal as an editorial sequence without disturbing their crops. */
.motion-enhanced .host-portrait-reel > .motion-child,
.motion-enhanced .gallery-grid > .motion-child{
  translate:0 28px;
}

.motion-enhanced .family-grid > .motion-child:nth-child(2),
.motion-enhanced .gallery-grid > .motion-child:nth-child(even){
  --motion-stagger-delay:calc(var(--motion-order,0) * 78ms + 135ms);
}

/* The guest form receives restrained motion: one card reveal and focus feedback. */
.form-card{
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    border-color .28s ease,
    box-shadow .28s ease;
}

.form-card:focus-within{
  border-color:rgba(255,232,177,.5);
  box-shadow:var(--shadow),0 0 0 1px rgba(255,232,177,.08),0 0 44px rgba(150,79,198,.12);
}

/* Hover motion is limited to devices with a real hover pointer. */
@media (hover:hover) and (pointer:fine){
  .header-logo{
    transition:translate .28s var(--motion-ease),filter .28s ease;
  }
  .header-logo:hover{
    translate:0 -2px;
    filter:drop-shadow(0 10px 20px rgba(217,167,73,.14));
  }

  .stat{
    transition:translate .28s var(--motion-ease),background .28s ease;
  }
  .stat:hover{
    translate:0 -5px;
    background:rgba(255,240,189,.035);
  }

  .host-portrait,
  .gallery-shot{
    transition:translate .34s var(--motion-ease),border-color .34s ease,box-shadow .34s ease;
  }
  .host-portrait:hover,
  .gallery-shot:hover{
    translate:0 -6px;
    border-color:rgba(255,232,177,.48);
    box-shadow:0 30px 72px rgba(2,0,8,.52),0 0 30px rgba(175,106,218,.08);
  }

  .stream-card,
  .social-feed-card{
    transition:translate .34s var(--motion-ease),border-color .34s ease,box-shadow .34s ease;
  }
  .stream-card:hover,
  .social-feed-card:hover{
    translate:0 -5px;
    border-color:rgba(255,232,177,.48);
    box-shadow:0 38px 96px rgba(2,0,8,.64),0 0 30px rgba(189,130,57,.07);
  }

  .episode-art-card a:focus-visible,
  .family-card:focus-within,
  .gallery-shot:focus-within{
    outline:3px solid var(--gold-1);
    outline-offset:5px;
  }
}

/* Shorter distances and fewer expensive effects keep mobile motion smooth. */
@media (max-width:900px){
  :root{
    --motion-duration:580ms;
    --motion-distance:22px;
  }

  .motion-enhanced .motion-stagger > .motion-child{
    translate:0 16px;
    filter:none;
    transition-duration:520ms;
    --motion-stagger-delay:calc(var(--motion-order,0) * 48ms + 50ms);
  }
}

@media (max-width:640px){
  :root{--motion-distance:16px}

  .site-header{animation-duration:520ms}
  .header-logo-image{animation-duration:580ms}

  .motion-enhanced .family-grid > .motion-child,
  .motion-enhanced .gallery-grid > .motion-child,
  .motion-enhanced .host-portrait-reel > .motion-child{
    --motion-stagger-delay:calc(var(--motion-order,0) * 38ms + 35ms);
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header,.header-logo-image,.nav > a{animation:none !important}

  .reveal.motion-left,
  .reveal.motion-right,
  .reveal.motion-scale{
    opacity:1;
    transform:none;
  }

  .motion-enhanced .motion-stagger > .motion-child,
  .motion-enhanced .reveal.in.motion-stagger > .motion-child,
  .motion-enhanced .reveal.in .motion-stagger > .motion-child{
    opacity:1;
    translate:none;
    filter:none;
    transition:none;
  }
}