/* =========================================================
   Amrutha Farms — premium glass / 3D layer
   Loaded after styles.css; only adds depth, blur and motion
   on top of the existing design (same green + gold palette).
   ========================================================= */
:root {
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.34) 100%);
  --glass-border: rgba(255,255,255,.78);
  --glass-blur: blur(16px) saturate(165%);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(192,143,46,.14),
    0 .3rem .8rem rgba(15,59,28,.07),
    0 1.6rem 3.2rem -1.2rem rgba(15,59,28,.26);
  --glass-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(192,143,46,.22),
    0 .6rem 1.4rem rgba(15,59,28,.1),
    0 2.8rem 4.8rem -1.6rem rgba(15,59,28,.38),
    0 0 0 1px rgba(220,188,106,.45);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

html { scroll-padding-top: 7.5rem; }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #135522, #2f7d2c 40%, #dcbc6a 75%, #f3d98a);
  box-shadow: 0 0 10px rgba(220,188,106,.7);
  pointer-events: none;
}

/* ---------- Cursor light ---------- */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 15; width: 36rem; height: 36rem; margin: -18rem 0 0 -18rem;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle, rgba(255,246,214,.55) 0%, rgba(255,236,180,.18) 35%, rgba(255,236,180,0) 70%);
  mix-blend-mode: soft-light; will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ---------- Glass navbar ---------- */
.site-header { position: fixed; }
.site-header::before {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
          backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 .8rem 2.4rem -1rem rgba(15,59,28,.18);
  transition: top .5s var(--ease-out), left .5s var(--ease-out), right .5s var(--ease-out),
              height .5s var(--ease-out), border-radius .5s var(--ease-out), background .5s, box-shadow .5s;
}
.site-header::after { /* gold hairline under the glass */
  content: ""; position: absolute; left: 0; right: 0; top: 6.2rem; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(220,188,106,.65) 30%, rgba(220,188,106,.65) 70%, transparent);
  transition: opacity .4s;
}
.logo { transform-origin: 0 0; transition: transform .5s var(--ease-out), filter .5s; }
.main-nav a { transition: color .25s, text-shadow .25s; }
.main-nav a::before { /* animated gold underline on hover */
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -.55rem; height: .2rem; border-radius: 2px;
  background: linear-gradient(90deg, #c08f2e, #e2c070); transition: left .3s var(--ease-out), right .3s var(--ease-out);
}
.main-nav a:hover::before { left: 0; right: 0; }
.main-nav a.active::before { display: none; }
.main-nav a:hover { text-shadow: 0 0 .8rem rgba(220,188,106,.55); }
.icon-btn { transition: transform .25s var(--ease-out), color .25s, filter .25s; }
.icon-btn:hover { transform: translateY(-2px) scale(1.08); color: var(--green-500); filter: drop-shadow(0 .3rem .5rem rgba(15,59,28,.25)); }
.cart-count { box-shadow: 0 0 0 .12rem #fff, 0 .2rem .5rem rgba(15,59,28,.4); }
.cart-count.bump { animation: cartBump .5s var(--ease-out); }
@keyframes cartBump { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }

@media (min-width: 901px) {
  .site-header.is-scrolled::before {
    top: .9rem; left: max(1.6rem, calc(50% - 46rem)); right: max(1.6rem, calc(50% - 46rem));
    height: 6rem; border-radius: 99px;
    background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 100%);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(220,188,106,.35),
                0 1.2rem 3rem -1rem rgba(15,59,28,.32), 0 0 0 1px rgba(220,188,106,.25);
  }
  .site-header.is-scrolled::after { opacity: 0; }
  .site-header.is-scrolled .logo { transform: translate(.6rem, 1.05rem) scale(.56); filter: drop-shadow(0 .3rem .6rem rgba(15,59,28,.2)); }
}

/* ---------- Buttons: depth + sheen ---------- */
.btn-green {
  background-image:
    linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #1c7032 0%, #0f4a1e 60%, #0b3f19 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -.2rem .3rem rgba(0,0,0,.25),
    0 .25rem .5rem rgba(12,60,25,.3),
    0 .9rem 1.8rem -.6rem rgba(12,60,25,.55);
  transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s, background-position .9s var(--ease-out), translate .35s var(--ease-out);
}
.btn-green:hover {
  background-position: -60% 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -.2rem .3rem rgba(0,0,0,.25),
    0 .35rem .7rem rgba(12,60,25,.3),
    0 1.4rem 2.6rem -.6rem rgba(12,60,25,.6),
    0 0 0 .15rem rgba(220,188,106,.45);
}
.btn:active { filter: brightness(.95); }
.btn-outline {
  background: linear-gradient(155deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 .3rem .8rem rgba(120,100,40,.14), 0 1rem 2rem -1rem rgba(15,59,28,.35);
  transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s, translate .35s var(--ease-out);
}
.btn-outline:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 .15rem rgba(220,188,106,.55), 0 1.4rem 2.4rem -1rem rgba(15,59,28,.4); }
.btn-gold-outline {
  background: linear-gradient(180deg, rgba(20,85,36,.72), rgba(11,63,25,.72));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 1.2rem rgba(217,184,78,.25), 0 .6rem 1.4rem rgba(0,0,0,.35);
  transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s, translate .35s var(--ease-out);
}
.btn-gold-outline:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 2rem rgba(217,184,78,.55), 0 .8rem 1.8rem rgba(0,0,0,.4); }
.round-btn { transition: transform .25s var(--ease-out), filter .25s, translate .35s var(--ease-out), box-shadow .25s; }
.round-btn:hover { box-shadow: 0 0 0 .25rem rgba(220,188,106,.45), 0 .5rem 1rem rgba(10,60,25,.45); }

/* ---------- Glass icon rings ---------- */
.ring {
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.7) 45%, rgba(250,244,224,.45) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
          backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 0 0 .2rem rgba(255,255,255,.55),
    inset 0 .18rem .3rem rgba(255,255,255,.95),
    inset 0 -.35rem .7rem rgba(192,143,46,.2),
    0 .5rem 1.2rem rgba(15,59,28,.2);
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
.ring svg { transition: transform .8s var(--ease-out); filter: drop-shadow(0 .15rem .15rem rgba(15,59,28,.25)); }
.hero-features li:hover .ring, .stats li:hover .ring, .good-card:hover .ring {
  transform: translateY(-.35rem);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.7), 0 0 0 .4rem rgba(220,188,106,.35),
              inset 0 .18rem .3rem #fff, inset 0 -.35rem .7rem rgba(192,143,46,.25), 0 1rem 1.8rem rgba(15,59,28,.28);
}
.hero-features li:hover .ring svg, .stats li:hover .ring svg, .good-card:hover .ring svg { transform: rotateY(360deg); }
.ring.sm { box-shadow: 0 0 0 .15rem rgba(255,255,255,.6), inset 0 .12rem .25rem #fff, inset 0 -.25rem .5rem rgba(192,143,46,.2), 0 .35rem .8rem rgba(15,59,28,.2); }

/* gentle floating of the hero feature rings */
.hero-features .ring { animation: floaty 5.5s ease-in-out infinite; }
.hero-features li:nth-child(2) .ring { animation-delay: -1.4s; }
.hero-features li:nth-child(3) .ring { animation-delay: -2.8s; }
.hero-features li:nth-child(4) .ring { animation-delay: -4.2s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.35rem; } }

