/* Phones R Us v2 motion layer — CSS only, no library.
   Rules: subtle, purposeful, 200–600ms, ease-out; honours prefers-reduced-motion.
   Nothing here changes layout, prices or content. */

:root{--ease-out:cubic-bezier(.22,.61,.36,1);--dur-fast:180ms;--dur:320ms;--dur-slow:560ms}

/* 1. Scroll-reveal: elements get .reveal; JS adds .is-in when they enter the viewport. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.reveal-stagger.is-in>*{opacity:1;transform:none}
.reveal-stagger.is-in>*:nth-child(1){transition-delay:0ms}
.reveal-stagger.is-in>*:nth-child(2){transition-delay:35ms}
.reveal-stagger.is-in>*:nth-child(3){transition-delay:70ms}
.reveal-stagger.is-in>*:nth-child(4){transition-delay:105ms}
.reveal-stagger.is-in>*:nth-child(5){transition-delay:140ms}
.reveal-stagger.is-in>*:nth-child(6){transition-delay:175ms}
.reveal-stagger.is-in>*:nth-child(7){transition-delay:210ms}
.reveal-stagger.is-in>*:nth-child(8){transition-delay:245ms}

/* 2. Service tiles: lift the icon chip, slide the arrow. Hairline darkens, no shadow. */
.service-tile{transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.service-tile:hover,.service-tile:focus-within{border-color:var(--ink)}
.service-tile .icon-chip{transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.service-tile:hover .icon-chip,.service-tile:focus-within .icon-chip{transform:translateY(-2px);background:var(--coral);}
.service-tile:hover .icon-chip svg,.service-tile:focus-within .icon-chip svg{stroke:#fff}
.service-tile .tile-arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.service-tile:hover .tile-arrow,.service-tile:focus-within .tile-arrow{transform:translateX(4px)}

/* 3. Buttons: press feedback and arrow nudge. */
.button,.wp-block-button__link{transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.button:active,.wp-block-button__link:active{transform:translateY(1px)}

/* 4. Hero illustration: signal arcs pulse once on load, then rest. Applied to inline SVG paths with class .signal-arc. */
@keyframes arc-in{0%{opacity:0;transform:scale(.92)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.signal-arc{transform-origin:center;animation:arc-in var(--dur-slow) var(--ease-out) both}
.signal-arc:nth-of-type(2){animation-delay:120ms}
.signal-arc:nth-of-type(3){animation-delay:240ms}

/* 5. Coral eyebrow dash draws in. */
.eyebrow::before{transform-origin:left center;animation:dash-in var(--dur) var(--ease-out) both}
@keyframes dash-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 6. Illustration figures settle once on reveal (rise 10px, 700ms) — no infinite loops, nothing keeps moving. */
@keyframes settle-y{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.illo-float{animation:settle-y var(--dur-slow) var(--ease-out) both}

/* 7. Mobile menu sheet slides in; backdrop fades. */
.menu-sheet{transform:translateX(100%);transition:transform var(--dur) var(--ease-out)}
.menu-sheet[data-open="true"]{transform:none}
.menu-backdrop{opacity:0;transition:opacity var(--dur) var(--ease-out)}
.menu-backdrop[data-open="true"]{opacity:1}

/* 8. Sticky tab bar underline slides between tabs. */
.tab-bar a{position:relative}
.tab-bar a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-out)}
.tab-bar a[aria-current="true"]::after,.tab-bar a:hover::after{transform:scaleX(1)}

/* 9. Accessibility: switch everything off for users who ask. */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1;transform:none;transition:none}
  .signal-arc,.eyebrow::before,.illo-float{animation:none}
  .service-tile,.service-tile .icon-chip,.service-tile .tile-arrow,.button,.menu-sheet,.menu-backdrop,.tab-bar a::after{transition:none}
}