/* ===========================================
   MOBILE POPUP — portrait orientation warning
   Shown only at ≤480px (the breakpoint where the
   canvas rotates 90°). Fixed overlay with white
   circle containing the dismissal CTA.
   =========================================== */

/* Single source of truth dla widoczności = klasa `.is-active` dodawana z JS.
   Bez tej klasy popup nie istnieje wizualnie nigdzie — niezależnie od breakpointu.
   Z tą klasą pojawia się tylko na ≤480px, gdzie ma sens (canvas obraca się o 90°).
   Dzięki temu nie ma walki specyficzności między atrybutem `hidden`, media query
   i klasami stanu — JS dodaje/zdejmuje jedną klasę, CSS robi resztę. */
.mobile-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
}

@media (max-width: 480px) {
  .mobile-popup.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match the timeline-viewport geometry exactly so the circle is
       centered on the planszy, not on the entire browser window.
       Header is 48px @ ≤480px (see 04-header-rwd.css), planszy height
       follows the rotated 16:9 canvas (see 06-timeline.css). */
    top: 48px;
    bottom: auto;
    height: calc(100vw * 16 / 9);
  }
}

/* Figma frame: 603×1311px — all vw values = px/603.
   Padding inside the circle must respect the inscribed-square geometry:
   a circle of diameter D fits a square of side D·√2/2 ≈ 0.707·D, so a
   93vw circle has only ~66vw of usable rectangular width. Hence the
   relatively large horizontal padding. */

.mobile-popup-circle {
  width: 93vw;
  height: 93vw;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10vw 14vw;
  box-sizing: border-box;
  gap: 5vw;
  transform-origin: center center;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease;
}

.mobile-popup-eyebrow {
  font-family: var(--font-primary);
  font-size: clamp(10px, 2.8vw, 17px);
  font-weight: 400;
  color: #000;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.mobile-popup-body {
  font-family: var(--font-secondary);
  /* Smaller than direct Figma 7.8vw mapping: at very narrow viewports
     (≤360px) we need extra breathing room and shorter line lengths. */
  font-size: clamp(15px, 6.2vw, 32px);
  font-weight: 400;
  font-style: normal;
  color: #000;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  max-width: 100%;
  transition: opacity 0.15s ease;
}

.mobile-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(110px, 33vw, 200px);    /* Figma: 200/603 = 33.2% */
  height: clamp(42px, 12.6vw, 76px);   /* Figma: 76/603 = 12.6% */
  border: 1px solid #000;
  border-radius: 44px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: clamp(17px, 5.3vw, 32px); /* Figma: 32/603 = 5.31% */
  font-weight: 400;
  color: #000;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  transform-origin: center center;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
    opacity 0.22s ease 0.08s;
}

/* ── Dismissal animation states ── */

/* Phase 1: texts + button fade/shrink */
.mobile-popup.is-dismissing .mobile-popup-eyebrow,
.mobile-popup.is-dismissing .mobile-popup-body {
  opacity: 0;
}

.mobile-popup.is-dismissing .mobile-popup-btn {
  transform: scale(0);
  opacity: 0;
}

/* Phase 2: circle shrinks to a point */
.mobile-popup.is-dismissed .mobile-popup-circle {
  transform: scale(0);
  opacity: 0;
}