/* Technology of Austin — Door 2 + Door 3 exact Door 1 visual parity.
   Loaded last so older Door-specific atmosphere layers cannot override it. */

body.page-id-261,
body.page-id-262{
  margin:0!important;
  background:#020409!important;
  color:#f5f8fa!important;
  overflow-x:hidden!important;
}

#toa-customize-page,
#toa-plans-page,
.toa-door2-shell,
.toa-plans-shell{
  position:relative!important;
  isolation:isolate!important;
  min-height:100vh!important;
  background:
    linear-gradient(rgba(166,211,226,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(166,211,226,.022) 1px,transparent 1px),
    linear-gradient(160deg,#020409 0%,#06101a 42%,#0a1422 72%,#05080f 100%)!important;
  background-size:76px 76px,76px 76px,100% 100%!important;
  animation:toaDoorTechGridDrift 30s ease-in-out infinite alternate!important;
  color:#f5f8fa!important;
}

@keyframes toaDoorTechGridDrift{
  from{background-position:0 0,0 0,0 0}
  to{background-position:28px 18px,-18px 24px,0 0}
}

/* Remove every older atmosphere so Doors 2 + 3 have the same single moving field as Door 1. */
.toa-friendly-field,
.toa-aqua-field,
body.page-id-261::before,
body.page-id-261::after,
body.page-id-262::before,
body.page-id-262::after,
.toa-door2-shell::before,
.toa-door2-shell::after,
.toa-plans-shell::before,
.toa-plans-shell::after{
  display:none!important;
}

/* Door 1 exact moving atmosphere. */
#toa-customize-page::before,
#toa-plans-page::before{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:-20vh -22vw!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(ellipse at 14% 18%,rgba(76,137,177,.22),transparent 42%),
    radial-gradient(ellipse at 82% 20%,rgba(116,103,162,.16),transparent 44%),
    radial-gradient(ellipse at 52% 78%,rgba(167,211,226,.10),transparent 46%),
    radial-gradient(ellipse at 70% 64%,rgba(211,193,157,.045),transparent 34%)!important;
  filter:blur(72px)!important;
  opacity:.95!important;
  animation:toaDoorOneExactDrift 24s ease-in-out infinite alternate!important;
  will-change:transform!important;
}

@media(pointer:fine){
  #toa-customize-page::after,
  #toa-plans-page::after{
    content:""!important;
    display:block!important;
    position:fixed!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    background:radial-gradient(circle 300px at var(--toa-pointer-x,50%) var(--toa-pointer-y,42%),rgba(171,223,238,.105),rgba(112,151,181,.045) 38%,transparent 72%)!important;
    mix-blend-mode:screen!important;
    opacity:.78!important;
  }
}
@media(pointer:coarse){
  /* Match Door 1's mobile moving tech-grid layer; touch light is handled by the shared effects system. */
  #toa-customize-page::after,
  #toa-plans-page::after{
    content:""!important;
    display:block!important;
    position:fixed!important;
    inset:-12vh -8vw!important;
    z-index:0!important;
    pointer-events:none!important;
    opacity:.32!important;
    background-image:
      linear-gradient(rgba(166,211,226,.028) 1px,transparent 1px),
      linear-gradient(90deg,rgba(166,211,226,.028) 1px,transparent 1px),
      linear-gradient(120deg,transparent 0 46%,rgba(192,224,234,.035) 50%,transparent 54%)!important;
    background-size:76px 76px,76px 76px,240px 240px!important;
    mask-image:radial-gradient(ellipse at 66% 42%,#000 0 20%,rgba(0,0,0,.78) 40%,transparent 74%)!important;
    -webkit-mask-image:radial-gradient(ellipse at 66% 42%,#000 0 20%,rgba(0,0,0,.78) 40%,transparent 74%)!important;
    animation:toaDoorMobileTechGrid 30s ease-in-out infinite alternate!important;
    will-change:transform,background-position!important;
  }
}

@keyframes toaDoorMobileTechGrid{
  from{transform:translate3d(-1%,1%,0) rotate(.15deg);background-position:0 0,0 0,0 0}
  to{transform:translate3d(2%,-1.5%,0) rotate(-.15deg);background-position:28px 18px,-18px 24px,34px -20px}
}

#toa-customize-page > *,
#toa-plans-page > *{
  position:relative!important;
  z-index:1!important;
}

@keyframes toaDoorOneExactDrift{
  from{transform:translate3d(-1%,1%,0) scale(1.03)}
  to{transform:translate3d(3%,-2%,0) scale(1.08)}
}

/* Same quiet top-chrome language as Door 1 while preserving Door navigation/progress. */
#toa-customize-page .toa-door-bar,
#toa-plans-page .toa-door-bar{
  min-height:68px!important;
  padding:12px max(18px,4vw) 12px max(76px,calc(4vw + 56px))!important;
  background:linear-gradient(180deg,rgba(3,8,14,.54),rgba(3,8,14,.30))!important;
  border:0!important;
  border-bottom:1px solid rgba(205,230,238,.08)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(18px) saturate(92%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(92%)!important;
}

#toa-customize-page .toa-door-bar::before,
#toa-plans-page .toa-door-bar::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:max(18px,4vw)!important;
  top:50%!important;
  width:46px!important;
  height:42px!important;
  transform:translateY(-50%)!important;
  background:url("https://technologyofaustin.com/wp-content/uploads/2026/09/technology-of-austin-transparent-mark.png") center/contain no-repeat!important;
  filter:brightness(1.08) saturate(.88) contrast(1.04) drop-shadow(0 0 13px rgba(157,199,215,.16))!important;
  pointer-events:none!important;
}

#toa-customize-page .toa-door-bar::after,
#toa-plans-page .toa-door-bar::after{
  content:""!important;
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  bottom:-1px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(157,199,215,.18),rgba(229,239,242,.40),rgba(183,187,255,.18),transparent)!important;
  background-size:220% 100%!important;
  animation:toaDoorOneLineSweep 12s linear infinite!important;
  pointer-events:none!important;
}

@keyframes toaDoorOneLineSweep{
  from{background-position:0% 50%}
  to{background-position:220% 50%}
}

/* Same restrained glass and pearl interaction response used on Door 1. */
#toa-customize-page .toa-example-switcher,
#toa-customize-page .toa-control-group,
#toa-customize-page .toa-build-recap,
#toa-plans-page .toa-plan,
#toa-plans-page .toa-summary,
#toa-plans-page #toa-checkout-form,
#toa-plans-page .toa-after-order{
  border:1px solid rgba(209,233,240,.12)!important;
  background:linear-gradient(180deg,rgba(10,22,34,.92),rgba(4,11,18,.96))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#toa-customize-page .toa-control-group,
#toa-plans-page .toa-plan,
#toa-plans-page .toa-summary,
#toa-plans-page #toa-checkout-form{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease!important;
}

#toa-customize-page .toa-control-group:hover,
#toa-plans-page .toa-plan:hover,
#toa-plans-page .toa-summary:hover,
#toa-plans-page #toa-checkout-form:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(209,233,240,.18)!important;
  box-shadow:0 34px 98px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

#toa-customize-page .toa-primary-cta,
#toa-customize-page .toa-next-cta,
#toa-plans-page .toa-plan.selected button,
#toa-plans-page #toa-checkout-form button,
#toa-customize-page .preview-primary{
  border:1px solid rgba(255,255,255,.52)!important;
  background:linear-gradient(112deg,#edf6f8 0%,#c7dee5 48%,#a9c4d0 100%)!important;
  color:#071018!important;
  box-shadow:0 16px 38px rgba(0,0,0,.26)!important;
}

/* Door 1-style alive-but-calm UI motion. */
@media(prefers-reduced-motion:no-preference){
  #toa-customize-page .toa-custom-hero,
  #toa-plans-page .toa-plans-hero{
    animation:toaDoorOneEnter .58s cubic-bezier(.2,.8,.2,1) both!important;
  }
  #toa-customize-page .toa-device-frame{
    animation:toaDoorOneFloat 9s ease-in-out infinite!important;
  }
  #toa-customize-page .toa-control-group,
  #toa-plans-page .toa-plan{
    animation:toaDoorOneEnter .52s cubic-bezier(.2,.8,.2,1) both;
  }
  #toa-customize-page .toa-control-group:nth-child(2),
  #toa-plans-page .toa-plan:nth-child(2){animation-delay:.06s}
  #toa-customize-page .toa-control-group:nth-child(3),
  #toa-plans-page .toa-plan:nth-child(3){animation-delay:.12s}
}

@keyframes toaDoorOneEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes toaDoorOneFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:780px){
  /* Mobile Doors 2 + 3: expose the exact Door 1 atmosphere instead of covering it with an opaque inner shell. */
  #toa-customize-page,
  #toa-plans-page{
    background:linear-gradient(160deg,#020409 0%,#06101a 42%,#0a1422 72%,#05080f 100%)!important;
    background-size:100% 100%!important;
    animation:none!important;
  }
  .toa-door2-shell,
  .toa-plans-shell{
    background:transparent!important;
    background-image:none!important;
    animation:none!important;
  }
  #toa-customize-page::before,
  #toa-plans-page::before{
    inset:-20vh -22vw!important;
    background:
      radial-gradient(ellipse at 14% 18%,rgba(76,137,177,.22),transparent 42%),
      radial-gradient(ellipse at 82% 20%,rgba(116,103,162,.16),transparent 44%),
      radial-gradient(ellipse at 52% 78%,rgba(167,211,226,.10),transparent 46%),
      radial-gradient(ellipse at 70% 64%,rgba(211,193,157,.045),transparent 34%)!important;
    filter:blur(72px)!important;
    opacity:.95!important;
    animation:toaDoorOneExactDrift 24s ease-in-out infinite alternate!important;
  }
  #toa-customize-page .toa-door-bar,
  #toa-plans-page .toa-door-bar{
    position:relative!important;
    top:auto!important;
    padding:10px 12px 10px 60px!important;
  }
  #toa-customize-page .toa-door-bar::before,
  #toa-plans-page .toa-door-bar::before{
    left:12px!important;
    width:38px!important;
    height:34px!important;
  }
  #toa-customize-page .toa-control-group:hover,
  #toa-plans-page .toa-plan:hover,
  #toa-plans-page .toa-summary:hover,
  #toa-plans-page #toa-checkout-form:hover{
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #toa-customize-page,
  #toa-plans-page,
  #toa-customize-page::before,
  #toa-plans-page::before,
  #toa-customize-page::after,
  #toa-plans-page::after,
  #toa-customize-page .toa-door-bar::after,
  #toa-plans-page .toa-door-bar::after,
  #toa-customize-page .toa-custom-hero,
  #toa-plans-page .toa-plans-hero,
  #toa-customize-page .toa-device-frame,
  #toa-customize-page .toa-control-group,
  #toa-plans-page .toa-plan{
    animation:none!important;
  }
}