/* trip: поездка на конкурс. Закреплённый блок, прокрутка ведёт по маршруту вбок, в зале гаснет свет */
.trip{--dk:0;--night:#131416;
  --bg:color-mix(in srgb,var(--night) calc(var(--dk)*100%),var(--tone));
  --fg:color-mix(in srgb,var(--on-dark) calc(var(--dk)*100%),var(--ink));
  --fg2:color-mix(in srgb,var(--on-dark-2) calc(var(--dk)*100%),var(--ink-2));
  --word:color-mix(in srgb,#24272b calc(var(--dk)*100%),var(--tone-2));
  margin-top:clamp(96px,11vw,180px);background:var(--bg);color:var(--fg);position:relative;transition:--dk 1100ms var(--ease-io)}
.trip.is-dark{--dk:1}
.trip-pin{position:relative;height:100svh;min-height:560px;overflow:hidden}
.trip-track{display:flex;align-items:flex-start;height:100%;padding:13svh 0 15svh max(var(--gut),calc((100vw - var(--max))/2));overflow-x:auto;scrollbar-width:none;--ph:min(64svh,calc(100svh - 34svh))}
.trip-track::-webkit-scrollbar{display:none}
.trip.is-pinned .trip-pin{position:sticky;top:0}
.trip.is-pinned .trip-track{overflow:visible;will-change:transform}

.tc{position:relative;flex:none;display:flex;align-items:flex-start;gap:clamp(12px,2.2svh,24px);height:100%;padding-right:clamp(48px,9vw,160px)}
.tc>*{position:relative;z-index:1}
.tw{position:absolute;z-index:0;left:-2svh;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(120px,36svh,400px);line-height:.8;color:var(--word);white-space:nowrap;pointer-events:none;user-select:none}
.tw-go{top:-6svh}.tw-city{bottom:-4svh;left:-10svh}.tw-stage{top:-8svh;left:4svh}.tw-cup{bottom:-6svh;left:-6svh}

/* вступление */
.tc-intro{width:min(640px,86vw);padding-right:clamp(48px,7vw,120px);flex-direction:column;justify-content:center;padding-bottom:4svh}
.trip-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(48px,min(6.4vw,11svh),112px);line-height:.88;letter-spacing:0;text-wrap:balance}
.trip-lead{font-size:var(--fs-lead);line-height:1.45;color:var(--fg2);max-width:34ch;margin-top:clamp(16px,3svh,28px)}
.trip-hint{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,4svh,40px);font-weight:600}
.trip-hint-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);animation:hintBob 1.8s var(--ease-io) infinite}
@keyframes hintBob{50%{transform:translateY(6px)}}

/* билет */
.ticket{flex:none;width:clamp(200px,30svh,280px);margin-top:12svh;padding:22px 22px 24px;border-radius:16px;background:var(--yellow-soft);color:var(--ink);display:flex;flex-direction:column;gap:6px;transform:rotate(-4deg);box-shadow:0 18px 40px -22px rgba(122,90,0,.45)}
.tk-k{font-size:13px;color:var(--yellow-ink);font-weight:600}
.tk-route{display:flex;flex-direction:column;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,4.2svh,38px);line-height:.9;margin-bottom:10px}
.tk-route i{font-style:normal;color:var(--yellow-ink);font-size:.7em;line-height:1.1}
.tk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;color:var(--yellow-ink)}
.tk-row b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.tk-cut{height:0;margin:12px -22px;border-top:2px dashed rgba(122,90,0,.35);position:relative}
.tk-cut::before,.tk-cut::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.tk-cut::before{left:-10px}.tk-cut::after{right:-10px}
.tk-goal{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,5svh,44px);line-height:.9}

