/* Ancient Grove — home page: video hero, numbers, portraits, featured trees, discover, about */

/* hero: real canopy footage, graded into the night palette */
.hero-video { background: var(--night); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) contrast(1.06) brightness(.82); }
.hero-video::before {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--glass-rgb), .55), transparent 60%),
    linear-gradient(90deg, rgba(var(--glass-rgb), .88) 0%, rgba(var(--glass-rgb), .55) 42%, rgba(var(--glass-rgb), .2) 70%),
    linear-gradient(180deg, rgba(var(--glass-rgb), .35) 0%, transparent 25%, transparent 65%, var(--night) 100%),
    linear-gradient(0deg, rgba(36, 54, 30, .35), rgba(160, 120, 50, .12));
}
html[dir="rtl"] .hero-video::before {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--glass-rgb), .55), transparent 60%),
    linear-gradient(270deg, rgba(var(--glass-rgb), .88) 0%, rgba(var(--glass-rgb), .55) 42%, rgba(var(--glass-rgb), .2) 70%),
    linear-gradient(180deg, rgba(var(--glass-rgb), .35) 0%, transparent 25%, transparent 65%, var(--night) 100%),
    linear-gradient(0deg, rgba(36, 54, 30, .35), rgba(160, 120, 50, .12));
}
.hero-video h1 { max-width: 12ch; }
.hero-quote { max-width: 46ch; font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.75; color: var(--parchment); border-inline-start: 2px solid var(--gold); padding-inline-start: var(--s5); }
.video-toggle { position: absolute; z-index: 3; bottom: clamp(3rem, 9vh, 6rem); inset-inline-start: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(var(--glass-rgb), .55); backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center; }
html[dir="rtl"] .video-toggle { transform: translateX(50%); }
.video-toggle:hover { border-color: var(--gold); }
.video-toggle span { width: 12px; height: 14px; border-inline: 3.5px solid var(--parchment); box-sizing: border-box; }
.video-toggle.paused span { border: 0; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid var(--parchment); margin-left: 3px; }
@media (max-width: 760px) { .video-toggle { bottom: 1.25rem; inset-inline-start: auto; inset-inline-end: var(--gutter); transform: none; } html[dir="rtl"] .video-toggle { transform: none; } }

/* numbers */
.numbers { padding-block: var(--s7) var(--s5); }
.numbers-head { margin-bottom: var(--s4); }
.numbers .stats { grid-template-columns: repeat(var(--cols, 4), 1fr); }
.stat .num .pre { font-size: .45em; color: var(--gold); vertical-align: top; position: relative; top: .35em; margin-inline-end: .1em; }
@media (max-width: 760px) { .numbers .stats { grid-template-columns: repeat(2, 1fr); } }

/* portraits of the elders: full-bleed archive photographs */
.portraits { position: relative; height: min(92svh, 920px); min-height: 520px; overflow: hidden; isolation: isolate; margin-top: var(--s7); }
.slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; transition: opacity 1.6s ease-in-out; }
.slide.leaving { z-index: 0; } .slide.active { z-index: 1; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.slide.active img, .slide.leaving img { animation: push 9s linear forwards; }
.portrait-text.in > * { animation: textin .9s var(--ease) both; }
.portrait-text.in > :nth-child(2) { animation-delay: .1s; } .portrait-text.in > :nth-child(3) { animation-delay: .2s; }
@keyframes textin { from { opacity: 0; transform: translateY(14px); } }
@keyframes push { to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .slide.active img { animation: none; } }
.portraits::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 52%, rgba(var(--glass-rgb), .92) 100%), linear-gradient(90deg, rgba(var(--glass-rgb), .55), transparent 55%); }
html[dir="rtl"] .portraits::after { background: linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 52%, rgba(var(--glass-rgb), .92) 100%), linear-gradient(270deg, rgba(var(--glass-rgb), .55), transparent 55%); }
.portrait-info { position: absolute; z-index: 2; inset-inline: 0; bottom: clamp(2rem, 6vh, 4rem); }
.portrait-text { min-height: 6.5rem; margin-top: var(--s3); }
.portrait-text h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.portrait-text p { color: var(--parchment); margin-top: var(--s2); }
.portrait-text .btn { margin-top: var(--s2); }
.portrait-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.portrait-controls .icon-btn { width: 42px; height: 42px; background: rgba(var(--glass-rgb), .55); backdrop-filter: blur(6px); }
.p-play span { width: 11px; height: 13px; border-inline: 3px solid var(--parchment); box-sizing: border-box; }
.p-play.paused span { width: 0; height: 0; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--parchment); margin-left: 3px; }
.portrait-dots { display: flex; gap: var(--s2); flex-wrap: wrap; margin-inline-start: var(--s3); }
.portrait-dots button { width: 54px; height: 22px; border: 0; background: none; padding: 9px 0; cursor: pointer; }
.portrait-dots i { display: block; height: 3px; border-radius: 3px; background: rgba(236, 227, 204, .28); overflow: hidden; position: relative; }
.portrait-dots i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
html[dir="rtl"] .portrait-dots i::after { transform-origin: right; }
/* the current slide's bar fills over the slide's time; paused it freezes, off screen it rests dimmed */
.portrait-dots button.run i::after { animation: fill var(--slide, 6.5s) linear forwards; }
.portrait-dots button.frozen i::after { animation-play-state: paused; }
.portrait-dots button.hold i::after { transform: scaleX(1); opacity: .45; }
@keyframes fill { to { transform: scaleX(1); } }

