/* ==========================================================
   RELIABLE TRAVELS — Best offers in domestic packages (offers.js fills it)
   ========================================================== */
@property --hue { syntax: '<color>'; inherits: true; initial-value: #d8ff68; }
@property --op { syntax: '<number>'; inherits: true; initial-value: 0; }

.offers {
  --hue: #d8ff68;
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(90px, 11vw, 150px) max(24px, 6vw) clamp(80px, 9vw, 130px);
  background:
    radial-gradient(55% 60% at 30% 60%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 70%),
    radial-gradient(40% 50% at 90% 10%, color-mix(in srgb, var(--hue) 14%, transparent), transparent 70%),
    #07130f;
  transition: --hue 1.4s ease;
}

/* Giant outlined place name drifting behind everything */
.offers-ghost { position: absolute; inset: auto 0 2% 0; pointer-events: none; overflow: hidden; white-space: nowrap; }
.offers-ghost span { display: block; font: 800 clamp(110px, 19vw, 300px)/.85 Manrope, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--hue) 35%, transparent); opacity: .5; animation: offersDrift 40s linear infinite alternate; transition: opacity .6s; }
.offers-ghost span.swap { opacity: 0; }
@keyframes offersDrift { to { transform: translateX(-18%); } }

/* ---------- Heading ---------- */
.offers-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(36px, 5vw, 60px); }
.offers-head .section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.offers-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 0 var(--hue); animation: offersPulse 1.8s ease-out infinite; }
@keyframes offersPulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.offers-head h2 { font-size: clamp(40px, 5vw, 76px); font-weight: 600; }
.offers-head h2 em { background: linear-gradient(90deg, #ffd166, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.offers-side { max-width: 380px; }
.offers-side p { margin: 0 0 18px; color: #b7c6c1; line-height: 1.75; }
.offers-nav { display: flex; align-items: center; gap: 12px; }
.offers-count { margin-right: auto; font: 600 12px Manrope, sans-serif; letter-spacing: .18em; color: #8ea69f; }
.offers-count b { color: #fff; font-size: 22px; letter-spacing: 0; }
.offers-arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ffffff38; background: #ffffff08; color: #fff; font-size: 18px; cursor: pointer; transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-out); }
.offers-arrow:hover { background: var(--hue); border-color: var(--hue); color: var(--ink); transform: scale(1.08); }

/* ---------- Stage: screen + reel ---------- */
.offers-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px); gap: clamp(18px, 2vw, 28px); align-items: stretch; }

/* The screen opens like a curtain when it first scrolls into view */
.offers-screen { position: relative; min-height: clamp(460px, 40vw, 600px); border-radius: 28px; overflow: hidden; isolation: isolate; background: #031410;
  box-shadow: 0 60px 120px -50px color-mix(in srgb, var(--hue) 70%, transparent), 0 0 0 1px #ffffff14;
  clip-path: inset(14% 22% 14% 22% round 28px); transition: clip-path 1.5s var(--ease-cine), box-shadow 1.4s; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.offers.in .offers-screen { clip-path: inset(0 0 0 0 round 28px); }

/* Frames: the incoming one wipes in from the right over the outgoing one */
.offers-frames, .offer-frame { position: absolute; inset: 0; }
.offers-frames { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.03); transition: transform 1s var(--ease-out); }
.offer-frame { clip-path: inset(0 0 0 100%); z-index: 1; }
.offer-frame img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; transform: scale(1.14); filter: saturate(1.08); }
.offer-frame.on { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 1.25s var(--ease-cine); }
.offer-frame.on img { animation: offersKen 9s cubic-bezier(.2, .6, .2, 1) forwards; }
.offer-frame.off { z-index: 1; clip-path: inset(0 0 0 0); }
.offer-frame.off img { transform: scale(1.08) translate3d(-6%, 0, 0); filter: saturate(.6) brightness(.45); transition: transform 1.3s var(--ease-cine), filter 1.3s; }
@keyframes offersKen { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.offers-screen:after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #020d0bb8 0%, #020d0b40 34%, transparent 55%), linear-gradient(0deg, #020d0bb0, transparent 42%); }

/* A streak of light rides the edge of each wipe */
.offers-sweep { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hue) 55%, #fff 20%) 50%, transparent); mix-blend-mode: screen; filter: blur(18px); }
.offers-sweep.go { animation: offersSweep 1.25s var(--ease-cine); }
@keyframes offersSweep { 0% { opacity: 0; transform: translateX(480%); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateX(-120%); } }

/* Letterbox bars close in a touch during each cut */
.offers-bars i { position: absolute; left: 0; right: 0; z-index: 6; height: 0; background: #000; transition: height .5s var(--ease-cine); }
.offers-bars i:first-child { top: 0; } .offers-bars i:last-child { bottom: 0; }
.offers-screen.cut .offers-bars i { height: 7%; }

/* Rotating "save" stamp */
.offers-stamp { position: absolute; z-index: 7; top: 26px; right: 26px; width: 128px; height: 128px; display: grid; place-items: center; border-radius: 50%; background: var(--hue); color: var(--ink); box-shadow: 0 20px 50px -15px var(--hue); transition: background 1s, transform .7s var(--ease-out); }
.offers-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.offers-stamp text { font: 700 9.5px Manrope, sans-serif; letter-spacing: .22em; fill: var(--ink); }
.offers-stamp b { display: grid; text-align: center; font: 700 9px Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.offers-stamp strong { font-size: 19px; letter-spacing: -.03em; text-transform: none; }
.offers-screen.cut .offers-stamp { transform: scale(.6) rotate(-40deg); }

/* ---------- Copy on the screen ---------- */
.offers-copy { position: absolute; z-index: 7; left: clamp(26px, 4vw, 56px); right: clamp(26px, 4vw, 56px); bottom: clamp(26px, 4vw, 48px); max-width: 640px; }
.offers-copy > * { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s; transition-delay: calc(.45s + var(--k, 0) * .09s); }
.offers-screen.cut .offers-copy > * { opacity: 0; transform: translateY(26px); filter: blur(6px); transition-delay: 0s; transition-duration: .35s; }
.offers-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; --k: 0; }
.offers-meta span { padding: 7px 12px; border-radius: 30px; font: 700 10px Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; background: #ffffff1c; backdrop-filter: blur(10px); border: 1px solid #ffffff26; }
.offers-meta .offers-tag { background: var(--hue); color: var(--ink); border-color: transparent; }
.offers-title { font-size: clamp(36px, 4.2vw, 64px); font-weight: 700; --k: 1; text-shadow: 0 6px 40px #0007; }
.offers-title .ch { display: inline-block; animation: offersChar 1s var(--ease-out) both; animation-delay: calc(.5s + var(--c) * .03s); }
@keyframes offersChar { from { opacity: 0; transform: translateY(60%) rotate(6deg); filter: blur(8px); } }
.offers-blurb { margin: 10px 0 20px; max-width: 470px; color: #eef4f2; line-height: 1.65; font-size: 15px; --k: 2; text-shadow: 0 2px 14px #000c; }
.offers-deal { display: flex; flex-wrap: wrap; align-items: end; gap: 18px 30px; --k: 3; }
.offers-price { display: grid; line-height: 1; }
.offers-price s { color: #9fb3ad; font-size: 15px; margin-bottom: 8px; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.offers-price strong { font: 700 clamp(38px, 3.6vw, 54px) Manrope, sans-serif; letter-spacing: -.05em; color: var(--hue); font-variant-numeric: tabular-nums; transition: color 1s; }
.offers-price small { margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9fb3ad; }
.offers-timer { display: flex; gap: 6px; }
.offers-timer span { display: grid; justify-items: center; min-width: 54px; padding: 9px 6px 8px; border-radius: 12px; background: #ffffff12; border: 1px solid #ffffff1f; backdrop-filter: blur(10px); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #a9bcb6; }
.offers-timer b { font: 700 20px Manrope, sans-serif; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.offers-cta { display: inline-flex; align-items: center; gap: 18px; padding: 17px 24px; border-radius: 50px; background: #fff; color: var(--ink); font: 700 13px Manrope, sans-serif; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .4s; }
.offers-cta:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hue); transform: translateY(101%); transition: transform .5s var(--ease-cine); }
.offers-cta:hover:before { transform: none; }
.offers-cta span { transition: transform .35s; }
.offers-cta:hover span { transform: translate(4px, -4px) rotate(45deg); }

/* ---------- Reel of offer tickets ---------- */
.offers-reel { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 8px; }
.offers-reel li { opacity: 0; transform: translateX(40px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(.6s + var(--i) * .08s); }
.offers.in .offers-reel li { opacity: 1; transform: none; }
.offer-ticket { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; text-align: left; color: #fff; font: inherit; cursor: pointer; border: 1px solid #ffffff17; border-radius: 18px; background: #ffffff07; overflow: hidden; transition: background .45s, border-color .45s, transform .45s var(--ease-out); }
.offer-ticket:hover { background: #ffffff10; transform: translateX(-6px); }
.offer-ticket.on { background: color-mix(in srgb, var(--c) 14%, #07130f); border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateX(-12px); }
.offer-ticket img { width: 74px; height: 100%; min-height: 64px; max-height: 84px; object-fit: cover; border-radius: 12px; filter: saturate(.7) brightness(.8); transition: filter .5s; }
.offer-ticket.on img, .offer-ticket:hover img { filter: none; }
.offer-ticket small { display: block; font: 700 9px Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c); margin-bottom: 5px; }
.offer-ticket h4 { margin: 0; font: 700 16px/1.15 Manrope, sans-serif; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-ticket em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: #94aaa3; }
.offer-ticket strong { font: 700 15px Manrope, sans-serif; text-align: right; }
.offer-ticket strong span { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-top: 4px; }
/* Countdown line for autoplay */
.offer-ticket:after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); }
.offer-ticket.on:after { transform: scaleX(var(--op)); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .offers-head { flex-direction: column; align-items: start; }
  .offers-stage { grid-template-columns: 1fr; }
  .offers-reel { grid-auto-flow: column; grid-auto-columns: minmax(250px, 72vw); grid-auto-rows: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; }
  .offers-reel::-webkit-scrollbar { display: none; }
  .offers-reel li { scroll-snap-align: start; transform: translateY(30px); }
  .offer-ticket:hover, .offer-ticket.on { transform: none; }
}
@media (max-width: 640px) {
  .offers-screen { min-height: 640px; border-radius: 22px; }
  .offers-screen:after { background: linear-gradient(0deg, #020d0bf0 0%, #020d0b90 40%, transparent 65%); }
  .offers-stamp { width: 96px; height: 96px; top: 16px; right: 16px; }
  .offers-stamp text { font-size: 11px; }
  .offers-stamp strong { font-size: 15px; }
  .offers-copy { left: 20px; right: 20px; bottom: 22px; }
  .offers-blurb { font-size: 14px; margin-bottom: 20px; }
  .offers-timer span { min-width: 48px; }
  .offers-cta { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .offers-screen { clip-path: inset(0 0 0 0 round 28px); transform: none; }
  .offers-reel li { opacity: 1; transform: none; }
  .offers *, .offers *:before, .offers *:after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
.offers-title .wd { display: inline-block; white-space: nowrap; }