/* ============================================================
   Motion layer — one easing, one duration, transform/opacity only
   ============================================================ */
:root{
  --dur:900ms;
  --dur-fast:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* fade-up reveal, staggered by DOM order inside [data-stagger] */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-stagger]{--i:0}

/* line mask reveal for display type */
.m-mask{display:block;overflow:hidden}
.m-mask > span{display:block;transform:translateY(108%);transition:transform 1.1s var(--ease-out)}
.m-mask.in > span{transform:none}
.m-mask + .m-mask > span{transition-delay:90ms}

/* header condenses */
.head-in{transition:height var(--dur-fast) var(--ease-out)}
.site-header{transition:box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(18,18,18,.06),0 12px 30px rgba(18,18,18,.05)}
.site-header.is-scrolled .head-in{height:64px}
.site-header.is-scrolled .brand-word{font-size:1.45rem;transition:font-size var(--dur-fast) var(--ease-out)}

/* hero photo parallax target */
.hero-media img{will-change:transform;transition:transform .2s linear}

/* links: underline retracts on hover */
.link-quiet,.link-u,.card .ask{position:relative;border-bottom-color:transparent!important}
.link-quiet::after,.link-u::after,.card .ask::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;
  transform-origin:left;transition:transform .5s var(--ease-out);
}
.link-quiet:hover::after,.link-u:hover::after,.card .ask:hover::after{transform:scaleX(.35)}
.sec-head .side{position:relative;border-bottom:0}
.sec-head .side::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--ink);transition:transform .5s var(--ease-out);transform-origin:right}
.sec-head .side:hover::after{transform:scaleX(.4)}

/* buttons */
.btn,.btn-ghost,.btn-solid{transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out)}
.btn:hover{background:#2a2a2a;border-color:#2a2a2a}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* cards */
.card .ph img{transition:transform 1.4s var(--ease-out),opacity .5s}
.card:hover .ph img{transform:scale(1.045)}
.card h3 a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease-out)}
.card:hover h3 a{background-size:100% 1px}
.card .price-line b{transition:letter-spacing .5s var(--ease-out)}
.card:hover .price-line b{letter-spacing:.1em}

/* category tiles */
.cat .meta b{position:relative;display:inline-block}
.cat .meta b::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.cat:hover .meta b::after{transform:scaleX(1)}
.cat span{transition:color .4s}
.cat:hover span{color:var(--ink)}

/* rail arrows */
.rail-wrap{position:relative}
.rail-nav{position:absolute;top:-48px;right:0;display:flex;gap:8px}
.rail-nav button{width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.rail-nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rail-item .ph img{transition:transform 1.1s var(--ease-out),opacity .4s}
.rail-item:hover .ph img{transform:scale(1.04)}

/* craft rows */
.index-list li{transition:background .4s var(--ease-out),padding-left .4s var(--ease-out)}
.index-list li:hover{background:rgba(255,255,255,.04);padding-left:6px}

/* FAQ */
.faq summary{transition:color .3s}
.faq summary:hover{color:var(--moss)}
.faq details[open] .ans{animation:faqIn .5s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* forms */
.field input,.field select,.field textarea{transition:border-color .3s var(--ease-out)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.form-grid .field{transition:transform .5s var(--ease-out)}
.form-grid .field:focus-within{transform:translateY(-1px)}

/* product gallery */
.pdp-main img{transition:opacity .3s var(--ease-out)}
.pdp-thumbs button{transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.pdp-thumbs button:hover{transform:translateY(-2px)}

/* footer links */
.foot-col a{transition:color .25s,padding-left .35s var(--ease-out)}
.foot-col a:hover{padding-left:4px}
.pay-chip{transition:opacity .3s}
.pay-chip:hover{opacity:1}

/* sticky bar entrance */
@media(max-width:900px){
  .sticky-cta{animation:barIn .6s var(--ease-out) both}
  @keyframes barIn{from{transform:translateY(100%)}to{transform:none}}
}

/* ============================================================
   Floating contact — two buttons, label slides out on hover
   ============================================================ */
.float-actions{
  position:fixed;right:20px;bottom:22px;z-index:94;
  display:flex;flex-direction:column;gap:10px;
}
.float-btn{
  position:relative;width:46px;height:46px;display:grid;place-items:center;
  background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(18,18,18,.22);
  transition:transform .45s var(--ease-out),background .3s var(--ease-out),box-shadow .45s var(--ease-out);
}
.float-btn.float-wa{background:var(--forest)}
.float-btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(18,18,18,.28)}
.float-btn .ic{width:21px;height:21px;stroke-width:1.6}
.float-btn.float-wa .ic{fill:currentColor;stroke:none}
.float-btn .fb-label{
  position:absolute;right:58px;top:50%;transform:translate(8px,-50%);
  background:#fff;color:var(--ink);border:1px solid var(--line);
  font-size:11px;letter-spacing:.06em;padding:6px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;box-shadow:0 8px 20px rgba(18,18,18,.1);
  transition:opacity .3s var(--ease-out),transform .45s var(--ease-out);
}
.float-btn:hover .fb-label{opacity:1;transform:translate(0,-50%)}

@media(max-width:900px){
  .float-actions{display:flex;right:12px;bottom:72px;gap:8px}
  .float-btn{width:42px;height:42px}
  .float-btn .fb-label{display:none}
}

@media(prefers-reduced-motion:reduce){
  [data-reveal],.m-mask > span{opacity:1!important;transform:none!important;transition:none!important}
  .hero-media img{transform:none!important}
  *{animation:none!important}
  .float-btn,.float-btn .fb-label{transition:none}
}

/* ==== self-hosted type system ==== */
:root,html{
  --serif:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --display:'Libre Baskerville',Georgia,serif;
  --font:'Inter','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;
  --font-body-family:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --font-heading-family:'Libre Baskerville',Georgia,serif;
}
h1,h2,h3,h4,.h1,.h2,.h3{font-family:var(--serif)}
body{font-family:var(--sans)}

/* ==== self-hosted @font-face ==== */
@font-face{font-family:'Libre Baskerville';src:url('../fonts/librebaskerville-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('../fonts/librebaskerville-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}