/* quick facts and the framed photograph */
/* quick facts: three tiles, each led by its figure, separated by fine gold rules */
.facts-card { margin-top: var(--s6); max-width: 560px; }
.facts-card .eyebrow { margin-bottom: var(--s4); }
.facts-card ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-block: 1px solid rgba(210, 174, 99, .22); }
.facts-card li { display: grid; align-content: start; gap: var(--s2); padding: var(--s4) var(--s4) var(--s4) 0; }
.facts-card li + li { border-inline-start: 1px solid rgba(210, 174, 99, .16); padding-inline-start: var(--s4); }
.facts-card .stat-icon { width: 26px; height: 26px; margin: 0; }
.fact-num { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: var(--gold-soft); font-weight: 400; }
.fact-text { font-size: .85rem; line-height: 1.5; color: var(--parchment-soft); }
.fact-text b { color: var(--parchment); font-weight: 600; }
@media (max-width: 520px) { .facts-card li + li { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid rgba(210, 174, 99, .16); } }
a.frame { display: block; text-decoration: none; }
a.frame img { transition: transform 1.2s var(--ease); }
a.frame:hover img { transform: scale(1.04); }

/* featured trees: one large, two stacked */
.featured { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); min-height: 640px; }
.feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--canopy); isolation: isolate; min-height: 300px; }
.feature.big { grid-row: span 2; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.feature:hover img { transform: scale(1.05); }
.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(var(--glass-rgb), .92)); }
.feature .body { position: absolute; inset: auto 0 0; padding: var(--s5) var(--s6); }
.feature h3 { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.feature.big h3 { font-size: clamp(2rem, 4vw, 3.4rem); }
.feature dl { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s3) 0 0; }
.feature dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
html[lang="ar"] .feature dt { letter-spacing: 0; font-size: .82rem; }
.feature dd { margin: 0; color: var(--parchment); }
@media (max-width: 900px) { .featured { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; } .feature.big { grid-row: auto; min-height: 420px; } }

/* discover */
.discover { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.experience { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--forest); text-align: start; cursor: pointer; transition: transform .5s var(--ease), border-color .3s; }
.experience:hover { transform: translateY(-4px); border-color: var(--gold-deep); }
.experience:disabled { cursor: default; }
.experience img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.experience .play { position: absolute; top: calc((100% - 7rem) * .5); left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(var(--glass-rgb), .6); backdrop-filter: blur(6px); border: 1px solid var(--gold); }
.experience .play::after { content: ""; position: absolute; left: 22px; top: 18px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid var(--gold-soft); }
.experience .body { display: block; padding: var(--s4) var(--s5) var(--s5); }
.experience b { display: block; font-size: 1.15rem; font-weight: 500; color: var(--parchment); }
.experience small { display: block; margin-top: var(--s2); color: var(--parchment-soft); font-size: .88rem; line-height: 1.6; }
.video-modal { position: fixed; inset: 0; z-index: 150; background: rgba(6, 10, 8, .95); display: grid; place-items: center; padding: var(--s7) var(--s4); }
.video-modal[hidden] { display: none; }
.video-modal .stage { width: min(1100px, 100%); }
.video-modal video { width: 100%; max-height: 75vh; border-radius: 10px; background: #000; }
.video-modal .cap { color: var(--parchment-soft); padding-top: var(--s3); text-align: center; }
.video-modal .cap b { color: var(--parchment); font-weight: 500; }
.video-modal .lb-close { position: absolute; top: var(--s4); inset-inline-end: var(--s4); }

/* about old trees, over a real photograph */
.about-band { position: relative; padding-block: clamp(6rem, 14vw, 11rem); overflow: hidden; isolation: isolate; }
.about-bg { position: absolute; inset: 0; z-index: -2; }
.about-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.55); }
.about-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night), transparent 25%, transparent 75%, var(--night)); }
.about-card { max-width: 760px; margin-inline: auto; background: rgba(var(--glass-rgb), .72); backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 22px; padding: clamp(1.75rem, 4vw, 3.5rem); }
.about-card h2 { margin-block: var(--s4) var(--s5); }
.about-card p { color: var(--parchment); font-size: 1.05rem; line-height: 1.9; }

