/* PHILOSOPHY — warm sunrise sky behind a blue mountain silhouette; the actual
   color now comes from #pageFlow's continuous gradient underneath. */
#philosophy {
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.philosophy-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,177,90,0.4) 0%, transparent 70%);
  animation: philBreathe 9s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  z-index: 0;
}
@keyframes philBreathe {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .philosophy-bg { animation: none; } }
/* warm-toned overrides for the shared ambient orb/particle so they read as
   sunlight rather than the cool blue used elsewhere on the page */
#philosophy .bg-orb-a { background: radial-gradient(circle, rgba(255,196,110,0.55) 0%, rgba(255,196,110,0) 70%); }
#philosophy .bg-orb-b { background: radial-gradient(circle, rgba(255,163,94,0.5) 0%, rgba(255,163,94,0) 70%); }
#philosophy .particle { background: radial-gradient(circle, rgba(255,201,120,0.9) 0%, rgba(255,201,120,0) 70%); }
.philosophy-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  max-width: 800px;
  margin: 0 auto 48px;
  position: relative;
  z-index: 1;
}
/* soft rotating halo behind the quote, purely ambient */
.philosophy-quote::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 640px; height: 640px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg, rgba(63,113,150,0.1), transparent 30%, rgba(63,113,150,0.1) 60%, transparent 90%);
  border-radius: 50%;
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
  animation: haloRotate 42s linear infinite;
}
@keyframes haloRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .philosophy-quote::after { animation: none; } }
.philosophy-quote::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem;
  color: var(--blue);
  opacity: 0;
  position: absolute;
  top: -40px;
  left: -20px;
  line-height: 1;
  transform: scale(0.3) rotate(-10deg);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.34,1.56,.64,1);
}
.philosophy-quote.marks-visible::before {
  opacity: 0.35;
  transform: scale(1) rotate(0);
  animation: quoteMarkPulse 5s ease-in-out infinite 1.2s;
}
@keyframes quoteMarkPulse {
  0%, 100% { opacity: 0.32; transform: scale(1) rotate(0); }
  50%      { opacity: 0.55; transform: scale(1.08) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .philosophy-quote.marks-visible::before { animation: none; } }
.philosophy-attr {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
  position: relative;
  display: inline-block;
}
.philosophy-attr::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -10px;
  width: 0; height: 1px;
  background: var(--blue);
  transition: width 0.7s cubic-bezier(.22,.61,.36,1) 0.3s, left 0.7s cubic-bezier(.22,.61,.36,1) 0.3s;
}
.philosophy-attr.visible::after { width: 60px; left: calc(50% - 30px); }
.quote-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
.quote-word.visible { opacity: 1; filter: blur(0); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .quote-word { opacity: 1; filter: none; transform: none; }
}
.mountain-divider { margin: 60px auto 0; width: 120px; display: block; }
#mountainDividerLine.glow-pulse { animation: mountainGlow 4.5s ease-in-out infinite; }
@keyframes mountainGlow {
  0%, 100% { opacity: 0.5; stroke-width: 1; }
  50%      { opacity: 0.9; stroke-width: 1.5; }
}
@media (prefers-reduced-motion: reduce) { #mountainDividerLine.glow-pulse { animation: none; } }
.philosophy-glow {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,235,0.95) 0%, rgba(255,232,160,0.85) 22%, rgba(255,206,110,0.55) 45%, rgba(255,196,90,0) 72%);
  pointer-events: none;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: transform 0.5s ease-out, opacity 0.4s ease;
  z-index: 0;
}
/* MOUNTAIN — the viewBox is cropped to just the peaks (0..200: the polygon's
   base sits exactly at y=200, the bottom of the box), so the box's own
   bottom edge IS the shoreline, flush with the very bottom of this section.
   Contact's water background starts at that same seam, and its
   .lake-reflection-shape (contact.css) uses the identical width and the
   exact vertical mirror of these polygon points, so the reflection picks up
   precisely where the peaks stop instead of leaving a gap of empty water
   between "mountain" and "reflection" (the old version anchored the
   reflection to the far/outer edge of a separate water rect here, which sat
   well below the actual shoreline — that gap is what read as broken). */
.mountain-lake {
  position: absolute;
  left: 50%; bottom: 0;
  width: 800px;
  max-width: 88%;
  aspect-ratio: 600 / 200;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  animation: mountainLakeDrift 46s ease-in-out infinite alternate;
}
.mountain-lake svg { display: block; width: 100%; height: 100%; }
@keyframes mountainLakeDrift {
  from { transform: translateX(-53%) scale(1); }
  to   { transform: translateX(-47%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .mountain-lake { animation: none; } }
@media (max-width: 900px) { .mountain-lake { width: 480px; max-width: 94%; } }
/* flying birds — glide back and forth across the section continuously */
.birds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bird-fly {
  position: absolute; left: 0;
  animation: birdFlyPath ease-in-out infinite alternate;
}
.bird-flap {
  display: block;
  color: var(--ink);
  transform-origin: center;
  animation: birdFlap 0.5s ease-in-out infinite;
}
.bird-fly-1 { top: 14%; width: 46px; height: 23px; animation-duration: 9s;  animation-delay: 0s; }
.bird-fly-2 { top: 30%; width: 36px; height: 18px; animation-duration: 12s; animation-delay: -4s; }
.bird-fly-3 { top: 8%;  width: 30px; height: 15px; animation-duration: 10.5s; animation-delay: -7s; }
.bird-fly-1 .bird-flap { opacity: 0.85; animation-duration: 0.5s; }
.bird-fly-2 .bird-flap { opacity: 0.65; animation-duration: 0.46s; animation-delay: -0.2s; }
.bird-fly-3 .bird-flap { opacity: 0.55; animation-duration: 0.4s; animation-delay: -0.35s; }
@keyframes birdFlyPath {
  0%   { transform: translate(-10vw, 0); }
  30%  { transform: translate(35vw, -30px); }
  60%  { transform: translate(75vw, 14px); }
  100% { transform: translate(120vw, -24px); }
}
@keyframes birdFlap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .bird-fly, .bird-flap { animation: none; }
  .birds { display: none; }
}