/* =========================================================
   Encore Digital — polish layer  (load LAST, after theme.css)
   1. Collaborations hero follows the brand blue (no dark/black blob)
   2. Dark navy / black shadows -> soft brand-blue shadows (light mode)
   3. Readable text: gray copy is replaced by clear theme colours
   4. Header nav no longer collides with the theme toggle
   5. Card & box animations (entrance, hover lift, tilt, glow, float)
   ========================================================= */

/* ---------------------------------------------------------
   1. COLLABORATIONS HERO — same blue system as the home hero
   --------------------------------------------------------- */
.page-hero {
  background-color: var(--encore-blue, #0873cf);
  background-image:
    radial-gradient(ellipse 52% 90% at 84% 26%, rgba(255, 255, 255, .15), transparent 68%),
    repeating-radial-gradient(ellipse at 87% 48%, transparent 0 22px, rgba(255, 255, 255, .12) 23px 24px),
    linear-gradient(130deg, transparent 62%, rgba(0, 77, 164, .22));
}
.page-hero:after {
  border-color: rgba(255, 255, 255, .22);
  animation: phSpin 80s linear infinite;
}
@keyframes phSpin { to { transform: rotate(360deg); } }

/* second soft ring for depth */
.page-hero:before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -120px;
  top: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  pointer-events: none;
  animation: phSpin 55s linear infinite reverse;
}

