/* ============================================================
   НОЧНОЙ ЭКСПРЕСС — редизайн с нуля.
   Дизайн-система: тёплый графит + латунь + один яркий акцент (ember).
   Заголовки — Fraunces (крупный редакторский serif), текст — Manrope.
   Вёрстка mobile-first, без наложенных друг на друга версий блоков.
   ============================================================ */

:root{
  --ink: #140F0C;
  --charcoal: #1E1611;
  --umber: #2A1F17;
  --glass-bg: rgba(28, 21, 16, 0.62);
  --glass-bg-strong: rgba(20, 15, 12, 0.78);
  --parchment: #F6ECDC;
  --parchment-dim: #C9BBA6;
  --steel: #93ACC4; /* cool night-rail steel — replaces the earlier brass/gold secondary accent */
  --steel-dim: #56697D;
  --ember: #C7293D; /* deep railway-signal crimson — the site's one vivid accent */
  --ember-soft: rgba(199, 41, 61, 0.3);
  --line: rgba(246, 236, 220, 0.14);
  --line-strong: rgba(246, 236, 220, 0.28);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Manrope', -apple-system, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; touch-action: manipulation; }
button{ touch-action: manipulation; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,blockquote{ margin: 0; }

/* tactile press feedback on touch — makes taps feel instantly acknowledged
   instead of relying on :hover, which touch devices fake unreliably. Every
   selector here already transitions "all" or its own transform except
   .lang-option, topped up below so its press-scale animates too. */
.cta-button:active, .contact-links a:active, .lang-option:active,
.photo-nav:active, .photo-expand:active, .lightbox-close:active{
  transform: scale(.92);
}
.lightbox-nav:active{ transform: translateY(-50%) scale(.92); } /* composes with its own centering transform */
::selection{ background: var(--ember); color: var(--parchment); }

/* === atmosphere layers === */
#train-canvas{
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.grain{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}
body.has-3d-train{ background: var(--ink); }
body.has-3d-train > *:not(#train-canvas):not(.grain):not(.lightbox):not(.lang-switch){ position: relative; z-index: 1; }

/* === shared type === */
.eyebrow{
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--steel);
  margin-bottom: 18px;
}
em{ font-style: italic; color: var(--ember); font-family: inherit; }

/* === reveal-on-scroll === */
.reveal-word, .reveal-rise{ opacity: 0; }
.reveal-rise{ transform: translateY(28px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-word{ transform: translateY(14px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.in-view.reveal-rise, .in-view.reveal-word{ opacity: 1; transform: none; }

/* ============================================================
   LANGUAGE SWITCH — fixed top-right, RU/EN sliding toggle
   ============================================================ */
.lang-switch{
  position: fixed; z-index: 250;
  top: calc(clamp(16px,3vw,26px) + env(safe-area-inset-top));
  right: calc(clamp(16px,3vw,26px) + env(safe-area-inset-right));
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--glass-bg-strong); backdrop-filter: blur(10px);
  padding: 4px;
}
.lang-switch .lang-thumb{
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--ember); border-radius: 999px; z-index: 0;
  transition: transform .4s var(--ease);
}
.lang-switch.is-en .lang-thumb{ transform: translateX(100%); }
.lang-option{
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--parchment-dim); padding: 8px 14px; border-radius: 999px; line-height: 1;
  transition: color .3s var(--ease), transform .15s var(--ease);
}
.lang-option.is-active{ color: var(--parchment); }
@media (max-width: 560px){
  .lang-switch{ top: 12px; right: 12px; padding: 3px; }
  .lang-option{ padding: 7px 11px; font-size: 11px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(90px,14vh,140px) clamp(22px,6vw,80px) clamp(40px,6vh,70px);
  position: relative;
}
.hero-inner{ max-width: 1400px; padding-bottom: clamp(56px,9vh,88px); }
.hero-name-row{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px,4vw,48px);
  margin-bottom: clamp(20px,3vh,36px);
}
.hero-name{
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(64px, 13vw, 168px); line-height: .92; letter-spacing: -.01em;
  color: var(--parchment); min-width: 0;
}
.hero-name span{ display:block; }
.hero-portrait{
  flex: 0 0 auto; width: clamp(200px, 25vw, 375px); aspect-ratio: 3/4;
  border-radius: 24px; overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.75); margin-bottom: clamp(4px,1vh,14px);
  margin-left: auto;
}
.hero-portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
@media (max-width: 700px){
  .hero-name-row{ align-items: center; }
  .hero-portrait{ width: clamp(150px,42vw,260px); border-radius: 18px; margin-bottom: 0; }
}
@media (max-width: 420px){
  .hero-portrait{ width: clamp(130px,40vw,190px); border-radius: 16px; }
}
.hero-role{
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: clamp(20px, 3vw, 34px); color: var(--steel); margin-bottom: clamp(18px,2.4vh,28px);
}
.hero-tagline{ font-size: clamp(16px,1.6vw,20px); color: var(--parchment-dim); max-width: 46ch; margin-bottom: clamp(36px,5vh,56px); }
.hero-clients-label{ display:block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--parchment-dim); margin-bottom: 14px; }
.client-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.client-row span{
  border: 1px solid var(--line-strong); padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--parchment);
  background: var(--glass-bg); backdrop-filter: blur(6px);
}
.hero-cta{
  position: absolute; left: clamp(22px,6vw,80px); bottom: clamp(14px,2.6vh,28px);
  display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: 13px; color: var(--steel);
}
.hero-cta svg{ animation: bob 2s var(--ease-soft) infinite; color: var(--ember); }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ============================================================
   MANIFESTO / ABOUT
   ============================================================ */
