/* ============================================================
   PaperCalc's sibling project: same "handcrafted, not templated"
   spirit. Section order below matches the page top to bottom.
   ============================================================ */

:root {
  --sky-top: #A8CDE0;
  --sky-bottom: #DCEDD8;
  --cream: #FDF6E9;
  --meadow: #E8F0E3;
  --ink: #3d4a3a;
  --ink-soft: #5c6b57;
  --gold: #E8B84B;
  --gold-deep: #B8862E;
  --serif: 'Fraunces', serif;
  --sans: 'Nunito', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); overflow-x: hidden; }

/* ============================================================
   WIND LAYER
   Fixed over the entire page (not just the hero) since wind is a
   recurring visual motif through the whole site, not a hero-only
   decoration. Only 4 items total, each drifting on its own very
   slow, very long animation loop so it reads as ambient rather
   than as an eye-catching effect.
   ============================================================ */
.wind-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.wind-item {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  top: -30px;
  left: -30px;
}
/* Each item: drifts diagonally across the full viewport, spins
   gently, fades in/out at the start/end so it never "pops". Long
   durations (38-55s) + big delays keep it rare and unobtrusive. */
.leaf-1  { animation: wind-drift 42s linear infinite 0s; }
.leaf-2  { animation: wind-drift 55s linear infinite 14s; width: 16px; height: 16px; }
.seed-1  { animation: wind-drift 48s linear infinite 26s; width: 14px; height: 14px; }
.petal-1 { animation: wind-drift 60s linear infinite 34s; width: 18px; height: 18px; }

@keyframes wind-drift {
  0%   { transform: translate(-5vw, 8vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.75; }
  50%  { transform: translate(55vw, 45vh) rotate(160deg); }
  92%  { opacity: 0.5; }
  100% { transform: translate(115vw, 20vh) rotate(320deg); opacity: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  overflow: hidden;
}

/* -- drifting background clouds (decorative, separate from the
      foreground "wind" leaves/seeds/petals above) -- */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  filter: blur(0.5px);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.cloud-1 { width: 140px; height: 40px; top: 12%; left: -160px; animation: drift 42s linear infinite; }
.cloud-1::before { width: 60px; height: 60px; top: -30px; left: 15px; }
.cloud-1::after { width: 40px; height: 40px; top: -18px; left: 70px; }

.cloud-2 { width: 100px; height: 30px; top: 26%; left: -140px; opacity: 0.75; animation: drift 58s linear infinite 6s; }
.cloud-2::before { width: 44px; height: 44px; top: -20px; left: 10px; }
.cloud-2::after { width: 30px; height: 30px; top: -12px; left: 50px; }

.cloud-3 { width: 80px; height: 24px; top: 6%; left: -120px; opacity: 0.6; animation: drift 50s linear infinite 20s; }
.cloud-3::before { width: 34px; height: 34px; top: -16px; left: 8px; }
.cloud-3::after { width: 24px; height: 24px; top: -10px; left: 40px; }

.cloud-4 { width: 120px; height: 34px; top: 40%; left: -150px; opacity: 0.55; animation: drift 66s linear infinite 12s; }
.cloud-4::before { width: 50px; height: 50px; top: -24px; left: 12px; }
.cloud-4::after { width: 34px; height: 34px; top: -14px; left: 60px; }

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 300px)); }
}

/* rising gold light particles, unrelated to the wind layer */
.particles span {
  position: absolute;
  bottom: -10px;
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.75;
  animation: rise 14s ease-in infinite;
}
.particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.particles span:nth-child(2) { left: 25%; animation-delay: 2.3s; }
.particles span:nth-child(3) { left: 42%; animation-delay: 4.6s; }
.particles span:nth-child(4) { left: 60%; animation-delay: 1.2s; }
.particles span:nth-child(5) { left: 76%; animation-delay: 5.8s; }
.particles span:nth-child(6) { left: 90%; animation-delay: 3.4s; }

@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(-45vh) translateX(12px); }
  90% { opacity: 0.4; }
  100% { transform: translateY(-85vh) translateX(-8px); opacity: 0; }
}

.hero-content { position: relative; z-index: 2; text-align: center; padding: 40px 20px; }

/* -- sequenced hero reveal: title, then subtitle, then photo, then
      the scroll cue. Each element uses the SAME fade-up keyframe but
      a later animation-delay, so they appear one after another. -- */
.seq-title  { animation: fadeUp 0.8s ease 0.2s backwards; }
.seq-subtitle { animation: fadeUp 0.8s ease 0.5s backwards; }
.seq-photo  { animation: revealPortrait 1s ease 0.85s backwards; }
.seq-scroll { animation: fadeUp 0.8s ease 1.3s backwards; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealPortrait {
  from { opacity: 0; transform: scale(0.9); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 6vw, 46px);
  margin: 0 0 8px;
}
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* -- organic photo frame: soft cream ring + gentle shadow + a
      diffuse halo behind it, instead of a plain white border -- */
.portrait { margin: 0 0 22px; position: relative; display: inline-block; }
.portrait::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 246, 233, 0.85) 0%, rgba(253, 246, 233, 0) 70%);
  z-index: -1;
}
.portrait img {
  width: 148px; height: 148px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--cream);
  box-shadow: 0 8px 20px rgba(60, 70, 50, 0.22);
}
.portrait figcaption {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-soft);
}

