/* Pollachi Coir · motion & atmosphere · the living-grove layer
   Every effect here is transform/opacity only, gated for touch and
   honours prefers-reduced-motion (global kill-switch at the end). */

/* ---------- 1 · the living hero ---------- */
.hero-art { position: relative; overflow: hidden; }
.hero-art img {
  width: 100%; height: clamp(380px, 58vw, 660px); object-fit: cover; object-position: 50% 30%;
  transform: scale(var(--kb, 1)) translateY(var(--drift, 0px));
  transition: none; will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: kenburns 26s ease-in-out infinite alternate; }
  @keyframes kenburns { from { scale: 1; } to { scale: 1.07; } }
}
.hero-stage { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%); }
.mist { position: absolute; inset: -12% -18%; opacity: .5; filter: blur(34px); mix-blend-mode: screen; }
.mist.m1 { background:
  radial-gradient(42% 34% at 18% 68%, rgba(250,246,238,.85), transparent 70%),
  radial-gradient(36% 30% at 74% 60%, rgba(243,236,221,.65), transparent 70%);
  animation: mistdrift 38s ease-in-out infinite alternate; }
.mist.m2 { background:
  radial-gradient(46% 36% at 60% 78%, rgba(250,246,238,.7), transparent 72%),
  radial-gradient(30% 26% at 32% 52%, rgba(243,236,221,.5), transparent 70%);
  animation: mistdrift 52s ease-in-out infinite alternate-reverse; opacity: .38; }
@keyframes mistdrift { from { transform: translate3d(-3.5%, 1.5%, 0) scale(1); } to { transform: translate3d(3.5%, -1.5%, 0) scale(1.06); } }
.rays { position: absolute; inset: -30% -10%; mix-blend-mode: soft-light; opacity: .5;
  background: conic-gradient(from 218deg at 78% -8%,
    transparent 0deg, rgba(212,175,55,.32) 7deg, transparent 14deg,
    transparent 22deg, rgba(250,246,238,.5) 29deg, transparent 37deg,
    transparent 46deg, rgba(212,175,55,.24) 53deg, transparent 61deg,
    transparent 70deg, rgba(250,246,238,.34) 78deg, transparent 87deg, transparent 360deg);
  animation: raysway 17s ease-in-out infinite alternate; transform-origin: 78% -8%; }
@keyframes raysway { from { transform: rotate(-2.2deg); opacity: .34; } to { transform: rotate(2.2deg); opacity: .58; } }
#motes { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(250,246,238,.34) 100%); }
@media (max-width: 700px) { .mist { filter: blur(22px); } .rays { opacity: .38; } }

/* ---------- 2 · split-text kinetic reveals ---------- */
.sp-host { text-wrap: initial; }
.sp-w { display: inline-block; overflow: clip; vertical-align: bottom; }
.sp-w > span { display: inline-block; transform: translateY(112%) rotate(1.6deg); filter: blur(5px); opacity: 0;
  transition: transform .82s cubic-bezier(.2,.65,.2,1), filter .82s ease, opacity .6s ease;
  transition-delay: calc(var(--wi) * 65ms); will-change: transform, filter; }
.sp-done .sp-w > span, .sp-w.in > span { transform: none; filter: none; opacity: 1; }

/* ---------- 3 · image wipe reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wipe { clip-path: inset(12% 6% 12% 6% round 16px); transform: scale(1.045); opacity: .001;
    transition: clip-path 1.05s cubic-bezier(.3,.6,.15,1), transform 1.05s cubic-bezier(.3,.6,.15,1), opacity .5s ease; will-change: clip-path, transform; }
  .wipe.in { clip-path: inset(0 0 0 0 round 0px); transform: none; opacity: 1; }
}

/* ---------- 4 · ambient glow fields (the quiet glowing things) ---------- */
.glowfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glowfield i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .1; }
.glowfield i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 6%; background: radial-gradient(circle, #B08D57, transparent 65%); animation: glowdrift 26s ease-in-out infinite alternate; }
.glowfield i:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; top: 44%; background: radial-gradient(circle, #0A3D2E, transparent 65%); opacity: .07; animation: glowdrift 34s ease-in-out infinite alternate-reverse; }
.glowfield i:nth-child(3) { width: 30vw; height: 30vw; left: 30vw; bottom: -8vw; background: radial-gradient(circle, #C1440E, transparent 65%); opacity: .05; animation: glowdrift 42s ease-in-out infinite alternate; }
@keyframes glowdrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw, -3vh, 0) scale(1.12); } }
main { position: relative; z-index: 1; }

/* ---------- 5 · the cursor lantern: one light for the whole house ---------- */
#cursorLantern { position: fixed; inset: 0; pointer-events: none; z-index: 45; opacity: 0;
  transition: opacity .5s ease; mix-blend-mode: soft-light; }
#cursorLantern.on { opacity: 1; }
#cursorLantern[data-zone="green"] { background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgba(10,61,46,.6), transparent 70%); }
#cursorLantern[data-zone="gold"] { background: radial-gradient(330px circle at var(--lx, 50%) var(--ly, 50%), rgba(212,175,55,.75), transparent 70%); }
#cursorLantern[data-zone="warm"] { background: radial-gradient(330px circle at var(--lx, 50%) var(--ly, 50%), rgba(193,68,14,.55), transparent 70%); }

/* ---------- 6 · buttons: magnetic + sheen sweep ---------- */
.btn { position: relative; overflow: hidden; }
.btn .sheen { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0, rgba(250,246,238,.45) 50%, transparent 100%); transform: skewX(-18deg); transition: left .001s; }
.btn:hover .sheen { left: 130%; transition: left .7s cubic-bezier(.3,.6,.2,1); }
.btn.solid .sheen { background: linear-gradient(105deg, transparent 0, rgba(250,246,238,.28) 50%, transparent 100%); }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background .28s ease, color .28s ease, transform .18s cubic-bezier(.2,.6,.3,1), box-shadow .3s ease; }
  .btn:hover { box-shadow: 0 10px 26px rgba(26,23,18,.14); }
}