/* NCVC brand in the header and footer */
.brand-logo { height: 42px; width: auto; display: block; }
.brand-sep { width: 1px; height: 34px; background: var(--line-strong); }
@media (max-width: 860px) {
  .site-header .brand { gap: .55rem; min-width: 0; }
  .site-header .brand-logo { width: 42px; height: 42px; object-fit: cover; object-position: left; flex: none; }
  .site-header .brand-sep { display: none; }
  .site-header .brand-name { display: block; max-width: 8.5rem; font-size: .92rem; line-height: 1.15; }
  .site-header .brand-name small { display: none; }
  html[lang="ar"] .site-header .brand-name { font-size: .92rem; }
}
@media (max-width: 410px) {
  .site-header .wrap { gap: .55rem; }
  .site-header .brand-name { max-width: 5.8rem; font-size: .8rem; }
  html[lang="ar"] .site-header .brand-name { font-size: .78rem; }
  .site-header .lang-btn { padding-inline: .7rem; }
}
.site-footer .brand-logo { height: 56px; }

/* the painted hero: a still stack of the layers first, then the three.js scene over it */
.hero-painted { background: #18221d; }
.hero-stack, .hero-stack img, .hero-painted .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stack { z-index: -3; overflow: hidden; }
.hero-stack img { object-fit: cover; object-position: 50% 60%; transform: scale(1.08); }
html[dir="rtl"] .hero-stack img { transform: scale(1.08) scaleX(-1); }
.hero-stack img:nth-child(3) { transform: scale(1.1); } .hero-stack img:nth-child(4) { transform: scale(1.112); }
.hero-stack img:nth-child(5) { transform: scale(1.156); } .hero-stack img:nth-child(6) { transform: translateY(16%) scale(1.426); }
html[dir="rtl"] .hero-stack img:nth-child(3) { transform: scale(1.1) scaleX(-1); } html[dir="rtl"] .hero-stack img:nth-child(4) { transform: scale(1.112) scaleX(-1); }
html[dir="rtl"] .hero-stack img:nth-child(5) { transform: scale(1.156) scaleX(-1); } html[dir="rtl"] .hero-stack img:nth-child(6) { transform: translateY(16%) scale(1.426) scaleX(-1); }
.hero-painted .hero-gl { z-index: -2; opacity: 0; transition: opacity .6s var(--ease); }
.hero-painted.gl-on .hero-gl { opacity: 1; }
.hero-painted.gl-on .hero-stack { visibility: hidden; transition: visibility 0s 1.3s; }
/* a dark pool focused behind the heading and paragraph, fading out toward the tree */
.hero-painted::before {
  background:
    radial-gradient(ellipse 52% 62% at 30% 56%, rgba(var(--shade-rgb), .82) 0%, rgba(var(--shade-rgb), .6) 45%, rgba(var(--shade-rgb), .2) 75%, transparent 100%),
    linear-gradient(90deg, rgba(var(--shade-rgb), .7) 0%, rgba(var(--shade-rgb), .4) 38%, transparent 62%),
    linear-gradient(180deg, rgba(var(--shade-rgb), .45) 0%, transparent 20%, transparent 70%, var(--night) 100%);
}
html[dir="rtl"] .hero-painted::before {
  background:
    radial-gradient(ellipse 52% 62% at 70% 56%, rgba(var(--shade-rgb), .82) 0%, rgba(var(--shade-rgb), .6) 45%, rgba(var(--shade-rgb), .2) 75%, transparent 100%),
    linear-gradient(270deg, rgba(var(--shade-rgb), .7) 0%, rgba(var(--shade-rgb), .4) 38%, transparent 62%),
    linear-gradient(180deg, rgba(var(--shade-rgb), .45) 0%, transparent 20%, transparent 70%, var(--night) 100%);
}
@media (max-width: 760px) {
  .hero-stack img { object-position: 62% 60%; }
  html[dir="rtl"] .hero-stack img { object-position: 38% 60%; }
  .hero-painted::before, html[dir="rtl"] .hero-painted::before { background: linear-gradient(180deg, rgba(var(--shade-rgb), .45) 0%, rgba(var(--shade-rgb), .15) 22%, rgba(var(--shade-rgb), .78) 46%, rgba(var(--shade-rgb), .9) 70%, var(--night) 100%); }
}
.hero-painted h1 { max-width: 12ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.hero-painted .hero-quote { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

/* the canopy footage now lives behind "About old trees" */
.about-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.8) brightness(.55); }
.about-toggle { bottom: var(--s5); top: auto; inset-inline-start: auto; inset-inline-end: var(--gutter); transform: none; }
html[dir="rtl"] .about-toggle { transform: none; }

/* engraved gold roots between sections */
/* the trunk rises out of the darkness above and the root tips fade into the page below, so the
   engraving reads as part of the page rather than a pasted picture */
.roots-art { position: relative; max-width: 1100px; margin: -2rem auto 0; padding-inline: var(--gutter); pointer-events: none; }
.roots-art img { width: 100%; height: auto; display: block; mix-blend-mode: screen; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 28%, #000 46%, #000 66%, transparent 98%), radial-gradient(70% 120% at 50% 30%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 28%, #000 46%, #000 66%, transparent 98%), radial-gradient(70% 120% at 50% 30%, #000 55%, transparent 100%);
  mask-composite: intersect; }
/* a warm glow where the trunk meets the page */
.roots-art::before { content: ""; position: absolute; left: 50%; top: 12%; width: 46%; height: 52%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 30%, rgba(210, 174, 99, .22), transparent 70%); filter: blur(8px); }
/* light travelling down through the roots, masked to their exact shape, like sap rising and falling */
.roots-art::after { content: ""; position: absolute; inset: 0 var(--gutter); pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("../assets/art/divider-roots.webp") center / 100% 100% no-repeat; mask: url("../assets/art/divider-roots.webp") center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(255, 232, 170, .95) 50%, transparent 60%, transparent 100%) 0 0 / 100% 300% no-repeat;
  animation: sap 7s cubic-bezier(.45, 0, .55, 1) infinite; opacity: .85; }
