/* ===== SIGULDA HOME SCROLL ANIMATION ===== */
.srb-home { margin: 0; padding: 0; }

.srb-scroll { position: relative; height: 920vh; height: 920dvh; }

.srb-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Background image, constant across all stages */
.srb-bg {
  position: absolute;
  inset: -40px;
  z-index: 0;
  background-image: var(--srb-bg-blur, var(--srb-bg));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  will-change: transform;
}
/* fallback: only blur live when no pre-blurred image is provided (live blur is slow on phones) */
.srb-stage:not(.srb-stage--preblurred) .srb-bg {
  filter: blur(9px);
}
.srb-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
}

/* ===== PRODUCT (snow globe) ===== */
.srb-globe {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  height: 108vh;
  width: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
}
.srb-globe img {
  display: block;
  height: 100%;
  width: auto;
}

/* ===== TEXT LAYERS ===== */
.srb-layer {
  position: absolute;
  z-index: 5;
  color: #fff;
  opacity: 0;
  will-change: opacity, transform;
  text-shadow: 0 4px 18px rgba(0,0,0,0.75);
}

/* Title sits BEHIND the globe (ends tuck behind product) */
.srb-title {
  left: 10%;
  top: 50%;
  transform: translate(0, -50%);
  width: 40%;
  max-width: 900px;
  text-align: right;
  z-index: 3;
}
.srb-title h1, .srb-title .srb-title-blur { font-size: 130px; line-height: 1.02; font-weight: 800; margin: 0; }

/* --- Soft blur on just the RIGHT TIP of the title letters ---
   Two stacked copies of the same text (both come from page.title):
   - .srb-title-sharp : the normal crisp text
   - .srb-title-blur  : a blurred copy on top, revealed ONLY at the right
                        edge via a gradient mask, so only the letter tips
                        (the side nearest the globe) look softly blurred. */
.srb-title { position: relative; }
.srb-title h1, .srb-title .srb-title-blur { grid-area: 1 / 1; }          /* overlap both copies */
.srb-title { display: grid; }                /* stack children in one cell */

.srb-title-blur {
  /* The blurred copy is hidden by default; only the ending "s"
     of the first two words is shown and blurred. */
  filter: blur(4px);                 /* <-- blur strength of the ending "s" letters */
  color: transparent;
  pointer-events: none;
}
/* the sharp copy is the real, visible text -- it inherits
   pointer-events: none from .srb-layer, which made it impossible
   to select/copy. Re-enable it here (the blurred decorative copy
   above stays pointer-events: none). */
.srb-title-sharp {
  pointer-events: auto;
}
/* reveal + blur ONLY the ending "s" letters in the blur copy */
.srb-title-blur .srb-end-s {
  color: #fff;
}
/* keep the sharp copy's ending "s" visible as normal text underneath the glow */
.srb-title-sharp .srb-end-s {
  color: inherit;
}

/* Title letters are pure white with no shadow */
.srb-title h1, .srb-title .srb-title-blur,
.srb-title h1 .srb-word, .srb-title .srb-title-blur .srb-word,
.srb-title h1 .srb-end-s, .srb-title .srb-title-blur .srb-end-s {
  text-shadow: none;
}


.srb-intro {
  left: 7%;
  top: 26%;
  width: 33%;
  max-width: 440px;
  text-align: left;
}
.srb-intro h2 { font-size: 20px; margin: 0 0 14px; font-weight: 600; }
.srb-intro p { font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; text-align: left; }
.srb-intro .srb-more { font-weight: 600; font-size: 13.5px; }

.srb-topobj {
  left: 50%;
  top: 11%;
  transform: translate(-50%, 0);
  text-align: center;
}
.srb-topobj h2 { font-size: 30px; font-weight: 700; margin: 0; }

.srb-desc {
  left: 50%;
  bottom: 6%;
  transform: translate(-50%, 0);
  width: 78%;
  max-width: 880px;
  text-align: center;
}
.srb-desc p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.srb-desc .srb-desc-link {
  color: inherit;
  text-decoration: none;
}
.srb-desc .srb-desc-link:hover,
.srb-desc .srb-desc-link:focus-visible {
  text-decoration: underline;
}

