/* Technology of Austin — Logo Kinetic Brand Layer
   Blue A mark translated into a premium cobalt/cyan motion system.
   Loaded last so it refines, rather than replaces, the stable One Tap UI. */

:root{
  --toa-brand-ink:#020612;
  --toa-brand-deep:#051329;
  --toa-brand-blue:#0b72ff;
  --toa-brand-blue-2:#145dff;
  --toa-brand-cyan:#20c7ff;
  --toa-brand-sky:#64cfff;
  --toa-brand-ice:#c9efff;
  --toa-brand-text:#f6fbff;
  --toa-brand-muted:#91abc0;
  --toa-brand-line:rgba(100,207,255,.15);
  --toa-brand-line-strong:rgba(100,207,255,.34);
  --toa-pointer-x:50%;
  --toa-pointer-y:34%;
  --toa-tilt-x:0deg;
  --toa-tilt-y:0deg;
}

/* ---------- Brand atmosphere ---------- */
body.toa-one-tap-page,
body.page-id-261,
body.page-id-262{
  background:#020612!important;
  color:var(--toa-brand-text)!important;
}

body.toa-one-tap-page::before,
#toa-customize-page::before,
#toa-plans-page::before{
  background:
    radial-gradient(ellipse at calc(16% + var(--toa-motion-x)) calc(18% + var(--toa-motion-y)),rgba(11,114,255,.28) 0%,rgba(11,114,255,.10) 26%,transparent 54%),
    radial-gradient(ellipse at calc(82% - var(--toa-motion-x)) calc(28% - var(--toa-motion-y)),rgba(32,199,255,.20) 0%,rgba(32,199,255,.07) 28%,transparent 57%),
    radial-gradient(ellipse at 58% 88%,rgba(100,207,255,.13) 0%,rgba(11,114,255,.04) 34%,transparent 62%)!important;
  filter:blur(54px) saturate(1.08)!important;
  opacity:.88!important;
  animation:toaBrandAurora 17s ease-in-out infinite alternate!important;
}

body.toa-one-tap-page::after,
#toa-customize-page::after,
#toa-plans-page::after{
  background:
    linear-gradient(115deg,transparent 0 24%,rgba(100,207,255,.06) 37%,transparent 49% 100%),
    repeating-linear-gradient(118deg,transparent 0 44px,rgba(74,177,255,.035) 45px,transparent 46px 92px),
    repeating-radial-gradient(ellipse at 52% 30%,rgba(173,231,255,.055) 0 1px,transparent 2px 32px)!important;
  opacity:.27!important;
  filter:blur(7px)!important;
  mix-blend-mode:screen!important;
  animation:toaBrandInterfaceFlow 20s linear infinite!important;
}

@keyframes toaBrandAurora{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.02) rotate(-1deg)}
  50%{transform:translate3d(1.5%,1%,0) scale(1.10) rotate(.5deg)}
  100%{transform:translate3d(3%,-1.5%,0) scale(1.06) rotate(1.2deg)}
}
@keyframes toaBrandInterfaceFlow{
  0%{background-position:-180px 0,0 0,0 0;transform:translate3d(calc(var(--toa-motion-x-inverse) * .45),0,0)}
  100%{background-position:520px 0,188px -76px,0 0;transform:translate3d(calc(var(--toa-motion-x) * .45),12px,0)}
}

/* Pointer-light follows the visitor without adding DOM nodes. */
#toa-business-os::before,
.toa-door2-shell::before,
.toa-plans-shell::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:radial-gradient(circle 360px at var(--toa-pointer-x) var(--toa-pointer-y),rgba(32,199,255,.085),rgba(11,114,255,.035) 37%,transparent 72%)!important;
  opacity:.9!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}

/* ---------- Header + navigation ---------- */
body.toa-one-tap-page #toa-header,
#toa-customize-page .toa-door-bar,
#toa-plans-page .toa-door-bar{
  background:linear-gradient(180deg,rgba(2,7,17,.91),rgba(3,10,23,.78))!important;
  border-bottom:1px solid rgba(78,174,255,.15)!important;
  box-shadow:0 16px 50px rgba(0,0,0,.28),0 1px 0 rgba(72,179,255,.04)!important;
}
body.toa-one-tap-page #toa-header::after,
#toa-customize-page .toa-door-bar::after,
#toa-plans-page .toa-door-bar::after{
  height:1px!important;
  left:5%!important;
  right:5%!important;
  background:linear-gradient(90deg,transparent 0%,rgba(11,114,255,.10) 15%,#0b72ff 38%,#20c7ff 52%,#64cfff 63%,rgba(11,114,255,.14) 84%,transparent 100%)!important;
  background-size:240% 100%!important;
  box-shadow:0 0 14px rgba(32,199,255,.22)!important;
  animation:toaBrandRail 7.5s linear infinite!important;
}
@keyframes toaBrandRail{0%{background-position:-120% 50%}100%{background-position:120% 50%}}

body.toa-one-tap-page #toa-nav a[data-tool="assessment"],
.toa-primary-cta,.toa-next-cta,.toa-plan.selected button,#toa-checkout-form button,.ot-btn.ot-primary,.ot-primary{
  border:1px solid rgba(140,221,255,.42)!important;
  background:linear-gradient(125deg,#0757d8 0%,#0b72ff 38%,#16a6ff 72%,#20c7ff 100%)!important;
  color:#fff!important;
  box-shadow:0 14px 38px rgba(0,74,194,.26),0 0 30px rgba(32,199,255,.10),inset 0 1px 0 rgba(255,255,255,.28)!important;
  text-shadow:0 1px 2px rgba(0,30,80,.20)!important;
}
body.toa-one-tap-page #toa-nav a[data-tool="assessment"]:hover,
.toa-primary-cta:hover,.toa-next-cta:hover,.toa-plan.selected button:hover,#toa-checkout-form button:hover,.ot-btn.ot-primary:hover,.ot-primary:hover{
  background:linear-gradient(125deg,#0a62e8 0%,#0b7cff 40%,#21b5ff 76%,#55d6ff 100%)!important;
  box-shadow:0 19px 48px rgba(0,74,194,.31),0 0 38px rgba(32,199,255,.16),inset 0 1px 0 rgba(255,255,255,.32)!important;
  transform:translateY(-2px)!important;
}

/* Branded shimmer through primary actions. */
.toa-primary-cta::after,.toa-next-cta::before,.toa-plan.selected button::before,#toa-checkout-form button::before,.ot-btn.ot-primary::after{
  background:linear-gradient(108deg,transparent 14%,rgba(255,255,255,.08) 33%,rgba(194,238,255,.52) 48%,rgba(255,255,255,.10) 61%,transparent 80%)!important;
  animation:toaBrandSheen 4.8s ease-in-out infinite!important;
}
@keyframes toaBrandSheen{0%,56%{transform:translateX(-155%)}82%,100%{transform:translateX(155%)}}

/* ---------- Logo-aligned accents ---------- */
.ot-kicker,.toa-kicker,.toa-preview-topline,.toa-example-switcher>span,.toa-plan-label,.toa-summary>small,.toa-after-order>span,
.toa-action-subhead span,.toa-action-order-head span{
  color:#6fd8ff!important;
}
.ot-title em,.toa-custom-hero h1 em,.toa-plans-hero h1 em,.toa-checkout-head h2 em{
  color:#8edfff!important;
  text-shadow:0 0 30px rgba(32,199,255,.14)!important;
}
body.toa-one-tap-page #toa-header [data-tool="brand"]>div>div:last-child,
body.toa-one-tap-page footer a,
.toa-existing-url a{
  color:#64cfff!important;
}

/* ---------- Premium moving panels ---------- */
.toa-editor>.toa-example-switcher,.toa-control-group,.toa-existing-url,
.toa-plan,.toa-build-recap,.toa-summary,#toa-checkout-form,.toa-after-order,
.ot-previewtile,.ot-business,.ot-section,.ot-app-end,.ot-values>div,.ot-editor{
  position:relative!important;
  overflow:hidden;
  background:
    radial-gradient(circle 240px at var(--toa-pointer-x) var(--toa-pointer-y),rgba(32,199,255,.045),transparent 66%),
    linear-gradient(145deg,rgba(7,20,39,.82),rgba(3,10,22,.87))!important;
  border-color:rgba(74,177,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(180,232,255,.045),0 24px 68px rgba(0,0,0,.28)!important;
}
.toa-editor>.toa-example-switcher::after,.toa-control-group::after,.toa-plan::after,
.ot-previewtile::after,.ot-section::after,.ot-values>div::after{
  content:"";
  position:absolute;
  pointer-events:none;
  left:-35%;right:-35%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,114,255,.05),rgba(32,199,255,.44),rgba(100,207,255,.10),transparent);
  background-size:220% 100%;
  opacity:.64;
  animation:toaPanelTrace 10s linear infinite;
}
@keyframes toaPanelTrace{0%{background-position:-140% 0}100%{background-position:140% 0}}

/* ---------- Phone/device motion ---------- */
.toa-device-frame,.toa-phone,.ot-phone{
  transform:perspective(1100px) rotateX(var(--toa-tilt-x)) rotateY(var(--toa-tilt-y)) translateZ(0)!important;
  transform-origin:center center!important;
  transition:transform .16s ease-out,box-shadow .3s ease!important;
  border-color:rgba(89,181,255,.22)!important;
  background:linear-gradient(145deg,#5e6e7b 0%,#172333 8%,#020611 24%,#071221 72%,#173151 91%,#4b87b2 100%)!important;
  box-shadow:0 42px 110px rgba(0,0,0,.62),0 0 0 1px rgba(100,207,255,.035),0 0 72px rgba(11,114,255,.09)!important;
}
.toa-device-frame::before,.toa-phone::before,.ot-phone::before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,rgba(100,207,255,.54),rgba(11,114,255,.03) 28%,transparent 48%,rgba(32,199,255,.18) 78%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
}
.toa-device-screen,.toa-phone-screen,.ot-screen{
  background:radial-gradient(circle at 86% 0%,rgba(11,114,255,.08),transparent 30%),#030711!important;
}

/* Phone/customer cards feel more responsive. */
.preview-action,.preview-review-card,.preview-feature-card,.preview-wifi-card,.preview-info-card,.preview-social-card,
.ot-previewtile{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease,box-shadow .22s ease!important;
}
.preview-action:hover,.ot-previewtile:hover{
  transform:translateY(-2px) scale(1.008)!important;
  border-color:rgba(100,207,255,.28)!important;
  box-shadow:0 14px 34px rgba(0,42,110,.16)!important;
}

/* ---------- Door 2 interaction motion ---------- */
.toa-door-progress .active{
  background:linear-gradient(90deg,#0b72ff,#20c7ff,#64cfff,#0b72ff)!important;
  background-size:240% 100%!important;
  box-shadow:0 0 14px rgba(32,199,255,.26)!important;
  animation:toaProgressCurrent 3.8s linear infinite!important;
}
@keyframes toaProgressCurrent{to{background-position:240% 0}}

.toa-choice-grid-featured button,.toa-choice-grid-more button,.toa-primary-grid button,.toa-example-switcher button{
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.toa-choice-grid-featured button:hover,.toa-choice-grid-more button:hover,.toa-primary-grid button:hover,.toa-example-switcher button:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(100,207,255,.28)!important;
  box-shadow:0 10px 26px rgba(0,64,160,.10)!important;
}
.toa-choice-grid-featured button.active,.toa-choice-grid-more button.active,.toa-primary-grid button.active,.toa-example-switcher button.active{
  background:linear-gradient(135deg,rgba(11,114,255,.25),rgba(32,199,255,.10))!important;
  border-color:rgba(100,207,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 22px rgba(11,114,255,.10)!important;
}
.toa-action-order-item{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .24s ease!important;
}
.toa-action-order-item:hover{
  transform:translateX(3px)!important;
  border-color:rgba(100,207,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 32px rgba(0,55,145,.10)!important;
}
#toa-customize-page .toa-order-tool:hover:not(:disabled){
  background:rgba(11,114,255,.14)!important;
  color:#bcecff!important;
}

/* ---------- Door 3 plan motion ---------- */
.toa-plan{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .25s ease!important;
}
.toa-plan:hover{
  transform:translateY(-6px) scale(1.008)!important;
  border-color:rgba(100,207,255,.27)!important;
  box-shadow:0 32px 84px rgba(0,0,0,.34),0 0 34px rgba(11,114,255,.08),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.toa-plan.selected{
  border-color:rgba(100,207,255,.45)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.36),0 0 48px rgba(11,114,255,.12),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* ---------- Reveal choreography: visibly more alive ---------- */
.toa-kinetic-ready .toa-lux-reveal{
  opacity:0;
  filter:blur(5px);
  transform:translateY(24px) scale(.985);
  transition:opacity .82s cubic-bezier(.2,.75,.2,1),transform .82s cubic-bezier(.2,.75,.2,1),filter .82s ease!important;
}
.toa-kinetic-ready .toa-lux-reveal.toa-lux-visible{
  opacity:1;
  filter:none;
  transform:none;
}

/* Soft scroll-current on major sections. */
.toa-brand-section-active{
  --toa-section-light:1;
}
.toa-brand-section-active::before{
  opacity:1!important;
}

/* ---------- Branded micro-motion ---------- */
body.toa-one-tap-page #toa-header [data-tool="brand"] img{
  filter:drop-shadow(0 0 10px rgba(32,199,255,.16)) drop-shadow(0 0 22px rgba(11,114,255,.08));
  animation:toaLogoBreathe 5.8s ease-in-out infinite;
}
@keyframes toaLogoBreathe{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(32,199,255,.12)) drop-shadow(0 0 18px rgba(11,114,255,.06))}
  50%{transform:translateY(-1px) scale(1.025);filter:drop-shadow(0 0 14px rgba(32,199,255,.24)) drop-shadow(0 0 30px rgba(11,114,255,.11))}
}

.ot-hero aside,
#toa-customize-page .toa-preview-wrap{
  animation:toaDeviceFloat 8s ease-in-out infinite;
}
@keyframes toaDeviceFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

.toa-plan.selected{
  animation:toaSelectedPlanCurrent 5.5s ease-in-out infinite;
}
@keyframes toaSelectedPlanCurrent{
  0%,100%{box-shadow:0 34px 90px rgba(0,0,0,.36),0 0 38px rgba(11,114,255,.09),inset 0 1px 0 rgba(255,255,255,.05)}
  50%{box-shadow:0 34px 90px rgba(0,0,0,.36),0 0 58px rgba(32,199,255,.15),inset 0 1px 0 rgba(255,255,255,.06)}
}

body.toa-one-tap-page #toa-nav a[data-tool]:not([data-tool="assessment"]){
  position:relative;
  overflow:hidden;
}
body.toa-one-tap-page #toa-nav a[data-tool]:not([data-tool="assessment"])::after{
  content:"";
  position:absolute;
  left:14%;right:14%;bottom:4px;height:1px;
  background:linear-gradient(90deg,transparent,#0b72ff,#20c7ff,transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
  opacity:.72;
}
body.toa-one-tap-page #toa-nav a[data-tool]:not([data-tool="assessment"]):hover::after{transform:scaleX(1)}

.toa-control-group.open>.toa-group-head i{
  color:#64cfff!important;
  text-shadow:0 0 14px rgba(32,199,255,.24);
  transition:transform .24s ease,color .24s ease;
}
.toa-control-group:not(.open)>.toa-group-head i{transition:transform .24s ease,color .24s ease}
.toa-control-group.open>.toa-group-head i{transform:rotate(180deg)}

@media(max-width:780px){
  body.toa-one-tap-page::before,#toa-customize-page::before,#toa-plans-page::before{opacity:.78!important;filter:blur(48px) saturate(1.02)!important}
  body.toa-one-tap-page::after,#toa-customize-page::after,#toa-plans-page::after{opacity:.18!important}
  #toa-business-os::before,.toa-door2-shell::before,.toa-plans-shell::before{background:radial-gradient(circle 250px at 64% 18%,rgba(32,199,255,.075),rgba(11,114,255,.025) 43%,transparent 73%)!important}
  .toa-device-frame,.toa-phone,.ot-phone{transform:none!important;transition:none!important}
  .toa-plan:hover{transform:translateY(-2px)!important}
  .toa-action-order-item:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  body.toa-one-tap-page::before,body.toa-one-tap-page::after,
  #toa-customize-page::before,#toa-customize-page::after,#toa-plans-page::before,#toa-plans-page::after,
  body.toa-one-tap-page #toa-header::after,#toa-customize-page .toa-door-bar::after,#toa-plans-page .toa-door-bar::after,
  .toa-primary-cta::after,.toa-next-cta::before,.toa-plan.selected button::before,#toa-checkout-form button::before,.ot-btn.ot-primary::after,
  .toa-editor>.toa-example-switcher::after,.toa-control-group::after,.toa-plan::after,.ot-previewtile::after,.ot-section::after,.ot-values>div::after,
  .toa-door-progress .active,body.toa-one-tap-page #toa-header [data-tool="brand"] img,.ot-hero aside,#toa-customize-page .toa-preview-wrap,.toa-plan.selected{
    animation:none!important;
  }
  .toa-device-frame,.toa-phone,.ot-phone{transform:none!important;transition:none!important}
  .toa-kinetic-ready .toa-lux-reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
}