/* Scroll and hover animations for the V1 landing page.
   Everything is scoped under html.anim, which is only added when the visitor
   hasn't asked for reduced motion (see the small script in <head>). */

:root { --ease: cubic-bezier(.22, .61, .36, 1); }

/* ---------- Reveal on scroll ---------- */
/* Hidden until animations.js adds .is-in when the element comes into view.
   --d is a small delay so items in a group appear one after another. */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.anim [data-reveal="scale"] { transform: scale(.97); }
.anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Photos inside revealed blocks settle with a slow, slight zoom-out */
.anim [data-reveal] .ph img {
  transform: scale(1.1);
  transition: transform 1.6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.anim [data-reveal].is-in .ph img { transform: none; }

/* ---------- Hero, on page load (runs once) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes pop  { from { opacity: 0; transform: scale(.3); } }
.hero-load .hero .mono      { animation: rise .8s var(--ease) .1s both; }
.hero-load .hero h1         { animation: rise 1.1s var(--ease) .2s both; }
.hero-load .hero .inline-ph { animation: pop .9s var(--ease) .75s both; }
.hero-load .hero .inline-ph.round { animation-delay: .95s; }
.hero-load .hero-bottom     { animation: rise .9s var(--ease) 1s both; }

/* ---------- Header: thin line and soft shadow once you scroll ---------- */
.anim .hdr { transition: box-shadow .35s var(--ease); }
.anim .hdr.is-scrolled { box-shadow: 0 1px 0 rgba(42,29,20,.1), 0 10px 30px -18px rgba(42,29,20,.35); }

/* Nav links: underline grows from the left */
.anim .hdr nav a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease), color .2s, opacity .2s;
}
.anim .hdr nav a:hover { background-size: 100% 1px; }

/* ---------- Buttons ---------- */
.anim .btn { transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
.anim .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(42,29,20,.45); }
.anim .btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.anim .btn--ghost:hover { background: var(--ink); color: var(--cream); box-shadow: none; }

/* ---------- Small hover touches ---------- */
.anim .uni .mono { transition: transform .3s var(--ease), color .3s, opacity .3s; }
.anim .uni:hover .mono { transform: translateX(6px); color: var(--terracotta); opacity: 1; }
.anim .uni .ph { transition: transform .4s var(--ease); }
.anim .uni:hover .ph { transform: scale(1.05); }



/* ---------- Founders: bio cards slide out from under the photos ---------- */
/* Faster than the other reveals and with a tiny overshoot, so it catches the eye.
   Each card starts only when the card itself is well inside the screen (animations.js adds .is-out);
   if both come in together, Erica's follows .2s after Nikita's. */
.anim .founders-photos .bio {
  opacity: 0;
  transform: translateY(-70px) scale(.96);
  transition: opacity .35s ease .1s, transform .55s cubic-bezier(.3, 1.35, .5, 1) .1s;
}
.anim .founders-photos .founder:last-child .bio { transition-delay: .3s; }
.anim .founders-photos .bio.is-out { opacity: 1; transform: none; }
/* While a card is still hidden its photo keeps all four corners round; they square off as the card joins it */
.anim .founders-photos .ph { transition: border-radius .3s var(--ease) .1s; }
.anim .founders-photos .founder:last-child .ph { transition-delay: .3s; }
.anim .founders-photos .founder:not(:has(.bio.is-out)) .ph { border-radius: 24px; }

/* ---------- Handwritten notes: written in, then the arrow is drawn ---------- */
/* Plays when the block around the note is revealed (.is-in). The note appears left to
   right as if being written, the arrow draws after it, the arrowhead last. Arrow paths
   need pathLength="1". --scrawl-d delays the whole thing, e.g. for a second note. */
.anim .scrawl { clip-path: inset(-20% 100% -20% -10%); transition: clip-path 1s cubic-bezier(.45, .05, .35, 1) var(--scrawl-d, .45s); }
.anim .is-in .scrawl { clip-path: inset(-20% -10% -20% -10%); }
.anim .scrawl-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, .05, .35, 1) calc(var(--scrawl-d, .45s) + .9s); }
.anim .scrawl-arrow path + path { transition-duration: .25s; transition-delay: calc(var(--scrawl-d, .45s) + 1.75s); }
.anim .is-in .scrawl-arrow path { stroke-dashoffset: 0; }

/* FAQ: animations.js animates the height; this keeps the text from spilling out */
.anim .faq details { overflow: hidden; }
/* Pointing at a question: the text slides slightly left and the arrow nudges; the arrow turns when opened */
.anim .faq summary span { transition: transform .45s var(--ease); }
.anim .faq summary:hover span { transform: translateX(-8px); }
.anim .faq summary::after { transition: translate .45s var(--ease), rotate .45s var(--ease); }
.anim .faq summary:hover::after { translate: -4px 0; }

/* Jumping to a section from the menu stops below the sticky header */
.anim section[id] { scroll-margin-top: 70px; }

/* ---------- Safety net for reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim [data-reveal], .anim [data-reveal] .ph img { opacity: 1; transform: none; transition: none; }
  .hero-load .hero * { animation: none !important; }
}