/* Contact page: "Tea for two". Top bar and footer come from shared/. The cup is the homepage cup. */
.tea{display:grid;justify-items:center;padding:30px 0 70px}
.tea-stage{position:relative;width:min(420px,100%)}
.cup-wrap{position:relative}
.cup{display:block;width:100%;height:auto;overflow:visible}
  .wisp{transform-box:fill-box;transform-origin:50% 100%;animation:rise 7s ease-in-out infinite;opacity:0}
  .wisp:nth-of-type(2){animation-delay:-2.3s;animation-duration:8s}
  .wisp:nth-of-type(3){animation-delay:-4.6s;animation-duration:7.5s}
  @keyframes rise{
    0%{transform:translate(0,14px) rotate(-3deg) scaleY(.85);opacity:0}
    20%{opacity:.85}
    50%{transform:translate(calc(var(--lean,0px) + 5px),-6px) rotate(3deg) scaleY(1);opacity:.8}
    80%{opacity:.5}
    100%{transform:translate(calc(var(--lean,0px) - 4px),-26px) rotate(-2deg) scaleY(1.08);opacity:0}
  }

/* tea-bag tags hang from the rim on thin strings; each tag swings from where its string meets the rim */
.tags{list-style:none;padding:0;margin:0}
.tag{--lift:0px;position:absolute;left:var(--x);top:31.5%;width:0;height:0;z-index:2}
.tag .swing{display:block}
.string{position:absolute;left:0;top:0;width:1.4px;height:var(--len);background:var(--ink);transform-origin:50% 0;transform:translateY(calc(var(--lift) * -1)) rotate(var(--r)) scaleY(var(--slack,1));transition:transform .3s ease-out}
.tag-c{position:absolute;left:0;top:var(--len);display:flex;align-items:center;gap:7px;padding:9px 13px 8px 10px;margin-left:-52px;min-width:104px;min-height:44px;
  color:var(--ink);text-decoration:none;font-family:var(--type);font-size:14px;letter-spacing:.04em;isolation:isolate;
  filter:drop-shadow(0 5px 5px rgba(62,39,35,.3));
  transform-origin:50% calc(var(--len) * -1);transform:translateY(calc(var(--lift) * -1)) rotate(var(--r));transition:transform .3s ease-out}
/* the tag itself: a scrap of torn handmade paper (images/collage/paper-*-torn.webp used as the outline) */
.tag-c::before{content:"";position:absolute;inset:-3px -4px;z-index:-1;pointer-events:none;background:var(--paper-tex);
  -webkit-mask:var(--paper-torn-cream) center/100% 100% no-repeat;mask:var(--paper-torn-cream) center/100% 100% no-repeat}
.t-mail .tag-c{color:var(--paper)}
.t-mail .tag-c::before{background:var(--paper-rose-img) center/cover,var(--raspberry);background-blend-mode:multiply;
  -webkit-mask-image:var(--paper-torn-rose);mask-image:var(--paper-torn-rose)}
.tag-c .dd{flex:none;width:26px;height:26px}
.dd path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.dd path.fill{stroke:#E5E798;opacity:.7}
.t-mail .dd path.fill{stroke:#F2C9B8}
/* focus ring traces the torn edge */
.tag-c:focus-visible{outline:none;filter:drop-shadow(2.5px 0 0 var(--raspberry)) drop-shadow(-2.5px 0 0 var(--raspberry)) drop-shadow(0 2.5px 0 var(--raspberry)) drop-shadow(0 -2.5px 0 var(--raspberry))}
.t-mail .tag-c:focus-visible{filter:drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink))}
/* pulled: lifts on its string, the string goes straight */
.tag.pull{--lift:7px}
.tag.pull .string,.tag.pull .tag-c{--r:0deg}
.anim .tag.sway .tag-c,.anim .tag.sway .string{animation:sway 1.4s ease-in-out}
@keyframes sway{0%,100%{rotate:0deg}30%{rotate:2.2deg}65%{rotate:-1.6deg}}
.copied{position:absolute;left:62px;top:calc(var(--len) + 6px);font-family:var(--hand);font-size:22px;color:var(--raspberry);white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}
.copied.on{opacity:1}
.addr{font-family:var(--hand);font-size:24px;line-height:1.2;margin-top:6px;user-select:all;-webkit-user-select:all}

/* on load: the cup prints in, then the tags drop in one by one with a small swing */
.anim .tea:not(.ready) .cup-wrap{clip-path:inset(0 0 100% 0)}
.anim .tea.ready .cup-wrap{clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.3,.7,.3,1)}
.anim .tea:not(.ready) .tag{opacity:0}
.anim .tea.ready .tag{animation:drop .65s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.45s + var(--i) * .14s)}
@keyframes drop{0%{opacity:0;translate:0 -46px;rotate:-6deg}40%{opacity:1}70%{rotate:3deg}100%{opacity:1;translate:0 0;rotate:0deg}}

/* phones: a smaller cup; the tags hang in a row of big tap targets below it */
@media (max-width:600px){
  .tea{padding:16px 0 50px}
  .tea-stage{width:min(260px,82vw)}
  .tags{position:relative;display:grid;gap:14px;width:min(260px,82vw);margin:6px auto 0}
  .tag{position:relative;left:auto;top:auto;width:auto;height:auto;padding-top:18px}
  .string{left:50%;top:0;height:18px;transform:translateY(calc(var(--lift) * -1))}
  .tag-c{position:relative;top:auto;margin:0;min-height:52px;font-size:16px;justify-content:center;transform:translateY(calc(var(--lift) * -1)) rotate(calc(var(--r) * .4))}
  .copied{left:auto;right:4px;top:auto;bottom:-26px}
  .addr{margin-top:28px}
  .anim .tea.ready .tag{animation-name:drop-m}
}
@keyframes drop-m{0%{opacity:0;translate:0 -18px}100%{opacity:1;translate:0 0}}
@media (max-width:600px){ .tea .tags{margin-top:10px} }
@media (prefers-reduced-motion:reduce){
  .wisp{animation:none;opacity:.75}
  .string,.tag-c{transition:none}
}