/* ============================================================
   TECH QUARTERS · SHARED EFFECTS (Admin Assistant design language, Kaan 23 Oct)
   Opt in utilities only: nothing here changes a page until its markup uses
   a tq-* class. Load after tokens.css (+ site.css) + navigation.css.
   Pages using it: / (stage 1). Services + Portfolio next (stage 2).
   /office-hand/ does NOT load this file, so its look stays as approved.
   Values: tokens.css (--c1..--c5 logo palette, --sh-1..--sh-3 soft layered shadows).
   Motion: every loop is paused under prefers-reduced-motion (tokens.css kill switch
   + explicit static fallbacks below).
   ============================================================ */

@property --tq-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes tq-spin{to{--tq-ang:360deg}}
@keyframes tq-drift{to{transform:translate(30px,24px) scale(1.06)}}

/* ---------- 1. no gradient text: solid headlines (Kaan 23 Oct) ----------
   Any leftover gradient phrase class renders as solid text on pages that load this file. */
.grad,.gt,h1 .g{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;-webkit-text-fill-color:currentColor}

/* ---------- 2. background wash: soft drifting multicolour blobs ----------
   <div class="tq-wash" aria-hidden="true"><i class="b1"></i><i class="b2"></i><i class="b3"></i><i class="b4"></i></div>
   Parent needs position:relative (and usually overflow:hidden). Variants: .low (blobs sit lower), .soft (quieter). */
