/* Pollachi Coir · hero.css · the estate hero (3 Sept 2026)
   The badge sits among the things the house sells: keyed photoreal product cut-outs arranged around it.
   At rest they hover close to the badge; as the page scrolls they burst outward and grow (scroll progress
   --p 0..1 is written by hero.js), with a quiet idle float and pointer depth on fine pointers.
   Everything is transform/opacity; reduced-motion gets the still composition. */
.hero-estate { padding: 0; background: var(--paper); overflow: clip; }
.hero-estate .stage {
  position: relative; container-type: size; overflow: clip;
  height: clamp(600px, 88vh, 900px);
  display: grid; align-content: center; justify-items: center; gap: 0;
  --p: 0; --mx: 0; --my: 0; --ox: 50%; --oy: 44%; --k: 1; --kx: 1; --ky: 1;
}
/* copy sits above the bottom fade (::after, z 7) so the buttons never wash out on short viewports */
.hero-estate .est { position: relative; z-index: 8; margin: 0 0 22px; }
.hero-estate .seal {
  position: relative; z-index: 5; width: clamp(200px, 25cqw, 330px);
  filter: drop-shadow(0 22px 38px rgba(26, 23, 18, .20)) drop-shadow(0 2px 4px rgba(26, 23, 18, .12));
  transform: translate(calc(var(--mx) * -5px), calc(var(--my) * -3px)) scale(calc(1 - var(--p) * .05));
  will-change: transform;
}
.hero-estate .seal img { display: block; width: 100%; height: auto; }
.hero-estate h1.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-estate .tagline { position: relative; z-index: 8; margin-top: 26px; }
.hero-estate .sub { position: relative; z-index: 8; color: #6B5B4A; }
.hero-estate .ctas { position: relative; z-index: 8; margin-bottom: 0; }
/* brass and ink type must read where a cut-out passes behind it: a soft paper halo, every width */
.hero-estate .est, .hero-estate .tagline, .hero-estate .sub { text-shadow: 0 0 14px var(--paper), 0 0 6px var(--paper), 0 0 2px var(--paper); }

/* the elements: origin at the badge centre, offsets in container units, burst along their own radius */
.hero-estate .el {
  position: absolute; left: var(--ox); top: var(--oy); z-index: var(--z, 2);
  --xx: var(--x); --yy: var(--y);
  --ww: var(--w);
  width: calc(var(--ww) * var(--k) * 1cqw); margin: 0; pointer-events: none;
  opacity: var(--o, .96); will-change: transform;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--xx) * var(--kx) * 1cqw * (1 + var(--p) * 1.6 * var(--d)) + var(--mx) * var(--d) * 12px),
              calc(var(--yy) * var(--ky) * 1cqh * (1 + var(--p) * 1.6 * var(--d)) + var(--my) * var(--d) * 8px))
    rotate(calc(var(--r) * 1deg + var(--p) * var(--d) * 10deg))
    scale(calc(1 + var(--p) * .9 * var(--d)));
  transition: scale 1.2s cubic-bezier(.2, .75, .2, 1) var(--dl, 0s), opacity 1.2s ease var(--dl, 0s);
}
.hero-estate .el:not(.in) { scale: .55; opacity: 0; }   /* each cut-out arrives once its own image has decoded */
.hero-estate .el img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 14px 22px rgba(26, 23, 18, .22)) drop-shadow(0 1px 2px rgba(26, 23, 18, .10));
  animation: elfloat var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite alternate;
}
@keyframes elfloat { from { translate: 0 -5px; } to { translate: 0 6px; } }

/* the tissue layer: pale palms, coconut pairs and a few Pollachi motifs behind everything, drifting away from the
   cursor (--fx/--fy from hero.js) and bursting gently on scroll */