.manifesto{
  display: grid; gap: clamp(40px,6vw,80px);
  padding: clamp(70px,12vh,140px) clamp(22px,6vw,80px);
  max-width: 1400px; margin: 0 auto;
}
.manifesto-portrait{
  max-width: 460px; margin: 0 auto; aspect-ratio: 9/16;
}
.manifesto-portrait .universe-video{
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* no card, no visible box: "screen" blend drops the footage's own dark
     background into the page's dark background (the two aren't quite the
     same colour, but both are dark enough that "screen" makes the
     difference disappear), leaving only the bright stars/nebula visible —
     and the radial mask fades the rectangular edge to nothing so there's
     no hard frame left to see either. */
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 60% 62% at 50% 42%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 42%, #000 40%, transparent 80%);
  opacity: 0; transition: opacity 1.4s var(--ease-soft);
}
.manifesto-portrait .universe-video.is-active{ opacity: 1; }
.manifesto-heading{
  font-family: var(--font-display); font-weight: 500; font-size: clamp(34px,5vw,58px);
  line-height: 1.12; margin-bottom: clamp(22px,3vh,32px);
}
.manifesto-text{ font-size: clamp(16px,1.4vw,19px); color: var(--parchment-dim); max-width: 62ch; margin-bottom: 18px; }
.merit-tags-label{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin: clamp(20px,3vh,32px) 0 10px; }
.merit-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(20px,3vh,32px); }
.merit-tags li{
  border: 1px solid var(--steel-dim); color: var(--steel); padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.manifesto-quote{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px,2.1vw,26px); line-height: 1.5; color: var(--parchment);
  border-left: 3px solid var(--ember); padding-left: clamp(20px,2.6vw,28px); margin-top: clamp(24px,3.4vh,40px);
}
.manifesto-sig{ margin-top: 16px; color: var(--steel); font-weight: 600; letter-spacing: .04em; }