/* ---------- Hero: entrance + mouse parallax ---------- */
.hero-bg {
  translate: calc(var(--mx, 0) * -.7rem) calc(var(--my, 0) * -.45rem);
  scale: 1.02; transform-origin: 50% 0;
  transition: translate 1.1s var(--ease-out);
}
.hero-copy { translate: calc(var(--mx, 0) * .35rem) calc(var(--my, 0) * .25rem); transition: translate 1.1s var(--ease-out); }
.sign-text { translate: calc(var(--mx, 0) * .9rem) calc(var(--my, 0) * .6rem); transition: translate 1.1s var(--ease-out); }
.hero-features { translate: calc(var(--mx, 0) * .5rem) calc(var(--my, 0) * .3rem); transition: translate 1.1s var(--ease-out); }

.eyebrow, .hero h1, .hero-lead, .hero-btns, .hero-features li, .sign-text span { animation: riseIn 1s var(--ease-out) backwards; }
.eyebrow { animation-delay: .1s; }
.hero h1 { animation-delay: .22s; }
.hero-lead { animation-delay: .38s; }
.hero-btns { animation-delay: .5s; }
.hero-features li:nth-child(1) { animation-delay: .62s; }
.hero-features li:nth-child(2) { animation-delay: .7s; }
.hero-features li:nth-child(3) { animation-delay: .78s; }
.hero-features li:nth-child(4) { animation-delay: .86s; }
.sign-text span { display: inline-block; animation: inkIn 1.4s var(--ease-out) .9s backwards; }
@keyframes riseIn { from { opacity: 0; translate: 0 2.2rem; filter: blur(6px); } }
@keyframes inkIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Ambient glass backdrop (gives the blur something to refract) ---------- */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbs span {
  position: absolute; border-radius: 50%;
  animation: drift 18s ease-in-out infinite alternate;
}
.orbs span:nth-child(1) { width: 34rem; height: 34rem; left: -6rem; top: 6rem; background: radial-gradient(circle, rgba(47,125,44,.2), rgba(47,125,44,0) 68%); }
.orbs span:nth-child(2) { width: 30rem; height: 30rem; right: -4rem; top: 2rem; background: radial-gradient(circle, rgba(220,188,106,.32), rgba(220,188,106,0) 68%); animation-duration: 22s; animation-delay: -6s; }
.orbs span:nth-child(3) { width: 26rem; height: 26rem; left: 38%; bottom: -10rem; background: radial-gradient(circle, rgba(126,178,72,.2), rgba(126,178,72,0) 68%); animation-duration: 26s; animation-delay: -12s; }
.goodness .orbs span:nth-child(1) { top: -4rem; }
.testimonials .orbs span:nth-child(1) { top: -6rem; left: 10%; }
.testimonials .orbs span:nth-child(2) { top: -2rem; }
@keyframes drift {
  0% { translate: 0 0; }
  50% { translate: 4rem -2rem; }
  100% { translate: -3rem 2.4rem; }
}

/* ---------- Glass cards with 3D tilt ---------- */
.product-card, .good-card, .t-card {
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .6s var(--ease-out), box-shadow .45s, border-color .45s;
  will-change: transform;
}
.good-card, .t-card { overflow: hidden; }
.product-card:hover, .good-card:hover { --lift: -.6rem; box-shadow: var(--glass-shadow-hover); border-color: rgba(255,255,255,.95); }
.t-card:hover { --lift: -.2rem; box-shadow: var(--glass-shadow-hover); }
.product-card:hover, .good-card:hover, .t-card:hover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
}
.product-card.tilting, .good-card.tilting, .t-card.tilting { transition: transform .12s linear, box-shadow .45s, border-color .45s; }

/* moving light reflection */
.product-card::after, .good-card::after, .t-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(125deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%);
  opacity: .35; transition: opacity .45s;
  mix-blend-mode: soft-light;
}
.product-card:hover::after, .good-card:hover::after, .t-card:hover::after { opacity: 1; }

/* inner parallax: the product photo shifts against the tilt */
.pimg { position: relative; }
.pimg::after { /* glass edge where photo meets the panel */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.28));
}
.pimg img { translate: calc(var(--px, 0) * -.45rem) calc(var(--py, 0) * -.35rem); transition: transform .5s ease, translate .3s var(--ease-out); }
.product-card .round-btn { z-index: 4; }