.srb-buy {
  left: 7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 36%;
  max-width: 460px;
  text-align: left;
}
.srb-buy h2 { font-size: 34px; font-weight: 700; margin: 0 0 16px; }
.srb-buy p { font-size: 15px; line-height: 1.6; margin: 0 0 22px; text-align: left; }
.srb-buy .srb-btn {
  display: inline-block;
  background: #f7941d;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  transition: transform .25s, box-shadow .25s;
  pointer-events: auto;
}
.srb-buy .srb-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.4); }

/* ===== SVG LINES (stage 3) ===== */
.srb-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.srb-lines line {
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.srb-lines circle { fill: #ffffff; }

/* ===== LABELS (stage 3) ===== */
.srb-labels {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.srb-labels .srb-lbl {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}

/* ===== RESPONSIVE ===== */
/* ===== TABLET / SMALL LAPTOP ===== */
@media (max-width: 900px) {
  .srb-title h1, .srb-title .srb-title-blur { font-size: 46px; }
  .srb-title { width: 86%; left: 5%; }
  .srb-globe { height: 52vh; }
  .srb-intro, .srb-buy, .srb-cert { width: 84%; left: 8%; }
  .srb-buy h2 { font-size: 26px; }
  .srb-labels .srb-lbl { font-size: 12px; }
}

/* ===== PHONE (mobile only) ===== */
@media (max-width: 600px) {

  /* ---- FRAME 1: title on the LEFT, each word on its own line ---- */
  .srb-title {
    width: 90%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;        /* centered on phone */
  }
  .srb-title h1, .srb-title .srb-title-blur { font-size: 54px; line-height: 1.05; }
  .srb-title-blur { display: none; }  /* no letter-tip blur effect on phone */
  .srb-word { display: block; }  /* one word per line (phone only) */

  /* globe base height; JS scales it larger on top of this */
  .srb-globe { height: 34vh; }

  /* ---- FRAME 2: smaller intro on the LEFT with a soft black blur SHADOW ---- */
  /* No box — just a blurred dark halo behind each line of text so it stays
     readable where it overlaps the globe. */
  .srb-intro {
    width: 76%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
  }
  .srb-intro h2,
  .srb-intro p,
  .srb-intro .srb-more {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.75);
  }
  .srb-intro h2 { font-size: 16px; margin-bottom: 10px; text-align: center; }
  .srb-intro p, .srb-intro .srb-more { font-size: 11.5px; text-align: center; }
  .srb-intro p { margin-bottom: 9px; }

  /* ---- FRAME 2b: registered design certificate, same treatment as FRAME 2 ---- */
  .srb-cert {
    width: 76%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
  }
  .srb-cert h2,
  .srb-cert p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.75);
  }
  .srb-cert h2 { font-size: 18px; margin-bottom: 10px; text-align: center; }
  .srb-cert p { font-size: 11.5px; text-align: center; margin-bottom: 14px; }
  .srb-cert-images { justify-content: center; }

  /* ---- FRAME 3: heading + labels ---- */
  .srb-topobj h2 { font-size: 21px; }
  .srb-labels .srb-lbl { font-size: 11px; }

  /* ---- FRAME 4: description ---- */
  .srb-desc p { font-size: 12.5px; }

  /* ---- FRAME 4/BUY: text ABOVE the centered globe (globe moves down via JS) ---- */
  .srb-buy {
    left: 50%;
    top: 12%;                    /* sit near the top, above the lowered globe */
    transform: translate(-50%, 0);
    width: 86%;
    max-width: none;
    text-align: center;
  }
  .srb-buy h2 { font-size: 21px; margin-bottom: 10px; }
  .srb-buy p  { font-size: 12.5px; text-align: center; margin-bottom: 16px; }
  .srb-buy .srb-btn { font-size: 14px; padding: 12px 32px; }
}

/* ============================================================
   VAGONIŅŠ interactive feature (frame 3)
   ============================================================ */