@media (min-width: 860px){
  .manifesto{ grid-template-columns: minmax(280px,380px) 1fr; align-items: center; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{ padding: clamp(60px,8vh,100px) 0 0; }
.portfolio-intro{ text-align: center; padding: 0 24px clamp(50px,8vh,90px); }
.portfolio-heading{ font-family: var(--font-display); font-weight: 500; font-size: clamp(38px,6vw,72px); }

.wagon-chapter{
  position: relative; display: grid; gap: clamp(28px,4vw,56px);
  padding: clamp(60px,10vh,120px) clamp(20px,6vw,80px);
  max-width: 1400px; margin: 0 auto; overflow: hidden;
}
.wagon-ghost{
  position: absolute; top: clamp(-4vw,-2vw,10px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 300; font-size: clamp(140px,26vw,360px);
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); line-height: 1;
  z-index: -1; user-select: none; pointer-events: none;
}
.wagon-media{ position: relative; }
.wagon-photos{
  position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 50px 100px -40px rgba(0,0,0,.75);
  background: var(--charcoal); cursor: zoom-in;
}
.wagon-photos img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease-soft);
}
.wagon-photos img.active{ opacity: 1; }
.photo-nav{
  position: absolute; bottom: 18px; z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--glass-bg-strong); backdrop-filter: blur(8px);
  color: var(--parchment); font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.photo-nav:hover{ background: var(--ember); border-color: var(--ember); color: var(--parchment); }
.photo-nav--prev{ left: 18px; } .photo-nav--next{ right: 18px; }
.photo-expand{
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--glass-bg-strong); backdrop-filter: blur(8px);
  color: var(--parchment); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.wagon-photos:hover .photo-expand, .photo-expand:focus-visible{ opacity: 1; transform: none; }
.photo-expand:hover{ background: var(--ember); border-color: var(--ember); }
@media (hover: none){
  /* bigger, comfortable touch target — 38px suits a precise mouse cursor,
     not a fingertip */
  .photo-expand{ opacity: 1; transform: none; width: 44px; height: 44px; }
}

/* ============================================================
   LIGHTBOX — fullscreen photo viewer, shared across all galleries
   ============================================================ */
.lightbox{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease-soft), visibility 0s linear .4s;
}
.lightbox::before{
  content: ''; position: absolute; inset: 0;
  background: rgba(10,7,5,.94); backdrop-filter: blur(22px);
}
.lightbox.is-open, .lightbox.is-closing{
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .4s var(--ease-soft), visibility 0s linear 0s;
}
.lightbox.is-closing{ pointer-events: none; }
.lightbox-stage{
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 90px clamp(20px,8vw,120px);
}
.lightbox-img{
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; border-radius: 14px;
  opacity: 0; transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
  box-shadow: 0 60px 140px -40px rgba(0,0,0,.85);
}
.lightbox-img.active{ opacity: 1; }
.lightbox-close{
  position: fixed; z-index: 3;
  top: calc(clamp(16px,3vw,28px) + env(safe-area-inset-top));
  right: calc(clamp(16px,3vw,28px) + env(safe-area-inset-right));
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--glass-bg-strong); backdrop-filter: blur(8px);
  color: var(--parchment); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.lightbox-close:hover{ background: var(--ember); border-color: var(--ember); }
.lightbox-nav{
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--glass-bg-strong); backdrop-filter: blur(8px);
  color: var(--parchment); font-size: 24px; display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.lightbox-nav:hover{ background: var(--ember); border-color: var(--ember); }
.lightbox-nav--prev{ left: calc(clamp(12px,3vw,32px) + env(safe-area-inset-left)); }
.lightbox-nav--next{ right: calc(clamp(12px,3vw,32px) + env(safe-area-inset-right)); }
.lightbox-dots{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(18px,3vh,30px) + env(safe-area-inset-bottom));
  display: flex; gap: 8px; z-index: 3;
}
.lightbox-dots span{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all .25s var(--ease); cursor: pointer; }
.lightbox-dots span.active{ background: var(--ember); width: 24px; border-radius: 4px; }
body.lightbox-open{ overflow: hidden; }
@media (max-width: 640px){
  .lightbox-nav{ width: 44px; height: 44px; font-size: 20px; }
  .lightbox-close{ width: 42px; height: 42px; font-size: 22px; }
}
.photo-dots{ position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; }
.photo-dots span{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all .25s var(--ease); }
.photo-dots span.active{ background: var(--ember); width: 20px; border-radius: 4px; }

