/* =========================================================
   CodeChaps — Travel App Development page
   Page-specific styles (boarding-pass phone + hotel deal card hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:540px;align-items:center}
.tr-wrap{position:relative;width:520px;height:520px}
.js .tr-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .tr-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.tr-wrap .float{z-index:4}

/* ---- trip phone ---- */
.trip{position:absolute;left:20px;top:0;width:250px;height:510px;border-radius:40px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:2}
.trip::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05070B;z-index:3}
.trip-screen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:#F1F5F9;color:#0F172A;display:flex;flex-direction:column}
.sky{position:relative;height:168px;flex:none;padding:42px 16px 0;color:#fff;background:linear-gradient(180deg,#1D4ED8 0%,#3B82F6 55%,#7DD3FC 100%);overflow:hidden}
.sky small,.sky b{position:relative;z-index:1}
.sky small{display:block;font-size:9.5px;letter-spacing:.14em;opacity:.85}
.sky b{display:block;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.1;margin-top:3px}
.cloud{position:absolute;height:14px;border-radius:14px;background:rgba(255,255,255,.75);animation:cloud linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:18px;height:18px;left:8px;top:-9px}
.cloud::after{width:14px;height:14px;left:22px;top:-6px}
.cloud.c1{width:46px;top:122px;left:-60px;animation-duration:16s}
.cloud.c2{width:36px;top:142px;left:-60px;animation-duration:22s;animation-delay:-9s;opacity:.7}
@keyframes cloud{to{transform:translateX(360px)}}
.arc{position:absolute;left:16px;right:16px;top:86px;height:60px}
.arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc .dash{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.5;stroke-dasharray:3 4}
.arc .ap{position:absolute;bottom:-4px;font-size:10px;font-weight:700}
.arc .ap.from{left:0}.arc .ap.to{right:0}
.arc .dot{position:absolute;bottom:14px;width:8px;height:8px;border-radius:50%;background:#fff}
.arc .dot.d1{left:2px}.arc .dot.d2{right:2px}
.plane{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;color:#fff;offset-path:path("M4 48 Q 99 -14 194 48");offset-rotate:auto;offset-distance:0%}
.plane svg{width:18px;height:18px;transform:rotate(90deg);fill:#fff}
.js.loaded .plane{animation:fly 6s ease-in-out infinite}
@keyframes fly{0%{offset-distance:0%}80%,100%{offset-distance:100%}}
.pass{margin:-14px 12px 0;position:relative;z-index:1;background:#fff;border-radius:16px;box-shadow:0 12px 26px rgba(15,23,42,.14);padding:12px 12px 10px}
.pass-row{display:flex;justify-content:space-between;align-items:flex-end}
.pass-row div small{display:block;font-size:8.5px;color:#64748B}
.pass-row div b{font-size:17px;font-family:var(--display);font-weight:900;line-height:1}
.pass-row .mid{text-align:center;font-size:8.5px;color:#64748B}
.pass-row .mid i{display:block;width:60px;height:1px;background:repeating-linear-gradient(90deg,#94A3B8 0 3px,transparent 3px 6px);margin:4px auto}
.pass-cut{position:relative;height:1px;margin:10px -12px;background:repeating-linear-gradient(90deg,#CBD5E1 0 4px,transparent 4px 8px)}
.pass-cut::before,.pass-cut::after{content:"";position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:#F1F5F9}
.pass-cut::before{left:-7px}.pass-cut::after{right:-7px}
.pass-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-size:8.5px;color:#64748B}
.pass-meta b{display:block;font-size:11px;color:#0F172A}
.pass-meta .gate b{color:var(--blue)}
.itin{padding:12px 14px 0;display:flex;flex-direction:column;gap:7px}
.itin>small{font-size:9px;font-weight:700;color:#64748B;letter-spacing:.1em}
.stop{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:10px}
.stop .si{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.stop .si .ico{width:12px;height:12px}
.stop b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop small{font-size:8.5px;color:#64748B}
.stop .tm{font-size:9px;font-weight:700;color:#334155}
.js .stop{opacity:0;transform:translateX(14px)}
.js.loaded .stop{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js.loaded .stop:nth-of-type(1){transition-delay:1.2s}.js.loaded .stop:nth-of-type(2){transition-delay:1.35s}.js.loaded .stop:nth-of-type(3){transition-delay:1.5s}.js.loaded .stop:nth-of-type(4){transition-delay:1.65s}
.trip-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 14px;border-top:1px solid #E2E8F0;background:#fff;color:#94A3B8}
.trip-tabs .ico{width:17px;height:17px}
.trip-tabs .on{color:var(--blue)}

/* ---- hotel deal card ---- */
.deal{position:absolute;right:-10px;top:64px;width:236px;border-radius:22px;background:#fff;color:#0F172A;box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden;animation:floatY 7s ease-in-out infinite reverse;z-index:1}
.beach{position:relative;height:120px;background:linear-gradient(180deg,#FDBA74 0%,#FDE68A 38%,#7DD3FC 39%,#0EA5E9 70%);overflow:hidden}
.beach .sun{position:absolute;left:62%;top:14px;width:34px;height:34px;border-radius:50%;background:#FFF7ED;box-shadow:0 0 24px #FDBA74}
.beach .wave{position:absolute;left:-20%;width:140%;height:26px;border-radius:50%;background:rgba(255,255,255,.35);animation:wave 4s ease-in-out infinite}
.beach .wave.w1{top:52px}
.beach .wave.w2{top:66px;animation-delay:-2s;background:rgba(255,255,255,.25)}
@keyframes wave{0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
.beach .sand{position:absolute;left:-10%;right:-10%;bottom:-24px;height:50px;border-radius:50% 50% 0 0;background:#FDE68A}
.palm{position:absolute;left:18px;bottom:8px;width:40px;height:70px}
.palm svg{width:100%;height:100%;overflow:visible}
.palm .leaves{transform-origin:20px 14px;animation:sway 3.5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.beach .drop{position:absolute;right:10px;top:10px;font-size:9.5px;font-weight:700;background:#16A34A;color:#fff;padding:3px 8px;border-radius:999px}
.deal-body{padding:12px 14px 14px}
.deal-body b{display:block;font-size:13px}
.deal-body small{font-size:10px;color:#64748B}
.deal-rate{display:flex;align-items:center;gap:6px;margin:6px 0 8px;font-size:10px;color:#334155}
.deal-rate span{background:#1D4ED8;color:#fff;font-weight:700;border-radius:6px;padding:2px 6px}
.spark{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.spark svg{width:110px;height:36px}
.spark path{fill:none;stroke:#16A34A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.js.loaded .spark path{animation:draw 1.8s var(--ease) 1.3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.price small{display:block;font-size:9px;color:#94A3B8;text-decoration:line-through;text-align:right}
.price b{font-family:var(--display);font-weight:900;font-size:20px}
.deal-btn{margin-top:10px;display:block;text-align:center;background:var(--blue);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:8px}

.float--1{right:-60px;top:-16px}
.float--2{right:-40px;top:auto;bottom:24px}
.float--3{left:-60px;top:auto;bottom:-34px}
@media (max-width:1240px) and (min-width:961px){.tr-wrap{transform-origin:left center;scale:.9}.float--1{right:-20px}.float--2{right:-10px}.float--3{left:-40px}.deal{right:-44px}}
@media (max-width:960px){.hero-visual{min-height:0}.tr-wrap{width:100%;max-width:520px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}.trip,.deal{position:relative;left:auto;right:auto;top:auto}.deal{margin-top:60px}}
@media (max-width:560px){.deal{display:none}}
@media (prefers-reduced-motion:reduce){.plane{offset-distance:50%}.spark path{stroke-dashoffset:0}.js .stop{opacity:1;transform:none}}