/* =========================================================
   Bhatti Organics: interaction layer
   loader · headline reveals · mobile dock
   ========================================================= */

/* ---------- first-visit loader: the egg cracks, the page is revealed ---------- */
.loader { display: none; }
html.intro .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--forest-3); color: var(--paper);
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
}
html.intro body { overflow: hidden; }
html.intro.intro-out .loader { clip-path: inset(0 0 100% 0); }
.ld-egg { width: 92px; height: 116px; overflow: visible; }
.ld-egg path { fill: none; stroke: var(--yolk-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ld-shell { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ldDraw .9s var(--ease) forwards; }
.ld-top { transition: transform .7s cubic-bezier(.76, 0, .24, 1); transform-origin: 46px 62px; }
.ld-yolk { fill: var(--yolk); transform-origin: 46px 78px; transform: scale(0); transition: transform .6s var(--spring) .1s; }
html.intro-crack .ld-top { transform: translate(-4px, -22px) rotate(-16deg); }
html.intro-crack .ld-yolk { transform: scale(1); }
.ld-meta { position: absolute; left: 0; right: 0; bottom: 9vh; display: flex; justify-content: space-between; width: min(1240px, 100% - 48px); margin: 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,248,241,.55); }
.ld-meta b { font-family: var(--f-display); font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--paper); font-variant-numeric: tabular-nums; }
@keyframes ldDraw { to { stroke-dashoffset: 0; } }

/* ---------- headlines rise word by word ---------- */
.js h2.reveal.wsplit { opacity: 1; transform: none; }
.wsplit .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wsplit .wi { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.wsplit.in .wi { transform: none; }

/* ---------- journey: tilt + tap to crack ---------- */
@media (pointer: fine) { .jr-inner { perspective: 1200px; } }
.ji-egg { pointer-events: auto; cursor: pointer; }
.ji-egg:active { scale: .98; }

/* ---------- mobile app dock ---------- */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: 64px; padding: 6px; border-radius: 24px;
    background: rgba(15, 42, 32, .72); color: rgba(251,248,241,.7);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1);
    transition: transform .6s var(--ease), opacity .4s;
  }
  .dock a, .dock button { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 18px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: inherit; transition: color .3s; -webkit-tap-highlight-color: transparent; }
  .dock .ic { width: 21px; height: 21px; }
  .dock .on { color: var(--forest-3); }
  .dock-pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 18px; background: var(--yolk); box-shadow: 0 8px 20px -8px rgba(242,165,22,.8); transform: translateX(calc(var(--di, 0) * 100%)); transition: transform .55s var(--spring); }
  .dock-wa { color: #25D366 !important; }
  .dock-n { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--comb); color: #fff; font-size: 10px; line-height: 17px; font-weight: 800; }
  .dock-n[data-n="0"] { display: none; }
  .dock a:active, .dock button:active { scale: .92; }
  body.in-journey .dock, body.locked .dock { transform: translateY(140%); opacity: 0; }
  .wa-float { display: none !important; }
  .site-footer { padding-bottom: 90px; }
  .invite { bottom: calc(86px + env(safe-area-inset-bottom)) !important; right: 12px !important; left: 12px !important; }
}
.ji-cue .ji-tap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wsplit .wi { transform: none; transition: none; }
  html.intro .loader { display: none; }
  html.intro body { overflow: auto; }
}
.ji-cue .ji-txt { font-weight: inherit; }
@media (max-width: 760px) { .ji-cue .ji-scroll { display: none; } .ji-cue .ji-tap { display: block; } }

/* ---------- hero film (switches on once a clip is set) ---------- */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.ready { opacity: 1; }

/* ---------- chapter index (desktop) ---------- */
.chapters { display: none; }
@media (min-width: 1100px) and (hover: hover) {
  .chapters {
    position: fixed; left: 22px; top: 50%; z-index: 40; display: grid; gap: 4px;
    transform: translateY(-50%); transition: opacity .5s var(--ease), transform .6s var(--ease);
  }
  .chapters a { display: flex; align-items: center; gap: 10px; height: 26px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ch, rgba(29,26,20,.4)); }
  .chapters a i { width: 14px; height: 1.5px; background: currentColor; transition: width .5s var(--ease); }
  .chapters a b { font-weight: 800; font-variant-numeric: tabular-nums; }
  .chapters a span { opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
  .chapters a.on { color: var(--ch-on, var(--yolk-deep)); }
  .chapters a.on i { width: 32px; }
  .chapters:hover a span { opacity: 1; transform: none; }
  .chapters:hover { background: var(--ch-bg, rgba(251,248,241,.92)); border-radius: 14px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); }
  .chapters { padding: 10px 14px 10px 10px; margin-left: -10px; transition: opacity .5s var(--ease), transform .6s var(--ease), background .3s; }
  .chapters.dark { --ch-bg: rgba(8,28,21,.9); }
  .chapters.dark { --ch: rgba(251,248,241,.45); --ch-on: var(--yolk-2); }
  .chapters.away, body.in-journey .chapters { opacity: 0; pointer-events: none; transform: translate(-20px, -50%); }
}

/* ---------- proof: follow the farm ---------- */
.follow {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  margin-top: clamp(56px, 7vw, 90px); padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg); background: var(--forest); color: var(--paper);
  position: relative; overflow: hidden;
}
.follow::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(242,165,22,.35), transparent 70%); pointer-events: none; }
.follow .eyebrow { color: var(--yolk-2); margin-bottom: 10px; }
.follow-tag { margin: 0 0 6px; font-family: var(--f-display); font-style: italic; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; color: var(--yolk-2); }
.follow-sub { margin: 0; color: rgba(251,248,241,.75); }
.follow-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.follow-links a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-light); background: rgba(255,255,255,.06); font-weight: 700; font-size: 14.5px; transition: background .25s, color .25s, transform .3s var(--ease); }
.follow-links a:hover { background: var(--yolk); color: var(--forest-3); transform: translateY(-2px); }
.follow-links .ic { width: 18px; height: 18px; }

/* ---------- membership: tighter on phones ---------- */
@media (max-width: 760px) {
  .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .perks li { flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; border-bottom: 0; background: rgba(255,255,255,.05); }
  .perks li p { display: none; }
  .perks li h3 { font-size: 15px; margin: 0; }
  .area-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .area-list::-webkit-scrollbar { display: none; }
  .area-list li { flex: none; }
  .follow-links a { flex: 1 1 calc(50% - 10px); justify-content: center; padding: 11px 12px; font-size: 13px; }
}