/* Motion is an enhancement: all content stays visible without JavaScript. */
:root { --ease-out: cubic-bezier(.2,.75,.2,1); }
.hero-line { display:block; }
.blue-period { transform-origin:50% 46%; }
.brand-star { display:inline-block; }
.scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:20; background:var(--blue); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.project-visual { transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .55s var(--ease-out),box-shadow .55s; }
.project-visual::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#ffffff65,transparent 65%); opacity:0; pointer-events:none; transition:opacity .4s; }
.project-visual .mini-ad,.project-visual .mini-report,.project-visual .mini-campaigns { transition:transform .65s var(--ease-out); }
.project-visual.is-pointed { transition:transform .12s linear,box-shadow .4s; box-shadow:0 18px 35px -24px #27341d65; }
.project-visual.is-pointed::after { opacity:1; }
.project-visual.is-pointed .mini-ad:first-child { transform:translate(-6px,-5px) rotate(-13deg); }
.project-visual.is-pointed .mini-ad.second { transform:translate(7px,-9px) rotate(13deg); }
.project-visual.is-pointed .mini-report { transform:translateY(-7px) rotate(0deg); }
.project-visual.is-pointed .mini-campaigns { transform:translateY(-7px) rotate(-1deg); }
.button { position:relative; transform:translate(var(--magnet-x,0px),var(--magnet-y,0px)); transition:transform .4s var(--ease-out),background .2s,box-shadow .3s; }
.button span,.text-button span,.nav-cta span { display:inline-block; transition:transform .35s var(--ease-out); }
.button:active { scale:.98; }
.contact { position:relative; isolation:isolate; overflow:hidden; }
.contact::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(460px circle at var(--light-x,50%) var(--light-y,50%),#7488ff80,transparent 75%); transition:opacity .6s; pointer-events:none; }
.contact.is-pointed::before { opacity:1; }
.contact-top>span:last-child,.brand-star { transition:transform .8s var(--ease-out); }
.metric strong { font-variant-numeric:tabular-nums; }
.bar-chart span,.mini-bars i { transform-origin:bottom; }
.flow-node { transition:background .4s,border-color .4s,box-shadow .4s; }
.flow-node.is-running { background:#ecedff; border-color:#b1baff; box-shadow:0 0 0 3px #253feb08; }
.flow-node.is-complete { background:#f0f5e8; border-color:#b5c69c; }
.flow-node.is-complete>span { color:#668149; }
.flow-arrow.is-complete { color:var(--blue); }
.flow-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; }
.flow-play { border:1px solid #d9dfd0; border-radius:4px; background:#f7f8f2; padding:8px 10px; font-size:9px; color:var(--ink); white-space:nowrap; }
.flow-play:hover { border-color:var(--blue); color:var(--blue); }
.flow-play:disabled { cursor:default; opacity:.6; }
.flow-status { font-size:9px; color:#667656; text-align:right; }
.chart-card { position:relative; }
.bar-chart span { transition:filter .2s; }
dialog[open] { animation:dialog-in .35s var(--ease-out) both; }
dialog[open]::backdrop { animation:backdrop-in .3s ease both; }
details[open] p { animation:detail-in .3s var(--ease-out) both; }
summary span { transition:transform .3s var(--ease-out); }
@keyframes dialog-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes detail-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@media(hover:hover) and (pointer:fine) {
  .button:hover { transform:translate(var(--magnet-x,0px),calc(var(--magnet-y,0px) - 3px)); box-shadow:0 9px 23px -14px #253feb90; }
  .button:hover span,.text-button:hover span,.nav-cta:hover span { transform:translate(3px,-3px); }
  .brand:hover .brand-star { transform:rotate(180deg); }
  .contact:hover .contact-top>span:last-child { transform:rotate(90deg); }
  .bar-chart:hover span { filter:saturate(.55); }
  .bar-chart span:hover { filter:saturate(1.5); }
}
@media(max-width:720px) { .flow-controls { align-items:flex-start; }.flow-status { font-size:8px; line-height:1.5; } }
/* Ambient loops use individual transforms so the pointer tilt stays intact. */
.loop-surface .blue-period { animation:ambient-turn 22s linear infinite; }
.loop-surface .small-star { animation:ambient-turn 28s linear infinite; }
.loop-surface .contact-top>span:last-child { animation:ambient-turn 24s linear infinite; }
.loop-surface .mini-ad { animation:ambient-float 6s ease-in-out infinite; }
.loop-surface .mini-ad.second { animation-delay:-3s; animation-duration:7s; }
.loop-surface .mini-report { animation:ambient-float 7s ease-in-out -2s infinite; }
.loop-surface .mini-campaigns { animation:ambient-float 6.5s ease-in-out -4s infinite; }
.loop-surface .bar-chart span,.loop-surface .mini-bars i { animation:chart-breathe 5s ease-in-out var(--loop-delay,0s) infinite; }
.loop-surface .activity-item>span,.loop-surface .campaign-dot { animation:status-breathe 6s ease-in-out var(--loop-delay,0s) infinite; }
.loop-surface .ad-preview .product-shape { animation:ambient-float 6s ease-in-out var(--loop-delay,0s) infinite; }
.loop-surface .flow-node>span { animation:node-breathe 6s ease-in-out var(--loop-delay,0s) infinite; }
.loop-surface .flow-arrow { position:relative; }
.loop-surface .flow-arrow::after { content:''; position:absolute; top:50%; left:0; width:4px; height:4px; border-radius:50%; background:var(--blue); animation:flow-travel 6s ease-in-out var(--loop-delay,0s) infinite; }
.loop-surface .status-dot { animation:status-breathe 4s ease-in-out infinite; }
.loop-surface *,.loop-surface *::after { animation-play-state:paused!important; }
.loops-enabled .loop-surface.loop-visible *,.loops-enabled .loop-surface.loop-visible *::after { animation-play-state:running!important; }
@keyframes ambient-turn { to { rotate:360deg; } }
@keyframes ambient-float { 0%,100% { translate:0 3px; } 50% { translate:0 -10px; } }
@keyframes chart-breathe { 0%,100% { scale:1 1; } 45% { scale:1 .73; } 70% { scale:1 .9; } }
@keyframes status-breathe { 0%,55%,100% { scale:1; box-shadow:0 0 0 0 #71814e00; } 20% { scale:1.1; box-shadow:0 0 0 5px #71814e18; } }
@keyframes node-breathe { 0%,55%,100% { scale:1; opacity:.6; } 20%,30% { scale:1.22; opacity:1; } }
@keyframes flow-travel { 0%,10% { translate:-4px -2px; opacity:0; } 18% { opacity:1; } 32% { translate:16px -2px; opacity:0; } 100% { translate:16px -2px; opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .project-visual,.button,.button:hover,.brand-star,.contact-top>span:last-child { transform:none!important; }
  .scroll-progress { display:none; }
}