/* Page 3 — Tour & Schedule */

/* ---------- Layout helpers ---------- */
.tour-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.tour-art{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  overflow: hidden; /* hide animated decor */
}
.t-img, .c-img{ border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); padding: 10px; }

/* ---------- Unique animation 1: moving route line + geo pulse ---------- */
.route-line{
  position: absolute; inset: auto -10% -8% -10%; height: 120px;
  background:
    repeating-linear-gradient(90deg, rgba(107,241,255,.35) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, rgba(166,124,255,.22) 0 8px, transparent 8px 16px);
  filter: blur(14px); opacity: .25; pointer-events: none; border-radius: 80px;
  animation: route-shift 12s linear infinite;
}
@keyframes route-shift{
  from{ transform: translateX(0); }
  to{ transform: translateX(-30%); }
}
.geo-pulse{
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, #6bf1ff, transparent 70%);
  box-shadow: 0 0 0 0 rgba(107,241,255,.5);
  animation: pulse 2.4s ease-out infinite;
}
.geo-pulse.p-a{ right: 18%; top: 16%; animation-delay: .0s; }
.geo-pulse.p-b{ right: 6%; top: 46%; animation-delay: .6s; }
.geo-pulse.p-c{ right: 32%; top: 70%; animation-delay: 1.2s; }

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(107,241,255,.5); transform: scale(1); }
  70%{ box-shadow: 0 0 0 18px rgba(107,241,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(107,241,255,0); transform: scale(1.02); }
}

/* ---------- SECTION 2: cadence ---------- */
.cadence-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.rhythm{
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; gap: 8px;
}
.rhythm li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  transform: translateY(10px);
  opacity: 0;
  animation: rise .6s ease forwards;
  animation-delay: calc(var(--i,0) * 120ms);
}
@keyframes rise{
  to{ transform: translateY(0); opacity: 1; }
}
/* pop-in for images */
.pop-in{ animation: pop .6s ease both; }
@keyframes pop{ from{ transform: scale(.96); opacity: .0; } to{ transform: scale(1); opacity: 1; } }

.cadence-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

