/* Onboarding — mirrors app/onboarding.tsx (original styling). */

.screen-onboarding {
  padding-top: calc(var(--safe-top) + 16px);
  padding-bottom: calc(var(--safe-bottom) + 14px);
}

.ob-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ob-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.ob-step {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-xl);
}

/* Subtle "back to the landing page" button, top-left. 44px tap target around a
   36px circle; absolutely positioned so it never pushes the steps down. */
.ob-home {
  position: absolute;
  top: calc(var(--safe-top) + 4px);
  left: 8px;
  z-index: 21;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.ob-home-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: var(--text-2);
  font-size: 18px;
}

/* ---------- Demo steps (1–3) ---------- */

.ob-eyebrow {
  margin: 0 0 var(--s-md);
  text-align: center;
  color: var(--text-2);
}

/* Size container so the card can cap its width to its height on short, wide
   windows (keeps the portrait photo from turning into a letterbox). */
.ob-card-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  container-type: size;
}

.ob-card {
  position: relative;
  width: 100%;
  width: min(100%, 88cqh);
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--surface-muted);
  box-shadow: var(--sh-card);
}

.ob-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ob-corner {
  position: absolute;
  top: var(--s-sm);
  right: var(--s-sm);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.ob-prompt-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin: var(--s-sm);
}

.ob-prompt {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 78%;
  min-height: 38px;
  padding: 10px var(--s-md);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--sh-soft);
}

.ob-prompt-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--text);
}

.ob-cursor {
  flex-shrink: 0;
  width: 2px;
  height: 14px;
  margin-left: 3px;
  border-radius: 1px;
  background: var(--text);
  animation: obBlink 0.84s ease-in-out infinite;
}

.ob-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--charcoal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.15s ease;
}

.ob-send.is-sent {
  background: var(--accent);
  animation: obSendPress 0.29s linear both;
}

.ob-title {
  margin: var(--s-lg) 0 0;
  text-align: center;
  color: var(--text);
}