@keyframes sap { from { background-position: 0 100%; } to { background-position: 0 -10%; } }
@media (prefers-reduced-motion: reduce) { .roots-art::after { animation: none; display: none; } }
.roots-art.reveal { opacity: 0; transform: translateY(-14px) scaleY(.94); transform-origin: top; }
.roots-art.reveal.in { opacity: 1; transform: none; }

/* portraits: the tree stays clear at the top and centre; a short fade meets the stats card,
   and the shade gathers only in the lower corner behind the words */
.portraits::after {
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(var(--shade-rgb), .55) 8%, transparent 20%, transparent 58%, rgba(var(--shade-rgb), .5) 82%, rgba(var(--shade-rgb), .88) 100%),
    radial-gradient(ellipse 62% 58% at 10% 90%, rgba(var(--shade-rgb), .82), rgba(var(--shade-rgb), .45) 50%, transparent 76%) !important;
}
html[dir="rtl"] .portraits::after {
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(var(--shade-rgb), .55) 8%, transparent 20%, transparent 58%, rgba(var(--shade-rgb), .5) 82%, rgba(var(--shade-rgb), .88) 100%),
    radial-gradient(ellipse 62% 58% at 90% 90%, rgba(var(--shade-rgb), .82), rgba(var(--shade-rgb), .45) 50%, transparent 76%) !important;
}
.slide img { filter: brightness(.96) saturate(1); }
.portrait-info .eyebrow, .portrait-text h2, .portrait-text p { text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 4px 28px rgba(0, 0, 0, .65); }
.portrait-text p { color: #f4ecd8; font-weight: 500; }

/* stacking: photos, then the shade, then the words */
.slides { z-index: 0; }
.portraits::after { z-index: 1; }
.portrait-info { z-index: 2; }

/* discover cards: equal picture frames; cards that open a page show an arrow instead of play */
.experience { text-decoration: none; display: flex; flex-direction: column; }
.experience img { aspect-ratio: 16 / 11; height: auto; object-fit: cover; object-position: center 40%; }
.experience { container-type: inline-size; }
.experience .play { top: calc(100cqw * 11 / 16 / 2); }
/* a card that opens a page shows what it opens, not a play triangle */
.experience .play.go { display: grid; place-items: center; color: var(--gold-soft); }
.experience .play.go::after { content: none; }
.experience .play.go svg { width: 26px; height: 26px; }
.experience img.plate-art { object-fit: contain; padding: 10px; background: radial-gradient(circle at 50% 45%, #2c3a32, #1b2621); }

/* the roots grow straight out from under the cards above */
.roots-art { margin-top: calc(-1 * clamp(5.5rem, 11vw, 9rem)); z-index: 0; }
.roots-art img { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 14%, #000 64%, transparent 98%), radial-gradient(70% 120% at 50% 30%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 14%, #000 64%, transparent 98%), radial-gradient(70% 120% at 50% 30%, #000 55%, transparent 100%); }
.roots-art::before { top: 0; height: 30%; }
.featured, .featured + * { position: relative; z-index: 1; }