/* Sashay brand pieces shared by every page: the logo mark and the virtual card. */

/* ---------- Logo mark: sparkle + tap pulse, right of the wordmark ---------- */
/* The wordmark, diamond and pulse share one color (the wordmark's navy) and one center line. */
/* Mark sits on the wordmark's baseline, then drops .08em so its center lands on the center
   of the lowercase letters (.22em above the baseline in Yellowtail). */
.logo { display: inline-flex; align-items: baseline; gap: .08em; }
.logo-mark { display: block; width: .78em; height: .6em; flex: none; color: inherit; position: relative; top: .08em; }
.logo-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-mark .spark { fill: currentColor; }
.logo-mark .wave { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* Glitter burst from the diamond on hover / tap (added by brand.js) */
.logo-mark .glint { position: absolute; left: 29%; top: 50%; width: .24em; height: .24em; margin: -.12em 0 0 -.12em; opacity: 0; pointer-events: none; }
.logo-mark .glint svg { display: block; width: 100%; height: 100%; fill: currentColor; }
/* brand.js gives each sparkle a random direction (--dx/--dy), size (--s), spin (--rot), speed and delay on every burst */
.logo-mark .glint { animation: lm-pop var(--dur, .8s) ease-out var(--delay, 0s) forwards; }
@keyframes lm-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)) rotate(var(--rot, 45deg)); }
}

/* ---------- Virtual card ---------- */
.vcard-scene { position: relative; perspective: 1100px; width: min(380px, 100%); margin-inline: auto; aspect-ratio: 1.586 / 1; }
.vcard-scene.stacked { margin-bottom: 26px; }
.vcard {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.35), transparent 50%),
    linear-gradient(125deg, #6DCFBE 0%, #8FB4F2 30%, #F27AC3 62%, #F4A04E 100%);
  box-shadow: 0 30px 60px -22px rgba(46,43,124,.55), 0 10px 20px -10px rgba(46,43,124,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)) rotateZ(-2deg);
  transform-style: preserve-3d; transition: transform .25s ease-out;
  padding: 7% 7.5%; display: flex; flex-direction: column; justify-content: space-between;
  font-family: "Outfit", system-ui, sans-serif;
  animation: vc-float 6s ease-in-out infinite;
}
.vcard.back {
  background: linear-gradient(125deg, #2E2B7C 0%, #5B2D9E 55%, #A98BEA 100%);
  transform: translate(9%, 10%) rotateX(8deg) rotateY(-14deg) rotateZ(4deg); opacity: .9; animation: none;
  filter: saturate(1.1);
}
@keyframes vc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.vcard-shine {
  position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-60%); animation: vc-shine 5.5s ease-in-out infinite;
}
@keyframes vc-shine { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.vcard-top, .vcard-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; }
.vcard-logo { font-family: "Yellowtail", cursive; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1; display: inline-flex; align-items: baseline; gap: .08em; text-shadow: 0 1px 8px rgba(46,43,124,.25); }
.vcard-logo .logo-mark { color: #fff; }
.vcard-logo .logo-mark .spark { fill: #fff; }
.vcard-soon { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.92); color: #2E2B7C; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.vcard-mid { display: flex; align-items: center; gap: 12px; position: relative; }
.vcard-chip { width: 15%; aspect-ratio: 1.3; border-radius: 6px; background: linear-gradient(135deg, #F8E3A6, #D9B45A 55%, #F3DC9A); box-shadow: inset 0 0 0 1px rgba(122,92,42,.35); position: relative; }
.vcard-chip::before, .vcard-chip::after { content: ""; position: absolute; background: rgba(122,92,42,.35); }
.vcard-chip::before { left: 33%; right: 33%; top: 0; bottom: 0; border-inline: 1px solid rgba(122,92,42,.35); background: none; }
.vcard-chip::after { top: 50%; left: 0; right: 0; height: 1px; }
.vcard-tap { width: 8%; color: #fff; opacity: .9; }
.vcard-tap svg { width: 100%; height: auto; }
.vcard-num { font-size: clamp(.95rem, 3.6vw, 1.25rem); font-weight: 600; letter-spacing: .14em; position: relative; text-shadow: 0 1px 6px rgba(46,43,124,.25); }
.vcard-bottom small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.vcard-bottom b { font-size: clamp(.8rem, 2.8vw, .95rem); font-weight: 700; text-transform: lowercase; }
.vcard-type { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: right; line-height: 1.15; }

@media (prefers-reduced-motion: reduce) {
  .vcard, .vcard-shine, .logo-mark .glint { animation: none !important; }
  .vcard { transition: none; }
}

/* ---------- Tap pulse on every bracelet icon ----------
   Same three-bar "tap" as the mark next to the wordmark, pointing up from the TOP CENTER of the band,
   in the band's own color (--tz-color). brand.js adds <span class="tz-arcs"><i></i><i></i><i></i></span>
   inside every .tapzone. Bars fade in one at a time (each finishes before the next starts),
   hold, then all fade out together. Shows on hover, or always with class "tapping".
   --tz-top = where the band's top edge sits inside the element (8% for the SVG bands, 0 for CSS rings). */
.tapzone { position: relative; }
.tz-arcs { position: absolute; left: 50%; top: var(--tz-top, 8%); width: 42%; aspect-ratio: 40 / 16; transform: translate(-50%, -112%); pointer-events: none; z-index: 2; }
.tz-arcs i { position: absolute; inset: 0; background: var(--tz-color, #EC4FA6); opacity: 0; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tz-arcs i:nth-child(1) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M16.46%2020.46A5%205%200%200%201%2023.54%2020.46%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M16.46%2020.46A5%205%200%200%201%2023.54%2020.46%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.tz-arcs i:nth-child(2) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M12.93%2016.93A10%2010%200%200%201%2027.07%2016.93%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M12.93%2016.93A10%2010%200%200%201%2027.07%2016.93%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.tz-arcs i:nth-child(3) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M9.39%2013.39A15%2015%200%200%201%2030.61%2013.39%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%207%2040%2016%22%3E%3Cpath%20d%3D%22M9.39%2013.39A15%2015%200%200%201%2030.61%2013.39%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.tapzone:hover .tz-arcs i:nth-child(1), .tapzone.tapping .tz-arcs i:nth-child(1) { animation: tz-bar1 0.9s ease-in-out infinite; }
.tapzone:hover .tz-arcs i:nth-child(2), .tapzone.tapping .tz-arcs i:nth-child(2) { animation: tz-bar2 0.9s ease-in-out infinite; }
.tapzone:hover .tz-arcs i:nth-child(3), .tapzone.tapping .tz-arcs i:nth-child(3) { animation: tz-bar3 0.9s ease-in-out infinite; }
/* bar 1 fades in 0-14%, bar 2 waits until 18% and is in by 32%, bar 3 waits until 36% and is in by 50%;
   all hold to 72%, then fade out together by 92% */
@keyframes tz-bar1 { 0% { opacity: 0; } 14% { opacity: 1; } 72% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes tz-bar2 { 0%, 18% { opacity: 0; } 32% { opacity: 1; } 72% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes tz-bar3 { 0%, 36% { opacity: 0; } 50% { opacity: 1; } 72% { opacity: 1; } 92%, 100% { opacity: 0; } }
.ring.tapzone { --tz-top: 0%; }
.ring.tapzone .tz-arcs { width: 80%; }
@media (prefers-reduced-motion: reduce) { .tz-arcs i { animation: none !important; } .tapzone.tapping .tz-arcs i { opacity: 1; } }