:root{
  --accent1:#11B4AE; --accent2:#E9CFAF; --accent3:#FFFFFF;
  --text:#0F1414; --muted:#5E6A6A; --bg:#F7FAFA;

  /* Лого-анимация */
  --glow-alpha:.40; --glow-size:22px; --logo-size:clamp(48px,10vw,96px);
  --anim-speed:6s; --pulse-speed:2.2s;

  --radius:18px; --pad:clamp(16px,3.5vw,24px);
  --glass:rgba(255,255,255,.54); --glass-stroke:rgba(17,180,174,.12); --shadow:0 10px 30px rgba(0,0,0,.10);

  --bg-day-portrait:url("../assets/images/bg_day_v1200x2000.webp");
  --bg-day-landscape:url("../assets/images/bg_day_h2000x1200.webp");
  --bg-night-portrait:url("../assets/images/bg_night_v1200x2000.webp");
  --bg-night-landscape:var(--bg-night-portrait);

  --bg-image:var(--bg-day-portrait);
  --bg-dim:0;
  --wave-opacity:.18;
  --parallax-max:8px;
}
html[data-theme="night"]{
  --text:#EAF7F7; --muted:#A7B4B4; --bg:#0B1212;
  --glass:rgba(12,16,16,.50); --glass-stroke:rgba(233,207,175,.12); --shadow:0 10px 30px rgba(0,0,0,.35);
  --glow-alpha:.55; --glow-size:26px;
  --bg-image:var(--bg-night-portrait);
  --bg-dim:.15;
}
/* landscape фон */
@media (orientation: landscape){
  html[data-theme="day"]{   --bg-image:var(--bg-day-landscape); }
  html[data-theme="night"]{ --bg-image:var(--bg-night-landscape); }
}

/* База */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Inter,Arial; color:var(--text); background:var(--bg)}

/* ===== Фон + shimmer + затемнение ===== */
.bg{
  position:fixed; inset:0; z-index:-1;
  background-image:var(--bg-image);
  background-position:center; background-repeat:no-repeat; background-size:cover;
  will-change:transform;
}
.bg::before{
  /* мягкий "shimmer" волн у низа кадра */
  content:""; position:absolute; inset:-5% -5% 0 -5%; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,var(--wave-opacity)) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light;
  animation:waveShift 12s linear infinite;
}
.bg::after{
  /* читаемость контента */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,calc(var(--bg-dim)*.35)) 0%, rgba(0,0,0,calc(var(--bg-dim)*.55)) 100%);
}

/* Ночные звёзды */
.stars{
  position:absolute; inset:-10% -10% 0 -10%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.8), transparent 60%);
  background-repeat:repeat;
  background-size:600px 600px, 700px 700px, 800px 800px;
  opacity:0; pointer-events:none; transition:opacity .6s ease;
  animation:starDrift 90s linear infinite;
}
.stars.stars--slow{ background-size:1000px 1000px,1200px 1200px,1400px 1400px; animation-duration:140s }
html[data-theme="night"] .stars{ opacity:.85 }

/* Огни горизонта (ночью) */
.lights{
  position:absolute; left:0; right:0; bottom:18%; height:24px; pointer-events:none; opacity:0;
  background:
    radial-gradient(3px 3px at 20% 50%, rgba(255,210,160,.9), transparent 60%),
    radial-gradient(2px 2px at 30% 60%, rgba(255,235,200,.8), transparent 60%),
    radial-gradient(2px 2px at 45% 55%, rgba(255,220,170,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 52%, rgba(255,230,190,.7), transparent 60%),
    radial-gradient(2px 2px at 72% 58%, rgba(255,215,165,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 48%, rgba(255,240,210,.75), transparent 60%);
  mix-blend-mode:screen;
  animation:lightFlicker 10s steps(2,start) infinite;
}
html[data-theme="night"] .lights{ opacity:.85 }

/* Сплэш */
.splash{ position:fixed; inset:0; display:grid; place-items:center; z-index:999;
  backdrop-filter:blur(6px); background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.08)); }

