/* Gallery popup animation styles */
/* Scope styles to About page gallery only so Home remains unchanged */
#about .gallery-section .gallery-item.will-animate {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 420ms;
}

/* caption transitions */
#about .gallery-section .gallery-caption {
  transition: opacity 320ms ease, transform 320ms ease;
}

/* Horizontal scroll for About page features and gallery */
#about .features {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#about .features-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 8px;
}

#about .gallery-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* About hero (welcome title + subtitle) background and overlay */
#about .about-hero {
  background-size: cover;
  background-position: center center;
  border-radius: 12px;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

#about .about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* subtle dark overlay for legibility - removed */
  /* background: linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.26)); */
  pointer-events: none;
}

#about .about-hero-inner {
  position: relative;
  z-index: 2;
  padding: 48px 20px;
  text-align: center;
  color: #ffffff;
}

#about .about-hero .section-title {
  color: #000000;
  margin-bottom: 0.5rem;
}

#about .about-hero p {
  color: rgba(0,0,0,0.92);
  max-width: 920px;
  margin: 0 auto;
  font-size: 1.05rem;
}

#about .features-list .feature-card {
  flex: 0 0 260px;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  min-height: 140px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Orbit layout */
#about .features { position: relative; min-height: 700px; display: block; }
#about .features-section > .section-title { display: none; }
#about .features-section > p { display: none; }
#about .feature-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 320px; height: 320px; display:flex; align-items:center; justify-content:center; pointer-events: none; }
#about .feature-core { width: 100%; height: 100%; background: #337a2c; border-radius: 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color: #fff; box-shadow: 0 8px 36px rgba(51,122,44,0.22); position: relative; }
#about .feature-core .core-title { font-size: 1.25rem; font-weight:700; padding: 0 18px; text-align:center; }
#about .feature-core .core-sub { font-size: 0.95rem; opacity: 0.95; margin-top: 6px; text-align:center; padding: 0 14px; }
#about .core-desc { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 76%; height: 76%; display:none; align-items: center; justify-content: center; border-radius: 8px; pointer-events: none; }

/* Orbit cards absolute placement (JS will compute left/top) */
#about .features-list { position: absolute; left:0; top:0; right:0; bottom:0; pointer-events: none; }
/* Feature cards absolute placement (JS will compute left/top) */
/* Hide original feature-card boxes — we'll replace them with rotating text nodes generated by JS */
#about .features-list .feature-card { display: none !important; }

/* Orbiting text items (SVG textPaths) */
#about .features-list svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 22; }
#about .features-list svg text { pointer-events: auto; cursor: pointer; dominant-baseline: middle; text-anchor: middle; font-weight: 700; fill: #134; font-size: 1.05rem; text-shadow: 0 2px 8px rgba(0,0,0,0.18); }
#about .features-list svg textPath { pointer-events: auto; }
#about .features-list svg text:hover,
#about .features-list svg text:focus { fill: #fff; }

/* center the svg transforms around the features core by setting transform-origin in JS */

/* ensure orbit container accepts the orbit-text nodes */
#about .features-list { position: absolute; left:0; top:0; right:0; bottom:0; pointer-events: none; }

/* Removed visible/control scrollbox rules — features are static boxed cards now */

/* legacy arc wrapper removed; keep default spacing for features */
#about .features { margin: 8px 0; }




/* features detail panel removed */

#about .gallery-grid .gallery-item {
  flex: 0 0 320px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#about .gallery-grid .gallery-item .gallery-media-viewport {
  width: 288px !important;
  height: 288px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #f0f0f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1rem auto !important;
}

#about .gallery-grid .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#about .gallery-grid .gallery-item iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

#about .gallery-grid .gallery-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* hide scrollbar but keep accessible */
#about .features::-webkit-scrollbar, #about .gallery-grid::-webkit-scrollbar { height: 8px; }
#about .features::-webkit-scrollbar-thumb, #about .gallery-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
#about .features { scrollbar-color: rgba(0,0,0,0.12) transparent; scrollbar-width: thin; }

/* Arrow controls for horizontal lists — match Home `.gallery-control` appearance */
.about-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.about-scroll-arrow:hover { transform: translateY(-50%) scale(1.03); }
.about-scroll-arrow.left { left: 8px; }
.about-scroll-arrow.right { right: 8px; }
.about-scroll-arrow svg, .about-scroll-arrow svg path {
  fill: #fff !important;
}

