/* =========================================================================
   components.css — shared interactive atoms: buttons (with per-letter hover
   swap), dropdown, tag, dot, divider. Ported faithfully from the source.
   ========================================================================= */

/* ---- Button base --------------------------------------------------------- */
[data-button] {
  --height: 48px;
  --color: var(--orange-900);
  --background-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  height: var(--height);
  padding: 0 24px;
  border-radius: 999px;   /* fully-rounded pill */
  color: var(--color);
  white-space: nowrap;
}
[data-button] > :not([data-button-background]) { position: relative; z-index: 1; }

/* translucent, blurred background layer */
[data-button] > [data-button-background] {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--background-color);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: opacity var(--dur) var(--ease-in-out),
              transform var(--dur) var(--ease-in-out);
}
[data-button] > [data-button-background]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity var(--dur) var(--ease-in-out);
}

/* tones */
[data-button][data-tone=orange]  { --color: #fff; --background-color: var(--orange); }
[data-button][data-tone=neutral] { --color: var(--orange); --background-color: #fff; }
[data-button][data-tone=dark]    { --color: #fff; --background-color: var(--orange-900); }

/* variants */
[data-button][data-variant=secondary][data-tone=orange]  { --color: var(--orange); --background-color: transparent; }
[data-button][data-variant=secondary][data-tone=neutral] { --color: #fff; --background-color: transparent; }
[data-button][data-variant=outline] { --background-color: transparent; }
[data-button][data-variant=outline] > [data-button-background] {
  box-shadow: inset 0 0 0 1px currentColor;
}

/* hover/active feedback on the background */
@media (hover: hover) and (pointer: fine) {
  [data-button]:hover > [data-button-background] { transform: scale(1.03); }
}
[data-button]:active > [data-button-background] { transform: scale(.98); }
[data-button]:focus-visible > [data-button-background] {
  box-shadow: 0 0 0 1px var(--orange), 0 0 0 3px rgba(10,10,10,.35);
}

/* chevron (dropdowns) */
[data-button] .chevron { display: block; transition: transform var(--dur) var(--ease-in-out); }
[data-button][data-expanded=true] .chevron { transform: rotate(180deg); }

/* ---- Per-letter label hover swap ---------------------------------------- */
/* Markup (built by JS splitText):
   <span class="label"><span class="text">…chars…</span>
                       <span class="clone">…chars…</span></span>          */
.label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.25;
  white-space: nowrap;
}
.label .c { display: inline-block; will-change: transform; }
.label .clone { position: absolute; inset: 0; }
.label .clone .c { transform: translateY(110%) rotate(20deg); }

[data-button]:hover .label .c,
.swap:hover .label .c {
  transform: translateY(-110%);
  transition: transform .25s cubic-bezier(.55,.085,.68,.53) calc(7ms * var(--i));
}
[data-button]:hover .label .clone .c,
.swap:hover .label .clone .c {
  transform: translate(0) rotate(0);
  transition: transform .5s cubic-bezier(.165,.84,.44,1) calc(.12s + 7ms * var(--i));
}
/* stagger index assigned inline by JS (--i); fallback nth-child for ≤24 */
.label .c:nth-child(1){--i:1}  .label .c:nth-child(2){--i:2}
.label .c:nth-child(3){--i:3}  .label .c:nth-child(4){--i:4}
.label .c:nth-child(5){--i:5}  .label .c:nth-child(6){--i:6}
.label .c:nth-child(7){--i:7}  .label .c:nth-child(8){--i:8}
.label .c:nth-child(9){--i:9}  .label .c:nth-child(10){--i:10}
.label .c:nth-child(11){--i:11} .label .c:nth-child(12){--i:12}
.label .c:nth-child(13){--i:13} .label .c:nth-child(14){--i:14}
.label .c:nth-child(15){--i:15} .label .c:nth-child(16){--i:16}
.label .c:nth-child(17){--i:17} .label .c:nth-child(18){--i:18}
.label .c:nth-child(19){--i:19} .label .c:nth-child(20){--i:20}

/* ---- App-store / circle / text buttons ---------------------------------- */
/* Plain wrapper around a .ph-badge pill — the badge draws its own ring. */
._app-button {
  display: inline-flex;
  align-items: center;
  height: auto;
}
._app-button img { height: 100%; width: auto; }

._circle-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 100%;
  position: relative; color: #fff;
}
._circle-button > .bg {
  position: absolute; inset: 0; border-radius: 100%;
  background-color: var(--orange);
  transition: transform var(--dur) var(--ease-out-quart);
}
._circle-button:hover > .bg { transform: scale(1.08); }
._circle-button > * { position: relative; z-index: 1; }

._icon { display: inline-flex; flex-shrink: 0; }
._icon svg { display: block; width: 100%; height: 100%; }

/* ---- Dropdown (language select) ----------------------------------------- */
._dropdown { position: relative; }
._dropdown .overlay-container {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 160px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 8px 30px rgba(54,8,2,.12);
  padding: 8px;
  opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out-quart),
              transform var(--dur) var(--ease-out-quart);
  z-index: 10;
}
._dropdown[data-expanded=true] .overlay-container {
  opacity: 1; transform: none; pointer-events: auto;
}
._dropdown .overlay-container a,
._dropdown .overlay-container button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; font-size: 14px;
}
._dropdown .overlay-container a:hover { background: var(--orange-25); }

/* ---- Small atoms --------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; letter-spacing: .03em;
  border: 1px solid currentColor;
}
.dot { width: 6px; height: 6px; border-radius: 100%; background: currentColor; flex-shrink: 0; }
.divider { width: 100%; height: 1px; background: currentColor; opacity: .15; }