/* Логотип — анимированный градиент + свечение (как в референсе) */
.brand-logo{display:inline-grid; align-items:center}
.brand-logo .logo-text{
  font-family:"Pacifico","Segoe Script",cursive;
  font-size:var(--logo-size); line-height:1; letter-spacing:.6px;
  background:linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:
    0 0 var(--glow-size) rgba(17,180,174,var(--glow-alpha)),
    0 0 calc(var(--glow-size)*.7) rgba(233,207,175,calc(var(--glow-alpha)*.7));
  animation:gradientMove var(--anim-speed) linear infinite, glowPulse var(--pulse-speed) ease-in-out infinite;
}
/* Pattaya Life — логотип в топбаре, крупнее и без клипа */
.brand-logo.minimal .logo-text{
  font-size:clamp(28px,6vw,34px);
  line-height:1.25;
  letter-spacing:.6px;
  padding-bottom:.15em;
  text-shadow:0 0 6px rgba(255,255,255,0.25);
}
.topbar, .brand-logo{ overflow:visible; }

@keyframes gradientMove{ 0%{background-position:0 50%} 100%{background-position:100% 50%} }
@keyframes glowPulse{
  0%,100%{text-shadow:0 0 var(--glow-size) rgba(17,180,174,var(--glow-alpha)),
                     0 0 calc(var(--glow-size)*.7) rgba(233,207,175,calc(var(--glow-alpha)*.7));}
  50%{text-shadow:0 0 calc(var(--glow-size)*1.25) rgba(17,180,174,calc(var(--glow-alpha)*1.25)),
                    0 0 calc(var(--glow-size)*.9) rgba(233,207,175,calc(var(--glow-alpha)*.9));}
}
body.is-intro .splash .logo-text{
  animation:gradientMove 3s linear infinite, glowPulse 1.8s ease-in-out infinite, introScale .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes introScale{ 0%{opacity:0; transform:scale(1)} 40%{opacity:1; transform:scale(1.035)} 100%{transform:scale(1)} }

/* Топбар */
.topbar{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:var(--pad); z-index:10; backdrop-filter:blur(6px);
  background:color-mix(in oklab, var(--glass) 88%, transparent); border-bottom:1px solid var(--glass-stroke);
}
.btn{appearance:none; border:1px solid var(--glass-stroke); background:var(--glass); padding:.6rem .8rem; border-radius:12px; cursor:pointer}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}

/* Герой и плитки */
.hero{min-height:calc(100dvh - 140px); display:grid; place-items:center; padding:0 var(--pad)}
.hero__inner{
  width:min(860px,100%); background:color-mix(in oklab, var(--glass) 92%, transparent);
  border:1px solid var(--glass-stroke); border-radius:24px; padding:clamp(20px,4vw,36px);
  box-shadow:var(--shadow); backdrop-filter:blur(10px)
}
.hero__title{margin:.2em 0 .2em; font-size:clamp(22px,5.2vw,34px)}
.hero__subtitle{margin:0 0 1rem; color:var(--muted)}

.tile{
  display:grid; grid-template-rows:auto auto auto; gap:.25rem; padding:1rem; border-radius:18px; text-decoration:none; color:inherit;
  background:color-mix(in oklab, var(--glass) 94%, transparent);
  border:1px solid var(--glass-stroke); box-shadow:var(--shadow);
  transition:transform .15s ease, filter .15s ease, background .15s ease; cursor:pointer; min-height:128px
}
.tile:hover{filter:brightness(1.03)} .tile:active{transform:translateY(1px)}
.tile__icon{font-size:clamp(24px,6vw,28px)} .tile__title{font-weight:800} .tile__hint{color:var(--muted)}