/* arrows hidden by default; only show on hover when scroll is possible */
.about-scroll-wrapper { position: relative; }
.about-scroll-wrapper .about-scroll-arrow { opacity: 1; pointer-events: auto; transition: opacity 160ms ease; }
.about-scroll-wrapper.can-left .about-scroll-arrow.left,
.about-scroll-wrapper.can-right .about-scroll-arrow.right,
.about-scroll-wrapper.can-left.can-right .about-scroll-arrow { opacity: 1; pointer-events: auto; }

/* Typewriter effect for core description */
#about .core-desc .desc-inner { width: 100%; padding: 0.4rem 0.6rem; display:flex; align-items:center; justify-content:center; }
/* ensure description text blends with green core (no black square) */
/* allow multi-line descriptions and a visible caret for typewriter effect */
#about .core-desc .typewriter, #about .feature-core .core-title.typewriter, #about .feature-core .core-sub.typewriter {
  white-space: normal;
  overflow: visible;
  border-right: 2px solid rgba(255,255,255,0.9);
  padding-right: 6px;
  color: #fff;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}
@keyframes blink-caret { 50% { border-color: transparent; } }
#about .core-desc .typewriter, #about .feature-core .core-title.typewriter, #about .feature-core .core-sub.typewriter { animation: blink-caret 1s steps(1) infinite; }
@keyframes blink-caret { 50% { border-color: transparent; } }
#about .core-desc .typewriter { animation: blink-caret 1s steps(1) infinite; }

/* Overlay used during flip: uncurved upright text shown while rotating pauses */
/* upright overlay used during flip: duplicate text, no 3D transforms */
#about .features-list .orbit-uncurved-upright {
  position: absolute;
  transform: translate(-50%,-50%);
  font-weight: 700;
  color: #134;
  font-size: 1.05rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 60;
  will-change: transform, opacity;
  /* keep text upright and crisp (no 3D) */
  backface-visibility: visible;
}

#about .features-list .orbit-uncurved-overlay,
#about .features-list .orbit-uncurved-overlay .overlay-inner {
  transform-origin: center center;
}

#about .features-list .orbit-uncurved-upright .overlay-inner {
  display: inline-block;
}

/* flip animation: rotateY to simulate flipping the label upright then back */
#about .features-list .orbit-uncurved-overlay.flip {
  animation: orbitFlip 680ms cubic-bezier(.2,.9,.2,1);
}

/* inner counter-rotation so glyphs end up upright after the flip */
#about .features-list .orbit-uncurved-overlay.flip .overlay-inner {
  animation: orbitFlipInner 680ms cubic-bezier(.2,.9,.2,1);
}

@keyframes orbitFlip {
  0% { transform: translate(-50%,-50%) rotateY(0deg); opacity: 1; }
  50% { transform: translate(-50%,-50%) rotateY(90deg); opacity: 0.85; }
  100% { transform: translate(-50%,-50%) rotateY(180deg); opacity: 1; }
}

/* mirrored flip for left-side items to avoid visual mirroring glitches */
#about .features-list .orbit-uncurved-overlay.flip-left {
  animation-name: orbitFlipLeft;
}
@keyframes orbitFlipLeft {
  0% { transform: translate(-50%,-50%) rotateY(0deg) scaleX(1); opacity: 1; }
  50% { transform: translate(-50%,-50%) rotateY(-90deg) scaleX(1); opacity: 0.85; }
  100% { transform: translate(-50%,-50%) rotateY(-180deg) scaleX(1); opacity: 1; }
}


@keyframes orbitFlipInner {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}

@keyframes orbitFlipInnerLeft {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* upright overlay show animation (no 3D) */
#about .features-list .orbit-uncurved-upright.upright-show {
  animation: uprightShow 680ms cubic-bezier(.2,.9,.2,1);
}

#about .features-list .orbit-uncurved-upright.upright-left.upright-show {
  /* same animation for left; copying ensures CSS specificity if needed */
  animation-name: uprightShow;
}

@keyframes uprightShow {
  0% { transform: translate(-50%,-50%) scale(0.9); opacity: 0; }
  20% { transform: translate(-50%,-50%) scale(1.02); opacity: 1; }
  80% { transform: translate(-50%,-50%) scale(1.02); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.96); opacity: 0; }
}

/* inner mirrored animation for left-side flips */
#about .features-list .orbit-uncurved-overlay.flip-left .overlay-inner {
  animation-name: orbitFlipInnerLeft;
}

/* add perspective on container so 3D rotations behave consistently */
#about .features-list { perspective: 900px; }