/* ============================================================
   POMODEV — ONBOARDING
   A cinematic, full-bleed first-run sequence. Deliberately not a
   dialog box with an emoji in it: bespoke line art, editorial
   typography and real motion, on the same warm ink/bone/tomato
   scale as the rest of the product.
   ============================================================ */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink-950, #070605);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--p-ease), visibility .7s;
}
.ob-overlay.is-open { opacity: 1; visibility: visible; }
.ob-overlay.hidden { display: none; }

/* warm atmosphere behind the art — the only "glow" in the whole screen */
.ob-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 34%, color-mix(in srgb, var(--tomato, #DF4526) 20%, transparent), transparent 68%),
    radial-gradient(90% 70% at 50% 120%, color-mix(in srgb, var(--ember, #E8913C) 8%, transparent), transparent 70%);
  opacity: 0;
  animation: obAura 1.6s var(--p-ease) .15s forwards;
}
@keyframes obAura { to { opacity: 1; } }

/* a fine grid, barely there — grounds the composition */
.ob-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pline, rgba(244,239,232,.09)) 1px, transparent 1px),
    linear-gradient(90deg, var(--pline, rgba(244,239,232,.09)) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: .5;
}

.ob-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px 28px 0;
  min-height: 0;
}

.ob-step {
  grid-area: 1 / 1;
  max-width: 560px;
  text-align: center;
  /* visibility (not just opacity) so the two inactive steps are also out of
     the accessibility tree and the tab order, not merely invisible. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--p-ease), transform .6s var(--p-ease), visibility .5s;
}
.ob-step.is-active { visibility: visible; opacity: 1; transform: none; }

/* ---------- art ---------- */
.ob-art {
  width: clamp(160px, 30vh, 240px);
  height: clamp(160px, 30vh, 240px);
  margin: 0 auto clamp(20px, 4vh, 40px);
}
.ob-art svg { width: 100%; height: 100%; overflow: visible; }

.ob-art .ob-ring,
.ob-art .ob-arc,
.ob-art .ob-line,
.ob-art .ob-bar,
.ob-art .ob-grid { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ob-art .ob-ring { stroke: rgba(244, 239, 232, .28); stroke-width: 1.5; }
.ob-art .ob-grid { stroke: rgba(244, 239, 232, .16); stroke-width: 1; }
.ob-art .ob-rise { stroke: var(--tomato-lit, #FF5C36); stroke-width: 2; stroke-dasharray: 3 7; opacity: .55; }
.ob-art .ob-arc,
.ob-art .ob-line { stroke: var(--tomato-lit, #FF5C36); stroke-width: 3; }
.ob-art .ob-bar { stroke: var(--tomato-lit, #FF5C36); stroke-width: 9; }
.ob-art .ob-dot { fill: var(--tomato-lit, #FF5C36); }
.ob-art .ob-dot--soft { fill: var(--bone-2, #DED5C9); }

/* every stroke is drawn on entry; replayed by re-adding .is-active */
.ob-step.is-active .ob-draw {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: obDraw 1.25s var(--p-ease) forwards;
  animation-delay: var(--d, .15s);
}
@keyframes obDraw { to { stroke-dashoffset: 0; } }

.ob-step.is-active .ob-pop {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
  animation: obPop .55s var(--p-ease) forwards;
  animation-delay: var(--d, .6s);
}
@keyframes obPop { to { opacity: 1; transform: scale(1); } }

.ob-step.is-active .ob-breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: obBreathe 3.4s ease-in-out 1.1s infinite;
}
@keyframes obBreathe {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.06); }
}

/* ---------- copy ---------- */
.ob-chapter {
  display: block;
  font-family: var(--p-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tomato-lit, #FF5C36);
  margin-bottom: 16px;
}
.ob-step h2 {
  font-family: var(--p-serif, "Instrument Serif", Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 5.2vw, 3.1rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.015em;
  color: var(--bone, #F4EFE8) !important;
  margin: 0 0 18px !important;
}
.ob-step p {
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.62;
  color: var(--muted, #8E8377);
  margin: 0 auto;
  max-width: 44ch;
}

/* copy arrives just behind the art */
.ob-step.is-active .ob-chapter { animation: obRise .7s var(--p-ease) .30s backwards; }
.ob-step.is-active h2          { animation: obRise .7s var(--p-ease) .40s backwards; }
.ob-step.is-active p           { animation: obRise .7s var(--p-ease) .52s backwards; }
@keyframes obRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- footer: rail + actions ---------- */
.ob-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(24px, 5vw, 56px) clamp(28px, 5vh, 44px);
  animation: obRise .8s var(--p-ease) .5s backwards;
}

.ob-rail { display: flex; gap: 7px; }
.ob-rail__seg {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--pline-2, rgba(244,239,232,.17));
  overflow: hidden;
  position: relative;
}
.ob-rail__seg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tomato-lit, #FF5C36);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--p-ease);
}
.ob-rail__seg.is-done::after,
.ob-rail__seg.is-active::after { transform: scaleX(1); }
.ob-rail__seg.is-active { width: 46px; transition: width .5s var(--p-ease); }

.ob-actions { display: flex; align-items: center; gap: 10px; }

.ob-btn {
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 560;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform .3s var(--p-ease), filter .3s, background-color .3s, color .3s;
}
.ob-btn:focus-visible { outline: 2px solid var(--tomato-lit, #FF5C36); outline-offset: 3px; }

.ob-btn--ghost { background: none; color: var(--muted, #8E8377); }
.ob-btn--ghost:hover { color: var(--bone, #F4EFE8); }

.ob-btn--go {
  background: var(--tomato, #DF4526);
  color: #fff;
  padding-inline: 30px;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--tomato, #DF4526) 85%, transparent);
}
.ob-btn--go:hover { transform: translateY(-2px); filter: brightness(1.07); }
.ob-btn--go .ob-btn__arrow { display: inline-block; margin-left: 7px; transition: transform .3s var(--p-ease); }
.ob-btn--go:hover .ob-btn__arrow { transform: translateX(3px); }

/* the last step's CTA earns a little more presence */
.ob-overlay.is-final .ob-btn--go { padding-inline: 36px; }

@media (max-width: 560px) {
  /* Stacked, but the rail stays above the buttons — progress should read
     before the control that advances it, not after. */
  .ob-footer { flex-direction: column; gap: 22px; padding-bottom: 34px; }
  .ob-actions { width: 100%; }
  .ob-btn--go { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-overlay, .ob-aura, .ob-step,
  .ob-step.is-active .ob-draw,
  .ob-step.is-active .ob-pop,
  .ob-step.is-active .ob-breathe,
  .ob-step.is-active .ob-chapter,
  .ob-step.is-active h2,
  .ob-step.is-active p,
  .ob-footer {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .ob-step.is-active .ob-draw { stroke-dashoffset: 0; }
  .ob-step.is-active .ob-pop { opacity: 1; transform: none; }
}