/* ---------- SECTION 3: City Rail — magnetic scroll ---------- */
.rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: 6px;
}
.rail-card{
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.rail-card h3{ margin: 8px 0 4px; }
.rail-card::after{
  /* subtle magnetic glow that animates in view */
  content:""; position: absolute; inset: -2px; border-radius: inherit;
  background: radial-gradient(60% 80% at 60% 0%, rgba(166,124,255,.18), transparent 70%),
              radial-gradient(60% 80% at 10% 100%, rgba(107,241,255,.14), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.magnet:is(:hover, :focus-within){ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.magnet.is-visible::after{ opacity: .9; }

.rail-hint{
  color: var(--muted);
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
}

/* ---------- Reveal variants bound to .observe from main.js ---------- */
.reveal-route.is-visible .route-line{ animation-play-state: running; }
.reveal-stagger.is-visible .rhythm li{ /* animation already defined via delay */ }

@media (max-width: 980px){
  .tour-grid, .cadence-grid{ grid-template-columns: 1fr; }
  .rail{ grid-auto-columns: 88%; }
}
@media (max-width: 600px){
  .tour-art, .cadence-media{ grid-template-columns: 1fr; }
  .rail{ grid-auto-columns: 92%; }
}
/* ---------- SECTION 4: Rolling Timetable ---------- */
.timetable-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.ticker{
  margin-top: 10px;
  border-block: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.ticker-track{
  display: inline-block; white-space: nowrap;
  padding-block: 10px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: .5px; text-transform: uppercase; color:#cfe3ff;
  animation: ticker-move 30s linear infinite;
  animation-play-state: paused; /* оживим, когда секция появится */
}
.ticker-track span{ margin-inline: 24px; }
.reveal-ticker.is-visible .ticker-track{ animation-play-state: running; }
@keyframes ticker-move{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.timetable-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.tt-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}

/* ---------- SECTION 5: Pop-Up Kit (peel effect) ---------- */
.kit-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.kit-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.kit-card{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kit-card h3{ margin: 10px 0 6px; }
.kit-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
/* peel overlay */
.kit-card.peel::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(80% 100% at 100% 0%, rgba(166,124,255,.18), transparent 60%),
              radial-gradient(80% 100% at 0% 100%, rgba(107,241,255,.16), transparent 60%);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); /* скрыто */
  transition: clip-path .35s ease;
  pointer-events: none;
}
.kit-card.peel:hover::after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%); }

.kit-card img{ display:block; width:100%; max-width:350px; }

/* ---------- SECTION 6: Banner Parallax ---------- */
.banner-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.banner-media{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  overflow: hidden;
}
.b-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
.parallax-glow{
  position: absolute; inset: -20% -10% -40% -10%;
  background:
    radial-gradient(35% 55% at 20% 30%, rgba(166,124,255,.22), transparent 60%),
    radial-gradient(35% 55% at 70% 70%, rgba(107,241,255,.18), transparent 60%);
  filter: blur(22px);
  transform: translateY(30px);
  opacity: .7;
  pointer-events: none;
  transition: transform .8s ease, opacity .8s ease;
}
.banner-parallax.is-visible .parallax-glow{ transform: translateY(0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .timetable-grid, .kit-grid, .banner-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .timetable-media{ grid-template-columns: 1fr; }
  .kit-cards{ grid-template-columns: 1fr; }
  .banner-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 7: City Heatmap ---------- */
.heatmap-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.heatmap-media{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  overflow: hidden;
}
.hm-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
/* animated heat overlay */
.heatmap-overlay{
  position: absolute; inset: -15% -10% -30% -10%;
  background:
    radial-gradient(22% 30% at 20% 25%, rgba(255,109,64,.18), transparent 60%),
    radial-gradient(20% 24% at 70% 40%, rgba(255,214,102,.18), transparent 60%),
    radial-gradient(18% 22% at 40% 80%, rgba(107,241,255,.16), transparent 60%);
  filter: blur(22px);
  opacity: .0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.city-heatmap.is-visible .heatmap-overlay{ opacity: .9; transform: translateY(0); }

@media (max-width: 980px){
  .heatmap-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .heatmap-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 8: Travel Logistics — Flip Cards ---------- */
.travel-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.flip-cards{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.flip-card{
  perspective: 800px;
}
.flip-inner{
  position: relative; transform-style: preserve-3d;
  transition: transform .5s ease;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding: 12px;
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner{ transform: rotateY(180deg); }

.flip-front, .flip-back{
  position: relative;
  backface-visibility: hidden;
  min-height: 220px;
}
.flip-front img{ display:block; width:100%; max-width:350px; }
.flip-back{
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  transform: rotateY(180deg);
  padding: 14px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(166,124,255,.18), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(107,241,255,.16), transparent 60%);
  border-radius: inherit;
}

@media (max-width: 980px){
  .travel-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .flip-cards{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 9: Sticker Wall ---------- */
.sticker-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.stickers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.sticker{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
  transform-origin: center 80%;
}
.wobble{
  animation: wobble-in .6s ease both;
  animation-delay: var(--d, 0ms);
}
@keyframes wobble-in{
  0%{ transform: rotate(-6deg) scale(.96); opacity: 0; }
  60%{ transform: rotate(2deg) scale(1.02); opacity: 1; }
  100%{ transform: rotate(0deg) scale(1); }
}

@media (max-width: 980px){
  .sticker-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .stickers{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 10: Rain Plan ---------- */
.rain-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.rain-media{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  overflow: hidden;
}
.r-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
/* raindrops overlay */
.rainfx .rain-drops{
  position: absolute; inset: -10% -10% -20% -10%;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(107,241,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 30%, rgba(166,124,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(107,241,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 55%, rgba(166,124,255,.16) 0 2px, transparent 3px);
  background-size: 180px 220px, 220px 260px, 200px 240px, 240px 280px;
  animation: rain-fall 1.8s linear infinite;
  opacity: .0; pointer-events: none;
  filter: blur(.5px);
}
.rain-plan.is-visible .rain-drops{ opacity: .7; }
@keyframes rain-fall{
  0%{ transform: translateY(-10px); }
  100%{ transform: translateY(20px); }
}
@media (max-width: 980px){
  .rain-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .rain-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 11: Creator Pop-Ups (shine) ---------- */
.pop-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px); align-items: start;
}
.pop-cards{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.pop-card{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding: 12px; transition: transform .2s ease, box-shadow .2s ease;
}
.pop-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pop-card img{ display:block; width:100%; max-width:350px; }
.pop-card.shine::after{
  content:""; position:absolute; inset:-2px; border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.0) 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.pop-card.shine:hover::after{ transform: translateX(120%); }

@media (max-width: 980px){
  .pop-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .pop-cards{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 12: Night Rail (progress line) ---------- */
.night-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px); align-items: start;
}
.night-timeline{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; padding-top: 16px;
}
.night-timeline::before{
  content:""; position:absolute; left:0; right:0; top: 6px; height: 2px;
  width: 0%;
  background: linear-gradient(90deg, rgba(107,241,255,.35), rgba(166,124,255,.35));
  border-radius: 2px; transition: width 1.2s ease;
}
.night-rail.is-visible .night-timeline::before{ width: 100%; }
.n-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 980px){
  .night-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .night-timeline{ grid-template-columns: 1fr; }
}
/* ==== FIX: Section 4 ticker overflow ==== */

/* родителю отдаём контекст позиционирования и стрижём X */
.tour-timetable{ position: relative; overflow-x: hidden; }
.ticker{ position: relative; overflow: hidden; }

/* дорожки вынимаем из потока, чтобы ширина не считалась по их содержимому */
.ticker-track{
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  display: block;                /* вместо inline-block */
  padding-block: 10px;
  width: max-content;            /* ровно по контенту */
  animation: ticker-abs 30s linear infinite;
  will-change: transform;
}

/* вторая дорожка стартует сразу после первой */
.ticker-track + .ticker-track{ left: 100%; }

/* новая анимация под абсолютные дорожки */
@keyframes ticker-abs{
  from{ transform: translateX(0); }
  to{   transform: translateX(-100%); }
}

/* включаем анимацию только когда секция в зоне видимости */
.reveal-ticker .ticker-track{ animation-play-state: paused; }
.reveal-ticker.is-visible .ticker-track{ animation-play-state: running; }

/* сетка медиа не распирает контейнер */
.timetable-media{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.timetable-media > *{ min-width: 0; }

/* доп. страховка от горизонтального скролла на странице */
.tour-timetable .container,
#t-section-4.section{ overflow-x: clip; }

/* раньше уходим в одну колонку, если ширины не хватает */
@media (max-width: 900px){
  .timetable-grid{ grid-template-columns: 1fr; }
  .timetable-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 13: Local Flavor — Postcard Wall ---------- */
.flavor-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px); align-items: start;
}
.postcard-wall{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.postcard{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
  transform: translateY(10px);
  opacity: 0;
  animation: bob-in .6s ease forwards;
}
.local-flavor.is-visible .postcard:nth-child(1){ animation-delay: 0ms; }
.local-flavor.is-visible .postcard:nth-child(2){ animation-delay: 120ms; }
.local-flavor.is-visible .postcard:nth-child(3){ animation-delay: 240ms; }

@keyframes bob-in{
  0%{ transform: translateY(10px); opacity: 0; }
  60%{ transform: translateY(-4px); opacity: 1; }
  100%{ transform: translateY(0); }
}

@media (max-width: 980px){
  .flavor-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .postcard-wall{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 14: Finale Tease — Ken Burns Gallery ---------- */
.finale-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px); align-items: start;
}
.kb-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.kb-frame{
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: #0d1016;
}
.kenburns img{
  display: block; width: 100%; max-width: 350px; height: auto;
  transform: scale(1.02);
  transform-origin: center;
  animation: kb-zoom 6s ease-out forwards paused;
}
.finale-gallery.is-visible .kenburns img{ animation-play-state: running; }

@keyframes kb-zoom{
  0%{ transform: scale(1.02); filter: contrast(1) saturate(.95); }
  100%{ transform: scale(1.08); filter: contrast(1.05) saturate(1.02); }
}

@media (max-width: 1024px){
  .kb-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .finale-grid{ grid-template-columns: 1fr; }
  .kb-grid{ grid-template-columns: 1fr; }
}
figure {
    margin: 0;
}/* Убираем зависимость от кастомных инлайн-переменных */

/* Cadence list — ступенчатые задержки без инлайнов */
.rhythm li{ animation-delay: 0ms; }
.rhythm li:nth-child(1){ animation-delay: 0ms; }
.rhythm li:nth-child(2){ animation-delay: 120ms; }
.rhythm li:nth-child(3){ animation-delay: 240ms; }

/* Sticker Wall — покадровые задержки без инлайнов */
.wobble{ animation-delay: 0ms; }
.stickers .sticker:nth-child(1){ animation-delay: 0ms; }
.stickers .sticker:nth-child(2){ animation-delay: 120ms; }
.stickers .sticker:nth-child(3){ animation-delay: 240ms; }