/* MOTION — the line draws itself; everything else is opacity + transform.
   Yeraldin — see CLAUDE.md before editing.
   Every pre-reveal state lives under .js, so the page is whole without JS. */

/* ================= DRAWINGS =================
   pathLength="1" + stroke-dashoffset. Drawn once, when they enter the view. */
  .draw path,.draw circle{stroke-dasharray:1;stroke-dashoffset:0;}
  .js .draw path,.js .draw circle{stroke-dashoffset:1;}
  .js .draw.in path,.js .draw.in circle{animation:draw 1400ms var(--ease-out) forwards;}
  .draw.in > :nth-child(2){animation-delay:.12s} .draw.in > :nth-child(3){animation-delay:.24s}
  .draw.in > :nth-child(4){animation-delay:.36s} .draw.in > :nth-child(5){animation-delay:.48s}
  .draw.in > :nth-child(6){animation-delay:.60s} .draw.in > :nth-child(7){animation-delay:.72s}
  .draw.in > :nth-child(8){animation-delay:.84s}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  /* the survey marks draw on after the flower: the plant entered into the record */
  .js .survey.in path{animation-duration:780ms;}
  .survey.in > :nth-child(1){animation-delay:1.30s} .survey.in > :nth-child(2){animation-delay:1.36s}
  .survey.in > :nth-child(3){animation-delay:1.44s} .survey.in > :nth-child(4){animation-delay:1.64s}
  .survey.in > :nth-child(5){animation-delay:1.70s} .survey.in > :nth-child(6){animation-delay:1.82s}
  .survey.in > :nth-child(7){animation-delay:1.92s}

  /* the Horizon: road, then frontage ticks left to right, then lot lines */
  .js .horizon.draw.in .road{animation-duration:900ms;}
  .js .horizon.draw.in .tick{animation:draw 300ms var(--ease-out) forwards;animation-delay:calc(.9s + var(--i) * 90ms);}
  .js .horizon.draw.in .lot{animation:draw 600ms var(--ease-out) forwards;animation-delay:2.9s;}

  /* the colibrí draws itself, then rises and settles */
  .js .rise.in{animation:rise 900ms var(--ease-out) 1.4s both;}
  @keyframes rise{0%{transform:none}70%{transform:translateY(-28px)}100%{transform:translateY(-24px)}}


/* ================= HOME HERO — load, once =================
   1. 0.0–1.3s the flower draws itself     2. 1.3–2.1s the survey marks
   3. 1.6–3.8s her portrait develops up out of the green, like a plate
   4. 2.4s the hairline, 2.6s the wordmark settles (.40em → .30em — the one
      letter-spacing exception), 3.0s the first phrase and label arrive */
  .js .hero .field img{animation:develop 2200ms var(--ease-out) 1.6s both;}
  @keyframes develop{
    from{opacity:0;filter:saturate(0) brightness(.42) contrast(1.15);transform:scale(1.05)}
    60%{opacity:.8;filter:saturate(.6) brightness(.85)}
    to{opacity:1;filter:none;transform:none}
  }
  @media (max-width:820px){
    .js .hero .field img{animation-name:developSoft;}
    @keyframes developSoft{from{opacity:0;filter:saturate(0) brightness(.42)}to{opacity:1;filter:none}}
  }
  .js .hero .hr{transform:scaleX(0);transform-origin:left;animation:wipeIn 620ms var(--ease-out) 2.4s forwards;}
  @keyframes wipeIn{to{transform:scaleX(1)}}
  .js .hero .wordmark{opacity:0;transform:translateY(8px);letter-spacing:.40em;animation:wordmark 900ms var(--ease-out) 2.6s forwards;}
  @keyframes wordmark{to{opacity:1;transform:none;letter-spacing:.30em}}
  .js .hero .phrases,.js .hero .states{opacity:0;transform:translateY(8px);animation:settle 420ms var(--ease-out) 3.0s forwards;}
  .js .hero .states{animation-delay:3.3s;}
  @keyframes settle{to{opacity:1;transform:none}}

/* ================= REVEAL =================
   Text lands first; the image completes it a beat later. */
  .js [data-reveal]{opacity:0;transform:translateY(16px);
    transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);}
  .js [data-reveal].in{opacity:1;transform:none;}
  .js [data-late]{transition-delay:.9s;}
  .js .label[data-reveal]{transition-delay:.3s;}
  .js [data-late] .label,.js .d-media .label{transition-delay:0s;}
  .js .prose:nth-child(2){transition-delay:.1s} .js .prose:nth-child(3){transition-delay:.2s}
  .js .note:nth-child(2){transition-delay:.1s} .js .note:nth-child(3){transition-delay:.2s}

  /* the label's hairline draws left to right, after its image */
  .js .label .wipe{transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out) .5s;}
  .js .in .label .wipe,.js .label.in .wipe{transform:scaleX(1);}
  .js [data-late].in .label .wipe{transition-delay:1.3s;}

  /* the home portrait develops rather than fades */
  .js .portrait img{opacity:0;}
  .js .portrait.in img{animation:develop 1600ms var(--ease-out) 1.1s both;}
  @keyframes develop{
    from{opacity:0;filter:saturate(0) brightness(.7)}
    to{opacity:1;filter:saturate(.88) contrast(.97) brightness(.99)}
  }

  nav.topbar{transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);border-bottom-color:transparent;}
  nav.topbar.scrolled{border-bottom-color:var(--rule);}

/* About: each chapter photograph slides in from its own side as the chapter arrives */
  .js .chapter .ch-fig[data-reveal]{transform:translateX(56px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out);}
  .js .chapter.flip .ch-fig[data-reveal]{transform:translateX(-56px);}
  .js .chapter .ch-fig[data-reveal].in{transform:none;}

/* ================= REDUCED MOTION =================
   Every drawing already drawn, every element already in place, no film roll. */
  @media (prefers-reduced-motion:reduce){
    .js .draw path,.js .draw circle{stroke-dashoffset:0!important;animation:none!important;}
    .js .rise.in{animation:none!important;}
    .js [data-reveal]{opacity:1!important;transform:none!important;transition:opacity 300ms linear!important;}
    .js .label .wipe{transform:none!important;transition:none!important;}
    .js .portrait img{opacity:1!important;animation:none!important;}
    .js .hero .field img,.js .hero .wordmark,.js .hero .hr,.js .hero .phrases,.js .hero .states{
      opacity:1!important;transform:none!important;animation:none!important;}
    .js .hero .field img{filter:none!important;}
    .js .hero .wordmark{letter-spacing:.30em!important;}
    
    .frame img{transform:none!important;}
  }