/* Zelovyn 3D premium layer — hero kit, Master Box scroll scene, herb orbit, tilt cards. All classes prefixed z3- */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

.z3-loader{position:fixed;inset:0;z-index:1000;background:#fff;display:grid;place-items:center;transition:opacity .8s, visibility .8s}
.z3-loader.done{opacity:0;visibility:hidden}
.z3-loader img{width:72px;height:72px;border-radius:16px;animation:z3breathe 1.6s ease-in-out infinite}
@keyframes z3breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

html.z3 .rv{opacity:0;transform:translateY(36px)}
html.no-motion .rv{opacity:1;transform:none}

/* hero 3D stage (replaces the photo frame) */
.hero-dark{background:radial-gradient(ellipse 55% 70% at 75% 55%, #EAF4EE 0%, #FFFFFF 70%) !important}
.z3-stage{position:relative;width:100%;height:min(74vh,660px)}
.z3-stage canvas{width:100% !important;height:100% !important;cursor:grab}
.z3-stage canvas:active{cursor:grabbing}
.z3-hint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted,#5B6B62);letter-spacing:.08em;display:flex;gap:8px;align-items:center;pointer-events:none;white-space:nowrap}
.z3-hint i{width:22px;height:22px;border:1.5px solid #95B7A4;border-radius:50%;display:inline-block;position:relative}
.z3-hint i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#2E7D52;animation:z3drag 2.2s ease-in-out infinite}
@keyframes z3drag{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.z3-fallback{display:none;place-items:center;height:100%}
.z3-fallback svg{max-width:100%;height:auto}
html.no3d .z3-fallback{display:grid}
html.no3d .z3-stage canvas, html.no3d .z3-hint{display:none}

/* count-up band */
.z3-stats{border-block:1px solid var(--line,rgba(21,39,30,.12));padding:38px 0;background:#fff}
.z3-stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.z3-stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,52px);color:#123A2A;line-height:1}
.z3-stat span{font-size:13px;color:var(--muted,#5B6B62);letter-spacing:.04em}

/* Master Box scroll scene */
.z3-box{position:relative;height:100svh;background:linear-gradient(180deg,#FFFFFF 0%,#F1F7F3 100%);overflow:hidden}
.z3-box canvas{position:absolute;inset:0;width:100% !important;height:100% !important}
.z3-box-copy{position:absolute;left:0;right:0;top:12vh;text-align:center;pointer-events:none;z-index:2;padding:0 20px}
.z3-box-copy h2{font-family:var(--serif);font-weight:500;color:#123A2A;font-size:clamp(30px,4.4vw,54px);line-height:1.08;margin:10px 0 0}
.z3-box-copy h2 em{color:#2E7D52}
.z3-kick{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2E7D52}
.z3-caps{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);width:min(560px,90vw);height:84px;z-index:2;pointer-events:none}
.z3-cap{position:absolute;inset:auto 0 0 0;text-align:center;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:16px;padding:12px 16px;box-shadow:0 10px 30px -18px rgba(18,58,42,.4);opacity:0;transform:translateY(14px);transition:opacity .5s, transform .5s}
.z3-cap.on{opacity:1;transform:none}
.z3-cap b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;color:#123A2A}
.z3-cap span{font-size:14px;color:var(--muted,#5B6B62)}
.z3-cap i{font-style:normal;color:var(--c)}
.z3-prog{position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%);width:160px;height:2px;background:rgba(21,39,30,.12);z-index:2;border-radius:2px;overflow:hidden}
.z3-prog div{height:100%;width:0;background:#2E7D52}
html.no3d .z3-box{height:auto;padding:80px 0;display:grid;place-items:center}
html.no3d .z3-box .z3-box-copy{position:static}
html.no3d .z3-caps, html.no3d .z3-prog{display:none}

/* herb orbit */
.z3-herbs{padding:110px 0 90px;background:#123A2A;color:#EAF2EC;position:relative;overflow:hidden}
.z3-herbs .z3-kick{color:#95B7A4}
.z3-herbs h2{font-family:var(--serif);font-weight:500;color:#fff;font-size:clamp(32px,4.6vw,56px);line-height:1.08;margin:10px 0 0}
.z3-herbs h2 em{color:#9FD3B2}
.z3-herb-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;margin-top:24px}
.z3-orbit{position:relative;height:min(72vh,620px)}
.z3-orbit canvas{width:100% !important;height:100% !important;cursor:pointer}
.z3-orbit .z3-fallback{grid-template-columns:repeat(3,1fr);gap:12px;align-content:center}
.z3-orbit .z3-fallback img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #9FD3B2}
.z3-herbcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;backdrop-filter:blur(10px);min-height:280px}
.z3-herbcard .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#95B7A4;font-weight:600}
.z3-herbcard h3{font-family:var(--serif);font-weight:500;font-size:34px;margin:8px 0 4px;color:#fff}
.z3-herbcard .lat{font-family:var(--serif);font-style:italic;color:#B9D3C2;margin-bottom:14px}
.z3-herbcard p{color:#D3E1D7;font-size:15px;margin:0}
.z3-herbcard .src{margin-top:14px;font-size:12px;color:#95B7A4}
.z3-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.z3-chip{background:transparent;color:#EAF2EC;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;font:500 13px var(--sans);cursor:pointer;transition:all .25s}
.z3-chip.on,.z3-chip:hover{background:#EAF2EC;color:#123A2A}
.z3-fine{font-size:12px;color:#95B7A4;margin-top:22px;max-width:70ch}

/* tilt cards */
.z3-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;will-change:transform;position:relative}
.z3-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.7), rgba(255,255,255,0) 55%);opacity:0;transition:opacity .4s;z-index:3}
.z3-tilt:hover .z3-glare{opacity:1}

@media (max-width:860px){
  .z3-stage{height:44vh}
  .hero-dark-in .z3-stage{order:-1;margin-bottom:-14px}
  .hero-dark-copy{text-align:center;margin-inline:auto}
  .z3-stats .container{grid-template-columns:repeat(2,1fr)}
  .z3-herb-grid{grid-template-columns:1fr}
  .z3-orbit{height:60vh}
}