/* Lukas J. Tan — shared styles beyond Tailwind utility classes */

:root {
  --navy: #0b1526;
  --navy-2: #142238;
  --blue: #1d4ed8;      /* corporate-trust accent (replaces khaki/brown) */
  --teal: #0d9488;      /* CTA / active accent */
  --purple: #7c3aed;    /* keynote tag accent */
  --gold: #c9a227;      /* used sparingly for banner texture only */
}

html {
  font-size: 18px;                     /* +2px baseline lift across all rem-based Tailwind utilities */
  scroll-behavior: smooth;             /* the document's scrolling box is the html element, not body */
}

body {
  background: #f8fafc;
}

/* ---------- Sidebar layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 17rem;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e2e8f0;
}
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.side-link {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.5rem;
  color: #475569; font-weight: 600; font-size: .97rem;
  border-left: 3px solid transparent;
  transition: all .2s ease;
}
.side-link i, .side-link .side-ico { width: 1.3rem; text-align: center; color: #94a3b8; transition: color .2s ease; }
.side-link:hover { background: #f1f5f9; color: #0f172a; }
.side-link.active {
  color: var(--teal);
  background: #f0fdfa;
  border-left-color: var(--teal);
}
.side-link.active i, .side-link.active .side-ico { color: var(--teal); }

.mobile-nav { -webkit-overflow-scrolling: touch; }
.mobile-nav a { flex: 0 0 auto; }

/* iOS Safari sometimes detaches a sticky header from the viewport unless it's
   forced onto its own compositing layer -- translateZ(0) fixes the "sub-menu
   doesn't move with the page" symptom on scroll. */
header.sticky {
  position: -webkit-sticky;
  position: sticky;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ---------- Hero (overview) ---------- */
.hero-section { position: relative; overflow: hidden; }
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 25% 15%;
  transform: scale(1.18);
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,21,38,0.94) 0%, rgba(11,21,38,0.88) 42%, rgba(11,21,38,0.5) 62%, rgba(11,21,38,0.12) 100%);
}
.hero-content { position: relative; z-index: 2; }
@media (max-width: 639px) {
  .hero-bg-img { object-position: 35% 10%; transform: scale(1.3); }
  .hero-overlay { background: linear-gradient(180deg, rgba(11,21,38,0.82) 0%, rgba(11,21,38,0.9) 100%); }
}

/* ---------- Section banner headers ---------- */
.section-banner {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, #1b2f4e 100%);
  overflow: hidden;
}
.section-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(29,78,216,0.35) 0px, rgba(29,78,216,0.35) 2px, transparent 2px, transparent 90px),
    repeating-linear-gradient(115deg, rgba(13,148,136,0.25) 0px, rgba(13,148,136,0.25) 1px, transparent 1px, transparent 140px);
  opacity: .8;
}
.section-banner > * { position: relative; z-index: 1; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}

.logo-strip img {
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all .25s ease;
}
.logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---------- Scroll-reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ---------- Custom cursor (desktop, fine-pointer only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; border-radius: 999px; transform: translate(-50%,-50%); }
  .cursor-dot { width: 6px; height: 6px; background: var(--teal); }
  .cursor-ring {
    width: 30px; height: 30px; border: 1.5px solid rgba(13,148,136,.55);
    transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
  }
  .cursor-ring.is-hover { width: 50px; height: 50px; border-color: var(--teal); background: rgba(13,148,136,.08); }
  .cursor-ring.is-down { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Mantra strip ---------- */
.mantra-word { display: inline-flex; align-items: center; gap: .5rem; }
.mantra-arrow { color: var(--teal); opacity: .6; }

/* ---------- IT Journey timeline ---------- */
.journey-line {
  position: absolute; left: 1.15rem; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, #cbd5e1 4%, #cbd5e1 96%, transparent);
}
@media (min-width: 768px) {
  .journey-line { left: 50%; transform: translateX(-50%); }
}
.journey-dot {
  width: .9rem; height: .9rem; border-radius: 999px;
  background: var(--teal); border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(13,148,136,.25);
}
.journey-item { transition: transform .3s ease; }
.journey-item:hover { transform: translateY(-2px); }

/* ---------- Article body (insights) ---------- */
.article-body h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.45rem; color: #0f172a; margin-top: 2rem; margin-bottom: 0.75rem; }
.article-body h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.2rem; color: #0f172a; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.article-body p { font-size: 1.05rem; line-height: 1.8; color: #334155; margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-left: 1.4rem; color: #334155; font-size: 1.05rem; line-height: 1.75; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { margin-bottom: 0.4rem; }
.article-body a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.article-body strong, .article-body b { color: #0f172a; font-weight: 700; }
.article-body img { border-radius: 1rem; margin: 1.5rem 0; max-width: 100%; }

/* ---------- Insights single-page reader ---------- */
.reader { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
.reader-slide { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; }
.reader-dots { position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 40; }
.reader-dot { width: .55rem; height: .55rem; border-radius: 999px; background: #cbd5e1; transition: all .25s ease; cursor: pointer; }
.reader-dot.active { background: var(--teal); height: 1.6rem; border-radius: 999px; }
.reader-hint { animation: bounce-y 1.8s ease-in-out infinite; }
@keyframes bounce-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* ---------- Section title fly-in ---------- */
.title-fly { opacity: 0; transform: translateX(-36px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.title-fly.in { opacity: 1; transform: translateX(0); }
.eyebrow-fly { opacity: 0; transform: translateY(-10px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
.eyebrow-fly.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .title-fly, .eyebrow-fly { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Role badges (Featured Speaker / Keynote Speaker / Moderator) ---------- */
.badge-role {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--purple);
  padding: .3rem .7rem; border-radius: 999px;
}

/* ---------- Video thumbnail play button ---------- */
.video-thumb { position: relative; cursor: pointer; overflow: hidden; }
.video-thumb img { transition: transform .35s ease; }
.video-thumb:hover img { transform: scale(1.04); }
.video-thumb .play-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11,21,38,.28);
}
.video-thumb .play-btn i {
  width: 4rem; height: 4rem; border-radius: 999px; background: rgba(255,255,255,.95);
  color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s ease;
}
.video-thumb:hover .play-btn i { transform: scale(1.1); }

/* ---------- Modals (video / insights reader / speaking archive) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(8,13,24,.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 20;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: rgba(11,21,38,.85); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: background .2s ease, transform .2s ease;
}
.modal-close:hover { background: rgba(11,21,38,1); transform: scale(1.06); }

/* Video modal */
#video-modal .modal-panel { width: min(920px, 92vw); }

/* Insights reader modal: horizontal scroll-snap */
.hreader-viewport { width: 100vw; height: 100vh; overflow: hidden; position: relative; }
.hreader { height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hreader-slide { flex: 0 0 100vw; height: 100%; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; background: #f8fafc; }
.hreader-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255,255,255,.12);
  color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.hreader-arrow:hover { background: rgba(255,255,255,.25); }
.hreader-dots { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: .5rem; }
.hreader-dots .reader-dot { background: rgba(255,255,255,.35); }
.hreader-dots .reader-dot.active { background: var(--teal); width: 1.6rem; height: .55rem; }

/* Archive modal */
#archive-modal .modal-panel { width: min(1000px, 94vw); max-height: 88vh; overflow-y: auto; }