/* ============================================================
   THE HERO'S TWO CONTROLS
   The contract capsule and the door to wishbone.one. Both sit on
   film, so both are dark glass with a lit edge rather than a
   bright slab, and both answer when they are touched.
   ============================================================ */

.hero .hero-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  margin:22px 0 0;
}

/* ---------- the contract capsule ---------- */
.hero .ca-capsule{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:13px;
  margin:0;padding:7px 7px 7px 17px;
  background:linear-gradient(140deg,rgba(11,24,14,.82),rgba(5,12,7,.9));
  border:1px solid rgba(0,200,5,.26);border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.055);
  transition:border-color .3s,box-shadow .3s,transform .2s;
}
.hero .ca-capsule:hover{
  border-color:rgba(0,200,5,.5);
  box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 34px rgba(0,200,5,.15),inset 0 1px 0 rgba(255,255,255,.07);
}
/* a slow green light drifting along the rim, so it reads as live */
.hero .ca-capsule::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(0,200,5,.13) 50%,transparent 64%);
  transform:translateX(-130%);
  animation:caDrift 7s cubic-bezier(.4,0,.3,1) 2s infinite;
}
@keyframes caDrift{0%{transform:translateX(-130%)}26%,100%{transform:translateX(130%)}}
.hero .ca-capsule>*{position:relative;z-index:1}

.ca-lbl{
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--green-soft);flex-shrink:0;
  opacity:.85;
}
.hero .ca-capsule code{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;
  color:var(--cream);white-space:nowrap;
}

.hero #heroCopy.grad-pill{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;padding:11px 18px;min-height:40px;
  font-size:.66rem;letter-spacing:.18em;
}
.hero #heroCopy.grad-pill::before{
  content:"";width:13px;height:13px;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1);
}
.hero #heroCopy.grad-pill:hover::before{transform:translateY(-1px) scale(1.08)}

/* the moment it lands: the rim goes gold and a sweep runs the length */
.hero .ca-capsule.copied{
  border-color:rgba(217,178,74,.75);
  box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 40px rgba(217,178,74,.3);
}
.hero .ca-capsule.copied::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(217,178,74,.34) 50%,transparent 70%);
  animation:caSweep .75s cubic-bezier(.3,0,.2,1) forwards;
}
@keyframes caSweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.hero .ca-capsule.copied code{color:var(--gold)}
.hero .ca-capsule.copied #heroCopy::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  animation:caTick .45s cubic-bezier(.2,1.6,.4,1);
}
@keyframes caTick{0%{transform:scale(.4) rotate(-18deg)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- the door to wishbone.one ---------- */
.wish-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  min-height:48px;padding:13px 22px;border-radius:999px;
  text-decoration:none;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
  background:linear-gradient(140deg,rgba(28,22,6,.72),rgba(10,14,7,.86));
  border:1px solid rgba(217,178,74,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  transition:color .28s,border-color .28s,box-shadow .28s,transform .2s;
}
.wish-btn .wb-ico{
  width:19px;height:20px;flex-shrink:0;color:currentColor;
  transition:transform .45s cubic-bezier(.2,1.4,.4,1);
}
.wish-btn .wb-ico svg{width:100%;height:100%;display:block}
.wish-btn .wb-go{font-size:.85em;opacity:.75;transition:transform .3s,opacity .3s}
/* the gold fills in from the left on hover */
.wish-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#e6c565,#c9a441 55%,#a8811f);
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.wish-btn:hover{
  color:#17130a;border-color:var(--gold);
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 42px rgba(217,178,74,.34);
  transform:translateY(-2px);
}
.wish-btn:hover::before{transform:translateX(0)}
.wish-btn:hover .wb-ico{transform:rotate(-12deg) scale(1.12)}
.wish-btn:hover .wb-go{transform:translate(3px,-3px);opacity:1}
.wish-btn:active{transform:translateY(0) scale(.98)}
/* a slow breath so it is never quite still */
.wish-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-2;pointer-events:none;
  box-shadow:0 0 0 0 rgba(217,178,74,.4);
  animation:wishBreath 4.2s ease-in-out infinite;
}
@keyframes wishBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(217,178,74,.34)}
  50%{box-shadow:0 0 0 7px rgba(217,178,74,0)}
}

/* ---------- the shop, hanging beside the door ----------
   Same pill, same weight, so the two read as a pair rather than a
   button and an afterthought. Green instead of gold because the gold
   one is the door to the home base and should stay the louder of the
   two; this is the house colour, and it keeps the stack legible as
   green (copy) / gold (go) / green (buy something).

   Its own idea is the shirt. Everything else on this page fills,
   tilts or flips; nothing swings. So the shirt hangs from its collar
   and swings the way one does on a line when you walk past it, then
   settles. It is the only motion of its kind here, which is what
   makes it read as a shop rather than another link. */