.t-viewport { width: 77.7rem; margin-left: 8.2rem; padding: .6rem .6rem 1rem; margin-top: -.4rem; }
.t-card img { box-shadow: 0 .4rem .9rem rgba(15,59,28,.18); }

/* glass arrows + play button */
.t-arrow {
  background: linear-gradient(155deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 #fff, 0 .5rem 1.2rem rgba(15,59,28,.2);
  transition: transform .25s var(--ease-out), box-shadow .25s, translate .35s var(--ease-out), color .25s;
}
.t-arrow:hover { color: var(--green-600); box-shadow: inset 0 1px 0 #fff, 0 0 0 .2rem rgba(220,188,106,.45), 0 .7rem 1.4rem rgba(15,59,28,.26); }
.watch .play {
  background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .4rem rgba(255,255,255,.18), 0 .6rem 1.6rem rgba(0,0,0,.35);
}

/* ---------- Farm + natural home: mouse depth ---------- */
.farm-img { translate: calc(var(--fx, 0) * -.9rem) calc(var(--fy, 0) * -.6rem); transition: translate 1.2s var(--ease-out); }
@media (min-width: 901px) {
  .natural-home { background-position: 0 0, calc(50% + var(--nx, 0) * -1rem) calc(92% + var(--ny, 0) * -.6rem); transition: background-position 1.2s var(--ease-out); }
}
.signpost { transition: transform .6s var(--ease-out); transform-origin: 50% 100%; }
.signpost:hover { transform: rotate(-1.5deg); }
.plank { transition: translate .35s var(--ease-out), box-shadow .35s; }
.plank:hover { translate: -.4rem 0; box-shadow: 0 .4rem .8rem rgba(60,30,5,.4), inset 0 1px 0 rgba(255,240,210,.6); }

/* ---------- Glass toast + modal ---------- */
.toast {
  background: linear-gradient(155deg, rgba(19,85,34,.82), rgba(11,63,25,.72));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(220,188,106,.3), 0 1rem 2.4rem rgba(0,0,0,.3);
}
.modal { background: rgba(0,24,10,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fadeIn .35s ease; }
.modal-box { border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5); animation: popIn .5s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(30px) scale(.94); } }

/* ---------- Scroll reveal (added by glass.js, below the fold only) ---------- */
.reveal {
  opacity: 0; translate: 0 2.6rem;
  transition: opacity .9s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s),
              transform .6s var(--ease-out), box-shadow .45s, border-color .45s;
}
.reveal.in { opacity: 1; translate: 0 0; }

/* =========================================================
   Tablet / mobile
   ========================================================= */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .site-header::before {
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  }
  .site-header::after { top: 64px; }
  .site-header.is-scrolled::before { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); box-shadow: 0 10px 30px -12px rgba(15,59,28,.35); }
  .site-header.is-scrolled .logo { transform: translateY(-22px) scale(.82); }
  .main-nav {
    z-index: 3; /* glass menu slides over the overhanging logo */
    background: linear-gradient(180deg, rgba(255,253,245,.82), rgba(255,253,245,.66));
    -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid rgba(255,255,255,.7);
  }
  .main-nav a { border-top-color: rgba(220,188,106,.25); }
  .main-nav a::before { display: none; }
  .hero-bg, .hero-copy, .sign-text, .hero-features, .farm-img { translate: none; }
  .hero-bg { scale: 1; }
  .t-viewport { width: auto; margin: 0 46px; padding: 6px 4px 12px; }
  .cursor-glow { display: none; }
  .orbs span:nth-child(1) { width: 300px; height: 300px; }
  .orbs span:nth-child(2) { width: 260px; height: 260px; }
  .orbs span:nth-child(3) { width: 240px; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; }
  .hero-bg, .hero-copy, .sign-text, .hero-features, .farm-img { translate: none; }
}