/* Theme 0.9.0: more life in the pages. Loaded last. Notes: docs/superpowers/plans/NOTES-motion.md.

   Rules for everything here:
   - every moving thing sits inside prefers-reduced-motion:no-preference;
   - only transform (and translate, rotate, scale), opacity, clip-path and filter move;
   - things that follow the scroll need a browser with scroll timelines (@supports) and stay still
     otherwise; things that appear once use motion.js's IntersectionObserver, which hides nothing
     unless the script runs (html.reveal-on). */

/* Sections clip their art without becoming scroll boxes (overflow:hidden made each section its own
   scroller, which stops scroll-linked motion inside it). Browsers without "clip" keep "hidden". */
[data-art],.hero,.pagehero{overflow:clip}

/* a design opened from an address (#s-15) or from search stops below the sticky header */
figure[id],.grouphead[id],section[id]{scroll-margin-top:150px}
@media (min-width:900px){figure[id],.grouphead[id],section[id]{scroll-margin-top:140px}}

@media (prefers-reduced-motion:no-preference){

  /* ---------- the names unroll like a hanging scroll: the heading opens downward while it settles,
     then its translation and the line under it follow ---------- */
  .reveal-on .head[data-reveal],.reveal-on .grouphead[data-reveal]{opacity:1;transform:none}
  .reveal-on .head[data-reveal] h2,.reveal-on .grouphead[data-reveal] h2{clip-path:inset(-.35em -.2em 100% -.2em);transform:translateY(.45em);transition:clip-path 1s var(--ease),transform 1s var(--ease)}
  .reveal-on .head[data-reveal].in h2,.reveal-on .grouphead[data-reveal].in h2{clip-path:inset(-.35em -.2em -.45em -.2em);transform:none}
  .reveal-on .head[data-reveal] h2 .gloss,.reveal-on .head[data-reveal]>p,.reveal-on .grouphead[data-reveal]>span{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal-on .head[data-reveal].in h2 .gloss,.reveal-on .grouphead[data-reveal].in>span{opacity:1;transform:none;transition-delay:.28s}
  .reveal-on .head[data-reveal].in>p{opacity:1;transform:none;transition-delay:.42s}

  /* ---------- arch photos open from the bottom, like the hero's doorway, one after another ---------- */
  .reveal-on [data-reveal]:not(.in) .arch img,.reveal-on .r-pics li[data-reveal]:not(.in) img{clip-path:inset(100% 0 0 0)}
  .reveal-on [data-reveal].in .arch img{animation:kmUnveil 1.25s var(--ease) calc(var(--i,0) * 90ms + 120ms) both}
  @keyframes kmUnveil{from{clip-path:inset(100% 0 0 0);scale:1.14}to{clip-path:inset(0 0 0 0);scale:1}}
  /* the caption under each photo follows the photo */
  .reveal-on .cat figure[data-reveal] figcaption,.reveal-on .strip figure[data-reveal] figcaption{opacity:0;transition:opacity .8s var(--ease)}
  .reveal-on .cat figure[data-reveal].in figcaption,.reveal-on .strip figure[data-reveal].in figcaption{opacity:1;transition-delay:calc(var(--i,0) * 90ms + 450ms)}

  /* ---------- the paper price menu unfolds from its top edge, then its rows are set down one by one ---------- */
  .reveal-on .menucard[data-reveal]{transform-origin:50% 0;transform:perspective(1400px) rotateX(-16deg) translateY(40px);transition:opacity .9s var(--ease),transform 1.3s var(--ease)}
  .reveal-on .menucard[data-reveal].in{transform:none}
  .reveal-on .menucard[data-reveal] .pr-row{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .reveal-on .menucard[data-reveal].in .pr-row{opacity:1;transform:none;transition-delay:calc(.45s + var(--r,0) * 60ms)}

  /* ---------- gold leaf: one soft light passes over a big gold name when it first shows ---------- */
  @media (forced-colors:none){
    .shine{background:linear-gradient(105deg,var(--gold) 42%,#FFF6DC 50%,var(--gold) 58%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .shine .gloss,.shine>span{-webkit-text-fill-color:currentColor}
    .shine::selection{-webkit-text-fill-color:var(--deep)}
    .shine.shine-go{animation:kmLeaf 1.7s .35s cubic-bezier(.45,0,.25,1) both}
    .anim .hero h1.shine-go{animation:rise 1s var(--ease) both,kmLeaf 1.7s .9s cubic-bezier(.45,0,.25,1) both}
    .anim .pagehero h1.shine-go{animation:rise .9s var(--ease) both,kmLeaf 1.7s .7s cubic-bezier(.45,0,.25,1) both}
    @keyframes kmLeaf{from{background-position:100% 0}to{background-position:0 0}}
  }
  /* inner pages: the page name rises in as the page opens, like the home page's */
  .anim .pagehero h1{animation:rise .9s var(--ease) both}

  /* ---------- petals: a handful drifting down through the first screen (motion.js adds them) ---------- */
  .petals{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:clip}
  .petals i{position:absolute;top:-34px;left:var(--x);width:var(--s);height:var(--s);will-change:transform;animation:kmFall var(--d) linear var(--dl) infinite}
  .petals i::before{content:"";position:absolute;inset:0;background:var(--petal);opacity:var(--a,.8);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat;animation:kmSway calc(var(--d) / 3) ease-in-out var(--dl) infinite alternate}
  .petals i.bloom::before{--shape:var(--bloom)}
  .petals.paused i,.petals.paused i::before{animation-play-state:paused}
  @keyframes kmFall{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--drift),var(--fall,900px),0)}}
  @keyframes kmSway{from{transform:translateX(-16px) rotate(-25deg) rotateY(0deg)}to{transform:translateX(16px) rotate(35deg) rotateY(150deg)}}

  /* ---------- touch: a photo gives a little under the finger and settles back ---------- */
  .cat .arch:active,.strip .arch:active,.occ:active .arch,.r-pics a:active .arch{scale:.965}
}

/* petal colors: mai yellow on the red-and-yellow colors and on the Tết page, peach-blossom pink on
   teal, rose on the Mother's Day page. The shapes are exact geometry: a five-petal blossom and one petal. */
:root{
  --petal:#F4B9B2;
  --shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1C15 3 18 9 14.5 15.5 13 18.5 7 18.5 5.5 15.5 2 9 5 3 10 1Z'/%3E%3C/svg%3E");
  --bloom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg%3E%3Cellipse cy='-4.6' rx='3.3' ry='4.6'/%3E%3Cellipse cy='-4.6' rx='3.3' ry='4.6' transform='rotate(72)'/%3E%3Cellipse cy='-4.6' rx='3.3' ry='4.6' transform='rotate(144)'/%3E%3Cellipse cy='-4.6' rx='3.3' ry='4.6' transform='rotate(216)'/%3E%3Cellipse cy='-4.6' rx='3.3' ry='4.6' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="red"],.km-page-tet{--petal:#F7D46A}
.km-page-mothers{--petal:#F2A0A6}

/* ---------- things that follow the scroll ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* background art drifts more slowly than the page (parallax); it is drawn a little larger so its
       edges never show */
    .art-bg img{animation:kmDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes kmDrift{from{transform:translateY(-6%) scale(1.15)}to{transform:translateY(6%) scale(1.15)}}

    /* the museum ceramics at the section edges float up and turn a little as their section passes
       (this replaces their old endless bobbing, so nothing moves while the page is still) */
    .art-cut img{animation:none}
    .art-cut{animation:kmFloat linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes kmFloat{from{translate:0 70px;rotate:-6deg}to{translate:0 -70px;rotate:6deg}}
    /* framed pieces sway on their nail */
    .art-frame{animation:kmSwing linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes kmSwing{from{translate:0 36px;rotate:-2.5deg}to{translate:0 -36px;rotate:2deg}}
    /* the four Tố nữ scrolls hang at different depths */
    .tonu-row img{animation:kmScrollA linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .tonu-row img:nth-child(odd){animation-name:kmScrollB}
    @keyframes kmScrollA{from{translate:0 26px}to{translate:0 -26px}}
    @keyframes kmScrollB{from{translate:0 56px}to{translate:0 -40px}}
    .tonu-side{animation:kmSwing linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

    /* the big name in the first screen drifts back and fades as the page moves on (a third animation
       next to its entrance and its gold light; they move different properties) */
    .hero h1,.pagehero h1{animation:kmLeave linear both;animation-timeline:scroll(root block);animation-range:0 480px}
    .anim .hero h1{animation:rise 1s var(--ease) both,kmLeave linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0 480px}
    .anim .pagehero h1{animation:rise .9s var(--ease) both,kmLeave linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0 480px}
    @media (forced-colors:none){
      .anim .hero h1.shine-go{animation:rise 1s var(--ease) both,kmLeaf 1.7s .9s cubic-bezier(.45,0,.25,1) both,kmLeave linear both;animation-timeline:auto,auto,scroll(root block);animation-range:normal,normal,0 480px}
      .anim .pagehero h1.shine-go{animation:rise .9s var(--ease) both,kmLeaf 1.7s .7s cubic-bezier(.45,0,.25,1) both,kmLeave linear both;animation-timeline:auto,auto,scroll(root block);animation-range:normal,normal,0 480px}
    }
    @keyframes kmLeave{to{translate:0 90px;filter:opacity(.25) blur(2px)}}

    /* how to order: the line between the steps draws itself as you read down */
    .steps li::after{transform-origin:50% 0;animation:kmDrawY linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
    .steps li::before{animation:kmDiamond linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
    @keyframes kmDrawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes kmDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes kmDiamond{from{transform:rotate(-135deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
    @media (min-width:900px){.steps li::after{transform-origin:0 50%;animation-name:kmDrawX}}
  }
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* a thin gold thread under the header shows how far down the page you are */
    .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--ochre),var(--gold));transform-origin:0 50%;transform:scaleX(0);pointer-events:none;animation:kmThread linear both;animation-timeline:scroll(root block)}
    @keyframes kmThread{to{transform:scaleX(1)}}
  }
}

/* ---------- opening a photo: the arch grows into the viewer (Chrome, Edge, Safari 18+) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.km-lbvt::view-transition-old(root){animation:none}
  html.km-lbvt::view-transition-new(root){animation:kmLbFade .3s ease-out both}
  @keyframes kmLbFade{from{opacity:0}}
  ::view-transition-group(km-photo){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  ::view-transition-old(km-photo),::view-transition-new(km-photo){height:100%;object-fit:contain}
}
html.km-lbvt .lightbox,html.km-lbvt .lightbox img{transition:none}