/* ═══════════════════════════════════════════════════════
   OASISVISA — Global Styles
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:     #07090F;
  --blue:   #2251A8;   /* royal blue — CTA, accents  */
  --blue-2: #1A3F8A;   /* royal blue darker — hover  */
  --blue-3: #3B6FD4;   /* royal blue lighter         */
  --gold:   #C9A96E;   /* warm gold — primary accent */
  --gold-2: #E8C98A;   /* light gold — highlights    */
  --muted:  rgba(255,255,255,.42);
  --glass:  rgba(255,255,255,.04);
  --border: rgba(255,255,255,.075);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: #fff;
  font-family: 'Inter', sans-serif;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none; z-index: 0;
}

/* ── Ambient blobs ──────────────────────────────────── */
.amb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.amb-1 {
  top: -18vh; left: -14vw;
  width: min(620px,90vw); height: min(620px,90vw);
  background: radial-gradient(circle, rgba(30,58,138,.13) 0%, transparent 68%);
}
.amb-2 {
  bottom: -18vh; right: -14vw;
  width: min(520px,75vw); height: min(520px,75vw);
  background: radial-gradient(circle, rgba(201,169,110,.07) 0%, transparent 65%);
}

/* ── App screens ────────────────────────────────────── */
.screen { display: none; flex-direction: column; position: relative; z-index: 1; }
.screen.active {
  display: flex;
  height: 100vh;
  height: 100svh;
  animation: pageIn .65s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Gradient text ──────────────────────────────────── */
.grad {
  background: linear-gradient(125deg, #3B6FD4 0%, #7AAAE8 42%, #C9A96E 78%, #E8C98A 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: .04em;
  padding: 12px 26px; border-radius: 100px; border: none;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.16,1,.3,1),
              box-shadow .2s ease,
              background  .2s ease;
}

/* PRIMARY — royal blue gradient */
.btn-solid {
  background: linear-gradient(135deg, #1A3F8A 0%, #2A5CC8 55%, #2251A8 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 4px 22px rgba(42,92,200,.38),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-solid::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%);
  pointer-events: none;
}
.btn-solid:hover {
  background: linear-gradient(135deg, #163580 0%, #2452B8 55%, #1D45A0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(42,92,200,.5),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-solid:active { transform: translateY(0); }

/* SECONDARY — blue→gold gradient text */
.btn-outline {
  background: linear-gradient(125deg, #3B6FD4 0%, #7AAAE8 45%, #C9A96E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  box-shadow:
    inset 0 0 0 1.5px rgba(42,92,200,.3),
    inset 0 0 20px rgba(42,92,200,.05),
    0 2px 10px rgba(42,92,200,.1);
  border: none;
}
.btn-outline:hover {
  background: linear-gradient(135deg, #1A3F8A 0%, #2A5CC8 55%, #2251A8 100%);
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #fff;
  background-clip: initial;
  box-shadow:
    0 14px 40px rgba(42,92,200,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.btn-outline:active {
  transform: translateY(0);
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
}

/* BACK nav button */
.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: 12.5px; font-weight: 500;
  padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .2s;
}
.btn-back:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Stagger ────────────────────────────────────────── */
.s1 { animation: cIn .55s cubic-bezier(.16,1,.3,1) .05s both; }
.s2 { animation: cIn .55s cubic-bezier(.16,1,.3,1) .15s both; }
.s3 { animation: cIn .55s cubic-bezier(.16,1,.3,1) .25s both; }
.s4 { animation: cIn .55s cubic-bezier(.16,1,.3,1) .33s both; }
@keyframes cIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   SOCIAL SPEED DIAL
   ══════════════════════════════════════════════════════ */

.socials {
  position: fixed;
  bottom: 22px; right: 20px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ── Backdrop ──────────────────────────────────────── */
.soc-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: transparent;
  pointer-events: none;
  transition: background .35s ease;
}
.socials.open .soc-backdrop {
  background: rgba(7,9,15,.54);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

/* ── Stack ─────────────────────────────────────────── */
.soc-stack {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px;
  margin-bottom: 12px;
  pointer-events: none;
}
.socials.open .soc-stack { pointer-events: auto; }

/* ── Individual buttons ────────────────────────────── */
.soc-btn {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
  opacity: 0;
  transform: translateY(10px) scale(.76);
  transition: opacity .32s cubic-bezier(.16,1,.3,1),
              transform .32s cubic-bezier(.16,1,.3,1),
              box-shadow .2s ease;
}

/* Stagger open: email(5) first → viber(1) last */
.socials.open .soc-btn:nth-child(5) { opacity:1; transform:none; transition-delay:.04s; }
.socials.open .soc-btn:nth-child(4) { opacity:1; transform:none; transition-delay:.10s; }
.socials.open .soc-btn:nth-child(3) { opacity:1; transform:none; transition-delay:.16s; }
.socials.open .soc-btn:nth-child(2) { opacity:1; transform:none; transition-delay:.22s; }
.socials.open .soc-btn:nth-child(1) { opacity:1; transform:none; transition-delay:.28s; }

.soc-btn:hover { transform: scale(1.14) !important; }

/* Brand colors */
.soc-email { background: linear-gradient(135deg,#1A3F8A 0%,#2251A8 100%); box-shadow:0 4px 14px rgba(34,81,168,.45);   }
.soc-wa    { background: linear-gradient(135deg,#1DA851 0%,#25D366 100%); box-shadow:0 4px 14px rgba(37,211,102,.40);  }
.soc-tg    { background: linear-gradient(135deg,#1883BE 0%,#2AABEE 100%); box-shadow:0 4px 14px rgba(42,171,238,.40);  }
.soc-insta { background: linear-gradient(135deg,#833AB4 0%,#E1306C 52%,#F77737 100%); box-shadow:0 4px 14px rgba(225,48,108,.40); }
.soc-viber { background: linear-gradient(135deg,#5A4FCF 0%,#7360F2 100%); box-shadow:0 4px 14px rgba(115,96,242,.40); }

.soc-email:hover { box-shadow:0 6px 22px rgba(34,81,168,.65);   }
.soc-wa:hover    { box-shadow:0 6px 22px rgba(37,211,102,.62);  }
.soc-tg:hover    { box-shadow:0 6px 22px rgba(42,171,238,.62);  }
.soc-insta:hover { box-shadow:0 6px 22px rgba(225,48,108,.62);  }
.soc-viber:hover { box-shadow:0 6px 22px rgba(115,96,242,.62);  }

/* ── Tooltip ───────────────────────────────────────── */
.soc-tip {
  position: absolute;
  right: calc(100% + 13px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(8,11,20,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap; padding: 6px 13px; border-radius: 9px;
  pointer-events: none; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.soc-tip::after {
  content: '';
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(8,11,20,.95);
}
.soc-btn:hover .soc-tip { opacity:1; transform:translateY(-50%) translateX(0); }

/* ── Main toggle ───────────────────────────────────── */
@keyframes socPulse {
  0%   { box-shadow: 0 0 0 3px rgba(201,169,110,.8), 0 8px 30px rgba(201,169,110,.6), 0 0 0 3px  rgba(201,169,110,.6); }
  60%  { box-shadow: 0 0 0 3px rgba(201,169,110,.5), 0 8px 30px rgba(201,169,110,.3), 0 0 0 22px rgba(201,169,110,.0); }
  100% { box-shadow: 0 0 0 3px rgba(201,169,110,.8), 0 8px 30px rgba(201,169,110,.6), 0 0 0 3px  rgba(201,169,110,.0); }
}
@keyframes socFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-5px); }
}
.soc-toggle {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid rgba(255,220,130,.85);
  background: linear-gradient(145deg, #E8C97A 0%, #F5D98A 40%, #C9A030 100%);
  color: #1a1000; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: socPulse 2.4s ease-out infinite, socFloat 3.2s ease-in-out infinite;
  transition: filter .28s, transform .22s cubic-bezier(.16,1,.3,1);
}
.soc-toggle:hover {
  filter: brightness(1.18) saturate(1.15);
  transform: scale(1.12) translateY(-3px);
  animation-play-state: paused;
}
.socials.open .soc-toggle {
  background: linear-gradient(145deg, #C9A030 0%, #E0B850 60%, #F5D98A 100%);
  border-color: rgba(255,230,140,.95);
  filter: brightness(1.08);
  animation-play-state: paused;
}

/* Icon crossfade */
.soc-ico { position: absolute; transition: opacity .24s ease, transform .34s cubic-bezier(.16,1,.3,1); }
.soc-ico-open  { opacity:1; transform:rotate(0deg)   scale(1);  }
.soc-ico-close { opacity:0; transform:rotate(-80deg) scale(.6); }
.socials.open .soc-ico-open  { opacity:0; transform:rotate(80deg)  scale(.6); }
.socials.open .soc-ico-close { opacity:1; transform:rotate(0deg)   scale(1);  }

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 479px) {
  .soc-btn    { width: 42px; height: 42px; }
  .soc-toggle { width: 54px; height: 54px; }
  .socials    { bottom: 18px; right: 14px; }
  .soc-stack  { gap: 8px; margin-bottom: 10px; }
}

/* ── Language switcher (inline header component) ─────── */
.lang-sw {
  display: flex; align-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  padding: 3px;
  gap: 1px;
}

.lang-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,.30);
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 100px; line-height: 1;
  transition: color .2s, background .2s;
  min-width: 36px; text-align: center;
}
.lang-btn.active {
  color: var(--gold);
  background: rgba(201,169,110,.14);
  box-shadow: 0 0 10px rgba(201,169,110,.15);
}
.lang-btn:hover:not(.active) { color: rgba(255,255,255,.6); }

/* ── Focus visible (keyboard navigation) ────────────── */
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(201,169,110,.65);
  outline-offset: 3px;
}
.panel:focus-visible { outline-offset: -3px; border-radius: 0; }

/* ── Toast ──────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 88px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(10,14,22,.93); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.88);
  font-size: 13px; font-weight: 500; padding: 12px 24px;
  border-radius: 100px; white-space: nowrap; z-index: 600;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════
   CHOOSE SCREEN — Full-panel split layout
   ═══════════════════════════════════════════════════════ */

.choose-full { overflow: hidden; }

/* Header bar floating above panels */
.choose-brand {
  position: absolute;
  top: 0; left: 0; right: 0; z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(7,9,15,.88) 0%, transparent 100%);
  pointer-events: auto;
}
.choose-brand-logo {
  grid-column: 2;
  display: flex; align-items: center; gap: 10px;
}
.choose-brand .lang-sw {
  grid-column: 3;
  justify-self: end;
}

/* Mobile: logo chap, lang-sw o'ng */
@media (max-width: 679px) {
  .choose-brand {
    grid-template-columns: auto 1fr;
  }
  .choose-brand-logo {
    grid-column: 1;
  }
  .choose-brand .lang-sw {
    grid-column: 2;
  }
}
.choose-brand-logo img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 10px rgba(201,169,110,.28);
}
.choose-brand-logo span {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 300; letter-spacing: .25em; color: #fff;
  text-transform: uppercase;
}
.choose-brand-logo em { font-weight: 500; font-style: normal; color: var(--gold); }

/* Panel container */
.path-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

/* Base panel */
.panel {
  flex: 1;
  min-height: 0;
  position: relative; overflow: hidden;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: flex .5s cubic-bezier(.16,1,.3,1);
}
.panel:last-child { border-bottom: none; }

/* Panel backgrounds — fallback color only (photo loaded via ::before) */
.panel-work   { background: #080C1E; }
.panel-study  { background: #040A06; }
.panel-travel { background: #0E0900; }

/* ── Panel photo (img element, ishonchli yondashuv) ──── */
.panel-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.78) saturate(0.92);
  transition: transform 0.9s cubic-bezier(.16,1,.3,1),
              filter   0.6s ease;
  will-change: transform, filter;
  pointer-events: none;
  display: block;
  /* Hardware Acceleration: Antialiasing va tasvirni qira (tiniq) tutish */
  transform: translateZ(0) scale(1.001);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast; 
}
.panel-travel .panel-photo { object-position: center 15%; }
.panel-study  .panel-photo { object-position: center 12%; }

.panel:hover .panel-photo {
  transform: translateZ(0) scale(1.04);
  filter: brightness(0.96) saturate(1.05);
}
.panel-travel:hover .panel-photo { transform: translateZ(0) scale(1.001); object-position: center 28%; }
.panel-study:hover  .panel-photo { transform: translateZ(0) scale(1.001); object-position: center 22%; }

@media (hover: none) {
  .panel:active .panel-photo         { transform: translateZ(0) scale(1.02); filter: brightness(0.88); }
  .panel-travel:active .panel-photo  { transform: translateZ(0) scale(1.001); object-position: center 26%; }
  .panel-study:active  .panel-photo  { transform: translateZ(0) scale(1.001); object-position: center 20%; }
  
  /* Mobil qurilmalarda "Hover" mavjud emas! 
     Shuning uchun rasm ko'rinmas qolmasligi sabab, Blur qatlam Olib tashlanadi, natijada suratlar TINU va YORQIN qoladi */
  .panel::before {
    display: none !important;
  }
}

/* ── Static Dim Layer (no backdrop-filter — eliminates GPU seam artifact) ── */
.panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,0.35);
  opacity: 1; transition: opacity 0.6s cubic-bezier(.16,1,.3,1);
}
.panel:hover::before { opacity: 0; }

/* ── Dark gradient overlays (on top of photo, below content) */
.panel-work::after,
.panel-travel::after,
.panel-study::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1);
  will-change: opacity;
}
/* Flat base tint (58%) + edge vignette — image visible but text always readable */
.panel-work::after { background: linear-gradient(160deg, rgba(6,10,26,0.3) 0%, rgba(10,16,40,0.15) 50%, rgba(6,10,26,0.6) 100%); }
.panel-travel::after { background: linear-gradient(160deg, rgba(18,11,0,0.3) 0%, rgba(28,17,0,0.15) 50%, rgba(18,11,0,0.6) 100%); }
.panel-study::after { background: linear-gradient(160deg, rgba(4,12,7,0.3) 0%, rgba(6,18,10,0.15) 50%, rgba(4,12,7,0.6) 100%); }
/* Hover: Text overlay opacity slightly increases while blur reveals behind it */
.panel:hover::after { opacity: 1; }

/* Accent glow behind content (Cursor Follows) */
/* VERY IMPORTANT: Using top/left for mouse tracking causes massive Layout Thrashing. 
   We MUST use transform: translate to offload completely to the GPU! */
.panel-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 600px; height: 600px;
  top: 0; left: 0; 
  /* Center is -300px because width/height is 600px */
  transform: translate(calc(var(--x, 0px) - 300px), calc(var(--y, 0px) - 300px));
  opacity: 0; transition: opacity .4s ease;
  z-index: 2; /* above photo (0) + overlay (1) */
  will-change: transform, opacity; /* GPU Hint */
}
.panel:hover .panel-glow { opacity: 1; }
.pglow-blue  { background: radial-gradient(circle, rgba(90,143,219,.35)   0%, transparent 60%); }
.pglow-teal  { background: radial-gradient(circle, rgba(34,140,70,.40)    0%, transparent 60%); }
.pglow-gold  { background: radial-gradient(circle, rgba(201,169,110,.25)  0%, transparent 60%); }

/* Panel body */
.panel-body {
  position: relative; z-index: 3; /* above glow (2) */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 20px 28px;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.panel:hover .panel-body { transform: translateY(-5px); }

/* Icon box */
.panel-icon {
  width: 65px; height: 65px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
  transition: box-shadow .35s ease, transform .35s;
}
.picon-blue  { background: rgba(8,14,40,.45);    border: 1px solid rgba(90,143,219,.40);  color: #6A9FE0;      backdrop-filter: blur(12px); box-shadow: inset 0 0 20px rgba(90,143,219,.1); }
.picon-teal  { background: rgba(4,18,10,.45);    border: 1px solid rgba(34,140,70,.40);   color: #22C55E;      backdrop-filter: blur(12px); box-shadow: inset 0 0 20px rgba(34,140,70,.1); }
.picon-gold  { background: rgba(20,12,0,.45);    border: 1px solid rgba(201,169,110,.42); color: var(--gold);  backdrop-filter: blur(12px); box-shadow: inset 0 0 20px rgba(201,169,110,.1); }
.panel:hover .panel-icon { transform: translateZ(20px) scale(1.1); }
.panel:hover .picon-blue  { box-shadow: 0 10px 30px rgba(90,143,219,.42);  }
.panel:hover .picon-teal  { box-shadow: 0 10px 30px rgba(34,140,70,.45);   }
.panel:hover .picon-gold  { box-shadow: 0 10px 30px rgba(201,169,110,.38); }

/* Title - High Luxury Serif Typography */
.panel-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500; font-style: italic; line-height: 1.1; letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 5px 25px rgba(0,0,0,0.9), 0 1px 5px rgba(0,0,0,1);
}

/* Subtitle */
.panel-sub {
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 500; font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,.8); letter-spacing: .04em; line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  text-transform: uppercase; margin-top: 5px;
}

/* CTA arrow — reveals on panel hover */
.panel-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 15px;
  font-family: 'Poppins', sans-serif; font-size: 13.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s, transform .32s;
  overflow: hidden; /* prevents arrow breaking boundaries */
  padding: 5px 10px;
}
.panel-cta svg { transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.panel:hover .panel-cta { opacity: 1; transform: translateY(0); }
.panel-work:hover   .panel-cta { color: #6A9FE0; }
.panel-travel:hover .panel-cta { color: var(--gold); }
.panel-study:hover  .panel-cta { color: #5DC8A8; }
.panel:hover .panel-cta svg { animation: arrowShoot 0.7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes arrowShoot {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(25px); opacity: 0; }
  55% { transform: translateX(-25px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* "Tez orada" badge — hidden everywhere */
.panel-soon-badge { display: none; }

/* Decorative panel number */
.panel-num {
  position: absolute; bottom: 12px; right: 16px; z-index: 3;
  font-family: 'Poppins', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.07);
}

/* Touch devices — CTAs always faintly visible, brighten on tap */
@media (hover: none) {
  .panel-cta { opacity: .42; transform: translateY(0); }
  .panel:active { flex: 1.45; }
  .panel:active .panel-body { transform: translateY(-3px); }
  .panel:active .panel-glow { opacity: 1; }
  .panel:active .panel-cta  { opacity: 1; }
  .panel-work:active   .panel-cta { color: #6A9FE0; }
  .panel-travel:active .panel-cta { color: var(--gold); }
  .panel-study:active  .panel-cta { color: #5DC8A8; }
}

/* ── Desktop: side-by-side panels ───────────────────── */
@media (min-width: 680px) {
  .path-panels { flex-direction: row; }
  .panel { border-bottom: none; border-right: 1px solid rgba(255,255,255,.055); }
  .panel:last-child { border-right: none; }
  .panel:hover { flex: 1.65; }
  .panel-title { font-size: clamp(18px, 1.8vw, 28px); }
  .panel-soon-badge { display: none; }
  .panel-num { bottom: 22px; right: 26px; font-size: 12px; }

  /* Logo + brand name larger on desktop */
  .choose-brand { padding: 18px 28px; }
  .choose-brand-logo img  { width: 44px; height: 44px; box-shadow: 0 0 16px rgba(201,169,110,.32); }
  .choose-brand-logo span { font-size: 16px; letter-spacing: .18em; }
}

/* ── Mobile panel layout ─────────────────────────────── */
/* Push panels below the floating header on small screens */
@media (max-width: 679px) {
  .path-panels { padding-top: 56px; }
}

/* Compact content at small viewport heights */
@media (max-width: 479px) {
  .panel-icon  { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 5px; }
  .panel-body  { padding: 10px 16px; gap: 5px; }
  .panel-sub   { font-size: 11px; }
  .panel-cta   { margin-top: 8px; font-size: 11.5px; }
}

/* Very short screens (landscape phones) — hide subtitle */
@media (max-height: 500px) and (max-width: 900px) {
  .panel-sub  { display: none; }
  .panel-icon { margin-bottom: 4px; }
  .panel-body { gap: 4px; padding: 8px 14px; }
}

/* (Work screen removed — now at work/index.html) */

/* ══════════════════════════════════════════════════════
   EVE Robot Mascot — OasisDev
   ══════════════════════════════════════════════════════ */
@keyframes eveFloat {
  0%,100% { transform: translateY(0px);   }
  50%     { transform: translateY(-14px); }
}
@keyframes eveBlink {
  0%,90%,100% { transform: scaleY(1);   }
  95%         { transform: scaleY(.05); }
}
@keyframes eveEyeHalo {
  0%,100% { opacity: .22; }
  50%     { opacity: .50; }
}
@keyframes eveScanLine {
  0%     { transform: translateY(-18px); opacity: 0;  }
  8%     { opacity: .65; }
  92%    { opacity: .65; }
  100%   { transform: translateY(52px);  opacity: 0;  }
}
@keyframes eveArmL {
  0%,100% { transform: rotate(0deg);  }
  40%     { transform: rotate(8deg);  }
  72%     { transform: rotate(-4deg); }
}
@keyframes eveArmR {
  0%,100% { transform: rotate(0deg);  }
  40%     { transform: rotate(-8deg); }
  72%     { transform: rotate(4deg);  }
}
@keyframes eveThruster {
  0%,100% { opacity: .50; transform: scaleX(1);    }
  50%     { opacity: .88; transform: scaleX(1.20); }
}
@keyframes eveShadow {
  0%,100% { opacity: .35; }
  50%     { opacity: .62; }
}

.eve-mascot {
  position: fixed; bottom: 28px; left: 28px; z-index: 400;
  cursor: pointer;
  animation: eveFloat 4.5s ease-in-out infinite;
  transition: filter .3s;
}
.eve-mascot:hover  { filter: brightness(1.10) saturate(1.12); }
.eve-mascot:active { transform: scale(.95); }
.eve-robot { width: 130px; height: 182px; display: block; }

.eve-eye-l,
.eve-eye-r {
  transform-box: fill-box; transform-origin: center;
  animation: eveBlink 5.5s ease-in-out infinite;
}
.eve-eye-r { animation-delay: .22s; }

.eve-eye-halo {
  transform-box: fill-box; transform-origin: center;
  animation: eveEyeHalo 3s ease-in-out infinite;
}

.eve-scan { animation: eveScanLine 3.5s ease-in-out infinite; }

.eve-arm-l {
  transform-box: fill-box; transform-origin: right center;
  animation: eveArmL 4.5s ease-in-out infinite;
}
.eve-arm-r {
  transform-box: fill-box; transform-origin: left center;
  animation: eveArmR 4.5s ease-in-out infinite; animation-delay: -2.25s;
}
.eve-thruster,
.eve-thruster-core {
  transform-box: fill-box; transform-origin: center;
  animation: eveThruster .7s ease-in-out infinite alternate;
}
.eve-thruster-core { animation-delay: .35s; }
.eve-hover-shadow  { animation: eveShadow 4.5s ease-in-out infinite; }

.eve-bubble {
  position: absolute; bottom: 178px; left: 92px; width: 215px;
  background: rgba(4,10,24,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,200,255,.30);
  color: rgba(255,255,255,.88);
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; line-height: 1.6;
  padding: 14px 16px; border-radius: 14px 14px 14px 0;
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(0,180,255,.10);
  opacity: 0; transform: translateY(12px) scale(.94);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.eve-bubble strong { color: #00d4ff; font-size: 12px; letter-spacing: .04em; }
.eve-bubble::after {
  content: ''; position: absolute; bottom: 0; left: 0; transform: translateY(100%);
  border-width: 10px 10px 0 0; border-style: solid;
  border-color: rgba(0,200,255,.30) transparent transparent transparent;
}
.eve-mascot:hover .eve-bubble { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 479px) {
  .eve-mascot { bottom: 18px; left: 16px; }
  .eve-robot  { width: 96px; height: 134px; }
  .eve-bubble { width: 180px; left: 70px; bottom: 134px; font-size: 10.5px; }
}

/* ── prefers-reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}