/* ==========================================================================
   Wildlife Forest theme layer  (loads after style.css)
   Deep-forest palette · parallax woodland · tiger, deer, elephant, snake,
   birds & butterflies in motion · fireflies and falling leaves.
   ========================================================================== */
:root {
  color-scheme: dark;
  --ink: #eaf2dd;
  --ink-soft: #cddcbd;
  --muted: #a9bd9f;
  --paper: #0a140e;
  --paper-white: #13261a;
  --line: rgba(176, 214, 150, .17);
  --accent: #8fbf6a;
  --accent-deep: #b9dd95;
  --amber: #e8a13a;
  --amber-deep: #c9801f;
  --bark: #4a3321;
  --card: rgba(16, 33, 23, .80);
  --card-solid: #12251a;
  --shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

html { background: #07110b; }
body { background: transparent; color: var(--ink); }
::selection { background: var(--amber); color: #1b1208; }

/* ---------- Forest world (fixed backdrop) ------------------------------- */
.ambient-field, .ambient-ring { display: none !important; }
.forest-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.forest-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 82% 6%, rgba(232, 190, 110, .20), transparent 70%),
    radial-gradient(ellipse 80% 55% at 20% 100%, rgba(52, 110, 66, .30), transparent 70%),
    linear-gradient(180deg, #0a1a12 0%, #123022 36%, #1c4a31 72%, #25593b 100%);
}
.forest-rays { position: absolute; inset: -10% -10% 30% -10%; mix-blend-mode: screen; opacity: .9; }
.forest-rays i {
  position: absolute; top: -10%; width: 14vw; min-width: 90px; height: 120%;
  background: linear-gradient(180deg, rgba(255, 230, 160, .16), rgba(255, 230, 160, .02) 70%, transparent);
  transform: rotate(18deg); transform-origin: top center; filter: blur(7px);
  animation: ray-pulse 9s ease-in-out infinite alternate;
}
.forest-rays i:nth-child(1) { left: 52%; }
.forest-rays i:nth-child(2) { left: 66%; width: 8vw; animation-delay: -3s; }
.forest-rays i:nth-child(3) { left: 78%; width: 18vw; animation-delay: -6s; opacity: .7; }
.forest-rays i:nth-child(4) { left: 38%; width: 6vw; animation-delay: -4.5s; opacity: .6; }

.tree-layer { position: absolute; left: -6%; right: -6%; bottom: 0; will-change: transform; }
.tree-layer .tree-svg { display: block; width: 100%; height: 100%; }
.tree-far  { height: 74vh; opacity: .75; transform: translate3d(calc(var(--scroll, 0) * -.010px), calc(var(--scroll, 0) * -.012px), 0); animation: tree-sway 11s ease-in-out infinite alternate; }
.tree-mid  { height: 66vh; opacity: .95; transform: translate3d(calc(var(--scroll, 0) * -.022px), calc(var(--scroll, 0) * -.020px), 0); animation: tree-sway 9s ease-in-out -3s infinite alternate-reverse; }
.tree-near { height: 58vh; transform: translate3d(calc(var(--scroll, 0) * -.040px), calc(var(--scroll, 0) * -.030px), 0); animation: tree-sway 13s ease-in-out -6s infinite alternate; }
.forest-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 8, .38), rgba(5, 12, 8, .12) 45%, rgba(5, 12, 8, .30)); }

.forest-mist { position: absolute; left: -30%; width: 160%; height: 30vh; background: radial-gradient(ellipse at 50% 60%, rgba(190, 225, 190, .15), transparent 66%); filter: blur(18px); }
.mist-a { bottom: 14vh; animation: mist-drift 46s ease-in-out infinite alternate; }
.mist-b { bottom: -4vh; opacity: .8; animation: mist-drift 60s ease-in-out -20s infinite alternate-reverse; }

