/* Shared visual-enhancement layer for About / Research / Design pages only.
   Extends site.css — does not modify or override anything the other pages use. */

@keyframes floatSlow { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.2deg); } }
@keyframes floatSlow2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-1deg); } }
@keyframes glowPulse { 0%,100% { opacity:.55; transform: scale(1); } 50% { opacity:1; transform: scale(1.06); } }
@keyframes dashFlow { to { stroke-dashoffset: -200; } }
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .glow-dot, .dash-flow, .grad-anim { animation: none !important; }
}

/* floating decorative elements */
.float-a { animation: floatSlow 7s ease-in-out infinite; }
.float-b { animation: floatSlow2 8.5s ease-in-out infinite; }
.glow-dot { animation: glowPulse 3.4s ease-in-out infinite; }
.dash-flow { stroke-dasharray: 6 10; animation: dashFlow 6s linear infinite; }

/* animated brand gradient (navy -> sky -> gold), used sparingly */
.grad-anim {
  background: linear-gradient(120deg, #073763, #0A4A7E, #12A7B6, #073763);
  background-size: 300% 300%;
  animation: gradientShift 10s ease-in-out infinite;
}

/* glass / elevated cards for hero overlays */
.glass-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(7,55,99,.08);
  box-shadow: 0 20px 44px -20px rgba(7,55,99,.35);
}
.glass-card-dark {
  background: rgba(7,55,99,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246,249,251,.14);
}

/* soft radial mesh background used behind hero visuals */
.mesh-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 78% 18%, rgba(26,206,223,.28), transparent 70%),
    radial-gradient(34% 38% at 12% 82%, rgba(255,200,87,.24), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(7,55,99,.05), transparent 75%);
}
.mesh-bg-dark {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 45% at 82% 15%, rgba(26,206,223,.22), transparent 70%),
    radial-gradient(36% 40% at 15% 85%, rgba(255,200,87,.16), transparent 70%);
}

/* icon badges */
.icon-badge { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 24px -10px rgba(7,55,99,.35); transition: transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease-out; }
.icon-badge:hover, .card-lift:hover .icon-badge { transform: translateY(-3px) scale(1.05); }

