/* oaksandoars.com — the intro, then the welcome, then the seasons,
   then scarlett. the intro is a dark forest floor, deeper green than
   what follows, with little ants crossing the dirt; the welcome is
   a flowing waterfall and vivid forest detail, the name arriving
   over it like a film title card. every board is living footage
   (the live-action pass, 2026-10-28 — jameel, at the live site:
   "change the other images to live action like the running river
   images"): the intro's forest, then fall, winter, the blizzard
   and spring each move as the waterfall moves, and only the board
   on screen plays. scarlett's board closes the deck on a light
   ground, green on white (her own sheet: assets/scarlett.css).
   pages beyond these are built page by page, with jameel. */
body.theme-oaks {
  --ink: #eef7ee;
  --paper: #0c3527;
  --line: rgba(238, 247, 238, 0.55);
  --bubble: rgba(255, 255, 255, 0.06);
  --visitor-bubble: rgba(255, 255, 255, 0.16);
  margin: 0;
  color: #eef7ee;
  background: #04120a;
  font-family: Georgia, 'Times New Roman', serif;
  overflow: hidden;
}

/* ---------------- the welcome screen ---------------- */
.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #04120a;
  opacity: 0;
  transition: opacity 0.85s ease;
  pointer-events: none;
}
.screen.is-on { opacity: 1; pointer-events: auto; }
.screen-poster, .screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.screen-poster { z-index: 0; animation: posterDrift 42s ease-in-out infinite alternate; }
.screen-video { z-index: 1; }

/* the house motion language (jameel, from the live site, 2026-10-28):
   imagery lives — nothing on the page reads as a frozen photograph.
   the poster beneath the video drifts and breathes on a long, slow
   ken-burns transform, so the page is alive while the video loads,
   and stays alive even if a browser refuses autoplay. transform
   only: no extra assets, no layout cost. */
@keyframes posterDrift {
  from { transform: scale(1.03) translate(0, 0); }
  to { transform: scale(1.13) translate(-1.6%, 1.2%); }
}

/* the darkening that keeps the title legible — a soft centre-weighted
   veil plus a whisper of top/bottom shade. filmic, not a ui gradient. */
.veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 62% at 50% 46%, rgba(3, 12, 7, 0.34) 0%, rgba(3, 12, 7, 0.12) 55%, rgba(3, 12, 7, 0) 78%),
    linear-gradient(180deg, rgba(3, 12, 7, 0.22) 0%, rgba(3, 12, 7, 0) 26%, rgba(3, 12, 7, 0) 72%, rgba(3, 12, 7, 0.30) 100%);
}

/* ---------------- the title card ---------------- */
.title-card {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  color: #ffffff;
  pointer-events: none;
}
/* the greeting above the name (jameel, 2026-10-28): one modest line —
   "welcome to" — arriving just ahead of the title, the subtitle
   completing the sentence beneath it. */
.film-welcome {
  margin: 0 0 clamp(0.9rem, 2.6vh, 1.6rem);
  font-size: clamp(0.85rem, 2.3vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  transform: translateX(0.17em);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: titleArrive 2.6s cubic-bezier(0.22, 0.61, 0.21, 1) 0.25s forwards;
}
/* the name holds one line at every width (jameel, 2026-10-28): fluid
   sizing — small enough at mobile that the whole name, letterspacing
   included, fits a ~360px screen on a single line; the ceiling keeps
   its presence on desktop. */
.film-title {
  font-weight: 400;
  font-size: clamp(1.6rem, 8.6vw, 6.8rem);
  line-height: 1.08;
  letter-spacing: 0.38em;
  white-space: nowrap;
  transform: translateX(0.19em);
  text-shadow: 0 1px 34px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 0.35);
  margin: 0;
  opacity: 0;
  animation: titleArrive 3.4s cubic-bezier(0.22, 0.61, 0.21, 1) 0.9s forwards;
}
.film-sub {
  margin: clamp(1.1rem, 3.2vh, 2rem) 0 0;
  font-size: clamp(0.78rem, 2.1vw, 1.12rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  transform: translateX(0.17em);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: subArrive 2.8s cubic-bezier(0.22, 0.61, 0.21, 1) 2.3s forwards;
}
@keyframes titleArrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes subArrive { from { opacity: 0; } to { opacity: 0.94; } }

/* ---------------- the intro screen ---------------- */
/* the ants cross the dirt on a canvas over the image and under the
   words — code, not footage, so the layer weighs nothing. */
.ant-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.intro-card {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 7vw;
  color: #ffffff;
  pointer-events: none;
}
.intro-title {
  font-weight: 400;
  font-size: clamp(1.7rem, 5.4vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: 0.22em;
  transform: translateX(0.11em);
  margin: 0;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: titleArrive 3s cubic-bezier(0.22, 0.61, 0.21, 1) 0.7s forwards;
}
.intro-text {
  margin: clamp(1.4rem, 4vh, 2.4rem) 0 0;
  max-width: 37em;
  font-size: clamp(0.98rem, 2.6vw, 1.28rem);
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.65), 0 0 3px rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: subArrive 2.8s cubic-bezier(0.22, 0.61, 0.21, 1) 1.9s forwards;
}

/* ---------------- the season boards ---------------- */
/* each season is one vivid still under the house drift. no season
   word stands on a board (jameel, 2026-10-28, striking the fall
   eyebrow the day it was set: "remove the fall title. we don't
   need it.") — the .season-label rule went with it. the words
   begin at the heading: the cadence opens there now, heading
   first, the paragraph after. one title treatment serves every
   board (jameel, 2026-10-28): winter and the blizzard first stood
   in a smaller long-title variant for their statement headings,
   and he struck the distinction — the variant rule is gone, and
   the long headings wrap in the standard treatment like the
   rest. spring alone reverses the cadence (below): description
   first, title last. */
.season-card {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 7vw;
  color: #ffffff;
  pointer-events: none;
}
.season-title {
  font-weight: 400;
  font-size: clamp(1.7rem, 5.4vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: 0.22em;
  transform: translateX(0.11em);
  margin: 0;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: titleArrive 3s cubic-bezier(0.22, 0.61, 0.21, 1) 0.3s forwards;
}
.season-text {
  margin: clamp(1.4rem, 4vh, 2.4rem) 0 0;
  max-width: 37em;
  font-size: clamp(0.98rem, 2.6vw, 1.28rem);
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.65), 0 0 3px rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: subArrive 2.8s cubic-bezier(0.22, 0.61, 0.21, 1) 1.3s forwards;
}
/* spring reverses the cadence (jameel, 2026-10-28: "we start with
   the description and end with the title"): the paragraph stands
   first in the card and arrives first, on the heading's early
   beat; the title takes the paragraph's late beat and closes the
   board. the gap between them moves to the title. */
.season-card-reversed .season-text {
  margin-top: 0;
  animation-delay: 0.3s;
}
.season-card-reversed .season-title {
  margin-top: clamp(1.4rem, 4vh, 2.4rem);
  animation-delay: 1.9s;
}

/* ---------------- reduced motion: the poster stands ---------------- */
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
  .screen-poster { animation: none; }
  .screen-video { display: none; }
  .ant-layer { display: none; }
  .film-welcome, .film-title, .film-sub, .intro-title, .intro-text,
  .season-title, .season-text { animation: none; }
  .film-welcome { opacity: 1; }
  .film-title { opacity: 1; }
  .film-sub { opacity: 0.94; }
  .intro-title { opacity: 1; }
  .intro-text { opacity: 0.94; }
  .season-title { opacity: 1; }
  .season-text { opacity: 0.94; }
}