/* Smart Citizenship — motion.css
   Quiet, editorial motion. Everything moves on transform, opacity and clip-path only.
   Scroll reveals are opt-in: motion.js adds [data-r] to elements, so without JavaScript nothing is ever hidden.
   prefers-reduced-motion switches all of it off (see the end of this file and site.css). */
@property --k{syntax:"<number>";inherits:true;initial-value:1}
:root{
  --ease:cubic-bezier(.16,1,.3,1);        /* expo out: long, soft landing */
  --ease-io:cubic-bezier(.65,0,.35,1);    /* in-out for things that leave */
  --t-fast:.35s;
  --t-mid:.9s;
  --t-slow:1.4s;
  --rise:28px;
}

/* ---------------------------------------------------------------- page transitions
   Chrome, Edge and Safari 18.2+: native cross-document view transitions.
   The header and WhatsApp button keep their place while the page underneath crossfades. */
@view-transition{navigation:auto}
.hdr{view-transition-name:sc-header}
.wa{view-transition-name:sc-wa}
::view-transition-old(root){animation:sc-page-out .42s var(--ease-io) both}
::view-transition-new(root){animation:sc-page-in .8s var(--ease) .08s both}
::view-transition-group(sc-header),::view-transition-group(sc-wa){animation-duration:.5s}
@keyframes sc-page-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes sc-page-in{from{opacity:0;transform:translateY(22px)}}
/* Fallback for browsers without cross-document transitions (motion.js adds .is-leaving before navigating) */
main,.ftr{transition:opacity .32s var(--ease-io),transform .32s var(--ease-io)}
html.is-leaving main,html.is-leaving .ftr{opacity:0;transform:translateY(-10px)}

/* ---------------------------------------------------------------- hero: a slow, soft approach */
/* one composited layer: the settle runs on transform, the endless drift on the separate scale property */
.hero__img img{animation:sc-hero-settle 3.2s var(--ease) both,sc-hero-drift 26s ease-in-out 3.2s infinite alternate;transform-origin:50% 55%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:#14130f;pointer-events:none;animation:sc-curtain 1.8s var(--ease-io) both}
.hero__in{z-index:2}
.hero h1{animation:sc-rise-soft 1.5s var(--ease) .45s both}
.hero__sub{animation:sc-rise 1.3s var(--ease) .75s both}
.hero .btns{animation:sc-rise 1.3s var(--ease) .95s both}
/* home hero: the still photo and the fresco video share one frame, so they settle, drift and zoom as one */
.hero__frame{position:absolute;inset:0;animation:sc-hero-settle 3.2s var(--ease) both,sc-hero-drift 26s ease-in-out 3.2s infinite alternate;transform-origin:50% 55%}
.hero__frame img{animation:none}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:0;transition:opacity 1.6s var(--ease-io);pointer-events:none}
.hero__video.is-on{opacity:1}
/* scroll-linked motion runs on the browser's own scroll timeline (on the compositor), so it moves in the same frame
   as the scroll and never lags or shakes. Browsers without scroll-driven animations simply keep these parts still. */
@supports (animation-timeline:view()){
  .hero{view-timeline:--sc-hero block}
  .hero__img{animation:sc-hero-scroll linear both;animation-timeline:--sc-hero;animation-range:exit 0% exit 100%}
  .hero__in{animation:sc-hero-text-scroll linear both;animation-timeline:--sc-hero;animation-range:exit 0% exit 100%}
  /* desktop home: the view is drawn up to 18% closer into the doorway as the hero scrolls away */
  @media (min-width:900px){.hero--home .hero__img{animation-name:sc-hero-pull;transform-origin:52% 62%}}
  [data-par]{view-timeline:--sc-par block}
  [data-par] img{animation:sc-par linear both;animation-timeline:--sc-par;animation-range:cover 0% cover 100%}
}
@keyframes sc-hero-scroll{to{transform:translate3d(0,28%,0)}}
@keyframes sc-hero-pull{to{transform:translate3d(0,28%,0) scale(1.18)}}
@keyframes sc-hero-text-scroll{75%{opacity:0}to{opacity:0;transform:translate3d(0,12svh,0)}}
@keyframes sc-par{from{translate:0 4.5%}to{translate:0 -4.5%}}
@keyframes sc-hero-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes sc-hero-drift{from{scale:1}to{scale:1.06}}
@keyframes sc-curtain{from{opacity:.72}to{opacity:0}}
@keyframes sc-rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes sc-rise-soft{from{opacity:0;transform:translateY(.32em);filter:blur(10px)}to{filter:blur(0)}}

