/* Tea Tree Pond hero
   Tweak these on .tpond (or inline on the section):
   --tpond-height  section height (default: full screen)
   --tpond-scrim   darkness behind the text, 0 to 1
   Add the class "tpond--still" to the section to turn all animation off.
   The swaying trees come from tea-tree-pond.js (options are listed there). */

.tpond {
  --tpond-scrim: 0.55;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh;
  height: var(--tpond-height, 100svh);
  min-height: 620px;
  background: #22332e;
  font-family: "Jost", system-ui, sans-serif;
}

.tpond *,
.tpond *::before,
.tpond *::after {
  box-sizing: border-box;
}

/* Scene: the painted image plus an animated overlay drawn to the same frame */
.tpond__scene,
.tpond__scene img,
.tpond__fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.tpond__scene img {
  object-fit: cover;
  object-position: 50% 50%;
}

.tpond__fx {
  pointer-events: none;
}

/* Living scene drawn by tea-tree-pond.js; shown once it has painted */
.tpond__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.tpond--live .tpond__canvas {
  visibility: visible;
}

.tpond--live .tpond-ripple {
  display: none;
}

.tpond__fx--tall {
  display: none;
}

@media (max-aspect-ratio: 4/5) {
  .tpond__fx--wide { display: none; }
  .tpond__fx--tall { display: block; }
}

/* Soft darkening in the water so the text stays readable */
.tpond__scrim {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(1040px, 130vw);
  height: min(560px, 80%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(14, 26, 24, 0.85), rgba(14, 26, 24, 0.45) 55%, rgba(14, 26, 24, 0) 100%);
  opacity: var(--tpond-scrim);
  pointer-events: none;
}

/* Text block, centred on the pond */
.tpond__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  transform: translateY(-50%);
  max-width: 648px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.tpond__eyebrow {
  margin: 0;
  padding-left: 0.32em;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e4d2a2;
}

.tpond__title {
  margin: 0;
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: #f7f0df;
  text-shadow: 0 2px 28px rgba(8, 18, 16, 0.6);
}

.tpond__divider {
  display: block;
  width: 72px;
  height: 12px;
}

.tpond__divider path {
  fill: none;
  stroke: #d8c590;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.8;
}

.tpond__divider circle {
  fill: #d8c590;
}

.tpond__text {
  margin: 0;
  max-width: 470px;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  text-wrap: pretty;
  color: #e2dccb;
}

.tpond a { color: #e4d2a2; }
.tpond a:hover { color: #f7f0df; }

/* Overlay pieces */
.tpond-glint {
  fill: none;
  stroke: #fff0c4;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.7;
}

.tpond-ripple {
  fill: none;
  stroke: #dcd8bc;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.tpond-halo { fill: #ffe9a8; opacity: 0.28; }
.tpond-core { fill: #fff6cf; }
.tpond-mote { opacity: 0.6; }

/* Motion */
@keyframes tpond-ripple {
  0%   { transform: scale(0.2); opacity: 0; }
  12%  { opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes tpond-glint {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 0.25; }
}

@keyframes tpond-mote {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50%      { transform: translate(7px, -16px); opacity: 0.95; }
}

.tpond .tpond-ripple { animation: tpond-ripple 8s ease-out infinite; }
.tpond .tpond-ripple.d1 { animation-delay: -6.9s; }
.tpond .tpond-ripple.d2 { animation-delay: -6s; }
.tpond .tpond-ripple.d3 { animation-delay: -5.3s; }
.tpond .tpond-ripple.d4 { animation-delay: -4.2s; }
.tpond .tpond-ripple.d5 { animation-delay: -3.4s; }
.tpond .tpond-ripple.d6 { animation-delay: -2.6s; }
.tpond .tpond-ripple.d7 { animation-delay: -1.5s; }
.tpond .tpond-ripple.d8 { animation-delay: -0.8s; }

.tpond .tpond-glint { animation: tpond-glint 4.6s ease-in-out infinite; }
.tpond .tpond-glint.g2 { animation-delay: -2.3s; }

.tpond .tpond-mote { animation: tpond-mote 10s ease-in-out infinite; }
.tpond .tpond-mote.m1 { animation-delay: -1.7s; animation-duration: 11s; }
.tpond .tpond-mote.m2 { animation-delay: -3.4s; animation-duration: 9s; }
.tpond .tpond-mote.m3 { animation-delay: -5.1s; animation-duration: 12s; }
.tpond .tpond-mote.m4 { animation-delay: -6.8s; animation-duration: 10.5s; }
.tpond .tpond-mote.m5 { animation-delay: -8.5s; animation-duration: 9.5s; }

.tpond--still .tpond__fx * { animation: none !important; }
.tpond--still .tpond-ripple { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tpond .tpond__fx * { animation: none !important; }
}