/* ---------- Page surfaces ---------------------------------------------- */
.site-header { background: rgba(8, 18, 12, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand-logo { mix-blend-mode: normal; border-radius: 10px; background: rgba(255, 255, 255, .92); padding: 2px 4px; }
.brand-text span, .main-nav a { color: var(--muted); }
.main-nav a:hover { color: var(--amber); }
.nav-cta, .button { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #1d1308; }
.nav-cta:hover, .button:hover { background: linear-gradient(135deg, #f2b552, #d8902c); box-shadow: 0 10px 26px rgba(232, 161, 58, .35); }
.nav-cta .arrow, .button .arrow, .button-primary .arrow { color: #1d1308; }
.menu-toggle { color: var(--ink); border-color: var(--line); }
.button-primary { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #1d1308; }
.button-primary:hover { background: linear-gradient(135deg, #f2b552, #d8902c); }
.button-quiet { background: rgba(255, 255, 255, .04); color: #f3f8ea; border-color: rgba(255, 255, 255, .28); }

.hero { background: linear-gradient(115deg, rgba(6, 14, 9, .62) 0%, rgba(10, 24, 16, .30) 60%, rgba(18, 40, 26, .12) 100%); border-bottom: 1px solid var(--line); }
.hero::before { display: none; }
.hero-glow { background: radial-gradient(circle, rgba(232, 161, 58, .20), rgba(143, 191, 106, .07) 42%, transparent 70%); }
.hero-heading-icon { color: var(--amber); border-color: rgba(232, 161, 58, .4); background: linear-gradient(145deg, rgba(232, 161, 58, .22), rgba(232, 161, 58, .04)); }
.status-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(232, 161, 58, .16), 0 0 20px var(--amber); }
.hero-bio-label::before { background: var(--amber); }
.hero h1 em { color: #f2e2b8; }
.orbit-point { background: var(--amber); border-color: #14261a; box-shadow: 0 0 24px rgba(232, 161, 58, .8); }
.portrait-caption span { color: var(--amber); }
.portrait-card { background: linear-gradient(145deg, rgba(40, 60, 42, .92), rgba(20, 34, 24, .9)); box-shadow: 24px 32px 70px rgba(0, 0, 0, .5), inset 1px 1px 0 rgba(255, 255, 255, .14); }

.facts-inner { background: var(--card); border-color: var(--line); }
.fact-icon { background: rgba(143, 191, 106, .14); color: var(--accent-deep); }
.chapter-index { background: var(--card); border-color: var(--line); }
.chapter-index::after { background: linear-gradient(145deg, rgba(232, 161, 58, .85), rgba(143, 191, 106, .35)); }
.chapter-index-grid a { background: transparent; color: var(--ink); border-color: var(--line); }
.chapter-index-grid a:hover { background: rgba(143, 191, 106, .12); color: var(--amber); }
.chapter-index-grid a > span, .chapter-index-grid a b { color: var(--amber); }

.story, .education-section, .certification-section, .aspiration-section { background: rgba(7, 17, 11, .46); }
.heritage-section, .career-section, .community-section { background: rgba(14, 32, 21, .44); }
.section-heading h2, .display, h1, h2, h3 { color: var(--ink); }
.section-description, .story-copy p, .heritage-copy p { color: var(--ink-soft); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.section-heading h2, .display { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.eyebrow { color: var(--amber); }

.icon-intro, .icon-heritage, .icon-education, .icon-career, .icon-certificate, .icon-community, .icon-aspiration, .icon-gallery, .icon-thanks {
  border-color: rgba(232, 161, 58, .32);
  background: linear-gradient(145deg, rgba(232, 161, 58, .22), rgba(143, 191, 106, .10));
  color: var(--amber);
  box-shadow: 0 15px 28px rgba(0, 0, 0, .35), inset 1px 1px 0 rgba(255, 255, 255, .12);
}
.heading-icon::before { background: linear-gradient(rgba(255, 255, 255, .14), transparent); }
.heading-icon::after { border-color: #0e2016; background: var(--accent); }
.heading-icon svg { width: 34px; height: 34px; }
.heading-icon-sm { background: rgba(143, 191, 106, .14); border-color: var(--line); color: var(--accent-deep); box-shadow: none; }

.story-photo { border-color: #17301f; box-shadow: 0 22px 55px rgba(0, 0, 0, .5); }
.story-photo-wrap::before { border-color: rgba(232, 161, 58, .3); }
.story-photo-label { background: var(--amber); color: #1d1308; }
.story-copy .story-lead { color: var(--ink); }
.story-copy .story-lead::before { color: var(--amber); }
.story-facts span { background: rgba(143, 191, 106, .12); color: var(--ink-soft); border-color: var(--line); }
.heritage-highlight { background: rgba(10, 24, 16, .6); border-color: var(--line); color: var(--ink-soft); }
.photo-mosaic figure { background: #11241a; border-color: #17301f; box-shadow: 0 15px 34px rgba(0, 0, 0, .45); }
.education-step { background: var(--card); border-color: var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.education-step p, .education-step time { color: var(--ink-soft); }
.education-step time { color: var(--amber); }
.education-step .step-icon, .cert-icon, .career-symbol { background: rgba(143, 191, 106, .14); border-color: var(--line); color: var(--accent-deep); }
.education-path::before { background: linear-gradient(var(--amber), rgba(143, 191, 106, .15)); }
.education-panel { background: linear-gradient(150deg, rgba(10, 22, 15, .94), rgba(22, 46, 30, .94)); border-color: rgba(143, 191, 106, .25); }
.degree { background: rgba(255, 255, 255, .06); }
.degree-logo-link { background: #fff; }
.degree-institution { color: var(--accent-deep); }

.career-card, .cert-card, .training-panel { background: var(--card); border-color: var(--line); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); color: var(--ink-soft); }
.career-card h3, .cert-card h3 { color: var(--ink); }
.career-card:hover, .cert-card:hover { border-color: rgba(232, 161, 58, .5); box-shadow: 0 23px 44px rgba(0, 0, 0, .5); }
.career-card .career-role, .career-num, .cert-label { color: var(--amber); }
.career-copy, .cert-card p { color: var(--ink-soft); }
.career-copy strong { color: var(--ink); }
.career-employers a { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--ink-soft); }
.career-employers a:hover { background: rgba(232, 161, 58, .14); border-color: var(--amber); color: var(--ink); }
.career-meta span { color: var(--muted); border-color: var(--line); }
.skill-list li::before { background: var(--amber); }

.community-board { background: #0c1a11; border: 1px solid var(--line); }
.community-board::after { background: linear-gradient(90deg, rgba(6, 14, 9, .94) 0%, rgba(6, 14, 9, .76) 48%, rgba(6, 14, 9, .12) 100%), linear-gradient(0deg, rgba(6, 14, 9, .3), transparent 56%); }
.community-copy .eyebrow { color: var(--amber); }
.aspiration-card { background: linear-gradient(135deg, rgba(20, 44, 28, .9), rgba(12, 28, 19, .9)); border-color: var(--line); color: var(--ink-soft); }
.aspiration-copy p { color: var(--ink); }
.aspiration-emblem svg { background: linear-gradient(145deg, rgba(232, 161, 58, .3), rgba(143, 191, 106, .2)); color: var(--amber); border-color: rgba(232, 161, 58, .3); box-shadow: 8px 12px 23px rgba(0, 0, 0, .35); }
.aspiration-emblem::before { border-color: rgba(232, 161, 58, .28); box-shadow: 0 0 0 18px rgba(232, 161, 58, .05), 0 0 0 37px rgba(232, 161, 58, .03); }

.closing { background: rgba(5, 11, 7, .78); }
.closing-card { background: linear-gradient(120deg, rgba(36, 78, 46, .95), rgba(70, 108, 60, .92)); border-color: rgba(232, 161, 58, .3); }
.closing-card h2, .closing-copy p { color: #f5fbe9; }
.closing-action .button { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #1d1308; }
.site-footer { background: rgba(5, 11, 7, .92); padding-bottom: 150px; }
.social-links a { color: var(--muted); border-color: var(--line); }
.social-links a:hover { color: #1d1308; background: var(--amber); border-color: var(--amber); }
.copyright { color: var(--muted); }

@media (max-width: 1100px) {
  .main-nav { background: rgba(8, 18, 12, .97); border-color: var(--line); }
  .main-nav a:hover { background: rgba(143, 191, 106, .12); }
}

/* ---------- Wildlife in motion ------------------------------------------ */
.forest-fx { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.wildlife { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.wildlife-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky-critters, .ground-critters { position: absolute; inset: 0; }
.mover { position: absolute; will-change: transform; }
.sky-critters .mover { top: var(--top); }
.ground-critters .mover { bottom: var(--bottom); }
.critter-svg { display: block; width: 100%; height: auto; overflow: visible; }
.critter, .bob-fly, .flutter { width: calc(var(--w) * var(--s, 1)); }
.m-left .critter, .m-left .bob-fly, .m-left .flutter { transform: scaleX(-1); }
.critter { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .45)); }
.critter.deer, .critter.snake { filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .4)) brightness(.92); }

@media (prefers-reduced-motion: no-preference) {
  .mover { left: 0; animation: var(--dir, cross-r) var(--dur, 50s) linear var(--delay, 0s) infinite; }
  .m-right { --dir: cross-r; }
  .m-left  { --dir: cross-l; }

  .leg { animation: leg-swing var(--stride, .5s) ease-in-out infinite alternate; }
  .leg.l2 { animation-delay: calc(var(--stride, .5s) * -1); }
  .critter .bob { animation: body-bob var(--stride, .5s) ease-in-out infinite alternate; }
  .tiger .tail { animation: tail-swish 1.3s ease-in-out infinite alternate; }
  .tiger .head { animation: head-sway 1.6s ease-in-out infinite alternate; }
  .deer .head  { animation: deer-nod calc(var(--stride, .5s) * 4) ease-in-out infinite alternate; }
  .elephant .trunk { animation: trunk-swing 2.4s ease-in-out infinite alternate; }
  .elephant .ear   { animation: ear-flap 1.1s ease-in-out infinite alternate; }
  .elephant .tail  { animation: tail-swish 1.8s ease-in-out infinite alternate; }
  .snake .seg { animation: slither 1.5s ease-in-out infinite; }
  .snake .tongue { animation: tongue 1.7s steps(1, end) infinite; }

  .bob-fly { animation: fly-bob 2.6s ease-in-out infinite alternate; }
  .wing-near { animation: flap .34s ease-in-out infinite alternate; }
  .wing-far  { animation: flap .34s ease-in-out -.06s infinite alternate; }
  .flutter { animation: flutter 3.2s ease-in-out infinite alternate; }
  .flutter.alt { animation-duration: 4.1s; }
  .bwing { animation: bflap .22s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .mover { left: var(--rest, 5%); }
  .wildlife-sky { display: none; }
  .forest-rays i, .tree-layer, .forest-mist, .grass svg { animation: none !important; }
}

/* ---------- Grass foreground -------------------------------------------- */
.grass { position: absolute; left: -2%; right: -2%; bottom: -2px; height: 46px; }
.grass-svg { display: block; width: 100%; height: 100%; transform-origin: bottom center; animation: grass-sway 5s ease-in-out infinite alternate; }
.grass-b { height: 52px; bottom: 6px; opacity: .95; }
.grass-b .grass-svg { animation-duration: 7s; animation-delay: -2s; }
.grass-f { z-index: 2; }
.grass::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 14px; background: #0a1a10; }

/* ---------- Keyframes ---------------------------------------------------- */
@keyframes cross-r { from { transform: translateX(-340px); } to { transform: translateX(calc(100vw + 340px)); } }
@keyframes cross-l { from { transform: translateX(calc(100vw + 340px)); } to { transform: translateX(-340px); } }
@keyframes leg-swing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes body-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes tail-swish { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes head-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }
@keyframes deer-nod { 0% { transform: rotate(0deg); } 60% { transform: rotate(0deg); } 100% { transform: rotate(14deg); } }
@keyframes trunk-swing { from { transform: rotate(-9deg); } to { transform: rotate(10deg); } }
@keyframes ear-flap { from { transform: rotate(5deg) scaleX(1); } to { transform: rotate(-9deg) scaleX(.9); } }
@keyframes slither { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes tongue { 0%, 70% { opacity: 0; } 70.1%, 100% { opacity: 1; } }
@keyframes fly-bob { from { transform: translateY(-16px) rotate(-3deg); } to { transform: translateY(16px) rotate(3deg); } }
.m-left .bob-fly { animation-name: fly-bob-l; }
@keyframes fly-bob-l { from { transform: scaleX(-1) translateY(-16px) rotate(-3deg); } to { transform: scaleX(-1) translateY(16px) rotate(3deg); } }
@keyframes flap { from { transform: rotate(24deg); } to { transform: rotate(-82deg); } }
@keyframes flutter { 0% { transform: translate(0, 0) rotate(-8deg); } 35% { transform: translate(14px, -34px) rotate(10deg); } 70% { transform: translate(-8px, 20px) rotate(-6deg); } 100% { transform: translate(18px, -10px) rotate(12deg); } }
@keyframes bflap { from { transform: scaleX(1); } to { transform: scaleX(.18); } }
@keyframes grass-sway { from { transform: skewX(-1.6deg) scaleY(.98); } to { transform: skewX(1.8deg) scaleY(1.03); } }
@keyframes tree-sway { from { margin-left: -.5%; } to { margin-left: .5%; } }
@keyframes mist-drift { from { transform: translateX(-6%); } to { transform: translateX(8%); } }
@keyframes ray-pulse { from { opacity: .35; } to { opacity: 1; } }

@media (max-width: 680px) {
  .critter, .bob-fly, .flutter { --s: .58; }
  .site-footer { padding-bottom: 120px; }
  .tree-far, .tree-mid, .tree-near { height: 52vh; }
}

/* ---------- Specificity fixes for text colours from the base layers ------- */
.section-heading .section-description,
.career-card .career-copy,
.cert-card p,
.education-step p,
.training-panel p, .training-panel li { color: var(--ink-soft); }
.facts .fact div > span, .fact div span { color: var(--muted); }
.facts .fact strong { color: var(--ink); }
.career-card .career-copy strong { color: var(--ink); }
.hero .button-primary, .nav-cta, .closing-action .button, .story-photo-label { color: #1d1308; }

/* ---------- Forest-floor fade: keeps text clear of the walking animals ---- */
.wildlife::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px;
  background: linear-gradient(to top, rgba(5, 12, 8, .95) 0%, rgba(5, 12, 8, .84) 36%, rgba(7, 18, 11, .45) 70%, rgba(7, 18, 11, 0) 100%);
}
@media (max-width: 680px) { .wildlife::before { height: 120px; } }

/* Lift hero content so its buttons sit clear of the forest floor */
.hero-inner { padding-block: clamp(36px, 4.2vw, 60px) clamp(96px, 9vw, 120px); align-items: start; }
@media (max-width: 1100px) { .hero-inner { align-items: stretch; } }