/* Clickable landmark labels: pointer + a small white glow on hover.
   Applies to all four labels (Turaidas pils, Gaujas tilts, Vagoniņš,
   Gūtmaņala) now that all of them open the detail panel. */
.srb-labels .srb-lbl {
  cursor: pointer;
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}
.srb-labels .srb-lbl:hover,
.srb-labels .srb-lbl:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
  color: #ffffff;
  text-shadow:
      0 0 6px rgba(255, 255, 255, 0.95),
      0 0 14px rgba(255, 255, 255, 0.8),
      0 0 24px rgba(255, 255, 255, 0.55),
      0 2px 8px rgba(0,0,0,0.85);
  outline: none;
}

/* ---- Detail panel: always laid out (display:flex) but hidden via
   visibility/opacity so its children can fade IN with a transition.
   You cannot animate out of display:none, which caused the panel to
   appear instantly like a new page. ---- */
.srb-vagon-panel {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  gap: 3%;
  padding: 0 5%;
  z-index: 6;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.srb-stage.srb-vagon-active .srb-vagon-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.4s, visibility 0s linear 0s;
}

/* ---- Reverse layout: Turaidas pils & Gaujas tilts show the globe on the LEFT
   and the text on the RIGHT (opposite of Vagoniņš / Gūtmaņala). Toggled via
   the .srb-vagon-reverse class on .srb-stage in home.js. ---- */
.srb-stage.srb-vagon-reverse .srb-vagon-panel {
  align-items: flex-end !important;
}
.srb-stage.srb-vagon-reverse .srb-vagon-text {
  transform: translateX(30px);
}
.srb-stage.srb-vagon-active.srb-vagon-reverse .srb-vagon-text {
  transform: translateX(0);
}
.srb-stage.srb-vagon-active.srb-vagon-reverse .srb-globe {
  transform: translate(-50%, -50%) translate(-78%, 0) scale(2.2) !important;
}
/* Turaidas pils only: nudge the globe lower so more of its upper half shows
   through the frame. Same specificity as the reverse rule above, so it needs
   to come after it in source order to win. */
.srb-stage.srb-vagon-active.srb-vagon-turaida .srb-globe {
  transform: translate(-50%, -50%) translate(-78%, 10%) scale(2.2) !important;
}

.srb-vagon-text {
  flex: 0 0 42%;
  max-width: 42%;
  color: #fff;
  transform: translateX(-30px);
  opacity: 0;
}
.srb-stage.srb-vagon-active .srb-vagon-text {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.8s ease 0.65s, opacity 0.8s ease 0.65s;
}
.srb-vagon-text h2 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.srb-vagon-text p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.srb-vagon-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.srb-vagon-back,
.srb-vagon-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  background: none;
  border: none;
  padding: 0;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  transition: color 0.2s ease;
}
.srb-vagon-back:hover,
.srb-vagon-more:hover { color: #fff; }

/* Floating image (same feel as par-siguldu section images) */
.srb-vagon-imgwrap {
  flex: 0 0 30%;
  max-width: 30%;
  border-radius: 14px;
  overflow: hidden;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.35));
  opacity: 0;
  animation: srbVagonFloat 4s ease-in-out infinite;
}
.srb-stage.srb-vagon-active .srb-vagon-imgwrap {
  opacity: 1;
  transition: opacity 0.8s ease 0.95s;
}
.srb-vagon-imgwrap img { display: block; width: 100%; height: auto; }
@keyframes srbVagonFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Close button */
.srb-vagon-close {
  position: absolute;
  top: 24px; right: 34px;
  width: 46px; height: 46px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  z-index: 7;
}
.srb-vagon-close:hover { background: rgba(255,255,255,0.3); transform: scale(1.08); }