.tile--wide{display:block; min-height:96px; margin-bottom:.8rem}
.tile--wide .tile__title{font-weight:700; margin-bottom:.25rem}
.tile--wide .rates{display:flex; gap:1rem; flex-wrap:wrap}
.tile--wide .rate{display:flex; gap:.5rem; align-items:center; border:1px dashed var(--glass-stroke); padding:.45rem .65rem; border-radius:12px;
  background:color-mix(in oklab, var(--glass) 90%, transparent)}

.grid{display:grid; gap:.8rem; grid-template-columns:repeat(2,1fr)}
@media (min-width:880px){ .grid{grid-template-columns:repeat(3,1fr)} }

.footer{padding:1.5rem var(--pad); text-align:center; color:var(--muted); font-size:.95rem; border-top:1px solid var(--glass-stroke);
  background:color-mix(in oklab, var(--bg) 96%, transparent)}

/* Анимации фона */
@keyframes waveShift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-60px,0,0) } }
@keyframes starDrift{ from{ transform:translateY(0) } to{ transform:translateY(-60px) } }
@keyframes lightFlicker{ 0%{filter:brightness(1)} 50%{filter:brightness(1.12)} 100%{filter:brightness(1)} }

/* reduced motion */
@media (prefers-reduced-motion: reduce){ .logo-text{animation:none} .bg::before,.stars,.lights{animation:none} }
.topbar, .brand-logo{ overflow:visible }

/* Показ заголовков/описаний по теме */
[data-when="day"], [data-when="night"]{ display:none }
html[data-theme="day"]   [data-when="day"]{ display:block }
html[data-theme="night"] [data-when="night"]{ display:block }

/* === theme gates (final, strict) === */
.hero [data-when]{display:none}
html[data-theme="day"] .hero [data-when="day"]{display:block !important}
html[data-theme="night"] .hero [data-when="night"]{display:block !important}
/* === end theme gates === */
/* === hero inline fix === */
.hero__title-inline { font-size: 1.3rem; line-height: 1.5; margin-bottom: 1rem; }
.hero__title-inline strong { font-weight: 800; color: var(--c-text-primary); }
.hero__subtitle-inline { color: var(--c-text-secondary); font-weight: 400; }
/* === end hero inline fix === */
/* === hero inline fix === */
.hero__title-inline { font-size: 1.35rem; line-height: 1.5; margin-bottom: 1rem; }
.hero__title-inline strong { font-weight: 800; color: var(--c-text-primary); }
.hero__subtitle-inline { color: var(--c-text-secondary); font-weight: 400; }
/* === end hero inline fix === */



/* === transport colored icon (scoped) === */
.tile--transport .tile__icon svg.veh{ width:28px; height:28px; display:block; filter:drop-shadow(0 1px 0 rgba(0,0,0,.12)); }

/* базовые штрихи */
.tile--transport .veh .rim   { stroke: rgba(0,0,0,.25); fill: none; stroke-width: 2px; }
.tile--transport .veh .wheel { fill: var(--veh-wheel); stroke: none; }
.tile--transport .veh .bar   { stroke: var(--veh-seat); stroke-width: 2px; }
.tile--transport .veh .seat  { stroke: var(--veh-seat); stroke-width: 2.5px; }
.tile--transport .veh .light { fill: var(--veh-light); stroke: none; }

/* цвет кузова отдельным слоем, чтобы он был яркий, как у остальных иконок */
.tile--transport .veh .body  { fill: var(--veh-body); stroke: rgba(0,0,0,.08); stroke-width: 1px; }

/* Day */
html[data-theme="day"] .tile--transport{
  --veh-body:  #4cc9f0;   /* свежий бирюзовый */
  --veh-seat:  #374151;   /* слейт */
  --veh-wheel: #111827;   /* почти чёрный */
  --veh-light: #ffd166;   /* тёплая фара */
}

/* Night */
html[data-theme="night"] .tile--transport{
  --veh-body:  #8ecae6;   /* мягче в ночи */
  --veh-seat:  #e9cfaf;   /* тёплая линия */
  --veh-wheel: #e5e7eb;   /* светлые диски */
  --veh-light: #ffe08a;
}
/* === end transport colored icon === */

