/* Q-WASA showcase layer: the hero stage, the 3D banner carousel, the Latest
   News ticker, and the extra depth on the card system.

   Loads after site.css / creative.css / aurora.css. The carousel and ticker use
   their own class names rather than the old `.hero-*` ones, so none of the
   three earlier sheets need to be unpicked to change the hero. */

/* No visually-hidden utility existed in the earlier sheets; the carousel needs
   one for its live region. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

:root{
  --show-ink:#eaf9ff;
  --show-dim:#9fc2cf;
  --show-edge:#7ae1ff2e;
  --show-glass:#ffffff0f;
  --ease-deck:cubic-bezier(.22,.78,.2,1);
}

/* ====================================================== 1. The hero stage */

.showcase{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--show-ink);
  /* The gradient is the floor the WebGL canvas paints over, and it is also the
     complete backdrop on a machine with no WebGL at all. */
  background:
    radial-gradient(120% 78% at 50% 108%,#0c5f6b 0,transparent 62%),
    radial-gradient(70% 55% at 82% 8%,#0b4f7a45,transparent 70%),
    linear-gradient(176deg,#02171f 0,#04202c 42%,#052b36 100%);
}
.showcase-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;border:0;z-index:0;
  opacity:0;transition:opacity 1.1s ease;
}
.showcase.webgl-ready .showcase-canvas{opacity:1}
/* Darkens the busy middle of the scene so the headline and the photographs
   keep their contrast over it. */
.showcase-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,#02171fd4 0,#02171f30 23%,transparent 44%),
    radial-gradient(105% 72% at 50% 40%,transparent 54%,#02171f7a 100%);
}
.showcase-rings{
  position:absolute;z-index:1;pointer-events:none;
  top:-18%;right:-12%;width:52vw;height:52vw;max-width:760px;max-height:760px;
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 61%,#7ae1ff14 62%,transparent 63%),
    radial-gradient(circle,transparent 76%,#d2f5891a 77%,transparent 78%);
}
.showcase>.container{position:relative;z-index:2}

.showcase-head{
  display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:end;
  padding:56px 0 46px;
}
.showcase-head h1{
  font-family:var(--font-display,inherit);
  font-size:clamp(38px,5.4vw,74px);
  line-height:1.02;letter-spacing:-.045em;margin-top:4px;
}
.showcase-head h1 span{
  background:linear-gradient(96deg,#8ff3e4 8%,#d2f589 62%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.showcase-head .headline-period{color:var(--lime);-webkit-text-fill-color:currentColor;font-size:.5em;vertical-align:.12em;margin-left:.08em}
.showcase-lede p{color:#a9cdd8;font-size:clamp(15px,1.25vw,18px);max-width:40ch}
.showcase-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #d2f58999;animation:show-pulse 2.6s ease-out infinite;margin-right:8px;vertical-align:1px}
@keyframes show-pulse{70%{box-shadow:0 0 0 11px #d2f58900}100%{box-shadow:0 0 0 0 #d2f58900}}

/* ================================================= 2. The 3D banner deck */

.deck-wrap{
  position:relative;z-index:2;
  /* Full-bleed: the angled neighbours should run past the text column and fade
     out at the edges of the window, not stop at the container. */
  width:100%;
  padding-bottom:78px;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.deck{
  position:relative;
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto;
  height:clamp(240px,27vw,392px);
  perspective:1600px;
  perspective-origin:50% 44%;
  touch-action:pan-y;
}
.deck:focus-visible{outline:none}
.deck-stage{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--deck-rx,0deg)) rotateY(var(--deck-ry,0deg));
  transition:transform .9s var(--ease-deck);
}
/* A pool of light the deck appears to stand in. */
.deck-glow{
  position:absolute;left:50%;bottom:-6%;width:86%;height:58%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,#33d6d055 0,#0b5f7a1f 45%,transparent 72%);
  filter:blur(18px);pointer-events:none;z-index:0;
}

.slide{
  position:absolute;top:0;bottom:0;left:50%;
  width:auto;aspect-ratio:16/9;
  transform-style:preserve-3d;
  transform:translate3d(calc(-50% + var(--x,0%)),0,var(--z,0px)) rotateY(var(--ry,0deg));
  opacity:var(--o,1);
  filter:blur(var(--blur,0px));
  transition:transform .95s var(--ease-deck),opacity .7s ease,filter .7s ease;
  will-change:transform;
}
/* opacity and filter are grouping properties: either one would flatten the
   slide and drop the caption plate back onto the photograph. The active slide
   therefore carries neither, which is also the only slide that needs depth. */
.slide.is-active{opacity:1;filter:none}
.slide-frame{
  position:absolute;inset:0;
  border-radius:20px;overflow:hidden;
  background:#04212b;
  border:1px solid #9fe9ff2e;
  box-shadow:0 40px 90px -28px #000000b8,0 2px 0 #ffffff1a inset;
  transform-style:preserve-3d;
  /* The reflection is a progressive extra: Chrome, Edge and Safari draw it,
     Firefox simply does not, and the deck reads correctly either way. */
  -webkit-box-reflect:below 16px linear-gradient(transparent 86%,#ffffff2b);
}
/* The blurred copy fills the frame so banners of any shape sit in a consistent
   16:9 card, while the sharp copy stays fully visible. These banners carry
   printed Urdu and English captions, so they must never be cropped. */
.slide-fill{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.18);
  filter:blur(26px) saturate(1.3) brightness(.52);
}
.slide-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
}
.slide-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,#ffffff00 36%,#ffffff26 48%,#ffffff00 61%);
  opacity:0;transition:opacity .6s ease;
}
.slide.is-active .slide-sheen{opacity:1;animation:slide-sheen 7s ease-in-out infinite}
@keyframes slide-sheen{0%,62%{transform:translateX(-38%)}86%,100%{transform:translateX(38%)}}

.slide-plate{
  position:absolute;left:-16px;bottom:-30px;z-index:2;max-width:72%;
  padding:13px 20px 14px;border-radius:14px;
  background:#031a23e6;border:1px solid #9fe9ff3d;
  box-shadow:0 22px 46px -20px #000000cc;
  backdrop-filter:blur(16px) saturate(1.3);
  transform:translateZ(86px);
  opacity:0;translate:0 14px;
  transition:opacity .55s ease .12s,translate .55s var(--ease-deck) .12s;
}
.slide.is-active .slide-plate{opacity:1;translate:0 0}
.slide-plate h2{font-size:clamp(14px,1.3vw,19px);letter-spacing:-.02em;color:#fff;font-weight:650;line-height:1.25}
.slide-tag{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.17em;
  color:#04333c;background:var(--lime);border-radius:100px;padding:4px 10px;margin-bottom:8px;
}
.slide-plate .slide-date{font-size:11px;letter-spacing:.1em;color:#a7d6d8;white-space:nowrap}
/* The plate hangs below the frame, so the deck needs the headroom back. */
.deck{padding-bottom:0}

/* ------------------------------------------------------- deck controls */

.deck-bar{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:18px;
  margin-top:4px;
}
.deck-nav{
  width:50px;height:50px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--show-edge);
  background:var(--show-glass);color:var(--show-ink);
  backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,transform .25s;
}
.deck-nav:hover{background:#7ae1ff24;border-color:#9fe9ff70;transform:translateY(-2px)}
.deck-nav .icon{width:20px;height:20px}
.deck-nav.prev .icon{transform:scaleX(-1)}

.deck-dots{display:flex;align-items:center;gap:9px;flex:1;flex-wrap:wrap}
.deck-dot{
  width:26px;height:5px;border-radius:100px;border:0;padding:0;
  background:#ffffff2e;transition:background .3s,width .3s;
}
.deck-dot:hover{background:#ffffff5c}
.deck-dot[aria-current="true"]{width:46px;background:var(--lime)}

.deck-meta{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.14em;color:var(--show-dim);white-space:nowrap}
.deck-meta b{font-family:var(--font-display,inherit);font-size:19px;letter-spacing:-.02em;color:#fff;font-weight:650}
/* The autoplay ring: a conic sweep that restarts with each slide. */
.deck-ring{
  position:relative;width:34px;height:34px;flex:none;border-radius:50%;
  background:conic-gradient(var(--lime) calc(var(--p,0) * 360deg),#ffffff24 0);
}
.deck-ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#04202b}
.deck-ring.is-running{animation:deck-ring 6.5s linear}
@keyframes deck-ring{from{--p:0}to{--p:1}}
@property --p{syntax:"<number>";inherits:false;initial-value:0}

.motion-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:100px;
  border:1px solid var(--show-edge);background:var(--show-glass);color:var(--show-dim);
  font-size:11px;font-weight:700;letter-spacing:.11em;
  backdrop-filter:blur(10px);transition:color .25s,border-color .25s,background .25s;
}
.motion-toggle:hover{color:#fff;border-color:#9fe9ff70;background:#7ae1ff1f}
.motion-toggle i{font-style:normal;font-size:13px;line-height:1}
.motion-toggle i::before{content:"\275A\275A"}
.motion-toggle[aria-pressed="true"] i::before{content:"\25B6"}

.showcase-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  border-top:1px solid #9ed8ff1f;margin-top:30px;min-height:62px;
  font-size:9px;letter-spacing:.16em;color:#8db3c0;
}
.showcase-foot b{font-family:var(--font-display,inherit);font-size:13px;letter-spacing:0;color:var(--lime);margin-right:9px}
.showcase-foot a{margin-left:auto;color:var(--lime)}
.showcase-foot a:hover{text-decoration:underline}

/* ==================================================== 3. Latest News ticker */

.ticker{
  position:relative;z-index:4;
  background:linear-gradient(90deg,#052833 0,#08505c 46%,#063a46 100%);
  border-top:1px solid #9fe9ff33;
  border-bottom:1px solid #02161d;
  box-shadow:0 14px 34px -22px #00000099;
}
.ticker-shell{display:flex;align-items:stretch;min-height:64px}
.ticker-label{
  position:relative;display:flex;align-items:center;gap:10px;flex:none;
  padding:0 30px 0 0;margin-right:22px;
  font-size:11px;font-weight:800;letter-spacing:.17em;white-space:nowrap;
  color:#04333c;
  background:linear-gradient(120deg,#e6ffb0,#d2f589 45%,#8ce8c4);
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
}
.ticker-label span{position:relative}
.ticker-live{
  position:relative;width:8px;height:8px;border-radius:50%;flex:none;
  background:#d21f3c;box-shadow:0 0 0 0 #d21f3c99;animation:show-pulse 1.9s ease-out infinite;
}

.ticker-window{
  position:relative;flex:1;min-width:0;overflow:hidden;
  display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 52px),transparent 100%);
}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker[data-ready] .ticker-track{animation:ticker-run var(--ticker-duration,42s) linear infinite}
.ticker-half,.ticker-group{display:flex;align-items:center;flex:none}
@keyframes ticker-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* These have to out-specify `.ticker[data-ready] .ticker-track`, whose
   `animation` shorthand resets play-state to running on every match. */
.ticker[data-ready]:hover .ticker-track,
.ticker[data-ready]:focus-within .ticker-track,
html.scene-paused .ticker[data-ready] .ticker-track{animation-play-state:paused}

.ticker-item{display:inline-flex;align-items:center;gap:11px;padding-inline:26px;white-space:nowrap;position:relative}
.ticker-item::after{content:"";position:absolute;right:-4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#7ae1ff59}
.ticker-item a{display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:600}
.ticker-item .icon{width:17px;height:17px;color:var(--lime);flex:none}
.ticker-date{
  font-size:10px;font-weight:800;letter-spacing:.09em;flex:none;
  padding:4px 9px;border-radius:5px;color:#c9f6ff;background:#0a3e4c;border:1px solid #7ae1ff33;
}
/* A slow sheen across the headline text: visible movement, brand colours,
   no rainbow. */
.ticker-text{
  background:linear-gradient(100deg,#ffffff 0,#ffffff 32%,#d2f589 46%,#7ff3ff 56%,#ffffff 70%,#ffffff 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ticker-sheen 6s linear infinite;
}
@keyframes ticker-sheen{from{background-position:180% 0}to{background-position:-80% 0}}
.ticker-item a:hover .ticker-text{animation-play-state:paused;color:#fff;-webkit-text-fill-color:#fff}
/* Urdu headlines read right to left and Nastaliq needs the extra leading. */
.ticker-item[lang="ur"] .ticker-text{
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting","Segoe UI",Tahoma,sans-serif;
  font-size:17px;line-height:2.1;padding-block:2px;
}

/* ==================================== 4. More depth in the card system */

/* aurora.js writes --rx/--ry; the extra perspective and the depth layers below
   are what stop a tilted card from reading as a flat sheet of paper. aurora.css
   shipped a `.lift` system for exactly this, but no markup ever carried the
   class, which is why the tilt read as a flat sheet of paper. */
.card3d.card3d{perspective:900px}
.card3d.card3d.is-tilting{
  box-shadow:0 34px 60px -26px #0a2c3859,0 4px 14px -6px #0a2c3833;
}

/* Depth is applied only while the card is being tilted. Under perspective a
   resting translateZ would silently enlarge the layer - 52px against a 900px
   perspective is a 6% scale - and blur the text sitting on it. */
.card3d :where(
  .service-illustration,.service-top,.service-content,
  .news-body,.news-image,.project-body,figcaption
),
.contact-card>*,.document-card>*{
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out,ease);
}
.service-card.is-tilting .service-illustration{transform:translateZ(52px)}
.service-card.is-tilting .service-top{transform:translateZ(30px)}
.service-card.is-tilting .service-content{transform:translateZ(22px)}
.news-card.is-tilting .news-body{transform:translateZ(26px)}
.news-card.is-tilting .news-image{transform:translateZ(8px)}
.project-card.is-tilting .project-body{transform:translateZ(22px)}
.contact-card.is-tilting>*,.document-card.is-tilting>*{transform:translateZ(20px)}
.gallery-card.is-tilting figcaption{transform:translateZ(26px)}
.service-card,.news-card,.project-card,.contact-card,.document-card,.gallery-card{
  transition:box-shadow .6s var(--ease-out,ease);
}

/* ============================================================ 5. Responsive */

@media (max-width:1180px){
  .deck{height:clamp(240px,30vw,380px)}
  .showcase-head{gap:32px}
}
@media (max-width:950px){
  .showcase-head{grid-template-columns:1fr;gap:22px;align-items:start;padding:46px 0 30px}
  .showcase-lede p{max-width:52ch}
  .deck{width:calc(100% - 44px);height:clamp(210px,42vw,330px)}
  .deck-wrap{padding-bottom:58px}
  .deck-bar{gap:12px;flex-wrap:wrap}
  .deck-meta{order:3}
}
@media (max-width:760px){
  /* The angled neighbours stop earning their space once the active banner is
     this small; the deck narrows to a single card with a hint at each edge. */
  .deck{height:clamp(190px,50vw,280px)}
  /* On a phone the banner is too small to give up a third of itself to a
     caption, and the mirrored copy is wasted height, so the caption becomes
     ordinary text underneath and the reflection goes. */
  .deck-wrap{padding-bottom:86px}
  .slide-frame{-webkit-box-reflect:none}
  .slide{width:calc(100% - 46px);aspect-ratio:auto;height:100%}
  .slide-frame{border-radius:15px}
  .slide-plate{
    left:0;right:0;top:calc(100% + 13px);bottom:auto;max-width:none;
    padding:0;border:0;border-radius:0;background:none;box-shadow:none;
    backdrop-filter:none;transform:none;
  }
  .slide-plate h2{font-size:15.5px}
  .slide-tag{margin-bottom:6px}
  .slide-plate .slide-date{display:none}
  .deck-wrap{mask-image:none}
  .deck-nav{width:44px;height:44px}
  .deck-dot{width:18px}
  .deck-dot[aria-current="true"]{width:32px}
  .showcase-actions .button{flex:1 1 auto}
  .ticker-shell{min-height:56px}
  .ticker-label{font-size:9px;padding-right:20px;margin-right:12px}
  .ticker-label span:last-child{display:none}
  .ticker-item a{font-size:13.5px}
  .ticker-item[lang="ur"] .ticker-text{font-size:15px}
  .showcase-foot{gap:14px;font-size:7px;letter-spacing:.09em}
}
/* Ten dots do not fit beside the arrows on a small phone, and wrapping them
   turns the control bar into a grid of specks. The counter carries the same
   information in less space. */
@media (max-width:520px){
  .deck-dots{display:none}
  .deck-bar{gap:10px}
  .deck-meta{order:0;margin-left:auto}
}
@media (max-width:400px){
  .deck{width:calc(100% - 28px)}
  .slide{width:calc(100% - 26px)}
  .showcase-head{padding:34px 0 24px}
}

/* Motion is a finish, never a requirement: everything still reads when it is
   switched off, and the carousel stays operable by its own controls. */
@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .2s ease}
  .slide-sheen,.status-dot,.ticker-live{animation:none}
  .slide.is-active .slide-sheen{opacity:0}
  .ticker[data-ready] .ticker-track{animation:none!important}
  .ticker-text{animation:none;background:none;color:#eaf9ff;-webkit-text-fill-color:#eaf9ff}
  .deck-ring{animation:none!important}
  .deck-stage{transition:none}
  .slide-plate{transition:none}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .card3d :where(
    .service-illustration,.service-top,.service-content,
    .news-body,.news-image,.project-body,figcaption
  ),
  .contact-card>*,.document-card>*{transform:none!important;transition:none}
}