/* Technology of Austin — attention guidance layer.
   Motion is used to direct the eye toward value, proof-of-use, and the next action.
   It never delays content or blocks interaction. */

/* Hero review example: concrete product demonstration, not testimonial proof. */
.toa-review-example{
  position:relative;
  margin:18px 0 20px;
  max-width:520px;
  overflow:hidden;
  border:1px solid rgba(151,222,255,.25);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,45,73,.90),rgba(8,27,45,.94));
  box-shadow:0 16px 44px rgba(0,14,28,.18),inset 0 1px 0 rgba(255,255,255,.055);
  transform:translateZ(0);
}
.toa-review-example::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -42%;
  width:34%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(143,232,255,.11),transparent);
  transform:skewX(-14deg);
  animation:toaReviewSweep 6.8s ease-in-out infinite;
}
.toa-review-example-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid rgba(151,222,255,.12);
}
.toa-review-example-top span{
  color:#8fe8ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
.toa-review-example-top small{
  color:#8eaabc;
  font-size:8px;
  font-weight:700;
}
.toa-review-example-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
}
.toa-review-example-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(143,232,255,.30);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(11,114,255,.22),rgba(53,207,255,.10));
  color:#f7fcff;
  font-family:Georgia,'Times New Roman',serif;
  font-size:21px;
}
.toa-review-example-copy{min-width:0}
.toa-review-example-copy strong{
  display:block;
  color:#f7fcff;
  font-size:12px;
  line-height:1.2;
}
.toa-review-example-copy span{
  display:block;
  margin-top:4px;
  color:#a9c3d5;
  font-size:9px;
}
.toa-review-example-rating{
  white-space:nowrap;
  color:#f5c95c;
  font-size:17px;
  letter-spacing:.04em;
  text-shadow:0 0 14px rgba(245,201,92,.14);
  animation:toaStarsSettle 4.8s ease-in-out infinite;
}
.toa-review-example-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 14px 14px;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(151,222,255,.20);
  border-radius:13px;
  background:rgba(7,25,42,.78);
}
.toa-review-example-action span{
  color:#9db9ca;
  font-size:8px;
  font-weight:800;
}
.toa-review-example-action b{
  color:#dff8ff;
  font-size:9px;
  font-weight:900;
}

/* Visual hierarchy: movement belongs around the next action, not everywhere. */
.toa-primary-cta,.toa-next-cta,#toa-checkout-form button,.toa-plan.selected button{
  position:relative;
  isolation:isolate;
}
.toa-primary-cta::after,.toa-next-cta::after,#toa-checkout-form button::after,.toa-plan.selected button::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:inherit;
  border:1px solid rgba(143,232,255,.18);
  opacity:0;
  transform:scale(.98);
  pointer-events:none;
  animation:toaDecisionHalo 5.4s ease-out infinite;
}

/* Value cards get a tiny lift only while they are near the buyer's reading focus. */
.toa-attention-target{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,filter .28s ease!important;
}
.toa-attention-target.toa-attention-active{
  border-color:rgba(143,232,255,.32)!important;
  box-shadow:0 20px 58px rgba(0,22,44,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.toa-attention-target.toa-attention-active .toa-eyebrow,
.toa-attention-target.toa-attention-active .toa-kicker,
.toa-attention-target.toa-attention-active .toa-plan-label{
  color:#baf4ff!important;
}

/* Door 2: bring attention to the currently open decision instead of animating every panel. */
#toa-customize-page .toa-control-group.open{
  transform:translateY(-1px);
  box-shadow:0 20px 58px rgba(0,24,48,.22),0 0 0 1px rgba(53,207,255,.07),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#toa-customize-page .toa-control-group.open .toa-group-head b{
  box-shadow:0 0 0 4px rgba(53,207,255,.06),0 0 18px rgba(53,207,255,.10);
}

/* Door 3: selected plan remains the visual anchor. */
#toa-plans-page .toa-plan.selected{
  transform:translateY(-2px);
}
#toa-plans-page .toa-plan.selected .toa-plan-label{
  animation:toaLabelBreath 4.2s ease-in-out infinite;
}

@keyframes toaReviewSweep{
  0%,58%{left:-42%;opacity:0}
  66%{opacity:1}
  82%{left:118%;opacity:.7}
  100%{left:118%;opacity:0}
}
@keyframes toaStarsSettle{
  0%,72%,100%{transform:scale(1);filter:brightness(1)}
  78%{transform:scale(1.035);filter:brightness(1.12)}
  86%{transform:scale(1);filter:brightness(1)}
}
@keyframes toaDecisionHalo{
  0%,68%{opacity:0;transform:scale(.985)}
  76%{opacity:.55}
  90%{opacity:0;transform:scale(1.055)}
  100%{opacity:0;transform:scale(1.055)}
}
@keyframes toaLabelBreath{
  0%,100%{text-shadow:0 0 0 rgba(53,207,255,0)}
  50%{text-shadow:0 0 16px rgba(53,207,255,.18)}
}

@media(max-width:780px){
  .toa-review-example{max-width:none;margin-top:16px}
  .toa-review-example-row{grid-template-columns:auto minmax(0,1fr)}
  .toa-review-example-rating{grid-column:2;margin-top:-3px;font-size:16px}
  .toa-review-example-action{min-height:44px}
  .toa-primary-cta::after,.toa-next-cta::after,#toa-checkout-form button::after,.toa-plan.selected button::after{
    animation-duration:6.2s;
  }
}

@media(prefers-reduced-motion:reduce){
  .toa-review-example::before,.toa-review-example-rating,
  .toa-primary-cta::after,.toa-next-cta::after,#toa-checkout-form button::after,.toa-plan.selected button::after,
  #toa-plans-page .toa-plan.selected .toa-plan-label{
    animation:none!important;
  }
  .toa-attention-target{transition:none!important}
}