/* ---------------------------------------------------------------- scroll reveals */
[data-r]{transition:opacity var(--t-mid) var(--ease) var(--dl,0s),transform var(--t-slow) var(--ease) var(--dl,0s)}
[data-r="up"]:not(.in){opacity:0;transform:translateY(var(--rise))}
/* photographs open like a shutter, and the picture inside settles from a gentle zoom */
[data-r="mask"]{overflow:hidden;--k:1.16;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease) var(--dl,0s),--k 2.2s var(--ease) var(--dl,0s)}
[data-r="mask"].in{clip-path:inset(0);--k:1}
[data-r="mask"] img{transform:scale(var(--k))}
/* parallax photos are 10% oversized so their 4.5% drift never shows an edge */
[data-par]{overflow:hidden}
[data-par] img{scale:1.1}
.more[data-r]{transition:opacity var(--t-mid) var(--ease) var(--dl,0s),transform var(--t-slow) var(--ease) var(--dl,0s),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
/* hairline rules draw from the left */
.way,.principle{position:relative}
.way[data-r],.principle[data-r]{border-top-color:transparent}
.way[data-r]::before,.principle[data-r]::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--kiremit);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease) calc(var(--dl,0s) + .15s)}
.principle[data-r]::before{background:var(--zeytin)}
.way[data-r].in::before,.principle[data-r].in::before{transform:none}

/* ---------------------------------------------------------------- hover and focus */
.btn{transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn--nar{position:relative;overflow:hidden;isolation:isolate}
.btn--nar::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--nar-dk);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.btn--nar:hover{background:var(--nar)}
.btn--nar:hover::after{transform:scaleX(1);transform-origin:0 50%}

.nav a{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px}
.subnav a{transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.subnav a.is-active{color:var(--ink);border-color:var(--kiremit)}

.more{transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.more svg{transition:transform .5s var(--ease)}
.more:hover svg{transform:translateX(5px)}

.sol-list b{display:inline-block;transition:transform .6s var(--ease)}
.sol-list a:hover b{transform:translateX(8px)}
.sol-list svg{transition:transform .6s var(--ease),color var(--t-fast)}
.sol-list a:hover svg{transform:translateX(6px)}

.tile__img img,.card picture img,.office picture img,.person img{transition:transform 1.4s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.06)}
.tile__meta{transition:border-color .6s var(--ease)}
.tile:hover .tile__meta{border-color:var(--ink)}
.tile h3{transition:color var(--t-fast) var(--ease)}
.tile:hover h3{color:var(--kiremit-dk)}
.card picture,.office picture,.person{overflow:hidden}
.card:hover picture img,.office:hover picture img{transform:scale(1.05)}
.person img{transform-origin:50% 30%}
.person:hover img{transform:scale(1.04)}

.ftr a,.social a{transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
/* the WhatsApp button pops in once per visit (motion.js), not on every page */
.wa{transition:transform .5s var(--ease),background-color var(--t-fast)}
.wa:hover{transform:scale(1.07)}

.hdr{transition:background-color .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease)}

/* mobile drawer: the menu slides in, its links follow one by one */
@media (max-width:1080px){
  .drawer{transition:transform .7s var(--ease),visibility 0s linear .7s}
  .drawer.open{transition:transform .7s var(--ease),visibility 0s}
  .drawer nav a,.drawer .lang,.drawer .btn{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
  .drawer.open nav a,.drawer.open .lang,.drawer.open .btn{opacity:1;transform:none}
  .drawer.open nav a:nth-child(1){transition-delay:.12s}
  .drawer.open nav a:nth-child(2){transition-delay:.17s}
  .drawer.open nav a:nth-child(3){transition-delay:.22s}
  .drawer.open nav a:nth-child(4){transition-delay:.27s}
  .drawer.open .lang{transition-delay:.32s}
  .drawer.open .btn{transition-delay:.37s}
}

/* ---------------------------------------------------------------- reduced motion: show everything, move nothing */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero::before{display:none}
  [data-r]{opacity:1!important;transform:none!important;clip-path:none!important;--k:1!important}
  [data-r]::before{transform:none!important}
}