/* -- scroll cue: small bouncing arrow + label, links to #bio -- */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scroll-cue svg { animation: bounce 1.8s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ============================================================
   SECTION SEPARATORS
   All-SVG, single flat fill, matched to the background color of
   the section they lead into — kept intentionally simple so they
   read as scenery rather than as heavy decoration.
   ============================================================ */
.separator { display: block; width: 100%; }
.sep-clouds { position: absolute; bottom: -1px; left: 0; height: 70px; z-index: 1; }
.sep-clouds path { fill: var(--cream); }
.sep-hill { height: 50px; margin-top: -1px; }
.sep-hill path { fill: var(--meadow); }
.sep-branch { height: 40px; }
.sep-branch path { fill: none; stroke: #8FA66B; stroke-width: 2; stroke-linecap: round; }

/* ============================================================
   SHARED SECTION LAYOUT
   ============================================================ */
main { max-width: 720px; margin: 0 auto; padding: 0 24px; }

section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 18px;
}

/* generic scroll-reveal: whole section fades/slides in once */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* per-item reveal used inside the timeline for the staggered,
   "drawn as you scroll" effect (see script.js) */
.reveal-item { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal-item.visible { opacity: 1; transform: translateY(0); }

.bio { background: var(--cream); padding: 48px 32px; border-radius: 18px; margin-top: -30px; position: relative; z-index: 2; }
.bio h2 { color: var(--gold-deep); }
.bio p { font-size: 15.5px; line-height: 1.85; color: #4a4030; margin: 0 0 16px; }
.bio p:last-child { margin-bottom: 0; }
.bio em { font-style: italic; color: var(--gold-deep); }

/* ============================================================
   TIMELINE
   The connecting line is drawn per-item (not one long static bar)
   so each segment can "grow" in sync with its own dot as it comes
   into view, rather than the whole line being present from the start.
   ============================================================ */
.timeline-section { background: var(--meadow); padding: 48px 32px; border-radius: 18px; }
.timeline-section h2 { color: #3d5a3a; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  position: relative;
}
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px; top: 18px;
  width: 1.5px;
  background: rgba(127, 166, 107, 0.4);
  height: 0;
  transition: height 0.6s ease 0.15s;
}
.timeline li.visible:not(:last-child)::before { height: calc(100% - 18px); }

.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #7FA66B;
  margin-top: 5px;
  flex-shrink: 0;
  transform: scale(0);
  transition: transform 0.35s ease;
}
.timeline li.visible .dot { transform: scale(1); }
.timeline li:hover .dot { transform: scale(1.35); }

.timeline-content .year {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: #3d5a3a;
  display: block;
  margin-bottom: 2px;
}
.timeline-content p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.timeline-content em { font-style: italic; color: #3d5a3a; }

/* ============================================================
   MASTERPIECES (bonus section)
   No real film posters (copyright) — original flat-shape emblems
   instead. Hover motion is the "translateY + scale + shadow"
   combo requested, kept soft.
   ============================================================ */
.masterpieces { padding: 8px 0 12px; }
.masterpieces h2 { color: var(--gold-deep); text-align: center; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}
.film-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 18px 12px 16px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.film-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px rgba(60, 70, 50, 0.18);
}
.film-emblem { width: 44px; height: 44px; margin: 0 auto 10px; transition: filter 0.25s ease; }
.film-card:hover .film-emblem { filter: saturate(1.3); }
.film-title { font-family: var(--serif); font-size: 13.5px; margin: 0; color: var(--ink); line-height: 1.3; }
.film-year { font-size: 12px; color: var(--ink-soft); margin: 2px 0 0; }

/* ============================================================
   QUOTE
   Deliberately kept to the same simple opacity+translateY reveal
   as the rest of the page (via .reveal above) rather than a
   character-by-character typewriter effect, for visual consistency
   and reliability across content lengths.
   ============================================================ */
.quote-section { padding: 56px 20px 60px; text-align: center; }
blockquote {
  margin: 0 auto;
  max-width: 460px;
  border: 1.5px dashed var(--gold);
  border-radius: 14px;
  padding: 28px 26px 22px;
  position: relative;
  background: rgba(232, 184, 75, 0.06);
}
.quote-mark {
  font-family: var(--serif);
  font-size: 46px;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-deep);
  margin: 0;
}
blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ============================================================
   NIGHT FOOTER
   A closing "scene" rather than a plain sign-off line: dark sky +
   a handful of CSS-only twinkling stars (positioned/sized by
   script.js, since a fixed count of random dots is easier to
   generate in JS than to hand-place in CSS) + a second quote.
   ============================================================ */
.night-footer {
  position: relative;
  background: linear-gradient(180deg, #1c2a3a 0%, #0f1720 100%);
  padding: 64px 20px 44px;
  text-align: center;
  overflow: hidden;
  margin-top: 30px;
}
.stars { position: absolute; inset: 0; }
.stars span {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}
.closing-quote {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: #f2ede0;
  max-width: 480px;
  margin: 0 auto 8px;
  line-height: 1.5;
}
.closing-cite { position: relative; font-size: 12.5px; color: #9aa7b5; margin: 0 0 26px; }
.closing-cite em { font-style: italic; }
.credits { position: relative; font-size: 11.5px; color: #6b7686; max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .bio, .timeline-section { padding: 34px 22px; border-radius: 14px; }
  .hero { min-height: 70vh; }
  .portrait img { width: 118px; height: 118px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .particles span, .wind-item, .reveal, .reveal-item, .scroll-cue svg, .stars span {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-item, .timeline li::before, .dot { opacity: 1; transform: none; height: auto; }
}