/* =========================================================================
   AXIOMAXS — leadership "lamp pull" reveal.
   Everything is scoped under .lamp-team so the snippet's own visual
   language (Segoe UI, underlined headings, orange accent) cannot leak
   into the rest of the site. Load AFTER css/site.css.
   ========================================================================= */

.lamp-team{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:#f8f9fa;
  margin:clamp(4rem,10vh,7rem) calc(var(--pad)*-1) 0;
}
.lamp-team h1, .lamp-team h2, .lamp-team h3{ text-decoration:underline; margin-bottom:10px; }
.lamp-team h1{ font-size:2.2rem; color:#111; }
.lamp-team h2{ font-size:1.4rem; color:#d35400; }
.lamp-team p{ font-size:1rem; line-height:1.6; margin-bottom:15px; color:#333; }
.lamp-team .instruction-text{
  font-size:.95rem; color:#666; font-weight:bold; letter-spacing:1px; transition:color .3s;
}

.lamp-team .split-section{ display:flex; width:100%; min-height:0; }
.lamp-team .content-side{ flex:1; padding:2% 8%; display:flex; flex-direction:column; justify-content:center; }
.lamp-team .image-side{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  /* top padding is the rope's headroom — vh-based so both rows fit one screen */
  padding:clamp(105px,14vh,160px) 0 clamp(12px,1.8vh,24px);
}

/* sized off viewport height, so Arun and Dhina land on the same screen */
.lamp-team .cloud-container{
  position:relative; aspect-ratio:1280/980;
  height:clamp(190px,30vh,320px); width:auto; max-width:92%;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 15px 20px rgba(0,0,0,.15));
}
.lamp-team svg.frame-svg{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.lamp-team .photo-img{ opacity:0; transition:opacity .5s ease-in-out; }
.lamp-team .split-section.light-on .photo-img{ opacity:1; }
.lamp-team .cloud-overlay{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; mix-blend-mode:multiply; pointer-events:none; z-index:5;
}

.lamp-team .lamp-wrapper{ position:absolute; top:clamp(10px,1.5vh,20px); z-index:10; }
.lamp-team #team-section-1 .lamp-wrapper{ left:10%; }
.lamp-team #team-section-2 .lamp-wrapper{ right:10%; }
.lamp-team .lamp-container{
  cursor:grab; display:flex; flex-direction:column; align-items:center;
  touch-action:none;                      /* rope drag works on touch; no double-tap zoom */
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.lamp-team .lamp-container:active{ cursor:grabbing; }
.lamp-team .lamp-image{
  width:clamp(80px,11vh,120px); height:auto; pointer-events:none;
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.4)); transition:filter .4s ease;
}
.lamp-team .split-section.light-on .lamp-image{
  filter:brightness(1.2) drop-shadow(0 20px 40px rgba(255,170,0,.9));
}
.lamp-team .glow{
  position:absolute; bottom:20px; width:90px; height:90px;
  background:rgba(255,180,0,.6); border-radius:50%; filter:blur(25px);
  opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:-1;
}
.lamp-team .split-section.light-on .glow{ opacity:1; }

@media (max-width:820px){
  .lamp-team .split-section{ flex-direction:column; min-height:auto; }
  .lamp-team .content-side{ padding:8% 8% 0; }
  /* stacked, there is no "both on one screen" to solve — go back to
     width-driven sizing so the cloud uses the full column */
  .lamp-team .image-side{ padding:168px 8% 8%; }
  .lamp-team .cloud-container{ height:auto; width:100%; max-width:420px; }
  .lamp-team .lamp-image{ width:120px; }

  /* stacked, the name must always read before its portrait — row 2 is
     image-first in the DOM, so flip it back here */
  .lamp-team #team-section-2 .content-side{ order:-1; }

  /* rope keeps its off-centre position on mobile too — left on row 1,
     right on row 2, exactly as on desktop */
  .lamp-team .lamp-wrapper{ top:22px; }
  .lamp-team #team-section-1 .lamp-wrapper{ left:10%; right:auto; }
  .lamp-team #team-section-2 .lamp-wrapper{ right:10%; left:auto; }
}

@media (max-width:420px){
  .lamp-team h1{ font-size:1.85rem; }
  .lamp-team h2{ font-size:1.15rem; }
  .lamp-team .instruction-text{ font-size:.86rem; letter-spacing:.5px; }
  .lamp-team .image-side{ padding-top:150px; }
  .lamp-team .lamp-image{ width:110px; }
}