/* ==========================================================================
   CorbaTime - custom visual enhancements
   Layered on top of the New Age theme (style.css). Keep brand language:
   blue (#5287ef) -> navy (#001153) gradient, Kanit display font.
   ========================================================================== */
:root {
  --ct-blue: #5287ef;
  --ct-navy: #001153;
  --ct-gradient: linear-gradient(45deg, #5287ef, #001153);
}

/* Smooth, consistent interactions */
a,
.app-badge,
.nav-link,
.btn {
  transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* --- Navbar: frosted glass --- */
#mainNav {
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(0, 17, 83, 0.06);
}
#mainNav .navbar-brand { letter-spacing: .2px; }
#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  font-weight: 600;
}
#mainNav .navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ct-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#mainNav .navbar-nav .nav-item .nav-link:hover::after,
#mainNav .navbar-nav .nav-item .nav-link.active::after { transform: scaleX(1); }

/* --- Hero / masthead: subtle depth --- */
.masthead {
  background:
    radial-gradient(55% 55% at 82% 0%, rgba(82, 135, 239, 0.14) 0%, rgba(82, 135, 239, 0) 60%),
    linear-gradient(180deg, #f2f7ff 0%, #ffffff 55%);
}
.masthead h1 { letter-spacing: -0.5px; }

/* --- Soft pill / eyebrow labels --- */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  border-radius: 50rem;
  background: rgba(82, 135, 239, 0.1);
  color: var(--ct-navy);
  font-weight: 600;
  font-size: .85rem;
}
.badge-soft i { color: var(--ct-blue); }

.section-eyebrow {
  display: inline-block;
  font-family: "Kanit", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ct-blue);
  margin-bottom: .5rem;
}

/* --- App store badges: lift on hover --- */
.app-badge { filter: drop-shadow(0 6px 14px rgba(0, 17, 83, 0.18)); }
a:hover > .app-badge {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 22px rgba(0, 17, 83, 0.28));
}

/* --- Feature cards --- */
#features .row > [class*="col-"] > .text-center {
  height: 100%;
  background: #fff;
  border: 1px solid rgba(0, 17, 83, 0.07);
  border-radius: 1rem;
  padding: 2.25rem 1.5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 17, 83, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#features .row > [class*="col-"] > .text-center:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 2.5rem rgba(0, 17, 83, 0.12);
  border-color: rgba(82, 135, 239, 0.35);
}
#features .icon-feature {
  font-size: 2rem;
  width: 4.5rem;
  height: 4.5rem;
  line-height: 4.5rem;
  border-radius: 1.1rem;
  margin-left: auto;
  margin-right: auto;
  /* Gradient tile with a solid white glyph. Override .text-gradient, which
     would otherwise clip the background to the glyph and hide the icon. */
  background: var(--ct-gradient);
  color: #fff;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}
#features h3.font-alt { font-size: 1.3rem; }

/* --- Testimonial quote mark --- */
.quote-mark { font-size: 3rem; line-height: 1; opacity: .35; }

/* --- Premium portrait --- */
#premium img.rounded-circle {
  box-shadow: 0 1.5rem 3rem rgba(0, 17, 83, 0.25);
}

/* --- CTA button --- */
section.cta .btn-light {
  font-weight: 700;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
}
section.cta .btn-light:hover { transform: translateY(-3px); }

/* --- Motion: hero entrance --- */
@keyframes ct-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.masthead .badge-soft { animation: ct-fade-up .7s ease both; }
.masthead h1          { animation: ct-fade-up .7s ease .08s both; }
.masthead .lead       { animation: ct-fade-up .7s ease .16s both; }
.masthead .d-flex     { animation: ct-fade-up .7s ease .24s both; }

/* --- Motion: reveal on scroll (progressive enhancement) --- */
/* Hidden state only applies when JS is active (html.js set before paint). */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  .masthead .badge-soft,
  .masthead h1,
  .masthead .lead,
  .masthead .d-flex { animation: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}