/* ---------- 7 · card glare (the card never moves) ---------- */
@media (hover: hover) and (pointer: fine) {
  .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; border-radius: inherit; z-index: 2;
    background: linear-gradient(115deg, transparent 30%, rgba(250,246,238,.34) 46%, transparent 62%);
    background-position: var(--gx, 50%) 0; background-size: 220% 100%; mix-blend-mode: soft-light; }
  .door:hover .glare, .olai:hover .glare, .lead:hover .glare { opacity: 1; }
  .door, .olai, .lead { position: relative; }
}

/* ---------- 8 · header: hide on scroll down, return on up ---------- */
.site-head { transition: transform .45s cubic-bezier(.3,.6,.2,1), border-color .3s ease; }
.site-head.tucked { transform: translateY(-110%); }

/* ---------- 9 · article reading thread ---------- */
.thread { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--read, 0));
  background: linear-gradient(90deg, var(--brass), var(--kungumam)); z-index: 60; pointer-events: none; }

/* ---------- 10 · garland self-drawing ---------- */
svg.frondline path, svg.frondline line { stroke-dasharray: var(--len, 60); stroke-dashoffset: var(--len, 60);
  transition: stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--pi) * 46ms); }
svg.frondline circle { opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box;
  transition: opacity .5s ease 1.2s, transform .5s cubic-bezier(.2,.9,.3,1.4) 1.2s; }
.garland.drawn svg.frondline path, .garland.drawn svg.frondline line { stroke-dashoffset: 0; }
.garland.drawn svg.frondline circle { opacity: 1; transform: none; }

/* ---------- 11 · proof strip: live pulse + counters ---------- */
.proofstrip .dotp { display: inline-block; animation: lotpulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes lotpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- 12 · link shimmer (footer + prose) ---------- */
footer.site a { position: relative; width: fit-content; }
footer.site a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--foil), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.3,.6,.2,1); }
footer.site a:hover::after { transform: scaleX(1); }

/* ---------- 13 · cross-document view transitions ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .34s cubic-bezier(.3,.6,.3,1) both; }
  ::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2,.65,.2,1) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
}
.brand { view-transition-name: maison-brand; }

/* ---------- 14 · scroll-driven backup (Chromium native, zero JS) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .issuehero img { animation: heroreveal linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes heroreveal { from { transform: scale(1.08); } to { transform: scale(1); } }
  }
}

/* ---------- 15 · selection + focus polish ---------- */
::selection { background: rgba(176,141,87,.28); color: var(--ink); }

/* ---------- the covenant: stillness when asked ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .mist, .rays, .glowfield i, .proofstrip .dotp { animation: none !important; }
  .sp-w > span { transform: none; filter: none; opacity: 1; transition: none; }
  .wipe { clip-path: none; transform: none; opacity: 1; }
  .site-head.tucked { transform: none; }
  #motes, #cursorLantern, .glare, .thread { display: none; }
  svg.frondline path, svg.frondline line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  svg.frondline circle { opacity: 1; transform: none; transition: none; }
}

/* ---------- 16 · the calling card + newsletter (lead capture) ---------- */
.callcard { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: min(370px, calc(100vw - 32px));
  background: var(--ivory, #F3ECDD); border: 1px solid var(--hairline, #DCD2BC); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(26,23,18,.18); padding: 22px 22px 20px;
  transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,.65,.2,1), opacity .5s ease; }
.callcard.on { transform: none; opacity: 1; pointer-events: auto; }
.callcard .x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 20px; line-height: 1;
  color: var(--ink-mute, #7A6A58); cursor: pointer; padding: 6px; }
.callcard h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 23px; margin: 4px 0 4px; }
.callcard .sub { font-size: 14px; color: var(--ink-mute, #7A6A58); margin: 0 0 14px; }
.leadform .field { margin-bottom: 10px; }
.leadform input { width: 100%; }
.leadrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.leadrow .btn { flex: 1; text-align: center; padding: 11px 10px; font-size: 11.5px; }
.walink { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--estate, #0A3D2E); }
.walink svg { flex: none; }
@media (max-width: 640px) { .callcard { right: 0; left: 0; bottom: 0; width: 100%; border-radius: 16px 16px 0 0; } }
@media (prefers-reduced-motion: reduce) { .callcard { transition: none; } }
.newsletter-in { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; padding: 54px 46px; }
@media (max-width: 800px) { .newsletter-in { grid-template-columns: 1fr; } }
.newsletter-in h2 { text-align: left; margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.6vw, 38px); }
.newsletter-in .fgridf { margin-top: 16px; }

/* ---------- 17 · the centre modal (first greeting) ---------- */
.modalscrim { position: fixed; inset: 0; background: rgba(26,23,18,.52); z-index: 78; opacity: 0; transition: opacity .4s ease; }
.modalscrim.on { opacity: 1; }
.callmodal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97); z-index: 80;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--ivory, #F3ECDD); border: 1px solid var(--hairline, #DCD2BC); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(26,23,18,.35); padding: 26px 26px 22px;
  opacity: 0; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.65,.2,1); }
.callmodal.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.callmodal .x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 22px; line-height: 1;
  color: var(--ink-mute, #7A6A58); cursor: pointer; padding: 6px; }
.callmodal h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 26px; margin: 4px 0 4px; }
.callmodal .sub { font-size: 14.5px; color: var(--ink-mute, #7A6A58); margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .callmodal, .modalscrim { transition: none; } }