/* ============================================================
   THE TRAVEL REWARDS ADVISORY — shared "rich page" enhancements
   Linked on inner pages alongside their own styles.
   Progressive enhancement: reveal classes are only applied by
   enhance.js to below-the-fold elements, so if JS is disabled
   ALL content remains fully visible.
   ============================================================ */

/* Hero background photo (set via data-hero-img on .darktop) */
.darktop{overflow:hidden;}
.darktop > .wrap{position:relative;z-index:2;}
.darktop .hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.32;}
.darktop .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,16,20,.93),rgba(15,16,20,.6) 58%,rgba(15,16,20,.42)),linear-gradient(0deg,#0f1014,transparent 62%);}

/* Scroll-reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.revealed{opacity:1;transform:none;}

/* Hover lifts on cards (only adds motion; layout unchanged) */
.feat,.citem,.rec-card,.tier,.look-card,.adv-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.feat:hover,.citem:hover,.rec-card:hover,.tier:hover,.look-card:hover,.adv-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,.12);}

/* Banner image subtle zoom on hover */
.page-banner img{transition:transform .9s ease;}
.page-banner:hover img{transform:scale(1.03);}

/* Floating CTA pill (injected by enhance.js) */
#cta-pill{position:fixed;bottom:26px;right:26px;z-index:900;background:linear-gradient(180deg,#e6d3a3,#c9a96a);color:#15130d;border-radius:40px;padding:14px 26px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 36px rgba(201,169,106,.4);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s;pointer-events:none;}
#cta-pill.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
#cta-pill:hover{transform:translateY(-2px);}

@media(max-width:860px){
  #cta-pill{bottom:16px;right:16px;padding:12px 18px;font-size:10px;}
}