.wagon-copy{
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(26px,3.4vw,44px);
}
.wagon-tag{
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--steel); padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.wagon-title{ font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3.4vw,44px); margin-bottom: clamp(18px,2.6vh,28px); line-height: 1.1; }
.wagon-block{ margin-bottom: 22px; }
.wagon-block h4{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; }
.wagon-block p{ font-size: 15.5px; color: var(--parchment-dim); line-height: 1.65; }
.wagon-block--quote p{
  font-family: var(--font-display); font-style: italic; font-size: clamp(17px,1.7vw,21px);
  color: var(--parchment); line-height: 1.5;
}
.chip-list{ display: flex; flex-direction: column; gap: 10px; }
.chip-list li{
  font-size: 14.5px; color: var(--parchment-dim); line-height: 1.55; padding-left: 18px; position: relative;
}
.chip-list li::before{ content:''; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background: var(--ember); }

@media (min-width: 860px){
  .wagon-chapter{ grid-template-columns: 1.05fr 1fr; align-items: center; }
  .wagon-chapter:nth-of-type(even) .wagon-media{ order: 2; }
}

.portfolio-cta{ text-align: center; padding: clamp(50px,8vh,90px) 24px clamp(90px,12vh,140px); }
.portfolio-cta p{ color: var(--parchment-dim); margin-bottom: 22px; font-size: 17px; }
.cta-button{
  display: inline-block; background: var(--ember); color: var(--parchment); font-weight: 700;
  padding: 16px 36px; border-radius: 999px; font-size: 15px; letter-spacing: .02em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 20px 50px -20px var(--ember-soft);
}
.cta-button:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 26px 60px -18px var(--ember-soft); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{
  text-align: center; max-width: 900px; margin: 0 auto;
  padding: clamp(50px,8vh,90px) 24px clamp(90px,14vh,160px);
}
.contact-card{
  background: var(--glass-bg-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(36px,5vh,64px) clamp(24px,4vw,56px);
}
.contact-heading{ font-family: var(--font-display); font-weight: 500; font-size: clamp(32px,5vw,58px); line-height: 1.15; margin-bottom: 22px; }
.contact-text{ color: var(--parchment-dim); font-size: clamp(16px,1.6vw,19px); margin-bottom: 34px; }
.contact-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.contact-links a{
  border: 1px solid var(--line-strong); padding: 14px 28px; border-radius: 999px; font-weight: 600;
  transition: all .25s var(--ease); background: var(--glass-bg);
}
.contact-links a:hover{ border-color: var(--ember); color: var(--ember); }
footer{
  text-align: center; color: var(--parchment-dim); font-size: 13px; letter-spacing: .04em;
  padding: 40px 24px calc(60px + env(safe-area-inset-bottom));
}

/* ============================================================
   RESPONSIVE — small screens
   ============================================================ */
@media (max-width: 640px){
  .hero-cta{ position: static; margin-top: 40px; }
  .wagon-chapter{ padding-top: clamp(60px,14vw,90px); }
  .wagon-ghost{ font-size: clamp(90px,32vw,160px); top: -6vw; }

  /* backdrop-filter blur is one of the priciest things a phone GPU can be
     asked to composite every frame — .wagon-copy's glass panel repeats
     once per wagon and stays in the layout the whole time you scroll past
     it, so a heavy blur there is the single biggest drag on scroll
     smoothness on mid-range Android hardware. Trimmed down here, not
     removed — still reads as glass, just cheaper to keep redrawing. */
  .wagon-copy{ backdrop-filter: blur(8px); }
  .contact-card{ backdrop-filter: blur(9px); }
  .lightbox::before{ backdrop-filter: blur(14px); }
}

@media (prefers-reduced-motion: reduce){
  .reveal-word, .reveal-rise, .reveal-lines span{ opacity: 1 !important; transform: none !important; }
  html{ scroll-behavior: auto; }
}