/* kicker was a dull purple-blue -> bright white */
.page-hero .kicker { color: #fff; opacity: .95; }
.page-hero h1 { color: #fff; }
.page-hero-sub { color: rgba(255, 255, 255, .96); }

/* entrance for the hero text */
.page-hero .kicker,
.page-hero h1,
.page-hero-sub { animation: heroFadeUp .9s cubic-bezier(.16, .8, .24, 1) both; }
.page-hero h1 { animation-delay: .15s; }
.page-hero-sub { animation-delay: .3s; }

/* dark mode keeps its own dark hero, but with a blue glow (never black) */
:root[data-theme="dark"] .page-hero {
  background-color: #07142b;
  background-image:
    radial-gradient(ellipse 55% 90% at 84% 30%, rgba(8, 115, 207, .42), transparent 70%),
    repeating-radial-gradient(ellipse at 87% 48%, transparent 0 22px, rgba(120, 170, 255, .10) 23px 24px),
    linear-gradient(130deg, transparent 60%, rgba(8, 115, 207, .14));
}
:root[data-theme="dark"] .page-hero:after,
:root[data-theme="dark"] .page-hero:before { border-color: rgba(140, 190, 255, .2); }

/* the grey-green band between collab sections -> theme pale blue */
.collab-alt { background: var(--encore-pale, #eef7ff); }
:root[data-theme="dark"] .collab-alt { background: var(--dk-bg-3); }

/* ---------------------------------------------------------
   2. SHADOWS — blue instead of black (light mode only)
   --------------------------------------------------------- */
:root:not([data-theme="dark"]) {
  --pc-shadow: 0 22px 44px rgba(8, 115, 207, .22);
  --pc-shadow-soft: 0 10px 26px rgba(8, 115, 207, .14);
}
:root:not([data-theme="dark"]) .industry-card:hover { box-shadow: var(--pc-shadow); }
:root:not([data-theme="dark"]) .collab-photo,
:root:not([data-theme="dark"]) .collab-carousel { box-shadow: 0 24px 50px rgba(8, 115, 207, .24); }
:root:not([data-theme="dark"]) .team-card:hover { box-shadow: var(--pc-shadow); }
:root:not([data-theme="dark"]) .deck-stage .gallery-item { box-shadow: 0 16px 34px rgba(8, 115, 207, .22); }
:root:not([data-theme="dark"]) .deck-stage .gallery-item.is-top { box-shadow: 0 26px 50px rgba(8, 115, 207, .3); }
:root:not([data-theme="dark"]) .modal-overlay { background: rgba(4, 52, 104, .55); }
:root:not([data-theme="dark"]) .talk-button:hover { box-shadow: 0 10px 20px rgba(8, 115, 207, .3); }
:root:not([data-theme="dark"]) .gallery-caption,
:root:not([data-theme="dark"]) .collab-slide figcaption {
  background: linear-gradient(0deg, rgba(4, 80, 160, .92), transparent);
}
:root:not([data-theme="dark"]) .collab-arrow { background: rgba(4, 80, 160, .6); }
:root:not([data-theme="dark"]) .header.stuck { box-shadow: 0 8px 28px rgba(1, 61, 122, .22); }
.collab-photo figcaption { background: var(--encore-deep, #045cae); color: #fff; }

/* ---------------------------------------------------------
   3. TEXT — no more faint gray
   Light mode (white sections): deeper, clearly readable brand blue.
   Blue / dark surfaces: near-white.
   --------------------------------------------------------- */
:root:not([data-theme="dark"]) {
  --pc-copy: #2c5a88;      /* body copy on white / pale sections */
  --pc-copy-soft: #3d6d9b; /* small captions, labels */
}
:root:not([data-theme="dark"]) .about-copy p,
:root:not([data-theme="dark"]) .about-statement,
:root:not([data-theme="dark"]) .service-card p,
:root:not([data-theme="dark"]) .industry-intro p,
:root:not([data-theme="dark"]) .cert-head p,
:root:not([data-theme="dark"]) .cert-footer p,
:root:not([data-theme="dark"]) .cert-other-text,
:root:not([data-theme="dark"]) .team-head p,
:root:not([data-theme="dark"]) .gallery-head p,
:root:not([data-theme="dark"]) .offices-head p,
:root:not([data-theme="dark"]) .office-address,
:root:not([data-theme="dark"]) .collab-copy p,
:root:not([data-theme="dark"]) .collab-note,
:root:not([data-theme="dark"]) .collab-signers li,
:root:not([data-theme="dark"]) .collab-people li,
:root:not([data-theme="dark"]) .contact-title > p,
:root:not([data-theme="dark"]) .modal-sub,
:root:not([data-theme="dark"]) .form-response { color: var(--pc-copy); }

:root:not([data-theme="dark"]) .team-role,
:root:not([data-theme="dark"]) .collab-people li span,
:root:not([data-theme="dark"]) .slide-count,
:root:not([data-theme="dark"]) .deck-hint,
:root:not([data-theme="dark"]) .card-index,
:root:not([data-theme="dark"]) .cert span,
:root:not([data-theme="dark"]) .contact-chip .chip-label { color: var(--pc-copy-soft); }

:root:not([data-theme="dark"]) .contact-form input::placeholder,
:root:not([data-theme="dark"]) .contact-form textarea::placeholder { color: #5f8db8; }

:root:not([data-theme="dark"]) .collab-people { border-top-color: #cfe4f6; }
:root:not([data-theme="dark"]) .collab-signers li b,
:root:not([data-theme="dark"]) .collab-people li a { color: var(--encore-deep, #045cae); }
:root:not([data-theme="dark"]) .deck-btn { border-color: #9cc6ea; }

/* text that sits on blue surfaces -> brighter */
.industry-card > span,
.industry-card p { color: #f4faff; }
.expertise-intro p,
.partnership-copy > p { color: #fff; }
.expertise-item span,
.expertise-item i { color: #eaf5ff; }
.footer-tagline { color: rgba(255, 255, 255, .94); }
.footer-col-title { color: rgba(255, 255, 255, .85); }
.footer-col .footer-links a,
.footer-phone { color: rgba(255, 255, 255, .95); }
.footer-location { color: rgba(255, 255, 255, .85); }
.footer-links a,
.footer-bottom,
.footer-bottom a { color: #f0f8ff; }
.hero-bottom > p { color: #fff; }
.collab-slide figcaption span { color: #fff; }
.scroll-note { color: rgba(255, 255, 255, .88); }

/* dark mode: lift every dim token one step so nothing disappears */
:root[data-theme="dark"] {
  --dk-text: #f2f7ff;
  --dk-text-2: #d3def2;
  --dk-text-3: #b3c5e3;
  --dk-accent: #7cc0ff;
  --dk-accent-2: #a2d4ff;
}
:root[data-theme="dark"] .industry-card p,
:root[data-theme="dark"] .industry-card > span { color: #eef5ff; }

/* ---------------------------------------------------------
   4. HEADER — nav never runs into the theme toggle
   --------------------------------------------------------- */
.desktop-nav { margin-left: clamp(10px, 2vw, 40px); gap: clamp(12px, 1.6vw, 28px); }
.header-actions { margin-left: auto; padding-left: 18px; }

/* ---------------------------------------------------------
   5. CARD & BOX ANIMATIONS
   JS (polish.js) adds .pc-card, .pc-in and --pc-i (stagger index)
   --------------------------------------------------------- */

/* entrance: rise + un-blur + slight scale, staggered per card */
@keyframes pcRise {
  from { opacity: 0; transform: translateY(46px) scale(.94); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.pc-card { opacity: 0; }
.pc-card.pc-in {
  opacity: 1;
  animation: pcRise .85s cubic-bezier(.16, .8, .24, 1) backwards;
  animation-delay: calc(var(--pc-i, 0) * 90ms);
}

/* no-JS / reduced-motion safety */
.no-js .pc-card { opacity: 1; }

/* hover: lift + brand-blue glow ring */
.service-card,
.industry-card,
.cert-badge-card,
.team-card,
.office-card,
.contact-chip,
.collab-photo {
  will-change: transform;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .3s ease, background .3s ease, color .3s ease;
}
.service-card:hover,
.cert-badge-card:hover,
.team-card:hover,
.office-card:hover {
  box-shadow: 0 24px 46px rgba(8, 115, 207, .24), 0 0 0 3px rgba(71, 150, 219, .22);
}

/* subtle 3D tilt that follows the cursor (set by polish.js) */
@media (hover: hover) and (pointer: fine) {
  .pc-tilt:hover {
    transform: perspective(900px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .pc-tilt { transform-style: preserve-3d; }
}

/* moving light that follows the cursor inside the card */
.pc-glow { position: relative; }
.pc-glow > .pc-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(71, 150, 219, .22), transparent 65%);
  transition: opacity .3s ease;
}
.industry-card > .pc-spot {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .26), transparent 65%);
}
.pc-glow:hover > .pc-spot { opacity: 1; }

/* icons / pins / badges: idle float so the boxes feel alive */
@keyframes pcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.service-icon,
.office-pin,
.industry-symbol { animation: pcBob 4.2s ease-in-out infinite; }
.service-card:nth-child(2n) .service-icon,
.office-card:nth-child(2n) .office-pin,
.industry-card:nth-child(2n) .industry-symbol { animation-delay: .7s; }
.service-card:nth-child(3n) .service-icon,
.industry-card:nth-child(3n) .industry-symbol { animation-delay: 1.4s; }
.service-card:hover .service-icon { animation-play-state: paused; }

/* team photos: ring pulse on hover */
.team-media { transition: box-shadow .4s ease, transform .4s ease; }
.team-card:hover .team-media { box-shadow: 0 0 0 5px rgba(8, 115, 207, .18), 0 0 0 10px rgba(8, 115, 207, .08); }

/* contact chips: gentle breathing so they invite a click */
@keyframes pcBreath { 0%, 100% { box-shadow: 0 8px 22px rgba(8, 115, 207, .10); } 50% { box-shadow: 0 12px 30px rgba(8, 115, 207, .24); } }
.contact-chip { animation: pcBreath 3.6s ease-in-out infinite; }
.contact-chip:hover { animation: none; }

/* collaboration boxes: photo + people block */
.collab-photo img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.collab-photo:hover img { transform: scale(1.05); }
.collab-photo:hover { transform: translateY(-6px); box-shadow: 0 30px 58px rgba(8, 115, 207, .3); }
.collab-people > div { transition: transform .3s ease; }
.collab-people > div:hover { transform: translateX(4px); }
.collab-people li a { position: relative; }

/* expertise rows slide in a touch more */
.expertise-item { transition: background .25s, padding .3s cubic-bezier(.2, .8, .2, 1); }

/* cert / office / team cards: animated border accent on hover */
.cert-badge-card, .office-card, .team-card { border-width: 1px; border-style: solid; }

@media (prefers-reduced-motion: reduce) {
  .pc-card { opacity: 1; }
  .pc-card.pc-in { animation: none; }
  .service-icon, .office-pin, .industry-symbol, .contact-chip,
  .page-hero:before, .page-hero:after { animation: none !important; }
  .pc-tilt:hover { transform: translateY(-6px); }
}

@media (max-width: 800px) {
  .page-hero:before { display: none; }
  .header-actions { padding-left: 0; }
}