/* ==========================================================
   RELIABLE TRAVELS — cinematic layer (loaded after style.css)
   ========================================================== */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ffb703; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #ffb703; }

:root {
  --ease-cine: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pink: #ff2d46;
  --violet: #3d5afe;
  --sky: #36b3ff;
  --teal: #00c2a8;
  transition: --accent 1.2s ease;
}

::selection { background: var(--lime); color: var(--ink); }

/* ---------- Preloader (curtain open) ---------- */
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; }
.preloader { position: fixed; inset: 0; z-index: 300; pointer-events: none; animation: preFailSafe 0s 6s forwards; }
.pre-panel { position: absolute; left: 0; right: 0; height: 50.5%; background: #070b15; transition: transform 1.25s var(--ease-cine) .25s; }
.pre-panel.top { top: 0; }
.pre-panel.bottom { bottom: 0; }
.pre-brand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: #fff; transition: opacity .45s, transform .9s var(--ease-cine); }
.pre-word { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .12em .4em; font: 800 clamp(34px, 7vw, 96px)/1.05 Outfit, sans-serif; letter-spacing: .06em; }
.pre-w { display: inline-flex; gap: .04em; font-style: normal; }
.pre-word span { display: inline-block; background: linear-gradient(120deg, var(--lime), #ffd23f 35%, var(--orange) 60%, var(--pink) 85%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(60%) rotate(8deg); animation: preLetter .8s var(--ease-out) forwards, shimmer 3s linear infinite; animation-delay: var(--d, 0s), 0s; }
.pre-line { width: min(320px, 60vw); height: 2px; background: #ffffff1c; overflow: hidden; border-radius: 2px; }
.pre-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--orange), var(--pink), var(--violet)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pre-brand small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9aa3b8; }
.pre-brand small b { color: #fff; font-weight: 700; }
.loaded .pre-panel.top { transform: translateY(-100%); }
.loaded .pre-panel.bottom { transform: translateY(100%); }
.loaded .pre-brand { opacity: 0; transform: scale(1.15); }
@keyframes preLetter { to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes preFailSafe { to { visibility: hidden; } }

/* ---------- Scroll progress + cursor + grain ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--lime), #ffd23f, var(--orange), var(--pink), var(--violet)); }
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; z-index: 150; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s; }
.cursor.on { opacity: 1; }
.cursor.hover { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #fff; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- Hero ---------- */
.hero { height: 100vh; height: 100svh; max-height: 980px; }

h1 em { background: linear-gradient(95deg, var(--accent) 10%, #fff 55%, var(--accent) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; animation: emShine 6s ease-in-out infinite; }
@keyframes emShine { 50% { background-position: 100% 0; } }
.eyebrow { color: var(--accent); }
.eyebrow span { width: 42px; height: 2px; }
.primary-btn { position: relative; overflow: hidden; background: var(--accent); box-shadow: 0 14px 40px -12px var(--accent); transition: box-shadow .4s, transform .3s; isolation: isolate; }
.primary-btn:before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .5s var(--ease-cine); z-index: -1; }
.primary-btn:hover:before { transform: none; }

.arrow { transition: background .3s, color .3s, border-color .3s, transform .3s; }
.arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }


/* ---------- Intro ---------- */
.intro { position: relative; overflow: hidden; }
.intro > *:not(.blob) { position: relative; z-index: 1; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: blob 16s ease-in-out infinite alternate; pointer-events: none; }
.blob.b1 { width: 420px; height: 420px; background: #ffd9b8; right: -80px; top: -60px; }
.blob.b2 { width: 360px; height: 360px; background: #ffe9a8; left: 30%; bottom: -160px; animation-delay: -5s; }
.blob.b3 { width: 300px; height: 300px; background: #c9d8ff; left: -100px; top: 30%; animation-delay: -9s; }
@keyframes blob { 33% { transform: translate(60px,-40px) scale(1.1); } 66% { transform: translate(-40px,30px) scale(.92); } 100% { transform: translate(20px,50px) scale(1.05); } }
.section-kicker { display: flex; align-items: center; gap: 12px; }
.section-kicker:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(var(--lime), var(--orange), var(--pink), var(--violet), var(--lime)); animation: spin 4s linear infinite; flex-shrink: 0; }
.planner .section-kicker { justify-content: center; }
[data-fill] .w { display: inline-block; opacity: .14; transition: opacity .4s, color .4s, transform .5s var(--ease-out); transform: translateY(8px); }
[data-fill] .w.on { opacity: 1; transform: none; }
[data-fill] .w.hl.on { background: linear-gradient(90deg, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.stats strong { background: linear-gradient(120deg, var(--ink), #3d5afe); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats div:nth-child(2) strong { background-image: linear-gradient(120deg, var(--orange), var(--pink)); }
.stats div:nth-child(3) strong { background-image: linear-gradient(120deg, var(--violet), var(--sky)); }
/* Numbers-only band: no heading above, so drop the divider and tighten the padding */
.intro-stats { padding-block: 56px; }
.intro-stats .stats { border-top: 0; margin-top: 0; padding-top: 0; }
.intro-stats .stats div { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.intro-stats .stats div:nth-child(2) { transition-delay: .18s; }
.intro-stats .stats div:nth-child(3) { transition-delay: .36s; }
.intro-stats.visible .stats div { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .intro-stats .stats div { opacity: 1; transform: none; } }

/* ---------- Journeys cards ---------- */
.trip-card.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1.4s var(--ease-cine), transform .18s ease, box-shadow .5s; transition-delay: calc(var(--d, 0) * .12s), 0s, 0s; }
.trip-card.reveal.visible { clip-path: inset(0 0 0 0 round 18px); }
.trip-card { border-radius: 18px; }
.trip-card img { transform: scale(1.3); transition: transform 1.8s var(--ease-out); }
.trip-card.visible img { transform: scale(1); }
.trip-card.visible:hover img { transform: scale(1.06); }
.trip-card:hover { box-shadow: 0 40px 80px -30px var(--glow); }
.card-gradient { background: linear-gradient(0deg, #080d1bf0, transparent 65%), linear-gradient(200deg, color-mix(in srgb, var(--glow) 45%, transparent), transparent 45%); }
.trip-card .pill { background: var(--glow); color: var(--ink); font-weight: 700; }
.card-copy a { transition: gap .3s, border-color .3s; }
.card-copy a:hover { gap: 40px; border-color: var(--glow); }

/* ---------- Steps ---------- */
.steps { padding: 40px max(24px, 5vw) 90px; position: relative; }
.steps-line { height: 2px; margin: 0 5vw 40px; background: #0000000f; border-radius: 2px; overflow: hidden; }
.steps-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), #ffb59c, #a9d4ff, #c9cdfc); transform-origin: left; transform: scaleX(0); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 5vw; }
.step { position: relative; background: var(--c); border-radius: 22px; padding: 30px 26px 34px; min-height: 290px; overflow: hidden; transition: opacity .8s, transform .8s var(--ease-out), box-shadow .5s; transition-delay: calc(var(--d, 0) * .12s); }
.step:after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -60px; bottom: -70px; background: #ffffff55; transition: transform .7s var(--ease-out); }
.step:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 30px 60px -25px #0005; transition-delay: 0s; }
.step:hover:after { transform: scale(1.6); }
.step b { font: 800 13px Outfit, sans-serif; letter-spacing: .14em; opacity: .6; }
.step-icon { position: absolute; top: 22px; right: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--c); display: grid; place-items: center; font-size: 22px; transition: transform .6s var(--ease-out); }
.step:hover .step-icon { transform: rotate(-20deg) scale(1.1); }
.step h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 90px 0 14px; position: relative; z-index: 1; }
.step p { margin: 0; line-height: 1.65; color: #1c2438; position: relative; z-index: 1; font-size: 15px; }

/* ---------- Planner (sunset) ---------- */
.planner { color: #fff; background: linear-gradient(125deg, #0c1222, #1b2547, #ff5a1f, #ffb703, #1b2547, #0c1222); background-size: 400% 400%; animation: sunset 22s ease infinite; }
@keyframes sunset { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.planner .section-kicker { color: #ffffffcc; }
.planner p:not(.section-kicker) { color: #fff; font-size: 17px; }
.planner h2 em { font-family: inherit; font-weight: 400; }
.dark-btn { background: #fff; color: var(--ink); border-radius: 40px; padding: 18px 28px; font-weight: 700; box-shadow: 0 20px 50px -15px #0006; transition: box-shadow .4s; }
.dark-btn:hover { box-shadow: 0 25px 60px -10px #0008; }
.sun { position: absolute; width: 520px; height: 520px; border-radius: 50%; left: 50%; top: 50%; margin: -260px 0 0 -260px; background: radial-gradient(circle, #ffd23f55 0%, #ff5a1f22 40%, transparent 70%); animation: pulse 6s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .7; } }

/* ---------- Footer ---------- */
footer { position: relative; overflow: hidden; }
.footer-giant { grid-column: 1 / -1; font: 800 clamp(64px, 17vw, 280px)/.9 Outfit, sans-serif; letter-spacing: -.05em; text-align: center; margin: 40px 0 -10px; -webkit-text-stroke: 1px #ffffff30; -webkit-text-fill-color: #070b15; background: linear-gradient(90deg, var(--lime), var(--orange), var(--pink), var(--violet), var(--sky), var(--lime)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 8s linear infinite; user-select: none; cursor: default; }
.footer-giant:hover, .footer-giant.lit { -webkit-text-fill-color: transparent; -webkit-text-stroke-color: transparent; }
.footer-links a { position: relative; transition: color .3s; }
.footer-links a:hover { color: var(--lime); }

/* ---------- Cinematic heading reveal (words rise out of blur) ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }
.wm-in { display: inline-block; transform: translateY(105%) rotate(3deg); filter: blur(8px); opacity: 0; transform-origin: left bottom; transition: transform 1.1s var(--ease-out), filter 1s, opacity .8s; transition-delay: calc(var(--i, 0) * 70ms); }
.split-in .wm-in { transform: none; filter: none; opacity: 1; }

/* ---------- Reveal stagger ---------- */
.reveal { transition-delay: calc(var(--d, 0) * .12s); transition-timing-function: var(--ease-out); transition-duration: 1s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .hero { max-height: 920px; min-height: 650px; }
  .steps { padding-bottom: 90px; }
  .steps-line { margin-inline: 0; }
  .steps-grid { padding: 0; }
  .sun { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .footer-giant { margin-top: 20px; }
}
@media (max-width: 520px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step { min-height: 230px; }
  .step h3 { margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader, .cursor { display: none; }

  .wm-in { transform: none !important; opacity: 1 !important; filter: none !important; }
  .trip-card.reveal { clip-path: none; }
  [data-fill] .w { opacity: 1; transform: none; }
}
.splash-seen .preloader { display: none; }