@keyframes obBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Press in (110ms, ease-out), spring back with a little overshoot (180ms). */
@keyframes obSendPress {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  38% {
    transform: scale(0.82);
    animation-timing-function: cubic-bezier(0.34, 1.9, 0.64, 1);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Teaser (step 4) ---------- */

.ob-teaser {
  align-items: center;
  justify-content: center;
}

.ob-teaser-title {
  margin: 0 0 var(--s-xl);
  font-size: 28px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--text);
}

.ob-accent {
  color: var(--accent);
}

/* Two full-bleed reels of AFTER results that fill whatever height is left
   between the headline and the footer (cards size from the row height, so short
   phones get smaller cards instead of overflow). Row 1 drifts left, row 2
   right; each track holds its set twice so translateX(±50%) loops seamlessly.
   The strip fades out at the column edges. */
.ob-reels {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 600px;
  width: calc(100% + 2 * var(--s-xl));
  margin: 0 calc(-1 * var(--s-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

/* Vertical padding leaves room for the tilted corners and shadows. */
.ob-reel {
  flex: 1 1 0;
  min-height: 0;
  max-height: 290px;
  padding: 9px 0 17px;
  overflow: hidden;
}

.ob-reel-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: obReelLeft var(--ob-reel-dur, 24s) linear infinite;
  will-change: transform;
}

.ob-reel-2 .ob-reel-track {
  animation-name: obReelRight;
}

.ob-reel-set {
  display: flex;
  height: 100%;
}

.ob-reel-card {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 3 / 4;
  margin-right: 16px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: var(--surface-muted);
  box-shadow: 0 8px 18px rgba(26, 28, 34, 0.13);
  transform: rotate(var(--tilt, 0deg));
  perspective: 700px;
}

.ob-reel-2 .ob-reel-card {
  transform: rotate(var(--tilt, 0deg)) translateY(3px);
}

.ob-reel-face {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ob-reel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Label pill: emoji + template name. */
.ob-reel-pill {
  position: absolute;
  left: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(26, 28, 34, 0.12);
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.ob-reel-pill.is-before {
  background: rgba(26, 28, 34, 0.86);
  color: #fff;
}

/* A few cards flip to the original selfie and back: mostly the result shows. */
.ob-reel-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: obFlip 6s var(--ease-out, ease-in-out) infinite;
}

.ob-reel-back {
  transform: rotateY(180deg);
}

.ob-paused .ob-reel-track,
.ob-paused .ob-reel-flipper {
  animation-play-state: paused;
}

@keyframes obReelLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes obReelRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes obFlip {
  0%,
  58% {
    transform: rotateY(0deg);
  }
  66%,
  84% {
    transform: rotateY(180deg);
  }
  92%,
  100% {
    transform: rotateY(360deg);
  }
}

/* Short screens: slightly smaller headline. */
@media (max-height: 640px) {
  .ob-teaser-title {
    margin-bottom: var(--s-md);
    font-size: 25px;
    line-height: 32px;
  }
}

/* ---------- Teaser with sign-in (.ob-signin, set once buttons render) ----------
   Headline + the reels + trust line, all above the buttons on a 375x667 screen. */

.ob-title-signin,
.ob-trust {
  display: none;
}

.ob-signin .ob-title-default {
  display: none;
}

.ob-signin .ob-title-signin {
  display: inline;
}

.ob-signin .ob-teaser-title {
  margin-bottom: var(--s-xs, 6px);
  font-size: 30px;
  line-height: 35px;
  letter-spacing: -0.8px;
  animation: obRise 0.45s var(--ease-out, ease-out) both;
}

.ob-signin .ob-trust {
  display: block;
}

.ob-trust {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-wrap: balance;
  color: var(--text-2);
  animation: obRise 0.4s var(--ease-out, ease-out) 0.2s both;
}

.ob-trust-lock {
  display: inline-flex;
  margin-right: 5px;
  vertical-align: -2px;
  font-size: 13px;
  color: #1e8a3e;
}

@keyframes obRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Shorter phones (e.g. 375x667): compact headline + pills; the reels shrink on their own. */
@media (max-height: 760px) {
  .ob-signin .ob-teaser-title {
    margin-bottom: 2px;
    font-size: 26px;
    line-height: 30px;
  }
  .ob-reel {
    padding: 8px 0 10px;
  }
  .ob-reel-card {
    margin-right: 12px;
    border-width: 2px;
    border-radius: 16px;
  }
  .ob-reel-face {
    border-radius: 14px;
  }
  .ob-reel-pill {
    left: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
    padding: 3px 6px 3px 5px;
    font-size: 10px;
    line-height: 12px;
  }
  .ob-trust {
    font-size: 11px;
  }
}

/* ---------- Footer ---------- */

.ob-footer {
  position: relative;
  flex-shrink: 0;
  padding: var(--s-md) var(--s-xl) 0;
}

.ob-actions {
  display: flex;
  flex-direction: column;
}

.ob-start {
  animation: fadeIn 0.28s ease both;
}

/* Sign-in: provider buttons (rendered by auth.js) + skip link. */
.ob-auth-group {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.28s ease both;
}

/* Rendered at full width but invisible, sitting just above the footer so it
   never adds scrollable height. */
.ob-auth-group.is-parked {
  position: absolute;
  bottom: 100%;
  left: var(--s-xl);
  right: var(--s-xl);
  visibility: hidden;
  pointer-events: none;
}

.ob-auth {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.ob-auth:empty {
  display: none;
}

.ob-skip {
  align-self: center;
  min-height: 44px;
  margin-top: var(--s-xxs);
  padding: 0 var(--s-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  --press-scale: 0.96;
}

.ob-legal {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-wrap: balance;
  color: var(--text-3);
}

.ob-auth-group:not(.is-parked) + .ob-legal {
  margin-top: var(--s-xxs);
}

/* Inline padding grows the tap area to ~40px without moving the text. */
.ob-legal a {
  padding: 12px 2px;
  margin: -12px -2px;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ob-dots {
  display: flex;
  justify-content: center;
  margin-top: var(--s-md);
}

.ob-dot {
  width: 7px;
  height: 7px;
  margin: 0 4px;
  border-radius: 4px;
  background: var(--border);
  transition: width 0.3s var(--ease-out), background-color 0.3s ease;
}

.ob-dot.active {
  width: 18px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .ob-reels .ob-reel-track,
  .ob-reel-flipper,
  .ob-signin .ob-teaser-title,
  .ob-trust {
    animation: none;
  }
  /* Static rows: offset the second one so the two don't line up. */
  .ob-reel-2 .ob-reel-track {
    transform: translateX(-12%);
  }
}