/* ========================================================================== 
   WOLF HACK ACADEMY — TITAN T11 + T12
   T11: Wolf Mode / Tactical View
   T12: adaptive performance, render deferral and motion budgeting
   ========================================================================== */
:root{
  --t11-cyan:#35ddff;
  --t11-blue:#0878ff;
  --t11-ice:#eaf9ff;
  --t11-line:rgba(53,221,255,.22);
  --t11-bg:rgba(1,10,23,.88);
  --t11-x:50vw;
  --t11-y:50vh;
}

/* T11 — activation control ------------------------------------------------ */
.t11-wolf-toggle{position:fixed;z-index:9994;right:16px;top:calc(var(--titan-header-offset,88px) + 14px);display:grid;grid-template-columns:34px auto 11px;gap:9px;align-items:center;min-height:46px;padding:6px 10px 6px 7px;border:1px solid rgba(63,195,244,.22);border-radius:14px;background:linear-gradient(120deg,rgba(2,13,27,.9),rgba(5,32,57,.88));box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(14px);color:#dff8ff;cursor:pointer;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease}
.t11-wolf-toggle:hover{transform:translateY(-2px);border-color:rgba(53,221,255,.5);box-shadow:0 18px 46px rgba(0,0,0,.38),0 0 26px rgba(8,120,255,.1)}
.t11-wolf-toggle:focus-visible{outline:2px solid #35ddff;outline-offset:3px}
.t11-wolf-mark{width:34px;height:34px;border:1px solid rgba(65,203,255,.2);border-radius:10px;background:radial-gradient(circle,rgba(18,142,255,.18),rgba(3,17,34,.88)),url('../images/brand/wha-wolf-mark-v3-512.webp') center/80% no-repeat;filter:drop-shadow(0 0 10px rgba(52,216,255,.18))}
.t11-toggle-copy{display:block;text-align:left}.t11-toggle-copy b,.t11-toggle-copy small{display:block}.t11-toggle-copy b{font:800 .68rem/1 "Chakra Petch",sans-serif;letter-spacing:.06em}.t11-toggle-copy small{margin-top:4px;color:#6f9db8;font:800 .47rem/1 "IBM Plex Mono",monospace;letter-spacing:.11em}
.t11-wolf-toggle>i{width:10px;height:10px;border-radius:50%;background:#456779;box-shadow:0 0 0 4px rgba(69,103,121,.08);transition:.25s ease}
html.t11-wolf-mode .t11-wolf-toggle{border-color:rgba(53,221,255,.58);background:linear-gradient(120deg,rgba(3,22,42,.94),rgba(6,47,79,.93));box-shadow:0 18px 48px rgba(0,0,0,.4),0 0 30px rgba(8,120,255,.14)}
html.t11-wolf-mode .t11-wolf-toggle>i{background:#46e8bd;box-shadow:0 0 0 5px rgba(70,232,189,.08),0 0 15px rgba(70,232,189,.55)}

/* T11 — tactical overlays ------------------------------------------------- */
.t11-overlay{position:fixed;z-index:9990;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;overflow:hidden}.t11-overlay>i{position:absolute;pointer-events:none}
html.t11-wolf-mode .t11-overlay{opacity:1}
.t11-grid{inset:0;background-image:linear-gradient(rgba(55,190,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(55,190,245,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at 50% 45%,#000 0 52%,transparent 95%)}
.t11-grid:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(55,190,245,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(55,190,245,.055) 1px,transparent 1px);background-size:140px 140px}
.t11-scan{left:0;right:0;height:1px;top:-4%;background:linear-gradient(90deg,transparent,rgba(53,221,255,.7) 25%,rgba(53,221,255,.95) 50%,rgba(53,221,255,.7) 75%,transparent);box-shadow:0 0 18px rgba(53,221,255,.3);animation:t11Scan 8.5s linear infinite}
.t11-reticle{left:var(--t11-x);top:var(--t11-y);width:62px;height:62px;transform:translate(-50%,-50%);border:1px solid rgba(53,221,255,.16);border-radius:50%;opacity:.78;transition:left .05s linear,top .05s linear}
.t11-reticle:before,.t11-reticle:after{content:"";position:absolute;background:rgba(53,221,255,.3)}.t11-reticle:before{left:50%;top:-14px;bottom:-14px;width:1px}.t11-reticle:after{top:50%;left:-14px;right:-14px;height:1px}
.t11-noise{inset:-30%;opacity:.05;background-image:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.42) 0 1px,transparent 1px 4px);background-size:9px 9px;animation:t11Noise 1.8s steps(2,end) infinite;mix-blend-mode:screen}

/* T11 — telemetry HUD ----------------------------------------------------- */
.t11-hud{position:fixed;z-index:9993;left:16px;top:calc(var(--titan-header-offset,88px) + 14px);width:min(360px,calc(100vw - 32px));border:1px solid rgba(55,193,244,.22);border-radius:16px;background:linear-gradient(145deg,rgba(2,14,29,.92),rgba(4,32,56,.88));box-shadow:0 20px 55px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(16px);color:#dff8ff;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
html.t11-wolf-mode .t11-hud{opacity:1;transform:none}
.t11-hud-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(62,183,235,.14);font:800 .5rem "IBM Plex Mono",monospace;letter-spacing:.12em}.t11-hud-head span{display:flex;align-items:center;gap:7px;color:#7fb9d4}.t11-hud-head span i{width:7px;height:7px;border-radius:50%;background:#46e8bd;box-shadow:0 0 13px rgba(70,232,189,.55)}.t11-hud-head b{color:#46e8bd}
.t11-hud-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:rgba(60,181,233,.12)}.t11-hud-grid>div{padding:9px 11px;background:rgba(3,18,34,.94)}.t11-hud-grid span{display:block;color:#507c98;font:800 .43rem "IBM Plex Mono",monospace;letter-spacing:.1em}.t11-hud-grid b{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dff8ff;font:800 .59rem "IBM Plex Mono",monospace;letter-spacing:.04em}
.t11-hud-chain{display:flex;align-items:center;gap:6px;padding:9px 11px;color:#5d91ad;font:800 .39rem "IBM Plex Mono",monospace;letter-spacing:.08em}.t11-hud-chain i{flex:1;min-width:12px;height:1px;background:linear-gradient(90deg,#0878ff,#35ddff)}

/* T11 — section + node annotations --------------------------------------- */
.t11-tactical-section{position:relative}
html.t11-wolf-mode .t11-tactical-section:before{content:attr(data-t11-code) " // " attr(data-t11-label);position:absolute;z-index:8;right:max(14px,calc((100vw - 1500px)/2));top:14px;padding:5px 7px;border:1px solid rgba(53,221,255,.14);border-radius:7px;background:rgba(2,14,28,.62);color:rgba(122,210,239,.62);font:800 .43rem/1 "IBM Plex Mono",monospace;letter-spacing:.12em;pointer-events:none}
html.t11-wolf-mode .t11-tactical-section:after{content:"";position:absolute;z-index:7;inset:9px;border:1px solid rgba(53,221,255,.045);clip-path:polygon(0 0,110px 0,110px 1px,100% 1px,100% calc(100% - 1px),calc(100% - 110px) calc(100% - 1px),calc(100% - 110px) 100%,0 100%);pointer-events:none}
.t11-tactical-node{position:relative}
html.t11-wolf-mode .t11-tactical-node:before{content:"NODE // " attr(data-t11-node);position:absolute;z-index:12;top:7px;right:8px;padding:3px 5px;border:1px solid rgba(53,221,255,.1);border-radius:5px;background:rgba(1,11,23,.55);color:rgba(89,190,224,.48);font:800 .38rem/1 "IBM Plex Mono",monospace;letter-spacing:.09em;pointer-events:none;opacity:.45;transition:opacity .2s ease,color .2s ease,border-color .2s ease}
html.t11-wolf-mode .t11-tactical-node:hover:before{opacity:1;color:#4edfff;border-color:rgba(53,221,255,.3)}
html.t11-wolf-mode .t11-tactical-node{outline:1px solid rgba(53,221,255,.025);outline-offset:2px}

/* T12 — render and motion budget ----------------------------------------- */
@supports (content-visibility:auto){
  .t12-cv{content-visibility:auto;contain-intrinsic-size:auto 820px}
}
html.t12-page-hidden *{animation-play-state:paused!important}
.t12-offscreen :where(.titan-ambient-node,.wha-titan-scene__orbit,.wha-titan-scene__scan,.wha-sv6-orbit,.a5-orbit,.a6-orbit-ring,.a6-scan,[class*="pulse"],[class*="scan"]){animation-play-state:paused!important}
html.t12-lite .titan-cinematic-layer,html.titan-lite .titan-cinematic-layer,html.t12-save-data .titan-cinematic-layer{display:none!important}
html.t12-lite .t11-noise,html.titan-lite .t11-noise,html.t12-lite .t11-reticle,html.titan-lite .t11-reticle,html.t12-save-data .t11-noise{display:none!important}
html.t12-lite :where(.t10-conversion-dock,.t11-wolf-toggle,.t11-hud),html.titan-lite :where(.t10-conversion-dock,.t11-wolf-toggle,.t11-hud){backdrop-filter:none!important}
html.t12-lite :where(.titan-focus-ring)::after,html.titan-lite :where(.titan-focus-ring)::after{display:none!important}
html.t12-lite :where(.wha-titan-scene__edge,.wha-titan-scene__scan),html.titan-lite :where(.wha-titan-scene__edge,.wha-titan-scene__scan){display:none!important}

@media(max-width:1180px){
  .t11-hud{left:12px;top:calc(var(--titan-header-offset,80px) + 10px);width:315px}.t11-wolf-toggle{right:12px;top:calc(var(--titan-header-offset,80px) + 10px)}
}
@media(max-width:760px){
  .t11-hud{display:none}.t11-wolf-toggle{top:calc(var(--titan-header-offset,72px) + 8px);right:10px;bottom:auto;grid-template-columns:32px 10px;padding:6px}.t11-toggle-copy{display:none}.t11-wolf-mark{width:32px;height:32px}.t11-grid{background-size:34px 34px}.t11-reticle{display:none}
  html.t11-wolf-mode .t11-tactical-section:before{right:10px;top:9px;max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.t11-wolf-mode .t11-tactical-node:before{display:none}
  :where(.t10-conversion-dock,.t11-wolf-toggle){backdrop-filter:none!important}
}
@media(max-width:480px){.t11-wolf-toggle{right:8px}.t11-scan{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .t11-overlay,.t11-wolf-toggle,.t11-hud,.t11-tactical-node:before{transition:none!important}.t11-scan,.t11-noise{animation:none!important}.t11-reticle{display:none!important}
}
@media print{
  .t11-wolf-toggle,.t11-overlay,.t11-hud{display:none!important}.t12-cv{content-visibility:visible!important;contain-intrinsic-size:none!important}
}
@keyframes t11Scan{0%{top:-4%;opacity:0}8%{opacity:.55}92%{opacity:.55}100%{top:104%;opacity:0}}
@keyframes t11Noise{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(2%,-1%,0)}50%{transform:translate3d(-1%,2%,0)}75%{transform:translate3d(1%,1%,0)}}