.merch-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  min-height:48px;padding:13px 22px;border-radius:999px;
  text-decoration:none;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-soft);
  background:linear-gradient(140deg,rgba(9,28,14,.72),rgba(8,14,9,.86));
  border:1px solid rgba(89,224,124,.42);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  transition:color .28s,border-color .28s,box-shadow .28s,transform .2s;
}
/* the swing hangs from the collar, not the middle of the shirt */
.merch-btn .mb-ico{
  width:19px;height:20px;flex-shrink:0;color:currentColor;
  transform-origin:50% 10%;
  /* A phone has no hover, and a tap leaves the page before any of it
     could be seen, so the shirt cannot wait to be reached for. It rests
     for most of the cycle and gives one small nudge, the way something
     hanging up does when the air moves. Reaching for it on a desktop
     replaces this with the full swing. */
  animation:mbHang 6.5s ease-in-out infinite;
}
@keyframes mbHang{
  0%,70%,100%{transform:rotate(0)}
  78%{transform:rotate(-4.5deg)}
  86%{transform:rotate(2.5deg)}
  93%{transform:rotate(-1deg)}
}
.merch-btn .mb-ico svg{width:100%;height:100%;display:block;overflow:visible}
.merch-btn .mb-go{font-size:.85em;opacity:.75;transition:transform .3s,opacity .3s}
/* the wishbone printed on the chest comes up only when you reach for it */
.merch-btn .mb-bone{opacity:.5;transition:opacity .3s}
.merch-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#5ce874,#18b83a 55%,#0b8a26);
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.merch-btn:hover{
  color:#04170a;border-color:var(--green-soft);
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 42px rgba(0,200,5,.3);
  transform:translateY(-2px);
}
.merch-btn:hover::before{transform:translateX(0)}
.merch-btn:hover .mb-go{transform:translate(3px,-3px);opacity:1}
.merch-btn:hover .mb-bone{opacity:1}
.merch-btn:hover .mb-ico{animation:mbSway 1.15s cubic-bezier(.36,.07,.19,.97)}
.merch-btn:active{transform:translateY(0) scale(.98)}
@keyframes mbSway{
  0%{transform:rotate(0)}
  18%{transform:rotate(-12deg)}
  40%{transform:rotate(9deg)}
  62%{transform:rotate(-5.5deg)}
  82%{transform:rotate(2.5deg)}
  100%{transform:rotate(0)}
}

/* ---------- phones ---------- */
@media(max-width:1020px){
  .hero .hero-actions{align-items:center;width:100%;gap:12px;margin:20px 0 0}
  .hero .ca-capsule{width:100%;max-width:360px;justify-content:space-between;padding-left:15px}
  .hero .ca-capsule code{font-size:.78rem}
  .ca-lbl{display:none}
  .wish-btn,.merch-btn{width:100%;max-width:360px;justify-content:center}
}
@media(max-width:380px){
  .hero .ca-capsule{gap:8px;padding-left:12px}
  .hero .ca-capsule code{font-size:.72rem}
  .hero #heroCopy.grad-pill{padding:11px 14px;letter-spacing:.12em}
}
@media (hover:none) and (pointer:coarse){
  .hero #heroCopy.grad-pill{min-height:44px;font-size:11px}
  .wish-btn{min-height:52px;font-size:11px}
  .wish-btn:hover{transform:none;color:var(--gold);box-shadow:0 12px 34px rgba(0,0,0,.5)}
  .wish-btn:hover::before{transform:translateX(-101%)}
  .wish-btn:active{transform:scale(.97)}
  .wish-btn:active::before{transform:translateX(0)}
  .wish-btn:active{color:#17130a}
  .merch-btn{min-height:52px;font-size:11px}
  .merch-btn:hover{transform:none;color:var(--green-soft);box-shadow:0 12px 34px rgba(0,0,0,.5)}
  .merch-btn:hover::before{transform:translateX(-101%)}
  .merch-btn:hover .mb-ico{animation:mbHang 6.5s ease-in-out infinite}
  .merch-btn:active{transform:scale(.97);color:#04170a}
  .merch-btn:active::before{transform:translateX(0)}
  .merch-btn:active .mb-bone{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .hero .ca-capsule::before,.wish-btn::after,.hero .ca-capsule.copied::after,
  .hero .ca-capsule.copied #heroCopy::before{animation:none}
  .wish-btn,.wish-btn::before,.wish-btn .wb-ico{transition:none}
  .merch-btn .mb-ico,.merch-btn:hover .mb-ico{animation:none;transform:none}
  .merch-btn,.merch-btn::before,.merch-btn .mb-go{transition:none}
}