/* ═══════════════════════════════════════════════════════
   ENHANCEMENTS — site-wide visual polish, animations,
   micro-interactions and beautification layer
   ═══════════════════════════════════════════════════════ */

/* ── Smooth page transitions ── */
body {
  animation: pageFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Ticker pause on hover ── */
.ticker:hover .ticker-t {
  animation-play-state: paused;
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--orange) 0%, transparent 100%);
}
.ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--orange) 0%, transparent 100%);
}

/* ── Nav logo subtle hover ── */
.nav-logo img {
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.nav-logo:hover img {
  opacity: 0.85;
  transform: scale(0.97);
}

/* ── Nav contact button glow on hover ── */
.nav-contact-btn {
  position: relative;
  overflow: hidden;
}
.nav-contact-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-contact-btn:hover::after {
  opacity: 1;
}

/* ── Hero slide transition enhancement ── */
.slide-photo {
  transition:
    transform 9s cubic-bezier(0.1, 0, 0, 1),
    filter 0.8s ease,
    opacity 1s ease;
}

/* ── Animated gradient background on hero ── */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 10% 80%,
    rgba(224, 90, 26, 0.06) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

/* ── Section label animation ── */
.sec-lbl::before {
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr.in-view .sec-lbl::before {
  width: 28px;
}

/* ── Section headings — subtle gradient text on key items ── */
.sec-h .accent-word {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Metric cards — animated orange fill on enter ── */
.metric {
  transition: background 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.metric::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(224,90,26,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.metric:hover::after {
  opacity: 1;
}

/* ── Brand card shimmer on hover ── */
.bc {
  isolation: isolate;
}
.bc::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.bc:hover::before {
  left: 150%;
}

/* ── CSR icon subtle entrance ── */
.csr-c .csr-ic {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Story panel photo overlay polish ── */
.sp-photo::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(8,8,10,0.5) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── Contact form focus glow ── */
.fi:focus {
  box-shadow: 0 0 0 3px rgba(224,90,26,0.15);
}

/* ── Submit button shimmer ── */
.fsub {
  position: relative;
  overflow: hidden;
}
.fsub::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  transition: left 0.45s ease;
}
.fsub:hover::after {
  left: 150%;
}

/* ── Footer social buttons ── */
.sb {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb:hover {
  transform: translateY(-2px);
}

/* ── Smooth section separators ── */
section + section {
  position: relative;
}

/* ── Newsroom card — featured article highlight ── */
.nc.featured {
  background: linear-gradient(160deg, var(--dark) 80%, rgba(224,90,26,0.03) 100%);
}

/* ── Leadership card photo gradient overlay ── */
.lc-ph::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(8,8,10,0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── Dot indicators enhanced ── */
.dot {
  border-radius: 2px;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    opacity 0.25s ease;
}

/* ── Overview highlights (oh) bounce on hover ── */
.oh-ic {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oh:hover .oh-ic {
  transform: scale(1.2) rotate(-5deg);
}

/* ── Scroll to top of hero: bounce arrow ── */
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Vertical line accent on model steps ── */
.model-steps {
  position: relative;
}
.model-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
  pointer-events: none;
}

/* ── B2B2C flow arrows ── */
.fl-arr {
  letter-spacing: 0.05em;
  animation: fadeUpDown 1.8s ease-in-out infinite;
}
@keyframes fadeUpDown {
  0%, 100% { opacity: 0.18; transform: translateY(0); }
  50%       { opacity: 0.35; transform: translateY(3px); }
}

/* ── Section background texture variation ── */
#overview {
  background-image: radial-gradient(
    ellipse 120% 60% at 90% 50%,
    rgba(224,90,26,0.025) 0%,
    transparent 55%
  );
}
#verticals {
  background-image: radial-gradient(
    ellipse 100% 70% at 5% 50%,
    rgba(45,122,30,0.025) 0%,
    transparent 50%
  );
}
#csr {
  background-image: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    rgba(224,90,26,0.02) 0%,
    transparent 60%
  );
}

/* ── Impact numbers — subtle glow on value ── */
.m-n {
  position: relative;
  display: inline-block;
}

/* ── Co-strip link active state ── */
.cs-link.active {
  color: var(--white);
  border-bottom-color: var(--orange);
}

/* ── Vertical divider between nav items ── */
.nl > a {
  position: relative;
}

/* ── Buttons — consistent press effect ── */
.s-btn-p:active,
.s-btn-g:active,
.nav-contact-btn:active,
.fsub:active {
  transform: translateY(0) scale(0.98);
}

/* ── Image lazy load fade-in ── */
img {
  transition: opacity 0.4s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ── Mega menu backdrop blur enhancement ── */
.mega {
  box-shadow:
    0 24px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* ── Vertical text rhythm helpers ── */
.sec-lbl + .sec-h {
  margin-top: 0.2rem;
}

/* ── Orange accent line above section headings (desktop only) ── */
@media (min-width: 769px) {
  .brands-head .sec-h::after,
  .impact-top .sec-h::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--orange);
    margin-top: 0.75rem;
    border-radius: 1px;
  }
}

/* ── Selection state colours ── */
.bc.on,
.nc.on {
  border-color: rgba(224,90,26,0.35);
}

/* ── Keyboard focus ring overrides ── */
.s-btn-p:focus-visible,
.s-btn-g:focus-visible,
.arr-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ── Smooth border on sticky co-strip ── */
.co-strip {
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
.co-strip.stuck {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}