/* TSM home hero "Everything on your line" (Super 3D UIUX). Every class is t3- prefixed. */
.t3{--navy:#07101f;--blue:#095BAA;--blue-l:#4f9be8;--amber:#ffb547;--orange:#f39200;--ink:#eaf1fa;--mute:#9db0c8;
  --glass:rgba(12,24,44,.58);--edge:rgba(160,195,240,.18);
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--navy);color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;isolation:isolate}
.t3 *{box-sizing:border-box}
.t3-stage{position:absolute;inset:0;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .2s linear}
.t3-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;opacity:0;transition:opacity .9s ease}
.t3.ready .t3-world{opacity:1}
.t3-world img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.t3-life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* copy legibility: a soft navy fall-off on the left (desktop) / bottom (phone) */
.t3-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,16,31,.92) 0%,rgba(7,16,31,.7) 26%,rgba(7,16,31,0) 52%),
             linear-gradient(0deg,rgba(7,16,31,.8) 0%,rgba(7,16,31,0) 22%),linear-gradient(180deg,rgba(7,16,31,.7) 0%,rgba(7,16,31,0) 18%)}

/* beats */
.t3-beat{position:absolute;z-index:4;left:max(24px,calc((100vw - 1180px)/2));top:50%;width:min(520px,40vw);
  transform:translateY(-44%);opacity:0;visibility:hidden;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.t3-beat.live{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .55s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.t3-kick{display:flex;align-items:center;gap:10px;font:600 12px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.t3-kick:before{content:"";width:22px;height:2px;background:var(--amber)}
.t3 h1,.t3-h{font-family:"Manrope","DM Sans",sans-serif;font-weight:800;letter-spacing:-.025em;margin:0;text-wrap:balance;color:#fff}
.t3 h1{font-size:clamp(40px,4.6vw,72px);line-height:1.02}
.t3-h{font-size:clamp(32px,3.4vw,54px);line-height:1.05}
.t3 h1 em,.t3-h em{font-style:normal;color:var(--blue-l)}
.t3-sub{margin:18px 0 0;font-size:17px;line-height:1.55;color:var(--mute);max-width:42ch}
.t3-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.t3-btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;font:700 15px/1 "DM Sans",sans-serif;
  text-decoration:none;transition:transform .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
.t3-btn:hover{transform:translateY(-1px)}
.t3-btn:focus-visible,.t3 button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.t3-btn-p{background:var(--orange);color:#fff}
.t3-btn-p:hover{background:#ffa21f}
.t3-btn-l{border:1.5px solid rgba(234,241,250,.4);color:#fff;background:rgba(7,16,31,.35);backdrop-filter:blur(6px)}
.t3-btn-l:hover{border-color:#fff}
.t3-btn svg{width:18px;height:18px;fill:currentColor}
.t3-play{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:0;background:none;border:0;color:var(--ink);font:600 14px/1 "DM Sans",sans-serif;cursor:pointer}
.t3-play i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(234,241,250,.45);transition:border-color .2s,background .2s}
.t3-play i:after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.t3-play:hover i{background:rgba(255,255,255,.1);border-color:#fff}

/* station tags, pinned to the render */
.t3-tags{position:absolute;inset:0;z-index:3;pointer-events:none}
.t3-tag{position:absolute;left:0;top:0;opacity:0;visibility:hidden;transform:translate(18px,-100%) translateY(8px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .35s;pointer-events:auto}
.t3-tag.on{opacity:1;visibility:visible;transform:translate(18px,-100%);transition:opacity .4s ease .25s,transform .55s cubic-bezier(.2,.7,.2,1) .25s,visibility 0s}
.t3-tag:before{content:"";position:absolute;left:-18px;bottom:-5px;width:10px;height:10px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 5px rgba(255,181,71,.18),0 0 18px rgba(255,181,71,.8)}
.t3-tag:after{content:"";position:absolute;left:-13px;bottom:0;width:13px;height:1px;background:rgba(255,181,71,.7)}
.t3-card{display:grid;gap:4px;min-width:200px;padding:14px 16px;border-radius:10px;background:var(--glass);border:1px solid var(--edge);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.t3-card b{font:700 15px/1.2 "Manrope",sans-serif;color:#fff}
.t3-card span{font-size:12.5px;color:var(--mute)}
.t3-card a,.t3-card button{justify-self:start;margin-top:6px;font:600 12.5px/1 "DM Sans",sans-serif;color:var(--amber);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.t3-card a:hover,.t3-card button:hover{text-decoration:underline}

/* the electrode loupe (frame 3) */
.t3-loupe{position:absolute;z-index:3;left:var(--x,60%);top:var(--y,45%);width:clamp(180px,17vw,250px);aspect-ratio:1;border-radius:50%;
  transform:translate(-30%,-118%) scale(.85);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.t3-loupe.on{opacity:1;visibility:visible;transform:translate(-30%,-118%) scale(1);transition:opacity .45s ease .25s,transform .6s cubic-bezier(.2,.7,.2,1) .25s,visibility 0s}
.t3-loupe img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,181,71,.65);
  box-shadow:0 0 0 8px rgba(7,16,31,.5),0 24px 60px rgba(0,0,0,.5)}
.t3-loupe:after{content:"";position:absolute;left:50%;bottom:-16%;width:2px;height:16%;background:linear-gradient(180deg,rgba(255,181,71,.8),rgba(255,181,71,0))}

/* the quote list: thin glass column on the right, filling as the line goes by */
.t3-quote{position:absolute;z-index:4;right:max(24px,calc((100vw - 1180px)/2 - 40px));top:50%;width:230px;transform:translate(16px,-50%);
  opacity:0;visibility:hidden;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.t3-quote.on{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s}
.t3-qbox{padding:16px 16px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.t3-qhead{display:flex;align-items:center;justify-content:space-between;font:700 13px/1 "Manrope",sans-serif;color:#fff;padding-bottom:10px;border-bottom:1px solid var(--edge)}
.t3-qn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--orange);color:#fff;font-size:12px}
.t3-quote ul{list-style:none;margin:0;padding:0}
.t3-quote li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;max-height:0;opacity:0;overflow:hidden;font-size:13.5px;color:var(--ink);
  transition:max-height .45s ease,opacity .35s ease,padding .45s ease}
.t3-quote li.on{max-height:48px;opacity:1;padding:9px 0 0}
.t3-quote li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--amber);display:grid;place-items:center}
.t3-quote li i:after{content:"";width:7px;height:4px;border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);transform:rotate(-45deg) translate(1px,-1px)}
.t3-qgo{display:none;margin-top:14px;height:42px;border-radius:999px;background:var(--orange);color:#fff;font:700 13.5px/42px "DM Sans",sans-serif;text-align:center;text-decoration:none}
.t3-quote.done .t3-qgo{display:block}

/* frame nav */
.t3-nav{position:absolute;z-index:5;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;
  padding:8px 10px;border-radius:999px;background:rgba(7,16,31,.55);border:1px solid var(--edge);backdrop-filter:blur(10px)}
.t3-nav button{background:none;border:0;color:var(--ink);cursor:pointer;padding:0}
.t3-prev,.t3-next{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.t3-prev:hover,.t3-next:hover{background:rgba(255,255,255,.1)}
.t3-prev:disabled{opacity:.3;cursor:default}
.t3-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t3-dots{display:flex;gap:6px}
.t3-dots button{padding:8px 0}
.t3-dots i{display:block;width:18px;height:3px;border-radius:2px;background:rgba(234,241,250,.28);transition:width .35s ease,background .35s ease}
.t3-dots button.on i{width:34px;background:var(--amber)}
.t3-cue{position:absolute;z-index:4;right:max(24px,calc((100vw - 1180px)/2));bottom:30px;font:600 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:opacity .3s}

/* splash until the still is decoded */
.t3-loader{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:var(--navy);transition:opacity .6s ease .1s,visibility 0s .7s}
.t3-loader:after{content:"";width:46px;height:46px;border-radius:50%;border:2px solid rgba(79,155,232,.2);border-top-color:var(--amber);animation:t3spin .9s linear infinite}
.t3-loader.done{opacity:0;visibility:hidden}
@keyframes t3spin{to{transform:rotate(360deg)}}

/* film modal */
.t3-film{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(3,8,16,.86);padding:24px}
.t3-film[hidden]{display:none}
.t3-film-box{position:relative;width:min(1100px,100%)}
.t3-film-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.t3-film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t3-film-x{position:absolute;right:0;top:-46px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}

/* home header over the hero */
body.home-3d .site-header{position:absolute;left:0;right:0;background:transparent;box-shadow:none;backdrop-filter:none}
.brand-logo-ondark{display:none!important}
body.home-3d .site-header .brand-logo{display:none}
body.home-3d .site-header .brand-logo-ondark{display:block!important}
body.home-3d .site-header .main-nav a,body.home-3d .site-header .icon-link{color:#fff}
body.home-3d .site-header .icon-link svg{stroke:#fff}
body.home-3d .site-header .quote-pill{background:var(--orange,#f39200)}
body.home-3d .site-header .menu-toggle span{background:#fff}
body.home-3d .site-header .menu-toggle em{color:#fff}

/* phone: scene above, copy and tags stacked below */
@media (max-aspect-ratio:4/5){
  .t3-shade{background:linear-gradient(0deg,rgba(7,16,31,1) 0%,rgba(7,16,31,.96) 42%,rgba(7,16,31,0) 62%),linear-gradient(180deg,rgba(7,16,31,.75) 0%,rgba(7,16,31,0) 14%)}
  .t3-beat{left:20px;right:20px;width:auto;top:auto;bottom:96px;transform:translateY(12px)}
  .t3-beat.live{transform:none}
  .t3 h1{font-size:clamp(32px,9vw,42px)}
  .t3-h{font-size:clamp(28px,8vw,36px)}
  .t3-sub{font-size:15px;margin-top:12px}
  .t3-cta{margin-top:20px}
  .t3-btn{height:46px;padding:0 18px;font-size:14px}
  .t3-beat[data-f="0"] .t3-cta,.t3-beat[data-f="6"] .t3-cta{display:grid;grid-template-columns:1fr 1fr}
  .t3-beat .t3-btn{justify-content:center}
  .t3-tag{position:static;transform:none!important;display:none}
  .t3-tag.on{display:block}
  .t3-tag:before,.t3-tag:after{display:none}
  .t3-tags{inset:auto 20px auto 20px;top:calc(30% + 70px);position:absolute;display:flex;justify-content:flex-end}
  .t3-card{min-width:0;padding:10px 12px}
  .t3-loupe{left:auto!important;right:20px;top:14%!important;width:120px;transform:scale(.85)!important}
  .t3-loupe.on{transform:none!important}
  .t3-loupe:after{display:none}
  .t3-quote{left:20px;right:auto;top:84px;width:auto;transform:none!important}
  .t3-qbox{padding:8px 12px;border-radius:999px}
  .t3-qhead{border:0;padding:0;gap:10px}
  .t3-quote ul,.t3-quote.done .t3-qgo{display:none}
  .t3-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .t3-world,.t3-beat,.t3-tag,.t3-loupe,.t3-quote,.t3-quote li{transition:none!important}
  .t3-loader:after{animation:none}
}
/* robot loops (hero.js robots): sit on the still at their exact box, feathered so the edge is the still itself */
.t3-robot{position:absolute;display:block;object-fit:fill;pointer-events:none;opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
  mask-composite:intersect}
.t3-robot.on{opacity:1}
@media (prefers-reduced-motion:reduce){.t3-robot{display:none}}