/* фотографии */
.tp{flex:none;margin:0}
.tp button{display:block;height:var(--h,var(--ph));aspect-ratio:var(--ar,3/4);overflow:hidden;border-radius:14px;background:color-mix(in srgb,#24272b calc(var(--dk)*100%),var(--tone-2));cursor:zoom-in}
.tp img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform}
.tp figcaption{margin-top:12px;font-size:15px;line-height:1.35;color:var(--fg2);max-width:30ch}
.festival-story.motion-ready .tp button{clip-path:inset(14% 10% 14% 10% round 14px);transition:clip-path 1100ms var(--ease-out)}
.festival-story.motion-ready .tp.is-in button{clip-path:inset(0 0 0 0 round 14px)}
.festival-story.motion-ready .tp figcaption{opacity:0;transform:translateY(12px);transition:opacity 700ms 350ms ease,transform 700ms 350ms var(--ease-out)}
.festival-story.motion-ready .tp.is-in figcaption{opacity:1;transform:none}
@media (hover:hover){.tp button:hover img{filter:brightness(1.06)}}

.tp-01{--h:var(--ph)}
.tp-02{--h:calc(var(--ph)*.66);margin-top:calc(var(--ph)*.28)}
.tp-03{--h:calc(var(--ph)*.94);--ar:4/3;margin-top:2svh}
.tcol{flex:none;display:flex;flex-direction:column;gap:clamp(10px,2svh,20px)}
.tcol .tp{--h:var(--ph);--ar:2/3}
.tcol-pair .tp{--h:calc(var(--ph)*.46);--ar:3/2}
.tcol-low{margin-top:calc(var(--ph)*.14)}.tcol-low .tp{--h:calc(var(--ph)*.84)}
.tcol-shift{margin-top:calc(var(--ph)*.08)}
.tp-17{--ar:1222/1280!important;--h:calc(var(--ph)*.9)!important}
.tp-16{--ar:3/2!important;--h:calc(var(--ph)*.72)!important;margin-top:calc(var(--ph)*.12)}
.tp-06{--ar:2/3!important}
.tc-stage{padding-right:clamp(80px,12vw,200px)}
.tc-note{flex:none;width:min(300px,70vw);align-self:center;font-size:var(--fs-lead);line-height:1.4;color:var(--fg);margin-right:clamp(12px,3vw,40px)}
.tp-10{--h:var(--ph);--ar:16/9;position:relative}

/* награждение: пиксели-конфетти и фигуры из логотипа */







/* финал блока */
.tc-end{width:min(460px,84vw);flex-direction:column;justify-content:center;padding-bottom:4svh}
.trip-end-t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,min(5vw,9svh),88px);line-height:.88;color:var(--fg)}
.trip-end-p{margin-top:18px;font-size:16px;line-height:1.5;color:var(--fg2);max-width:38ch}
.trip-end-a{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.trip-link{color:var(--fg)}

/* маршрут и главы */
.trip-route{position:absolute;left:max(var(--gut),calc((100vw - var(--max))/2));right:max(var(--gut),calc((100vw - var(--max))/2));bottom:calc(5svh + 44px);height:4px;pointer-events:none;display:none}
.tr-line{position:absolute;inset:0;border-radius:4px;background:color-mix(in srgb,#2c3034 calc(var(--dk)*100%),var(--tone-2));overflow:hidden}
.tr-fill{position:absolute;inset:0;background:var(--yellow);transform-origin:left;transform:scaleX(var(--p,0))}


.trip-nav{position:absolute;left:max(var(--gut),calc((100vw - var(--max))/2));bottom:3svh;display:none;gap:6px;flex-wrap:wrap}
.trip-nav button{min-height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--fg2);background:color-mix(in srgb,#24272b calc(var(--dk)*100%),var(--ground));transition:background-color var(--t-hover),color var(--t-hover),transform var(--t-press) var(--ease-out)}
.trip-nav button:active{transform:scale(.96)}
.trip-nav button[aria-current=true]{background:var(--yellow);color:var(--ink)}
.trip.is-pinned .trip-route,.trip.is-pinned .trip-nav{display:flex}

@media (max-width:767px){
  .trip-track{padding-top:12svh;padding-bottom:17svh;--ph:min(58svh,calc(100svh - 38svh))}
  .tw{font-size:clamp(110px,28svh,240px)}
  .ticket{transform:rotate(-3deg);margin-top:6svh}
  .tc-note{width:62vw;font-size:18px}
  .trip-nav button{min-height:34px;padding:0 11px;font-size:13px}
  
  .trip.is-pinned .trip-nav{display:none}
  .trip-route{bottom:calc(env(safe-area-inset-bottom) + 92px)}
  .trip-track{padding-bottom:calc(92px + 7svh)}
}
@media (prefers-reduced-motion:reduce){
  .tp img{transform:none!important}
  .festival-story.motion-ready .tp button{clip-path:none}
  .festival-story.motion-ready .tp figcaption{opacity:1;transform:none}
  .sparks,.trip-hint-ico{display:none}
  
}

/* Existing homepage type and brand tokens. */
.trip{--tone:var(--paper);--tone-2:#e7eae2;--on-dark:#f6f7f1;--on-dark-2:#d7ddd3;--ink-2:var(--muted);--ground:#e8ece4;--yellow-soft:#f6d87f;--yellow-ink:#63501b;--display:Onest,Arial,sans-serif;--fs-lead:18px;--gut:max(20px,calc((100vw - min(calc(100vw - 112px),var(--max)))/2));--ease-io:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.22,.68,.2,1);--t-hover:.56s;--t-press:.3s;transition:background-color .8s,color .8s}
.trip-title{font-family:Onest,Arial,sans-serif;font-size:clamp(38px,4.4vw,64px);line-height:1.08;font-weight:500;letter-spacing:-.055em;text-transform:none}
.trip-end-t{font-size:clamp(32px,3.4vw,48px);line-height:1.12;text-transform:none;letter-spacing:-.045em;font-weight:500}
.tk-route,.tk-goal{font-family:Onest,Arial,sans-serif;line-height:1.1;text-transform:none;letter-spacing:-.035em}
.tp button{padding:0;border:0}.tp button:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
.trip-track:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}
.trip .tp-15 img{object-position:76% 50%}
.trip .tp-10 img{object-fit:contain;transform:none!important}
.trip .trip-link:hover{color:var(--yellow)}
@media(max-width:767px){.trip{--gut:20px}.trip-title{font-size:36px}.trip-lead{font-size:16px}.trip-pin{min-height:500px}.trip-nav{gap:4px}.trip.is-pinned .trip-nav{display:flex;bottom:92px}.trip-route{bottom:142px}.trip-nav button{padding:0 9px;font-size:11px}.tc-intro{width:88vw}.tc-end{width:88vw}}
@media(prefers-reduced-motion:reduce){.trip *{animation:none!important;transition:none!important}.trip-route{display:none}.trip-track{scroll-snap-type:x proximity}.tc{scroll-snap-align:start}.trip-pin{height:auto;min-height:0}.trip-track{min-height:650px;height:90svh}.trip{height:auto!important}}
/* Keep the stage within this section despite the homepage's overlapping story above. */

.trip .tp-10 figcaption{font-size:clamp(18px,2.1vw,28px);max-width:none;line-height:1.3;letter-spacing:-.035em;font-weight:500}
.trip .tp-10 .marker:after{background:var(--yellow)}
.trip .tw{transition:color .8s}
.trip 
@media(prefers-reduced-motion:reduce){.trip .tp img{transform:none!important}.trip.motion-ready .tp button{clip-path:none}.trip.motion-ready .tp figcaption{opacity:1;transform:none}}
/* Stable viewport fixation: no vertical transform chasing compositor scroll. */
.trip.is-pinned .trip-pin{position:absolute;inset:0 0 auto;width:100%;transform:none;will-change:auto}
.trip.is-pinned.trip-active .trip-pin{position:fixed;inset:0 0 auto;width:100%;z-index:5}
.trip.is-pinned.trip-ended .trip-pin{position:absolute;inset:auto 0 0}
.trip .trip-title{font-family:Onest,Arial,sans-serif;font-weight:600;font-style:normal;line-height:1.09;letter-spacing:-.055em;text-transform:none}
/* Background chapter lettering uses the exact compact face from the reference. */
@font-face{font-family:'Pixels Trip Display';src:url('/working/assets/trip-chapters-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.trip .tw{font-family:'Pixels Trip Display','Arial Narrow',sans-serif;font-weight:700;letter-spacing:0}
/* Reserve exact frame widths before image decoding (especially WebKit flex layout). */
.trip .tp button{width:calc(var(--h,var(--ph))*var(--ar,3/4));flex:none;box-sizing:border-box}
.trip .tp img{min-width:0;max-width:100%}
@media(max-width:767px){
.trip-track{--ph:min(54svh,calc((100vw - 40px)*1.25));padding-top:9svh}
.tc{gap:16px;padding-right:30px}
.tc-intro{padding-right:32px}
.tc-city .tp-03{--h:calc((100vw - 40px)*3/4);margin-top:3svh}
.tc-cup .tp-10{--h:calc((100vw - 40px)*9/16);margin-top:10svh}
.tc-stage{padding-right:30px}
.tc-note{width:56vw;margin-right:0;font-size:16px}
.ticket{width:210px;margin-top:4svh;padding:18px;gap:5px}
.tk-route{font-size:30px}.tk-goal{font-size:32px}.tk-k,.tk-row{font-size:11px}.tk-row b{font-size:12px}
.tcol-pair .tp{--h:min(calc(var(--ph)*.46),calc((100vw - 40px)/1.5))}
.trip .tp-17{--h:calc(var(--ph)*.82)!important}
.trip .tp-16{--h:calc((100vw - 40px)/1.5)!important}
.trip .tp-10 figcaption{font-size:21px;max-width:calc(100vw - 40px)}
}

.trip .tp picture{display:block;width:100%;height:100%}
/* Give the travel ticket its own breathing room beside the departure photograph. */
@media(min-width:768px){
 .tc-go .ticket{width:clamp(200px,26svh,244px);align-self:center;margin-top:0;margin-right:clamp(28px,4svh,44px);transform:rotate(-2.5deg);box-shadow:0 14px 30px -20px rgba(122,90,0,.32)}
 .tc-go .tk-route{font-size:clamp(28px,3.5svh,34px)}
 .tc-go .tk-goal{font-size:clamp(30px,4svh,38px)}
}
@media(max-width:767px){.tc-go .ticket{margin-right:18px;transform:rotate(-2deg)}}

/* Keep the invitation clear against the dark closing scene. */
.trip .trip-end-a .button{background:#f2c65b;color:#202630;border-color:#f2c65b;box-shadow:0 6px 22px #0002;transition:background-color .56s,box-shadow .56s,transform .4s cubic-bezier(.22,.68,.2,1)}
@media(hover:hover){.trip .trip-end-a .button:hover{background:#ffdb7c;border-color:#ffdb7c;box-shadow:0 10px 28px #0003;transform:translateY(-3px)}}
.trip .trip-end-a .button:active{transform:translateY(0) scale(.98)}
.trip .trip-end-a .button:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.trip .trip-end-a .button{transition:none}.trip .trip-end-a .button:hover,.trip .trip-end-a .button:active{transform:none}}