/* connected timeline (Design approach) */
.timeline-connector { position:relative; }
@media (max-width:1023px) {
  .timeline-connector::before {
    content:""; position:absolute; left:27px; top:0; bottom:0; width:2px;
    background: linear-gradient(to bottom, #1ACEDF, #FFC857, #073763);
    opacity:.35;
  }
}
@media (min-width:1024px) {
  .timeline-connector-h { position:relative; }
  .timeline-connector-h::before {
    content:""; position:absolute; left:0; right:0; top:27px; height:2px;
    background: linear-gradient(to right, #073763, #1ACEDF, #FFC857, #073763);
    opacity:.35;
  }
}

/* showcase / gallery cards with hover reveal */
.showcase-card { position:relative; overflow:hidden; border-radius:1.25rem; }
.showcase-card img:not(.img-reveal) { transition: transform .6s cubic-bezier(.16,.8,.28,1); }
.showcase-card:hover img { transform: scale(1.07); }
.showcase-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; background: linear-gradient(to top, rgba(7,55,99,.92) 0%, rgba(7,55,99,.55) 45%, transparent 80%);
  opacity:0; transform: translateY(8px); transition: opacity .35s ease-out, transform .35s ease-out;
}
.showcase-card:hover .showcase-overlay, .showcase-card:focus-within .showcase-overlay { opacity:1; transform: translateY(0); }
.showcase-tag {
  position:absolute; top:1rem; left:1rem; z-index:2;
}

/* gradient-ring frame for hero photos */
.ring-frame { position:relative; }
.ring-frame::before {
  content:""; position:absolute; inset:-14px; border-radius:2rem;
  background: conic-gradient(from 120deg, #1ACEDF, #FFC857, #073763, #1ACEDF);
  opacity:.28; filter: blur(2px); z-index:-1;
}

/* stat pill strip */
.stat-pill { display:flex; flex-direction:column; padding:1rem 1.25rem; border-radius:1rem; }

/* shimmer sweep on hover for premium cards */
.shimmer-card { position:relative; overflow:hidden; }
.shimmer-card::after {
  content:""; position:absolute; top:0; left:0; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
}
.shimmer-card:hover::after { animation: shimmer 1.1s ease-out; }

/* ---------- Bidirectional horizontal text marquee ---------- */
.text-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.text-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: marqueeLTR var(--mq-speed, 28s) linear infinite;
}
.text-marquee.dir-rtl .text-marquee-track { animation-name: marqueeRTL; }
.text-marquee:hover .text-marquee-track { animation-play-state: paused; }
@keyframes marqueeLTR { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRTL { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.text-marquee-item {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 0 1.5rem; white-space: nowrap; flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .text-marquee-track { animation: none; transform: none; }
  .text-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 639px) {
  .text-marquee-track { animation-duration: calc(var(--mq-speed, 28s) * 1.5); }
}

/* ---------- Image reveal: organic brush-stroke mask that grows open ---------- */
.img-reveal {
  --reveal-scale: 1.05;
  scale: var(--reveal-scale);
  opacity: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50.0,10.0%20C57.2,9.7%2066.8,8.2%2072.0,11.9%20C77.2,15.6%2077.8,25.6%2081.2,32.0%20C84.5,38.4%2092.6,44.3%2092.0,50.0%20C91.4,55.7%2081.5,60.5%2077.7,66.0%20C73.9,71.5%2073.6,78.2%2069.0,82.9%20C64.4,87.6%2056.0,94.6%2050.0,94.0%20C44.0,93.4%2038.8,83.4%2033.0,79.4%20C27.2,75.4%2020.2,74.9%2015.4,70.0%20C10.5,65.1%203.4,56.3%204.0,50.0%20C4.6,43.7%2014.7,38.1%2018.8,32.0%20C23.0,25.9%2023.8,17.3%2029.0,13.6%20C34.2,10.0%2042.8,10.3%2050.0,10.0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50.0,10.0%20C57.2,9.7%2066.8,8.2%2072.0,11.9%20C77.2,15.6%2077.8,25.6%2081.2,32.0%20C84.5,38.4%2092.6,44.3%2092.0,50.0%20C91.4,55.7%2081.5,60.5%2077.7,66.0%20C73.9,71.5%2073.6,78.2%2069.0,82.9%20C64.4,87.6%2056.0,94.6%2050.0,94.0%20C44.0,93.4%2038.8,83.4%2033.0,79.4%20C27.2,75.4%2020.2,74.9%2015.4,70.0%20C10.5,65.1%203.4,56.3%204.0,50.0%20C4.6,43.7%2014.7,38.1%2018.8,32.0%20C23.0,25.9%2023.8,17.3%2029.0,13.6%20C34.2,10.0%2042.8,10.3%2050.0,10.0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 1%; mask-size: 1%;
  transition: opacity .5s ease-out .6s,
    scale 1.35s cubic-bezier(.22,.8,.32,1) .6s,
    -webkit-mask-size 1.35s cubic-bezier(.22,.8,.32,1) .6s,
    mask-size 1.35s cubic-bezier(.22,.8,.32,1) .6s,
    transform .6s cubic-bezier(.16,.8,.28,1);
}
.img-reveal.in {
  --reveal-scale: 1;
  opacity: 1;
  -webkit-mask-size: 220%; mask-size: 220%;
}
@media (prefers-reduced-motion: reduce) {
  .img-reveal { --reveal-scale: 1; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; transition: none !important; }
}

/* ---------- Torn-paper photo edge (colabglobal.org-style real-photo cutout) ---------- */
.torn-mask-top {
  clip-path: polygon(
    0% 7%, 4% 2%, 8% 8%, 12% 1%, 16% 6%, 20% 0%, 24% 5%, 28% 1%, 32% 7%,
    36% 2%, 40% 6%, 44% 0%, 48% 5%, 52% 1%, 56% 7%, 60% 2%, 64% 6%, 68% 0%,
    72% 5%, 76% 1%, 80% 7%, 84% 2%, 88% 6%, 92% 0%, 96% 5%, 100% 1%,
    100% 100%, 0% 100%
  );
}
.torn-mask-bottom {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 93%,
    96% 98%, 92% 92%, 88% 99%, 84% 93%, 80% 100%, 76% 94%, 72% 99%,
    68% 93%, 64% 98%, 60% 92%, 56% 99%, 52% 94%, 48% 100%, 44% 93%,
    40% 98%, 36% 92%, 32% 99%, 28% 94%, 24% 100%, 20% 93%, 16% 98%,
    12% 92%, 8% 99%, 4% 94%, 0% 99%
  );
}

/* ---------- Lightweight scroll parallax (JS-driven translateY, see site.js) ---------- */
.parallax-img {
  scale: calc(1.12 * var(--reveal-scale, 1));
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}
/* Only give parallax its own scale transition when NOT paired with .img-reveal —
   combined elements rely on .img-reveal's transition list (which already covers
   scale, with the right delay) so the two rules' `transition` shorthand don't
   fight over the same property. */
.parallax-img:not(.img-reveal) { transition: scale 1.35s cubic-bezier(.22,.8,.32,1); }
@media (prefers-reduced-motion: reduce) {
  .parallax-img { scale: 1.12 !important; transition: none !important; }
}