/* Lyncia Driver — first-visit Lottie story.  The app in /app is untouched. */
:root { --intro-dur: 11.6s; }

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f7fbff;
  background:
    radial-gradient(58% 54% at 52% 5%, #17386f 0%, rgba(23,56,111,0) 70%),
    linear-gradient(145deg, #050c1d 0%, #0a1d3c 54%, #06142c 100%);
  opacity: 1;
  transition: opacity .52s ease;
}
#intro::before,
#intro::after {
  content: "";
  position: absolute;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(154,190,255,.09);
  border-radius: 50%;
  pointer-events: none;
}
#intro::before { transform: translate(-45%, -46%); }
#intro::after { transform: translate(52%, 50%); }
#intro.intro-hide { opacity: 0; pointer-events: none; }
body.intro-open { overflow: hidden; }

.intro-brand {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font, Inter, sans-serif);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #f4f8ff;
  opacity: 0;
  animation: introFade .45s ease .12s forwards;
}
.intro-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: #f6b225; box-shadow: 0 0 0 5px rgba(246,178,37,.14); }

.intro-story { z-index: 1; width: min(96vw, 980px); }
.intro-stage { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.intro-stage > svg { width: 100% !important; height: 100% !important; display: block; }
.intro-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #07142d; }

/* Stitch artwork is used as the visual language; CSS provides the camera cuts,
   timing, focus pull and final movement instead of presenting it as slides. */
.stitch-story { position: absolute; inset: 0; overflow: hidden; background: #07142d; }
.stitch-frame { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transform: scale(1); will-change: opacity, transform; }
.stitch-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
#intro.playing .stitch-night { animation: stitchNight var(--intro-dur) cubic-bezier(.28,.75,.28,1) both; }
#intro.playing .stitch-dawn { animation: stitchDawn var(--intro-dur) cubic-bezier(.28,.75,.28,1) both; }
#intro.playing .stitch-phone { animation: stitchPhone var(--intro-dur) cubic-bezier(.22,.72,.25,1) both; }
#intro.playing .stitch-drive { animation: stitchDrive var(--intro-dur) cubic-bezier(.22,.72,.25,1) both; }
#intro.playing .stitch-drive img { animation: driveCamera var(--intro-dur) cubic-bezier(.22,.72,.25,1) both; }
.stitch-night::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(5,13,37,.25),transparent 48%,rgba(5,13,37,.1)); animation: nightPulse 2.4s ease-in-out infinite; }
.stitch-night::after { content:""; position:absolute; z-index:2; right:0; bottom:0; width:168px; height:62px; background:linear-gradient(135deg,transparent 0%,#06142b 46%); }
.stitch-sleep { position:absolute; z-index:3; left:34%; top:48%; color:#dceaff; font:800 clamp(22px,3vw,39px) Inter,sans-serif; text-shadow:0 3px 15px rgba(5,14,34,.8); opacity:0; animation:sleepMark 2.1s ease-in-out infinite; }
.stitch-phone::after { content:""; position:absolute; z-index:2; width:46px; height:46px; left:53%; top:63%; border:3px solid rgba(37,211,102,.85); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.42); }
#intro.playing .stitch-phone::after { animation: phoneTap var(--intro-dur) ease-out both; }
.stitch-drive::after { content:""; position:absolute; inset:0; z-index:2; opacity:0; background:repeating-linear-gradient(112deg,transparent 0 42px,rgba(255,225,168,.38) 43px 45px,transparent 47px 104px); mix-blend-mode:screen; }
#intro.playing .stitch-drive::after { animation: roadMotion var(--intro-dur) linear both; }

@keyframes stitchNight { 0%,20% { opacity:1; transform:scale(1); } 24% { opacity:0; transform:scale(1.075); } 100% { opacity:0; } }
@keyframes stitchDawn { 0%,19% { opacity:0; transform:scale(1.1); } 24%,42% { opacity:1; transform:scale(1); } 47%,100% { opacity:0; transform:scale(1.04); } }
@keyframes stitchPhone { 0%,42% { opacity:0; transform:scale(1.22) rotate(-2.5deg); } 48%,72% { opacity:1; transform:scale(1) rotate(0); } 78%,100% { opacity:0; transform:scale(.94); } }
@keyframes stitchDrive { 0%,73% { opacity:0; transform:scale(1.06) translateX(-2%); } 79%,100% { opacity:1; transform:scale(1) translateX(0); } }
@keyframes nightPulse { 50% { opacity:.46; } }
@keyframes sleepMark { 0%,18% { opacity:0; transform:translate(-6px,12px) scale(.7); } 45%,66% { opacity:.9; transform:translate(4px,-7px) scale(1); } 100% { opacity:0; transform:translate(11px,-19px) scale(1.08); } }
@keyframes phoneTap { 0%,60% { opacity:0; transform:translate(-50%,-50%) scale(.42); } 63% { opacity:1; } 69% { opacity:0; transform:translate(-50%,-50%) scale(2.5); } 100% { opacity:0; } }
@keyframes roadMotion { 0%,79% { opacity:0; background-position:0 0; } 83% { opacity:.75; } 100% { opacity:0; background-position:280px 0; } }
@keyframes driveCamera { 0%,78% { transform:scale(1.06) translateX(-2%); } 100% { transform:scale(1.12) translateX(-7%); } }

.intro-loading-mark { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 10px); place-content: center; gap: 7px; }
.intro-loading-mark span { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; animation: loadingDot .9s ease-in-out infinite; }
.intro-loading-mark span:nth-child(2) { animation-delay: .12s; }
.intro-loading-mark span:nth-child(3) { animation-delay: .24s; }
.intro-stage.lottie-ready .intro-loading-mark { display: none; }

/* A visual safety net while Lottie initializes (or if a browser blocks scripts). */
.intro-fallback-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg,#0a1d40 0%,#19518d 60%,#f4b760 100%); }
.intro-stage.lottie-ready .intro-fallback-scene { display: none; }
.intro-fallback-scene i { position: absolute; display: block; font-style: normal; }
.fallback-sun { width: 84px; height: 84px; right: 12%; top: 13%; border-radius: 50%; background: #ffd36a; box-shadow: 0 0 0 19px rgba(255,211,106,.16); }
.fallback-hill { bottom: 18%; border-radius: 50% 50% 0 0; background: #a8c4dc; }.fallback-hill.h1 { width: 58%; height: 34%; left: -8%; }.fallback-hill.h2 { width: 62%; height: 38%; right: -12%; background:#80a7c4; }
.fallback-road { height: 24%; width: 110%; left: -5%; bottom: 0; background: linear-gradient(#33445c 0 12%,#192b42 12% 100%); }.fallback-road::after { content:""; position:absolute; left:0; right:0; top:61%; height:5px; background: repeating-linear-gradient(90deg,#f9cf57 0 62px,transparent 62px 128px); }
.fallback-truck { position:absolute; left: 18%; bottom: 18%; width: 43%; height: 29%; filter: drop-shadow(0 10px 6px rgba(8,25,50,.2)); animation:fallbackWideTruck var(--intro-dur) both; }.fallback-truck i { box-sizing:border-box; }.fallback-truck .trailer { left:0; bottom:18%; width:68%; height:61%; border:3px solid #2a58b8; border-radius: 11px; background:#fff; }.fallback-truck .cab { right:0; bottom:18%; width:31%; height:50%; border-radius: 12px 14px 5px 5px; background:#2864dc; }.fallback-truck .window { right:7%; bottom:48%; width:15%; height:21%; border-radius:5px; background:#b9d9ff; }.fallback-truck .wheel { width:18%; aspect-ratio:1; bottom:0; border-radius:50%; background:radial-gradient(circle,#93a3bb 0 25%,#101d30 27% 62%,#050b15 64%); }.fallback-truck .w1 { left:12%; }.fallback-truck .w2 { left:45%; }.fallback-truck .w3 { right:5%; }
.fallback-driver { position:absolute; right:17%; bottom:18%; width:13%; height:34%; filter:drop-shadow(0 7px 4px rgba(8,25,50,.14)); animation:fallbackDriver var(--intro-dur) both; }.fallback-driver::after { content:""; position:absolute; right:-6%; top:44%; width:14%; height:24%; border:3px solid #0a1527; border-radius:4px; background:#bcd8ff; opacity:0; animation:fallbackHandPhone var(--intro-dur) both; }.fallback-driver i { box-sizing:border-box; }.fallback-driver .head { width:34%; aspect-ratio:1; left:33%; top:11%; border-radius:50%; background:#e9ae81; }.fallback-driver .cap { left:27%; top:5%; width:46%; height:13%; border-radius:12px 12px 3px 3px; background:#172b4d; }.fallback-driver .body { left:23%; top:36%; width:54%; height:38%; border-radius:13px 13px 6px 6px; background:#2864dc; }.fallback-driver .arm { top:43%; width:17%; height:39%; border-radius:9px; background:#2864dc; }.fallback-driver .a1 { left:8%; transform:rotate(18deg); }.fallback-driver .a2 { right:8%; transform:rotate(-18deg); }.fallback-driver .leg { bottom:0; width:20%; height:31%; border-radius:8px 8px 3px 3px; background:#15233a; }.fallback-driver .l1 { left:29%; }.fallback-driver .l2 { right:29%; }
.fallback-phone { position:absolute; left:50%; top:8%; width:29%; min-width:142px; height:70%; padding:10% 3% 4%; border:8px solid #101b2d; border-radius:27px; box-sizing:border-box; background:#fff; box-shadow: 0 14px 28px rgba(17,39,77,.25); font:700 clamp(8px,1vw,13px) Inter,sans-serif; color:#1b2942; opacity:0; transform:translateX(-50%) scale(.76); animation:fallbackClosePhone var(--intro-dur) both; }.fallback-phone b { position:absolute; left:0; right:0; top:0; height:20%; display:grid; place-items:center; border-radius:18px 18px 5px 5px; background:#2864dc; color:#fff; font-size:1.2em; }.fallback-phone .route { position:relative; display:block; margin:10px 0; padding:10px; border-radius:8px; background:#eef4ff; }.fallback-phone .from { color:#147a46; }.fallback-phone .to { color:#cf3d4b; }.fallback-phone strong { display:block; margin-top:8%; text-align:center; font-size:clamp(28px,4vw,54px); color:#2864dc; }.fallback-phone em { display:block; text-align:center; color:#72809a; font-size:.72em; font-style:normal; letter-spacing:.08em; }.fallback-phone .whatsapp { width:27%; aspect-ratio:1; bottom:7%; left:36.5%; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#fff; font-size:1.7em; }


.intro-skip {
  position: absolute;
  top: max(15px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 3;
  padding: 9px 15px;
  border: 1px solid rgba(40,74,126,.13);
  border-radius: 999px;
  background: rgba(14,34,67,.72);
  box-shadow: 0 7px 26px rgba(36,63,110,.08);
  color: #d8e5fb;
  font: 700 13px var(--font, Inter, sans-serif);
  backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .2s, color .2s, background .2s;
}
.intro-skip.show { opacity: 1; pointer-events: auto; }
.intro-skip:hover { transform: translateY(-1px); background: #183862; color: #fff; }

#intro:not(.playing) .intro-story { display: none; }
#intro.playing .intro-lang { display: none; }
.intro-lang { z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(15px,3vh,27px); opacity: 0; animation: introFade .5s ease .2s forwards; }
.intro-lang h2 { margin: 0; font: 700 clamp(18px,3vw,26px)/1.3 "Noto Sans Georgian",var(--font,sans-serif); color: #162747; text-align: center; }
.intro-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 10px; width: min(88vw, 390px); }
.intro-lang-grid button { min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(29,78,216,.13); border-radius: 16px; color: #203253; background: rgba(255,255,255,.76); box-shadow: 0 8px 24px rgba(32,67,135,.07); font: 800 15px var(--font,Inter,sans-serif); cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.intro-lang-grid button:hover { transform: translateY(-2px); border-color: #3c75e5; box-shadow: 0 14px 30px rgba(32,67,135,.13); }
.intro-lang-grid .code { color: #7b89a0; font-size: 11px; letter-spacing: .1em; }

@keyframes introFade { to { opacity: 1; } }
@keyframes loadingDot { 50% { transform: translateY(-8px); opacity: .45; } }
@keyframes fallbackWideTruck { 0%,31% { opacity:1; transform:none; } 35%,74% { opacity:0; transform:translateX(-28px); } 79% { opacity:1; transform:none; } 100% { opacity:1; transform:translateX(160%); } }
@keyframes fallbackDriver { 0%,31% { opacity:1; } 35%,74% { opacity:0; } 79%,100% { opacity:0; } }
@keyframes fallbackHandPhone { 0%,26% { opacity:0; transform:translateY(18px) rotate(8deg); } 30%,34% { opacity:1; transform:none; } 37%,100% { opacity:0; } }
@keyframes fallbackClosePhone { 0%,34% { opacity:0; transform:translateX(-50%) scale(.76); } 39%,71% { opacity:1; transform:translateX(-50%) scale(1); } 76%,100% { opacity:0; transform:translateX(-50%) scale(.9); } }
@media (max-width: 580px) { .intro-stage { width: 108%; margin-left: -4%; } }
@media (prefers-reduced-motion: reduce) { #intro *, #intro { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }