/* Page motion + card layer (owner, 2026-09-27: "Represents page / Yona page / Other main pages use motions and animations etc style unique and creative / Card style unique and creative"). Loaded by build/add_page_motion.py on a named list of trade pages in ten languages; the homepage keeps its own inline layer. Existing tokens only (css/styles.css :root). Rules this file keeps, on purpose: - Nothing is ever hidden unless js/motion.js has put .mx-on on . No JS, reduced motion or a failed script = the page renders exactly as before. - Pointer effects (tilt, spotlight, magnetic buttons) are wired only for a fine pointer, so a phone pays nothing for them. The one looping animation (aurora) is paused off-screen. - Cards are restyled, never restructured: every rule below targets markup the pages already have. */ /* ---------- static card styles (no JS needed) ---------- */ @property --mxa{syntax:"";inherits:false;initial-value:0deg} main .grid{counter-reset:mxc} main .card.icard{position:relative;overflow:hidden;isolation:isolate;counter-increment:mxc; transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease} main .card.icard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2; background:linear-gradient(90deg,var(--green-500),var(--gold-500));transform:scaleX(0);transform-origin:0 50%; transition:transform .7s cubic-bezier(.65,0,.2,1)} [dir="rtl"] main .card.icard::before{transform-origin:100% 50%} main .card.icard::after{content:counter(mxc,decimal-leading-zero);position:absolute;top:14px;inset-inline-end:18px;z-index:-1; font-family:var(--font-mono);font-size:32px;line-height:1;letter-spacing:-.04em;font-weight:600; color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--gold-500) 38%,transparent); transition:color .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)} main .card.icard>h3:first-child{padding-inline-end:48px} main .card.icard:hover{border-color:color-mix(in srgb,var(--green-400) 55%,var(--border));box-shadow:var(--shadow-md)} main .card.icard:hover::before{transform:none} main .card.icard:hover::after{color:color-mix(in srgb,var(--gold-500) 16%,transparent);transform:translateY(-3px)} main .card.icard .tile{transition:transform .6s cubic-bezier(.34,1.56,.64,1),background-color .4s ease,color .4s ease} main .card.icard:hover .tile{transform:rotate(-8deg) scale(1.08);background:var(--ink-800);color:var(--gold-400)} /* services: a gold conic rim runs round the card on hover */ main .card.scard{isolation:isolate} main .card.scard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--mxa),transparent 0 62%,var(--gold-400) 78%,var(--green-400) 90%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s ease} main .card.scard:hover::before{opacity:1;animation:mxRim 2.6s linear infinite} @keyframes mxRim{to{--mxa:360deg}} main .card.scard .tile{transition:transform .7s cubic-bezier(.34,1.56,.64,1),background-color .4s ease,color .4s ease} main .card.scard:hover .tile{transform:rotateY(180deg);background:var(--ink-800);color:var(--gold-400)} main .card.scard:hover .tile svg{transform:rotateY(180deg)} main .card.scard .more svg,main .card.ctile .more svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)} main .card:hover .more svg{transform:translateX(4px)} [dir="rtl"] main .card:hover .more svg{transform:translateX(-4px)} /* destinations: photo drifts and grades, caption underline draws */ main .card.ctile .ctile-media img{transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s ease} main .card.ctile:hover .ctile-media img{transform:scale(1.09);filter:saturate(1.12) contrast(1.04)} main .card.ctile .ctile-body h3{background:linear-gradient(var(--gold-500),var(--gold-500)) 0 100%/0 2px no-repeat; transition:background-size .6s cubic-bezier(.65,0,.2,1);align-self:flex-start} [dir="rtl"] main .card.ctile .ctile-body h3{background-position:100% 100%} main .card.ctile:hover .ctile-body h3{background-size:100% 2px} /* contact channels + bank cards: an accent bar grows up the leading edge */ main .card.channel,main .card.bank{position:relative;isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease} main .card.channel::before,main .card.bank::before{content:"";position:absolute;inset-block:14px;inset-inline-start:-1px;width:3px;z-index:2;border-radius:3px; background:linear-gradient(180deg,var(--gold-400),var(--green-500));transform:scaleY(0);transition:transform .55s cubic-bezier(.65,0,.2,1)} main .card.channel:hover,main .card.bank:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--green-400) 45%,var(--border))} main .card.channel:hover::before,main .card.bank:hover::before{transform:none} /* Representation: the five steps become a connected timeline */ main .rep-steps{counter-reset:none;position:relative} main .rep-steps li{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease} main .rep-steps li::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--green-500),var(--gold-500)); transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.65,0,.2,1) calc(var(--mxd,0s) + .35s)} [dir="rtl"] main .rep-steps li::after{transform-origin:100% 50%} main .rep-steps .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; background:var(--ink-800);color:var(--gold-400);font-weight:600;letter-spacing:.02em; box-shadow:0 0 0 6px color-mix(in srgb,var(--gold-500) 14%,transparent)} main .rep-steps li:hover{border-color:color-mix(in srgb,var(--green-400) 55%,var(--border));box-shadow:var(--shadow-md)} html:not(.mx-on) main .rep-steps li::after,main .rep-steps li.is-in::after,main .rep-steps li:hover::after{transform:none} /* tables: rows light up under the pointer */ main .season-table tbody tr{transition:background-color .3s ease} main .season-table tbody tr:hover{background:color-mix(in srgb,var(--green-400) 9%,transparent)} /* FAQ: height animates where the browser can */ @supports (interpolate-size:allow-keywords){ main .faq{interpolate-size:allow-keywords} main .faq::details-content{height:0;overflow:hidden;transition:height .5s cubic-bezier(.2,.7,.2,1),content-visibility .5s allow-discrete} main .faq[open]::details-content{height:auto} } main .faq{transition:border-color .35s ease,box-shadow .35s ease} main .faq:hover{box-shadow:var(--shadow-sm)} /* Yona: photo cards and the insider note */ main .yb-shot{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease} main .yb-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 0 var(--gold-400);transition:box-shadow .45s ease} main .yb-shot:hover{box-shadow:var(--shadow-lg)} main .yb-shot:hover::after{box-shadow:inset 0 0 0 2px var(--gold-400)} main .yb-shot:hover img{transform:scale(1.08)} main .yb-insider{position:relative;overflow:hidden} main .yb-insider::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%); background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--gold-400) 22%,transparent) 50%,transparent 70%)} main .yb-insider.is-in::after{animation:mxSheen 1.6s cubic-bezier(.2,.7,.2,1) .4s both} @keyframes mxSheen{to{transform:translateX(120%)}} main .yb-stop::before{transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .6s ease} main .yb-stop.is-in::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--gold-500) 20%,transparent)} /* buttons: a light sheen crosses on hover */ main .btn{background-image:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);background-size:260% 100%; background-position:130% 0;background-repeat:no-repeat;transition:background-position .9s cubic-bezier(.2,.7,.2,1),transform .25s ease,box-shadow .3s ease,translate .35s cubic-bezier(.2,.7,.2,1)} main .btn:hover{background-position:-30% 0} main .btn:active{transform:scale(.97)} /* ---------- motion (only with .mx-on) ---------- */ .mx-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9998;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--mxp,0)); background:linear-gradient(90deg,var(--green-400),var(--gold-500))} [dir="rtl"] .mx-bar{transform-origin:100% 50%} /* hero: photo settles in, copy rises word by word */ .mx-on .city-hero>img{animation:mxSettle 2.2s cubic-bezier(.16,1,.3,1) both} @keyframes mxSettle{from{transform:scale(1.14);filter:saturate(.6) brightness(.8)}to{transform:none;filter:none}} @supports (animation-timeline:scroll()){ .mx-on .city-hero>img{animation:mxSettle 2.2s cubic-bezier(.16,1,.3,1) both,mxHeroPar linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh} @keyframes mxHeroPar{from{translate:0 0}to{translate:0 12%}} .mx-on .city-hero .container{animation:mxHeroOut linear both;animation-timeline:scroll(root);animation-range:0 80vh} @keyframes mxHeroOut{to{translate:0 -50px;opacity:.15}} .mx-on main .ctile-media img,.mx-on main .yb-shot img{animation:mxPar linear both;animation-timeline:view();animation-range:cover} @keyframes mxPar{from{translate:0 -4%;scale:1.1}to{translate:0 4%;scale:1.1}} } .mx-on .mx-up{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease;transition-delay:var(--mxd,0s)} .mx-on .mx-up.is-in{opacity:1;transform:none;filter:none} .mxw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .04em .16em;margin:-.1em -.04em -.16em} .mxw>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%; transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 55ms + var(--mxd,0s))} .mx-split.is-in .mxw>span{transform:none} /* section content */ .mx-on .mx-rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mxd,0s)} .mx-on .mx-rv.is-in{opacity:1;transform:none} .mx-on .card.mx-rv.is-in,.mx-on .rep-steps li.mx-rv.is-in{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease} .mx-on .ex-eyebrow.mx-rv{transform:none;clip-path:inset(0 100% 0 0);transition:opacity .5s ease,clip-path 1.1s cubic-bezier(.65,0,.2,1) .1s} .mx-on .ex-eyebrow.mx-rv.is-in{clip-path:inset(-20% -2% -20% -2%)} [dir="rtl"].mx-on .ex-eyebrow.mx-rv{clip-path:inset(0 0 0 100%)} .mx-on .card.ctile.mx-rv,.mx-on .yb-shot.mx-rv,.mx-on .tablewrap.mx-rv{clip-path:inset(8% 6% 8% 6% round var(--radius-lg));transform:scale(.97); transition:opacity .6s ease,transform 1.2s cubic-bezier(.16,1,.3,1),clip-path 1.2s cubic-bezier(.16,1,.3,1);transition-delay:var(--mxd,0s)} .mx-on .card.ctile.mx-rv.is-in,.mx-on .yb-shot.mx-rv.is-in,.mx-on .tablewrap.mx-rv.is-in{clip-path:inset(-40px round var(--radius-lg));transform:none} .mx-on .rep-steps li.mx-rv .n{transform:scale(.3) rotate(-30deg);transition:transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--mxd,0s) + .2s)} .mx-on .rep-steps li.mx-rv.is-in .n{transform:none} .mx-on .season-table tbody tr.mx-row{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),background-color .3s ease;transition-delay:var(--mxd,0s)} [dir="rtl"].mx-on .season-table tbody tr.mx-row{transform:translateX(14px)} .mx-on .tablewrap.is-in .season-table tbody tr.mx-row{opacity:1;transform:none} /* pointer: tilt + spotlight (fine pointers only, set by JS) */ .mx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))!important;will-change:transform} .mx-tilt.mx-rv:not(.is-in){transform:translateY(34px) scale(.985)!important} .mx-spot{background-image:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--green-400) 12%,transparent),transparent 62%)} /* page-head (hubs without a photo): a slow aurora behind the heading */ .mx-aurora{position:relative;isolation:isolate;overflow:hidden} .mx-aurora::before{content:"";position:absolute;z-index:-1;inset:-30%;pointer-events:none;opacity:.6; background:radial-gradient(38% 34% at 22% 30%,color-mix(in srgb,var(--green-500) 28%,transparent),transparent 70%),radial-gradient(30% 30% at 78% 70%,color-mix(in srgb,var(--gold-500) 22%,transparent),transparent 70%); animation:mxAur 24s ease-in-out infinite alternate;animation-play-state:paused} .mx-aurora.mx-live::before{animation-play-state:running} @keyframes mxAur{0%{transform:translate3d(-4%,-2%,0) rotate(0)}50%{transform:translate3d(5%,3%,0) rotate(8deg)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg)}} @media (prefers-reduced-motion:reduce){ main .card.scard:hover::before{animation:none} main .card.scard:hover .tile,main .card.scard:hover .tile svg,main .card.icard:hover .tile{transform:none} main .yb-insider.is-in::after,.mx-aurora::before,.city-hero>img,.city-hero .container{animation:none!important} .mx-bar{display:none} } /* ---------- cinematic type (owner, 2026-09-28: "attach is all fonts & Style u can use by your reqirements" — a set of font-showcase posters). Taken from it: a high-contrast display serif for the hero headline with the closing word set in italic, very widely tracked micro-labels, and a fine crosshair grid over the hero photo. Not taken: the red grounds (not a site colour) and the commercial display faces (no web licence, no Arabic/Thai/CJK glyphs). Playfair Display is on Google Fonts under the OFL and covers Latin and Cyrillic, so it is scoped to those six locales; zh-CN, ja, ar and th keep their existing faces. ---------- */ :root{--font-poster:'Playfair Display',var(--font-serif)} html:is([lang="en"],[lang="es"],[lang="fr"],[lang="de"],[lang="pt"],[lang="ru"]) main :is(.city-hero,.page-head) h1{ font-family:var(--font-poster);font-weight:700;letter-spacing:-.018em;line-height:1.04} html:is([lang="en"],[lang="es"],[lang="fr"],[lang="de"],[lang="pt"],[lang="ru"]) main :is(.city-hero,.page-head) h1.mx-split .mxw:last-child>span{ font-style:italic;font-weight:500} html:is([lang="en"],[lang="es"],[lang="fr"],[lang="de"],[lang="pt"],[lang="ru"]) main .city-hero h1.mx-split .mxw:last-child>span{color:var(--gold-400)} html:is([lang="en"],[lang="es"],[lang="fr"],[lang="de"],[lang="pt"],[lang="ru"]) main :is(.sec-head,.sec-row) .ex-eyebrow{letter-spacing:.34em} main .city-hero .ovr::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:25% 33.34%;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 38%,#000,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 72% 38%,#000,transparent 78%)} [dir="rtl"] main .city-hero .ovr::after{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 28% 38%,#000,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 28% 38%,#000,transparent 78%)}