/* ---- ACTIVE STATE: hide the other frame-3 elements ---- */
.srb-stage.srb-vagon-active .srb-labels,
.srb-stage.srb-vagon-active .srb-lines,
.srb-stage.srb-vagon-active .srb-topobj,
.srb-stage.srb-vagon-active .srb-title,
.srb-stage.srb-vagon-active .srb-intro,
.srb-stage.srb-vagon-active .srb-cert,
.srb-stage.srb-vagon-active .srb-desc,
.srb-stage.srb-vagon-active .srb-buy {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Zoom the globe in and move it to the RIGHT side */
.srb-stage.srb-vagon-active .srb-globe {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform: translate(-50%, -50%) translate(78%, 0) scale(2.2) !important;
  z-index: 4;
}

/* Mobile: stack text above image */
@media (max-width: 768px) {
  .srb-vagon-panel { flex-direction: column; justify-content: center; gap: 20px; padding: 64px 6% 6%; overflow-y: auto; }
  .srb-vagon-text, .srb-vagon-imgwrap { flex: none; max-width: 88%; }
  .srb-vagon-text h2 { font-size: 30px; }
  .srb-stage.srb-vagon-active .srb-globe { transform: translate(-50%, -50%) translate(0, -32%) scale(1.4) !important; opacity: 0.25; }
}


/* ============================================================
   VAGONIŅŠ clickability fix
   The frame-3 text layers fade to opacity:0 but still keep
   pointer-events, so their invisible boxes covered the whole
   stage and swallowed clicks. Also the labels themselves had
   pointer-events:none. Re-enable clicks on the Vagoniņš label
   and let faded-out layers ignore the pointer.
   ============================================================ */
.srb-labels { pointer-events: none; }
/* labels inherit pointer-events from .srb-labels (toggled by home.js
   in STAGE 3, per-frame) so they're only clickable while that frame
   is actually visible -- do not re-add a blanket 'auto' override here. */

/* Faded-out text layers must not intercept clicks */
.srb-layer { pointer-events: none; }
.srb-layer a,
.srb-layer button,
.srb-layer .srb-more,
.srb-layer .srb-btn { pointer-events: auto; }
/* Visible layer text (headings & paragraphs) must be selectable/copyable too */
.srb-layer h1,
.srb-layer h2,
.srb-layer h3,
.srb-layer p { pointer-events: auto; }


/* ============================================================
   VAGONIŅŠ — smooth frame-to-frame cross-fade  (v2)
   Supersedes the timing rules in the two VAGONIŅŠ blocks above.

   WHY THE OLD VERSION FELT LIKE A NEW PAGE OPENING:
   the frame-3 content was hidden with `visibility: hidden` and
   no transition. visibility cannot be animated, so the labels,
   callout lines and heading were removed on the very first
   frame — a hard cut — and only then did the panel fade in.
   Below, visibility is DELAYED until the opacity fade has
   finished, and the panel starts fading in while the old frame
   is still on screen, so the two frames cross-fade.

   NOTE: the transitions are attached to the .srb-vagon-active
   and .srb-vagon-closing states only, never to the resting
   state — .srb-labels / .srb-lines / the .srb-layer blocks are
   scroll-scrubbed by home.js and a permanent transition would
   make the scroll animation lag behind the wheel.
   ============================================================ */

/* Hiding the scrollbar when the panel opens must not shift the
   layout sideways — reserve the gutter permanently. */
html { scrollbar-gutter: stable; }

/* ---- 1. OUTGOING frame-3 content: fade + drift, don't vanish ---- */
.srb-stage.srb-vagon-active .srb-labels,
.srb-stage.srb-vagon-active .srb-lines,
.srb-stage.srb-vagon-active .srb-topobj,
.srb-stage.srb-vagon-active .srb-title,
.srb-stage.srb-vagon-active .srb-intro,
.srb-stage.srb-vagon-active .srb-cert,
.srb-stage.srb-vagon-active .srb-desc,
.srb-stage.srb-vagon-active .srb-buy {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  /* hide only AFTER the fade has finished */
  transition: opacity 0.45s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.45s !important;
}

/* labels + callout lines scale up a little as they fade, so they
   read as being pushed aside by the globe zoom rather than
   switched off */
.srb-stage .srb-labels,
.srb-stage .srb-lines { transform-origin: 50% 50%; }
.srb-stage.srb-vagon-active .srb-labels,
.srb-stage.srb-vagon-active .srb-lines {
  transform: scale(1.08) !important;
}

/* ---- 2. RETURN: while closing, the same blocks fade back in
          instead of popping. srb-vagon-closing is added by
          home.js for the length of the close only. ---- */
.srb-stage.srb-vagon-closing .srb-labels,
.srb-stage.srb-vagon-closing .srb-lines,
.srb-stage.srb-vagon-closing .srb-topobj,
.srb-stage.srb-vagon-closing .srb-title,
.srb-stage.srb-vagon-closing .srb-intro,
.srb-stage.srb-vagon-closing .srb-desc,
.srb-stage.srb-vagon-closing .srb-buy {
  transition: opacity 0.45s ease 0.15s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s !important;
}

/* ---- 3. INCOMING panel: starts while the old frame is still
          fading, so the two overlap instead of queueing ---- */
.srb-vagon-panel {
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.srb-stage.srb-vagon-active .srb-vagon-panel {
  transition: opacity 0.55s ease 0.25s, visibility 0s linear 0s;
}

/* the text and image need a resting transition too, otherwise
   they snap back into place when the panel is closed */
.srb-vagon-text {
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.srb-stage.srb-vagon-active .srb-vagon-text {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              opacity 0.7s ease 0.35s;
}

.srb-vagon-imgwrap {
  transition: opacity 0.25s ease;
}
.srb-stage.srb-vagon-active .srb-vagon-imgwrap {
  transition: opacity 0.7s ease 0.5s;
}

/* ---- 4. GLOBE: it is scroll-scrubbed by inline transforms in
          home.js, so it must NOT carry a permanent transition —
          that would smear the scroll animation. The closing flag
          lets it glide back to its frame-3 pose instead of
          snapping. ---- */
.srb-stage.srb-vagon-closing .srb-globe {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ---- 5. Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .srb-stage.srb-vagon-active .srb-labels,
  .srb-stage.srb-vagon-active .srb-lines,
  .srb-stage.srb-vagon-active .srb-topobj,
  .srb-stage.srb-vagon-closing .srb-labels,
  .srb-stage.srb-vagon-closing .srb-lines,
  .srb-stage.srb-vagon-closing .srb-topobj,
  .srb-stage.srb-vagon-closing .srb-globe,
  .srb-vagon-panel,
  .srb-vagon-text,
  .srb-vagon-imgwrap,
  .srb-stage.srb-vagon-active .srb-vagon-panel,
  .srb-stage.srb-vagon-active .srb-vagon-text,
  .srb-stage.srb-vagon-active .srb-vagon-imgwrap {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
  .srb-stage.srb-vagon-active .srb-labels,
  .srb-stage.srb-vagon-active .srb-lines { transform: none !important; }
  .srb-vagon-imgwrap { animation: none !important; }
}


/* ============================================================
   VAGONIŅŠ — turn the × into a labelled back button.
   The glyph in the markup is hidden with font-size:0 and the
   label is drawn with ::before, so the template needs no change.
   ============================================================ */
.srb-vagon-close {
  top: 26px !important;
  left: 5% !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 11px 22px !important;
  border-radius: 40px !important;
  font-size: 0 !important;              /* hides the × character */
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex !important;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.srb-vagon-close::before {
  content: "\2190\00a0 Atpakaļ";
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.srb-vagon-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateX(-3px);
}

@media (max-width: 768px) {
  .srb-vagon-close { top: 16px !important; padding: 9px 18px !important; }
  .srb-vagon-close::before { font-size: 13px; }
}


/* ============================================================
   VAGONIŅŠ — STACKED LAYOUT
   Text on top, image underneath, both on the left half of the
   stage so the zoomed globe keeps the right-hand side.
   ============================================================ */
.srb-vagon-panel {
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 26px !important;
  padding: 15vh 5% 6vh !important;   /* pushes the text high up */
}

.srb-vagon-text {
  flex: none !important;
  width: 46% !important;
  max-width: 560px !important;
}
.srb-vagon-text h2 { font-size: 34px; margin-bottom: 14px; }
.srb-vagon-text p  { font-size: 15px; line-height: 1.65; }

.srb-vagon-imgwrap {
  flex: none !important;
  width: 46% !important;
  max-width: 560px !important;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}
.srb-vagon-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* keeps the gondola in frame */
}

/* ---- Phone: text above image, full width, globe dimmed behind ---- */
@media (max-width: 768px) {
  .srb-vagon-panel {
    align-items: center !important;
    padding: 13vh 6% 6vh !important;
    gap: 20px !important;
  }
  .srb-vagon-text, .srb-vagon-imgwrap { width: 100% !important; max-width: 460px !important; }
  .srb-vagon-text { text-align: center; }
  .srb-vagon-text h2 { font-size: 26px; }
  .srb-vagon-text p  { font-size: 13.5px; }
  /* the globe fades rather than snapping to 25% */
  .srb-stage.srb-vagon-active .srb-globe {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease !important;
  }
}


/* ============================================================
   FRAME 6 — "Mūsu īpatnējums." / Meet Megija
   The globe shrinks and travels into the gap between Megija's
   hands (see render() in home.js). .srb-person is the photo
   layer; .srb-hands is a second layer containing ONLY her hands,
   cropped from the exact same source photo/canvas so it lines up
   pixel-for-pixel with the hands already visible in .srb-person.
   It sits ABOVE the globe (z-index 6 > globe's 4) so once the
   globe settles into place her fingers redraw on top of it,
   completing the "she's holding it" illusion. .srb-person itself
   sits BELOW the globe (z-index 1) so the globe can travel in
   front of her as it arrives.
   ============================================================ */
.srb-person {
  position: absolute;
  z-index: 1;
  right: 4%;
  top: 50%;
  height: 145vh;
  width: auto;
  transform: translate(0, -30%);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.srb-person img { display: block; height: 100%; width: auto; }

.srb-hands {
  position: absolute;
  z-index: 6;
  right: 4%;
  top: 50%;
  height: 145vh;
  width: auto;
  transform: translate(0, -30%);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.srb-hands img { display: block; height: 100%; width: auto; }

.srb-frame6-text {
  left: 7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 36%;
  max-width: 460px;
  text-align: left;
}
.srb-frame6-text h2 { font-size: 34px; font-weight: 700; margin: 0 0 16px; }
.srb-frame6-text p { font-size: 15px; line-height: 1.6; margin: 0 0 16px; text-align: left; }
.srb-frame6-text .srb-readmore {
  display: inline-block;
  color: #f7941d;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease;
}
.srb-frame6-text .srb-readmore:hover,
.srb-frame6-text .srb-readmore:focus-visible {
  border-color: #f7941d;
}

.srb-frame6-extra {
  opacity: 0;
  will-change: opacity, transform;
}

@media (max-width: 768px) {
  .srb-frame6-extra {
    position: fixed;
    left: 8%;
    right: 8%;
    top: 50%;
    text-align: center;
    z-index: 11;
  }
}

@media (max-width: 768px) {
  .srb-person, .srb-hands {
    right: 50%;
    top: auto;
    bottom: -10%;   /* bleeds off the bottom of the screen (clipped by
                       .srb-stage's overflow:hidden) so the photo's own
                       crop edge never shows, same idea as the desktop
                       treatment */
    height: 85vh;
    transform: translate(50%, 0);
  }
  .srb-frame6-text {
    left: 6%;
    right: 6%;
    top: 6%;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    text-align: center;
    will-change: auto;   /* must not create a containing block for the
                             position:fixed .srb-frame6-extra below */
  }
  .srb-frame6-text h2, .srb-frame6-text p { text-align: center; }
  .srb-frame6-extra p, .srb-frame6-extra .srb-readmore { font-size: 13px; line-height: 1.5; }
}


/* ##### “REĢISTRĒTS DIZAINPARAUGS” (design-registration) frame #####
   A genuine pinned-scroll frame, positioned between the intro frame
   and the top-objects frame, sharing the same persistent globe and
   background as its neighbours. Layout follows the exact same pattern
   as .srb-intro (no position:fixed anywhere), so it behaves the same
   way on real phones as every other frame. */
.srb-cert {
  left: 7%;
  top: 24%;
  width: 36%;
  max-width: 460px;
  text-align: left;
}
.srb-cert h2 { font-size: 22px; margin: 0 0 14px; font-weight: 700; }
.srb-cert p { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; text-align: left; }
.srb-cert-images { display: flex; gap: 10px; }
.srb-cert-images img {
  width: 50%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}


/* ===== FRAME NAVIGATION (clickable scroll-progress pills) ===== */
.srb-frame-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  z-index: 60;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

.srb-frame-nav__item {
  width: 32px;
  height: 7px;
  border-radius: 5px;
  background: #d6d6d6;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: background 0.3s ease, width 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.srb-frame-nav__item:hover {
  background: #b9b9b9;
}

.srb-frame-nav__item.is-active {
  width: 42px;
  background: linear-gradient(90deg, #f5a623, #f7941d);
  box-shadow: 0 2px 8px rgba(247, 148, 29, 0.45);
}

@media (max-width: 680px) {
  .srb-frame-nav {
    display: none;
    right: 12px;
    gap: 14px;
  }
  .srb-frame-nav__item {
    width: 22px;
    height: 6px;
  }
  .srb-frame-nav__item.is-active {
    width: 30px;
  }
}


/* On the home page, the frame-nav pills replace the site-wide scrollbar */
html {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Phone: stack text above the globe for frames 1 & 2 (globe is pushed
   down via pStartY in home.js), and keep the description clear of the
   fixed chat-widget icon in the bottom-right corner. */
@media (max-width: 600px) {
  .srb-title {
    top: 9%;
    transform: translate(0, 0);
  }
  .srb-intro {
    top: 11%;
  }
  .srb-desc {
    bottom: 17%;
  }
}
/* Inline link inside the intro paragraph ("atklāt Siguldu" -> Par Siguldu):
   keep the layer's text colour, mark it as a link with an underline. */
.srb-intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.srb-intro a:hover,
.srb-intro a:focus-visible { text-decoration-thickness: 2px; }


/* 2026-09-16: keep the registered-design block centred on phones (later top-level rules were re-aligning it left) */
@media (max-width: 600px) {
  .srb-cert,
  .srb-cert h2,
  .srb-cert p { text-align: center; }
}

/* ===== PHONE PERFORMANCE (2026-09-22) ===== */
@media (max-width: 768px) {
  .srb-vagon-imgwrap {
    filter: none;
    box-shadow: 0 18px 34px rgba(0,0,0,0.35);
  }
  .srb-frame-nav {
    filter: none;
  }
}

/* ===== PHONE: "Reģistrēts dizainparaugs" frame centred like the intro frame (2026-09-22)
   The top-level .srb-cert rule (left 7%, width 36%) came after the phone block and
   home.js overwrites the transform, so centre it with left/width instead. ===== */
@media (max-width: 600px) {
  .srb-cert {
    left: 12%;
    width: 76%;
    max-width: none;
    top: 11%;
    text-align: center;
  }
  .srb-cert h2, .srb-cert p { text-align: center; }
  .srb-cert-images { justify-content: center; gap: 12px; }
  .srb-cert-images img { width: 44%; max-width: 160px; }
}

/* ===== 2026-09-22: invisible frame-6 strip must never sit over the landmark panel's
   Atpakaļ / Lasīt vairāk links (it is position:fixed, z-index 11 on phones) ===== */
.srb-frame6-extra { pointer-events: none; }
.srb-frame6-extra a, .srb-frame6-extra button { pointer-events: auto; }
.srb-stage.srb-vagon-active .srb-frame6-extra,
.srb-stage.srb-vagon-active .srb-frame6-text,
.srb-stage.srb-vagon-active .srb-person,
.srb-stage.srb-vagon-active .srb-hands {
  visibility: hidden !important;
  pointer-events: none !important;
}