/* === quick badges (курс + погода) === */
.quick-badges{display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem}

.badge{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .8rem; border-radius:.9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.badge__icon{font-size:1.1rem; line-height:1}
.badge__title{font-weight:700; font-size:.95rem; margin-bottom:.15rem}
.badge__body{display:flex; flex-direction:column}

.badge--fx{ background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(56,189,248,.10)); }
.badge--wx{ background: linear-gradient(135deg, rgba(234,179,8,.18),  rgba(59,130,246,.10)); }

html[data-theme="day"]  .badge{ color:#0f172a }
html[data-theme="night"] .badge{ color:#e5e7eb }

.fx-swap{ position:relative; min-width:180px; height:1.25rem; }
.fx{ position:absolute; inset:0; display:flex; gap:.5rem; align-items:center; opacity:0; transform: translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.fx--primary{ opacity:1; transform:none }
.badge--fx.is-alt .fx--primary{ opacity:0; transform: translateY(-6px) }
.badge--fx.is-alt .fx--alt{ opacity:1; transform:none }

.fx .curr{ opacity:.8 }
.fx .rate{ font-weight:700 }

/* weather line */
.wx-line{ font-weight:600 }

/* transport icon: чуть больше и ровнее */
.tile--transport .tile__icon svg{ width:32px; height:32px }/* hide legacy rate UI */
.hero__rates, .hero .chips { display: none !important; }

/* badges layout above title */
.hero .quick-badges { justify-content: center; margin-bottom: .75rem; }
@media (max-width:640px){ .hero .quick-badges{ gap:.5rem; } }

/* === kill legacy rate block under hero title === */
.hero .hero__rates,
.hero .rates,
.hero .rate-line,
.hero .rate-chips,
.hero .chipbar,
.hero .chips { display: none !important; }

/* badges stay visible and centered */
.hero .quick-badges { justify-content: center; margin-bottom: .75rem; }
/* === end === */  
/* === transport scooter icon === */
.tile--transport .tile__icon { display:flex; align-items:center; }
.tile--transport .tile__icon .icon-scooter{ width:28px; height:28px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)); }
.tile.tile--transport:hover .icon-scooter{ transform: translateY(-1px); transition: transform .2s ease; }
/* === end transport scooter icon === */
/* === day contrast & subtitles === */
html[data-theme="day"] .badge{color:#1f2937}
html[data-theme="day"] .badge .curr{opacity:.9}

html[data-theme="day"] .tile{background:rgba(255,255,255,.92)}
html[data-theme="day"] .tile, 
html[data-theme="day"] .tile strong,
html[data-theme="day"] .tile h3{color:#1f2937}

html[data-theme="day"] .tile p,
html[data-theme="day"] .tile .muted,
html[data-theme="day"] .tile .subtitle{color:#6b7280 !important}

/* приведение ярлыка транспорта к одному стилю */
.tile--transport .tile__icon svg{width:28px;height:28px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}
.tile.tile--transport:hover .tile__icon svg{transform:translateY(-1px);transition:transform .2s ease}

/* === TMA mobile polish === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap: 44px;
}

/* Безопасные отступы в ключевых местах */
body { padding-bottom: calc(var(--safe-bottom)); }
.hero__inner { padding-top: calc(20px + var(--safe-top)); }

/* Сетка компактнее на телефонах */
@media (max-width: 820px){
  .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
  .hero__title{ font-size: clamp(22px, 5.6vw, 32px); }
}
@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr; }
  .tile{ padding:16px; }
}

/* Тач-таргеты и иконки */
.tile a{ min-height: var(--tap); display:block; }
.tile__icon{ width:28px; height:28px; }

/* Day контраст (на солнечном фоне) */
html[data-theme="day"] .tile__subtitle{ color:#334155; opacity:.9; }
html[data-theme="day"] .hero__subtitle{ color:#334155; opacity:.9; }

/* Плавность */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }