/* BCAnim motion layer. Pairs with anim.js. Only transform, opacity, clip-path and mask-position move. */

/* ---------- shared: real cup stack + sheen ---------- */
.bca-cup{position:relative;height:100%;aspect-ratio:2/3;margin:0 auto;will-change:transform}
.bca-cup>*,.bca-cup>div>img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.bca-cup img:not([src]){visibility:hidden}
.bca-floor{position:absolute;left:12%;right:12%;top:auto!important;bottom:-1.5%!important;height:6%!important;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none}
.bca-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.bca-sheen::before{content:"";position:absolute;inset:-5% -40%;background:linear-gradient(102deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.16) 54%,rgba(255,255,255,0) 60%);transform:translateX(var(--sx,-130%))}
.bca-sheen.bca-go::before{animation:bca-sweep 1.1s cubic-bezier(.3,.6,.2,1) both}
@keyframes bca-sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ---------- 1. build: a tall track with a sticky stage ---------- */
.bca-build{position:relative;height:calc(100svh * var(--bca-len,4.2));background:var(--bottle,#0B2B22);color:var(--cream,#F4EFE6)}
.bca-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.2,.7,.1,1)}
.bca-stage.bca-done{color:var(--bca-ink)}
.bca-flood{position:absolute;inset:0;z-index:-1;background:var(--bca-bg);clip-path:circle(0% at 50% 56%)}
.bca-copy{position:absolute;z-index:2;left:max(56px,env(safe-area-inset-left,0px));top:clamp(104px,16vh,170px);width:min(31vw,440px)}
.bca-eye{display:block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass,#D9B26A);margin-bottom:16px;transition:color .45s}
.bca-done .bca-eye{color:inherit;opacity:.7}
.bca-h{display:grid;margin:0;font-size:clamp(64px,7.4vw,124px);line-height:.86;letter-spacing:.005em;overflow:hidden;padding-bottom:.04em}
.bca-h>span{grid-area:1/1;align-self:end;justify-self:start;white-space:nowrap;will-change:transform}
.bca-h2{opacity:0}
.bca-lead{margin:22px 0 0;font-size:17px;line-height:1.5;max-width:34ch;opacity:.78}
.bca-steps{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid currentColor;border-color:rgba(127,127,127,.35)}
.bca-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:15px 0 14px;border-bottom:1px solid rgba(127,127,127,.35);opacity:.42;transition:opacity .35s}
.bca-steps li.on,.bca-steps li.ok{opacity:1}
.bca-steps b{font-size:12px;font-weight:600;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.bca-steps span{font-size:19px;font-weight:600;letter-spacing:-.02em}
.bca-steps em{font-style:normal;font-size:14px;font-weight:500;opacity:.8;text-align:right}
.bca-steps li.ok b::after{content:" ✓";letter-spacing:0}
.bca-steps i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brass,#D9B26A);transform:scaleX(0);transform-origin:0 50%}
.bca-done .bca-steps i{background:currentColor}
.bca-cupbox{position:absolute;z-index:1;left:50%;top:54%;height:min(70svh,700px);transform:translate(-50%,-50%)}
.bca-tw{clip-path:inset(8.4% 0 0 0)}
.bca-lead{display:grid}.bca-lead>span{grid-area:1/1;transition:opacity .45s}.bca-lead>span+span{opacity:0}.bca-done .bca-lead>span{opacity:0}.bca-done .bca-lead>span+span{opacity:1}
.bca-num{position:absolute;z-index:1;right:max(56px,env(safe-area-inset-right,0px));top:50%;height:min(26vw,250px);margin-top:calc(min(26vw,250px) / -2);overflow:hidden;text-align:right;opacity:0}
.bca-nr>div{height:min(26vw,250px);display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.bca-num b{display:block;font-size:min(20vw,200px);line-height:.84;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.9}
.bca-num span{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.bca-cup .bca-f1,.bca-cup .bca-f2{will-change:clip-path}
.bca-mix{-webkit-mask:url(mask-mix2.png) 0 0/200% 100% no-repeat;mask:url(mask-mix2.png) 0 0/200% 100% no-repeat}
.bca-s{-webkit-mask-size:100% 250%!important;mask-size:100% 250%!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:0 93.4%;mask-position:0 93.4%;opacity:0}
.bca-t{opacity:0}
.bca-top2{-webkit-mask:url(mask-top2.png) 0 0/100% 100% no-repeat;mask:url(mask-top2.png) 0 0/100% 100% no-repeat}
.bca-lb{opacity:0;transform-origin:50% 43.5%}
.bca-lsh{opacity:0;background:radial-gradient(22% 15.5% at 50% 45%,rgba(0,0,0,.45),rgba(0,0,0,0) 100%);filter:blur(2px)}
.bca-ticket{position:absolute;z-index:3;right:max(56px,env(safe-area-inset-right,0px));top:50%;margin-top:-150px;width:300px;background:#FBF8F2;color:#0E1412;border-radius:14px;padding:20px 22px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);opacity:0;visibility:hidden;
  -webkit-mask:radial-gradient(circle at 0 62%,transparent 9px,#000 9.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 62%,transparent 9px,#000 9.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 62%,transparent 9px,#000 9.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 62%,transparent 9px,#000 9.5px) right/51% 100% no-repeat}
.bca-tk{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5E6A64}
.bca-tn{font-size:40px;line-height:.9;margin:12px 0 14px}
.bca-ticket dl{margin:0;border-top:1px dashed #CFC6B4}
.bca-ticket dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #CFC6B4;font-size:14px}
.bca-ticket dt{color:#5E6A64}.bca-ticket dd{margin:0;font-weight:600;text-align:right}
.bca-t1l{display:none;margin:0;font-size:13px;font-weight:500;color:#5E6A64}
.bca-tf{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8C6A24}
@media (max-width:1180px) and (min-width:901px){.bca-num{display:none}.bca-copy{width:28vw}.bca-ticket{width:230px;padding:16px 18px}.bca-tn{font-size:30px}.bca-cupbox{height:min(62svh,44vw)}.bca-lead{display:none}}
@media (max-width:900px){
  .bca-copy{left:20px;right:20px;top:calc(80px + env(safe-area-inset-top,0px));width:auto}
  .bca-eye{margin-bottom:10px}
  .bca-h{font-size:clamp(46px,13.5vw,76px)}
  .bca-lead,.bca-num{display:none}
  .bca-steps{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0}
  .bca-steps li{display:block;padding:8px 0 9px;border-bottom:1px solid rgba(127,127,127,.35)}
  .bca-steps b{display:block;font-size:10px}
  .bca-steps span{display:block;font-size:15px;line-height:1.2;margin-top:2px}
  .bca-steps em{display:block;text-align:left;font-size:12px;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bca-cupbox{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));height:min(44svh,420px);transform:translateX(-50%)}
  .bca-ticket{left:20px;right:20px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));margin:0;width:auto;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;border-radius:12px;
    -webkit-mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat;
    mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat}
  .bca-tk{display:none}.bca-ticket dl{display:none}
  .bca-tn{font-size:24px;margin:0;grid-column:1}
  .bca-t1l{display:block;grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bca-tf{grid-column:2;grid-row:1/3;margin:0;font-size:10px;letter-spacing:.12em;text-align:right;max-width:9ch;line-height:1.3}
}
@media (max-width:900px) and (max-height:700px){.bca-steps em{display:none}.bca-cupbox{height:34svh}}
/* reduced motion / no GSAP: the finished cup, shown once */
.bca-static{height:auto}
.bca-static .bca-stage{position:relative}

/* ---------- 2. cycle ---------- */
.bca-cyc{position:relative;isolation:isolate;transition-property:color!important}
.bca-cyc>.bca-flood{position:absolute;inset:0;z-index:-1;width:100%;height:100%;clip-path:none;background:none;pointer-events:none}
.bca-cups{perspective:1100px}
.bca-cups>.cupwrap{display:none}
.bca-slot{position:absolute;inset:0;transform-origin:50% 90%;will-change:transform,opacity}
.bca-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
.bca-slot>.bca-floor{bottom:.5%!important}

/* ---------- 3. drip divider ---------- */
.bca-drip{position:relative;display:block;height:clamp(72px,11vw,170px);margin:-1px 0;overflow:hidden;pointer-events:none}
.bca-dsvg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- 4. delights ---------- */
.tile .cupwrap .cup{will-change:transform}