/* ================================================================
   LANDING.CSS — Business card, choice buttons, responsive layout
   ================================================================ */

/* ---- Page container: allow scroll on short screens ---- */
.page-landing {
  height: auto !important;
  min-height: 100svh;
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ---- BUSINESS CARD FLIP ---- */
.bc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.bc-scene {
  width: clamp(260px, 52vw, 460px);
  max-width: 88vw;
  perspective: 900px;
}
.bc-card {
  width: 100%;
  aspect-ratio: 1.77 / 1;
  position: relative;
  transform-style: preserve-3d;
  animation: bc-autoflip 8s linear infinite;
  border-radius: 14px;
}
.bc-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bc-face img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 14px;
  -webkit-user-drag: none; user-select: none;
}
.bc-back { transform: rotateY(180deg); }

.bc-shadow {
  width: 72%; height: 18px;
  background: radial-gradient(ellipse at center, rgba(12,12,11,.35) 0%, transparent 72%);
  border-radius: 50%;
  filter: blur(7px);
  margin-top: 10px;
  animation: bc-shadow 8s linear infinite;
}

@keyframes bc-autoflip {
  0%   { transform: rotateY(0deg);    animation-timing-function: linear; }
  36%  { transform: rotateY(0deg);    animation-timing-function: ease-in-out; }
  50%  { transform: rotateY(-180deg); animation-timing-function: linear; }
  86%  { transform: rotateY(-180deg); animation-timing-function: ease-in-out; }
  100% { transform: rotateY(-360deg); }
}

@keyframes bc-shadow {
  0%,34%  { transform: scaleX(1);   opacity: .55; animation-timing-function: linear; }
  36%     { transform: scaleX(1);   opacity: .55; animation-timing-function: ease-in; }
  43%     { transform: scaleX(.05); opacity: .18; animation-timing-function: ease-out; }
  50%     { transform: scaleX(1);   opacity: .55; animation-timing-function: linear; }
  84%     { transform: scaleX(1);   opacity: .55; animation-timing-function: ease-in; }
  91%     { transform: scaleX(.05); opacity: .18; animation-timing-function: ease-out; }
  100%    { transform: scaleX(1);   opacity: .55; }
}

/* ---- CHOICE COLUMNS ---- */
.choice-wrap {
  justify-content: center;
}

.choice-btn--toggle,
.choice-btn--hold {
  background: none; border: none; padding: 0; gap: 0;
  text-decoration: none; cursor: pointer; min-width: 0;
}

.choice-btn--toggle:hover .choice-toggle-label,
.choice-btn--hold:hover   .choice-hold-label { opacity: .9; }
.choice-btn--toggle:hover .choice-sub,
.choice-btn--hold:hover   .choice-sub { opacity: .7; }

.choice-btn--toggle .choice-sub,
.choice-btn--hold   .choice-sub {
  margin-top: 2px; margin-bottom: 0;
  line-height: 1.4; display: block;
}
.choice-btn--toggle .choice-sub { text-align: center; }

/* ---- TOGGLE SWITCH ---- */
.choice-toggle-label {
  font-family: var(--ff-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--black); opacity: .55;
  margin-bottom: 14px; transition: opacity .25s;
}
.choice-btn--toggle:hover .choice-toggle-label { opacity: .9; }

.design-switch {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; margin-bottom: 0;
}

.design-switch-track {
  display: block;
  width: 68px; height: 38px; border-radius: 19px;
  background: #D2D0CC;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.9);
  position: relative; transition: background .38s ease;
}
.design-switch.is-on .design-switch-track {
  background: var(--red);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 0 0 2px rgba(192,64,48,.25);
}

.design-switch-knob {
  position: absolute; top: 4px; left: 4px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.10);
  transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.design-switch.is-on .design-switch-knob { transform: translateX(30px); }

@keyframes switch-ping {
  0%   { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 0 0 0   rgba(192,64,48,.5); }
  60%  { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 0 0 10px rgba(192,64,48,0); }
  100% { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 0 0 10px rgba(192,64,48,0); }
}
.design-switch.is-on .design-switch-knob { animation: switch-ping .5s ease-out forwards; }

/* ---- FINGERPRINT ---- */
.choice-btn--hold { cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; }

.choice-hold-label {
  font-family: var(--ff-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--black); opacity: .55;
  margin-bottom: 14px; transition: opacity .25s;
}
.choice-btn--hold:hover .choice-hold-label { opacity: .9; }

.fp-ring {
  position: relative; width: 108px; height: 108px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;
  outline: none;
  margin-top: 0px; transition: transform .12s ease;
}
.fp-ring:focus, .fp-ring:focus-visible { outline: none; }
.fp-ring:active     { transform: scale(.94); }
.fp-ring.is-holding { transform: scale(.97); }
.fp-ring.is-complete { animation: fp-complete .45s ease-out forwards; }

.fp-container {
  position: relative; width: 108px; height: 108px;
  border-radius: 50%; overflow: hidden;
  pointer-events: none; flex-shrink: 0; background: transparent;
}

.fp-base {
  width: 108px; height: 108px; object-fit: cover; display: block;
  filter: invert(1) grayscale(1) brightness(.32) opacity(.55);
  transition: filter .3s; -webkit-user-drag: none;
}
.fp-ring.is-holding  .fp-base { filter: invert(1) grayscale(1) brightness(.32) opacity(0); }
.fp-ring.is-complete .fp-base { filter: invert(1) grayscale(1) brightness(.32) opacity(0); }

.fp-fill-mask {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0); /* JS animates this to reveal bottom-up */
  pointer-events: none;
}

.fp-colored {
  position: absolute; top: 0; left: 0;
  width: 108px; height: 108px; object-fit: cover; display: block;
  -webkit-user-drag: none;
  filter: sepia(1) saturate(8) hue-rotate(328deg);
}

.hold-hint {
  font-family: var(--ff-sans); font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--stone); opacity: 0; margin-top: -10px;
  transition: opacity .35s; pointer-events: none;
}
.fp-ring.is-holding ~ .hold-hint { opacity: .65; }

@keyframes fp-complete {
  0%   { transform: scale(.97);  opacity: 1; }
  60%  { transform: scale(1.06); opacity: .9; }
  100% { transform: scale(1.02); opacity: .75; }
}

/* ================================================================
   RESPONSIVE — Mobile / Tablet / Desktop
   ================================================================ */

/* ── DESKTOP (> 900px) ───────────────────────────────────────── */
@media (min-width: 901px) {
  .landing { padding: 24px 72px 40px; gap: 12px; }
  .landing-logo { width: clamp(160px, 22vw, 320px); }
  .bc-scene { width: clamp(300px, 42vw, 460px); max-width: 88vw; }

  .choice-wrap {
    flex-direction: row;
    gap: 52px;
    align-items: flex-start;
    margin-top: 28px;
  }
  .choice-btn--toggle,
  .choice-btn--hold { width: auto; min-width: 130px; align-items: center; }

  .design-switch { height: 108px; }
  .fp-ring, .fp-container { width: 108px; height: 108px; }
  .fp-base, .fp-colored   { width: 108px; height: 108px; }
  .choice-btn--toggle .choice-sub,
  .choice-btn--hold   .choice-sub { min-height: 2.8em; font-size: 10px; }
  .choice-toggle-label, .choice-hold-label { font-size: 11px; }
}

/* ── TABLET (601px – 900px) ─────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .landing { padding: 28px 40px 36px; gap: 10px; }
  .landing-logo { width: clamp(140px, 24vw, 260px); }
  .bc-scene { width: clamp(260px, 60vw, 420px); max-width: 86vw; }

  .choice-wrap {
    flex-direction: row;
    gap: 36px;
    align-items: flex-start;
    margin-top: 24px;
  }
  .choice-btn--toggle,
  .choice-btn--hold { width: auto; min-width: 110px; align-items: center; }

  .design-switch { height: 96px; }
  .fp-ring, .fp-container { width: 96px; height: 96px; }
  .fp-base, .fp-colored   { width: 96px; height: 96px; }
  .design-switch-track { width: 62px; height: 34px; border-radius: 17px; }
  .design-switch-knob  { width: 26px; height: 26px; top: 4px; left: 4px; }
  .design-switch.is-on .design-switch-knob { transform: translateX(28px); }

  .choice-btn--toggle .choice-sub,
  .choice-btn--hold   .choice-sub { min-height: 2.6em; font-size: 10px; }
  .choice-toggle-label, .choice-hold-label { font-size: 10.5px; }
}

/* ── MOBILE (≤ 600px) — side by side, scaled to fit ─────────── */
@media (max-width: 600px) {
  .landing {
    padding: max(28px, 5vh) 16px 28px;
    gap: 8px;
    justify-content: flex-start;
  }
  .landing-logo { width: clamp(110px, 36vw, 180px); margin-bottom: 2px; }
  .bc-scene { width: clamp(240px, 88vw, 380px); max-width: 92vw; }

  /* Keep side by side — scale columns with viewport width */
  .choice-wrap {
    flex-direction: row !important;
    gap: clamp(12px, 4vw, 24px);
    align-items: flex-start !important;
    justify-content: center;
    margin-top: 16px;
    padding-bottom: 20px;
  }

  .choice-btn--toggle,
  .choice-btn--hold {
    width: clamp(100px, 40vw, 150px);
    min-width: 0;
    align-items: center;
  }

  .choice-btn--hold .choice-sub,
  .choice-btn--toggle .choice-sub {
    text-align: center;
    min-height: 2.4em;
    font-size: 9px;
  }

  /* Scale toggle to match fingerprint height */
  .design-switch { height: 80px; }
  .design-switch-track { width: 52px; height: 30px; border-radius: 15px; }
  .design-switch-knob  { width: 22px; height: 22px; top: 4px; left: 4px; }
  .design-switch.is-on .design-switch-knob { transform: translateX(22px); }

  /* Scale fingerprint */
  .fp-ring, .fp-container { width: 80px; height: 80px; }
  .fp-base, .fp-colored   { width: 80px; height: 80px; }

  .choice-toggle-label, .choice-hold-label { font-size: 9px; letter-spacing: .1em; }
}