.hero-estate .bg {
  position: absolute; left: var(--ox); top: var(--oy); z-index: 1; pointer-events: none;
  --xx: var(--x); --yy: var(--y); --ww: var(--w); --bx: 1; --by: 1; --kb: 1;
  width: calc(var(--ww) * var(--kb) * 1cqw); opacity: var(--o, .5); will-change: transform;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--xx) * var(--bx) * 1cqw * (1 + var(--p) * .55 * var(--d)) + var(--fx, 0px) + var(--mx) * var(--d) * 7px),
              calc(var(--yy) * var(--by) * 1cqh * (1 + var(--p) * .55 * var(--d)) + var(--fy, 0px) + var(--my) * var(--d) * 5px))
    rotate(calc(var(--r) * 1deg + var(--p) * var(--d) * 4deg))
    scale(calc(1 + var(--p) * .25 * var(--d)));
  transition: opacity 1.6s ease .3s;
}
.hero-estate .bg:not(.in) { opacity: 0; }
.hero-estate .bg img { display: block; width: 100%; height: auto; animation: elfloat var(--fd, 9s) ease-in-out var(--fdl, 0s) infinite alternate; }

/* the header sits ABOVE the hero, never over it: in flow on this page, docking as a fixed bar only once the hero has scrolled away */
body:has(.hero-estate) .site-head { position: relative; }
body:has(.hero-estate) .site-head:not(.docked) { transform: none !important; }
body:has(.hero-estate) .site-head.docked { position: fixed; top: 0; left: 0; right: 0; animation: headdrop .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes headdrop { from { transform: translateY(-100%); } to { transform: none; } }

/* a warm ground behind the composition, so the cut-outs sit in a space rather than on a flat sheet */
.hero-estate .stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 52% at 50% 46%, rgba(243, 236, 221, .95), rgba(250, 246, 238, 0) 70%),
    radial-gradient(38% 30% at 22% 78%, rgba(176, 141, 87, .12), transparent 70%),
    radial-gradient(34% 28% at 80% 22%, rgba(176, 141, 87, .10), transparent 70%);
}
.hero-estate .stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 246, 238, 0), var(--paper));
}

/* the grove photograph follows as a band, no longer the hero */
.hero-estate .hero-art { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero-estate .bg.pc-hide { display: none; }
  .hero-estate .bg { --kb: 1.5; --bx: .78; --by: .82; }   /* phones: the tissue scales up less and keeps inside the narrow stage */
  /* phones: the ring spreads sideways past the copy column and flattens, so the cut-outs peek in from the edges
     around the badge instead of sitting behind the tagline and proof line */
  .hero-estate .stage { --k: 1.55; --kx: 1; --ky: 1; height: clamp(640px, 100svh, 860px); }
  .hero-estate .el { opacity: .92; --xx: var(--px, var(--x)); --yy: var(--py, var(--y)); --ww: var(--pw, var(--w)); }
  /* phones: the kicker moves under the badge (the ring's top pair sits where it was), leaving the ring clean */
  .hero-estate .seal { width: clamp(180px, 50cqw, 230px); margin: 34px 0 46px; }
  .hero-estate .est { order: 1; margin: 0 0 6px; }
  .hero-estate h1.vh { order: 2; } .hero-estate .tagline { order: 3; margin-top: 10px; } .hero-estate .sub { order: 4; } .hero-estate .ctas { order: 5; }
  .hero-estate .el.pc-hide { display: none; }
  .hero-estate .sub { font-size: 15.5px; padding: 0 16px; }
}
@media (max-width: 480px) {
  .hero-estate .stage { --k: 1.65; --kx: 1; --ky: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-estate .stage { --p: 0 !important; --mx: 0 !important; --my: 0 !important; }
  .hero-estate .el, .hero-estate .el:not(.in) { scale: 1; opacity: var(--o, .96); transition: none; }
  .hero-estate .bg:not(.in) { opacity: var(--o, .5); }
  .hero-estate .bg img { animation: none; }
  .hero-estate .el img { animation: none; }
}