.tq-wash{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.tq-wash i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;animation:tq-drift 18s ease-in-out infinite alternate}
.tq-wash .b1{width:520px;height:420px;left:-90px;top:18%;background:var(--c1)}
.tq-wash .b2{width:520px;height:420px;right:-110px;top:8%;background:var(--c2);opacity:.15;animation-duration:22s}
.tq-wash .b3{width:480px;height:380px;left:24%;top:58%;background:var(--c3);opacity:.13;animation-duration:26s}
.tq-wash .b4{width:420px;height:360px;right:12%;top:64%;background:var(--c4);opacity:.09;animation-duration:30s}
.tq-wash.low .b1{top:40%}.tq-wash.low .b2{top:30%}.tq-wash.low .b3{top:62%}.tq-wash.low .b4{top:70%}
.tq-wash.fade{-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.tq-wash.soft i{opacity:.11}.tq-wash.soft .b3{opacity:.09}.tq-wash.soft .b4{opacity:.06}
/* content after a wash sits above it */
.tq-wash~.wrap{position:relative;z-index:1}
@media(max-width:760px){
  .tq-wash i{filter:blur(56px)}
  .tq-wash .b1,.tq-wash .b2{width:320px;height:300px}
  .tq-wash .b3,.tq-wash .b4{width:300px;height:260px}
}

/* ---------- 3. icon tile: small, thin, with an animated ring in its own colour ----------
   <span class="tq-ic" style="--ic:var(--steel)"><svg viewBox="0 0 24 24">...</svg></span>
   --ic (set on the tile or any parent) = the branch colour (steel blue, indigo purple, amber yellow, teal, coral).
   Outline and glyph are one solid tone of that colour (slightly deepened to read on white), white inside (Kaan 24 Oct). */
.tq-ic{--icx:var(--ic,var(--teal));--icd:color-mix(in srgb,var(--icx) 86%,#0C1220);position:relative;isolation:isolate;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--icd);background:#fff;border:1.75px solid var(--icd);box-sizing:border-box}
/* Kaan 24 Oct: solid outline + solid icon in the branch colour, no pale tint inside */
.tq-ic>svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.tq-ic>svg [fill="currentColor"]{stroke:none}
/* the ring: a short arc of the tile's own colour travelling round the edge */
.tq-ic::before{content:"";position:absolute;inset:-5px;border-radius:16px;padding:1.25px;background:conic-gradient(from var(--tq-ang),transparent 0 70%,color-mix(in srgb,var(--icx) 30%,transparent) 80%,color-mix(in srgb,var(--icx) 70%,transparent) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tq-spin 4.8s linear infinite;animation-delay:var(--ring-d,0s);pointer-events:none;z-index:-1}
/* on dark cards: same solid outline + icon, in the base branch colour, no fill */
.tq-ic.dk{--icd:var(--icx);background:transparent}
.tq-ic.round{border-radius:50%}
.tq-ic.round::before{border-radius:50%}
.tq-ic.lg{width:44px;height:44px;border-radius:13px}
.tq-ic.lg::before{border-radius:17px}
.tq-ic.lg.round,.tq-ic.lg.round::before{border-radius:50%}
.tq-ic.lg>svg{width:21px;height:21px}
@media(max-width:560px){.tq-ic{width:36px;height:36px;border-radius:11px}.tq-ic::before{border-radius:15px}.tq-ic>svg{width:18px;height:18px}.tq-ic.lg{width:40px;height:40px}.tq-ic.lg>svg{width:20px;height:20px}}

/* ---------- 4. classy card: white, hairline, soft layered shadow ---------- */
.tq-card{background:#fff;border:1px solid #E6EAF2;border-radius:20px;box-shadow:var(--sh-2);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tq-card.hov:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}

/* ---------- 5. border beam: a multicolour light travelling round a card edge ----------
   Use sparingly (one or two per page). .tq-beam = always on, .tq-beam-hover = on hover/focus only
   (colour from --bc, default the logo palette). */
.tq-beam,.tq-beam-hover{position:relative;isolation:isolate}
.tq-beam::before,.tq-beam-hover::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--tq-ang),transparent 0 66%,var(--c1) 74%,var(--c2) 82%,var(--c3) 90%,var(--c5) 96%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;animation:tq-spin 6s linear infinite}
.tq-beam-hover::before{background:conic-gradient(from var(--tq-ang),transparent 0 60%,color-mix(in srgb,var(--bc,var(--c2)) 35%,transparent) 72%,var(--bc,var(--c2)) 88%,transparent);opacity:0;transition:opacity .3s ease;animation-duration:3.6s}
.tq-beam-hover:hover::before,.tq-beam-hover:focus-visible::before,.tq-beam-hover:focus-within::before{opacity:1}

/* ---------- 6. flowing multicolour frame + glow (the Admin Assistant video frame) ----------
   <div class="tq-stage"><div class="tq-glow"></div><div class="tq-flow">[media]</div></div> */
.tq-stage{position:relative}
.tq-glow{position:absolute;inset:8% 4% -6%;border-radius:28px;background:linear-gradient(110deg,var(--c1),var(--c2) 30%,var(--c3) 55%,var(--c5) 78%,var(--c4));filter:blur(42px);opacity:.30;z-index:0;pointer-events:none}
.tq-flow{position:relative;z-index:1;border-radius:calc(var(--r-card,18px) + 3px);padding:3px;background:conic-gradient(from var(--tq-ang),var(--c1),var(--c2),var(--c3),var(--c5),var(--c4),var(--c1));box-shadow:var(--sh-3);animation:tq-spin 9s linear infinite}

/* ---------- 7. animated button: border beam on ONE key button per screen (never every green CTA) ---------- */
.tq-beam-btn{position:relative;isolation:isolate}
.tq-beam-btn::before{content:"";position:absolute;inset:-3px;border-radius:calc(var(--btn-r,12px) + 3px);padding:2px;background:conic-gradient(from var(--tq-ang),transparent 0 58%,var(--c1) 68%,var(--c2) 76%,var(--c3) 84%,var(--c5) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;pointer-events:none;animation:tq-spin 3.6s linear infinite}

/* ---------- 8. every card gets the premium layered drop shadow (Kaan 24 Oct) ----------
   Light cards read --sh-2 (hover --sh-3) from tokens; dark cards get --sh-dark. Listed here so it is one rule sitewide. */
html :is(.stripin,.fam,.tw-panel,.hum,.faq details,.post,.opsfeed,.heroisland,.shotframe,.ixisland,.island:not(.ctaisland)){box-shadow:var(--sh-dark)}
html :is(.fam,.tw-panel):hover{box-shadow:var(--sh-dark-hover)}
html :is(.out-card,.pc-card,.vcard,.step,.dcard,.fcard,.wcard,.built,.fact,.ncard,.ixgrid a:not(.next)){box-shadow:var(--sh-2)}
html :is(.out-card,.vcard,.step,.dcard,.fcard,.ncard,.ixgrid a:not(.next)):hover{box-shadow:var(--sh-3)}
html :is(.finalcard,.bcta .ctaisland,.browser,.concept,.spot .simg){box-shadow:var(--sh-3)}

/* ---------- reduced motion: everything still, nothing missing ---------- */
@media(prefers-reduced-motion:reduce){
  .tq-wash i,.tq-ic::before,.tq-beam::before,.tq-beam-hover::before,.tq-flow,.tq-beam-btn::before{animation:none!important}
  .tq-ic::before{display:none}
  .tq-flow{background:linear-gradient(120deg,var(--c1),var(--c2),var(--c3),var(--c5),var(--c4))}
}
@media print{.tq-wash,.tq-glow{display:none}.tq-ic::before,.tq-beam::before,.tq-beam-hover::before,.tq-beam-btn::before{display:none}}