/* Garoon motion: about-contacts section. OWNER FILE: only the about-contacts agent edits this file.
 * Tokens: see motion.css (:root). Hover rules only inside @media (hover:hover) and (pointer:fine).
 * Start states ("armed") are applied by about-contacts.js, so without JS everything is visible.
 * Only transform / opacity / clip-path are animated. Timings: 167 / 300 / 600 / 1000 ms, curves = tokens. */
/* ---------- shared ---------- */

html.js-motion .gm-pre { visibility: hidden; }
html .gm-line { /* masks from motion.css; headings keep their own line-height */
 }/* ======================================================================
 * ABOUT: hero
 * ====================================================================== */
/* h1 is a flex item container on the legacy CSS: lines must stack */

html .about-us-content .swiper-slide .thumbContainer h1.p-title.gm-split,
html .about-us-content .swiper-slide .thumbContainer h1.p-title.gm-pre { display: block; }/* 1px frame lines: the borders become pseudo-elements that can draw (scaleX / scaleY).
 * Rest state is identical to the old borders. */

html .about-us-content .swiper-slide .thumbContainer .middle-elem-part { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part::before,
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #9C958A; pointer-events: none; z-index: 1;
  transform-origin: left center;
}
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part::before { top: -1px; }
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part::after { bottom: -1px; }
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part > .left-part { border-right-color: transparent; }
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part > .right-part { border-right-color: transparent; position: relative; }
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part > .left-part::before,
html .about-us-content .swiper-slide .thumbContainer .middle-elem-part > .right-part::after {
  content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #9C958A; transform-origin: center top; pointer-events: none;
}/* (.left-part::after is the legacy vertical rule at right:220px: drawn the same way below) */

html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part::before,
html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part::after { transform: scaleX(0); }
html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part > .left-part::before,
html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part > .right-part::after,
html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part > .left-part::after,
html .about-us-content .swiper-slide .thumbContainer.gm-armed .v-line { transform: scaleY(0); transform-origin: center top; }
html .about-us-content .swiper-slide .thumbContainer.gm-armed .middle-elem-part > .left-part::after { right: 220px; }/* draw: delay .2 s + .2 s * i, 1000 ms --ease-move */

html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .middle-elem-part::before { transform: none; transition: transform var(--dur-long) var(--ease-move) .2s; }
html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .middle-elem-part::after { transform: none; transition: transform var(--dur-long) var(--ease-move) .4s; }
html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .middle-elem-part > .left-part::after { transform: none; transition: transform var(--dur-long) var(--ease-move) .6s; }
html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .middle-elem-part > .left-part::before { transform: none; transition: transform var(--dur-long) var(--ease-move) .8s; }
html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .v-line { transform: none; transition: transform var(--dur-long) var(--ease-move) calc(.2s + .2s * var(--i, 4)); }
html .about-us-content .swiper-slide .thumbContainer.gm-hero-in .middle-elem-part > .right-part::after { transform: none; transition: transform var(--dur-long) var(--ease-move) calc(.2s + .2s * var(--gm-last, 7)); }/* hero star: hover rotation only with a real pointer */

@media (hover: none) {
  html .about-us-content .swiper-slide .thumbContainer .bottom-elem-part .b-title-elem:hover .logo-icon-2 { transform: none; }
  html .about-us-content .swiper-slide .thumbContainer .bottom-elem-part .b-title-elem:hover .logo-icon-2 path { fill: #9C958A; stroke: none; }
}
html .about-us-content .swiper-slide .thumbContainer .bottom-elem-part .b-title-elem svg { transition: transform var(--dur-base) linear; }/* ======================================================================
 * ABOUT: tabs Vision / Mission / Values
 * ====================================================================== */

html .vmv-content .tabs .tab { transition: color var(--dur-micro) linear; }
html .vmv-content .tabs .tab:focus-visible { outline: 1px solid #E7E4E0; outline-offset: 6px; }
html .vmv-content .tabs-info-content .tabs-content .tab-content { transition: transform var(--dur-med) var(--ease-move); }
html .vmv-content .tabs .svg-anim svg,
html .vmv-content .tabs-info-content .svg-content svg { transition: transform var(--dur-med) var(--ease-move); }
html .vmv-content .tabs-info-content .svg-content svg path { transition: fill var(--dur-micro) linear; }/* ======================================================================
 * ABOUT: row lines (team, numbers list, awards list): border -> ::before that draws
 * ====================================================================== */

html .our-team .team-info-list li.gm-row,
html .tacking-content .anim-informaion-elem li.gm-row { border-bottom-color: transparent; }
html .media-awards-content li.ma-line.gm-row a { border-bottom-color: transparent; }
html .our-team .team-info-list li.gm-row::before,
html .tacking-content .anim-informaion-elem li.gm-row::before,
html .media-awards-content li.ma-line.gm-row a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform-origin: left center; pointer-events: none;
}
html .our-team .team-info-list li.gm-row::before,
html .tacking-content .anim-informaion-elem li.gm-row::before { background: #464646; }
html .media-awards-content li.ma-line.gm-row a::before { background: #9C958A; }
html .media-awards-content li.ma-line a { position: relative; }
html .our-team .gm-armed li.gm-row:not(.gm-in)::before,
html .tacking-content .gm-armed li.gm-row:not(.gm-in)::before,
html .media-awards-content.gm-armed li.ma-line.gm-row:not(.gm-in) a::before { transform: scaleX(0); }
html .our-team .gm-armed li.gm-row.gm-in::before,
html .tacking-content .gm-armed li.gm-row.gm-in::before,
html .media-awards-content.gm-armed li.ma-line.gm-row.gm-in a::before { transition: transform var(--dur-long) var(--ease-move) calc(var(--i, 0) * var(--stagger-item)); }/* ======================================================================
 * ABOUT: team rows hover (underline pulls in from the left, leaves to the right)
 * ====================================================================== */

html .our-team .team-info-list .team-info::after,
html .our-team .team-info-list .team-info:not(:hover)::after {
  width: 100%; left: 0; right: auto; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-ui);
}
html .our-team .team-info-list .team-info:hover::after { width: 100%; transform: scaleX(1); transform-origin: left center; }
html .our-team .team-info-list .team-info .position-info svg { transition: opacity var(--dur-base) var(--ease-ui); }
html .our-team .team-info-list li.team-info-th .position-info svg { transition: transform var(--dur-base) var(--ease-ui); }
@media (hover: none) {
  html .our-team .team-info-list .team-info:hover::after { transform: scaleX(0); }
  html .our-team .team-info-list .team-info:hover .position-info svg { opacity: 0; }
  html .our-team .team-info-list li.team-info-th:hover .position-info svg { transform: none; }
}/* ======================================================================
 * ABOUT: animation block: two layers, opacity crossfade 300 ms (KOT poster -> video: (.4,0,.2,1))
 * ====================================================================== */

html .animation-content { transition: none; isolation: isolate; }
html .animation-content:hover { background-image: url("../images/animation-frame-1.webp"); }
html .animation-content::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/animation-frame--2.webp") center / contain no-repeat;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-label);
}
html .animation-content .animation-svgs { position: relative; z-index: 1; }
html .animation-content .animation-svgs svg { transition: transform var(--dur-base) var(--ease-ui); }
html .animation-content .animation-svgs svg path { transition: fill var(--dur-micro) linear; }
html .animation-content:hover .animation-svgs svg { transform: none; }
html .animation-content:hover .animation-svgs svg path { fill: #9C958A; }
@media (hover: hover) and (pointer: fine) {
  html .animation-content:hover::before { opacity: 1; }
  html .animation-content:hover .animation-svgs svg { transform: rotate(-90deg); }
  html .animation-content:hover .animation-svgs svg path { fill: #0D0D0D; }
}/* ======================================================================
 * ABOUT: awards list hover: no font-weight change (no layout shift): arrow slides in, line draws
 * ====================================================================== */

html .media-awards-content li.ma-line:hover a { font-weight: 500; }
html .media-awards-content li a .name-the-project svg {
  display: block; opacity: 0; transform: translateX(-1.3em);
  transition: transform var(--dur-base) var(--ease-ui), opacity var(--dur-base) var(--ease-ui);
}
html .media-awards-content li.ma-line a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #E7E4E0;
  transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-base) var(--ease-ui); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html .media-awards-content li.ma-line:hover a .name-the-project svg { opacity: 1; transform: none; }
  html .media-awards-content li.ma-line:hover a::after { transform: scaleX(1); transform-origin: left center; }
}
@media (hover: none) {
  html .media-awards-content li a .name-the-project svg { opacity: 1; transform: none; }
}/* ======================================================================
 * CONTACTS
 * ====================================================================== */
/* big heading svg + brand figures: hover rotation kept (0.3 s), pointer devices only */

html .contacts-content .contact-info .top-part svg,
html .contacts-content .contact-footer .svg-content svg,
html .contacts-content .start-a-new-project .top-part svg { transition: transform var(--dur-base) var(--ease-ui); }
@media (hover: none) {
  html .contacts-content .contact-info .top-part svg:hover,
html .contacts-content .contact-footer .svg-content svg:hover,
html .contacts-content .start-a-new-project .top-part svg:hover { transform: none; }
}/* text links: underline is a pseudo-element, scaleX from the left, 300 ms --ease-out.
 * Links that are underlined at rest keep it; on hover it retracts and redraws from the left (one 300 ms keyframe run). */

html .contacts-content .contact-info-elems .bottom-info a,
html .contacts-content .contact-footer .social-link { position: relative; text-decoration: none; }
html .contacts-content .contact-info-elems .bottom-info a::after,
html .contacts-content .contact-footer .social-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: max(1px, .045em);
  background: currentColor; transform-origin: left center; pointer-events: none;
}
html .contacts-content .contact-footer .social-link::after { right: 23px; bottom: 0; }/* text only, not the 13px arrow + 10px gap */
 
html .contacts-content .contact-info-elems .bottom-info a.text-u-none::after { transform: scaleX(0); }
@keyframes gm-ul-redraw {
  0% { transform: scaleX(1); transform-origin: right center; }
  49.9% { transform: scaleX(0); transform-origin: right center; }
  50% { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
@media (hover: hover) and (pointer: fine) {
  html .contacts-content .contact-info-elems .bottom-info a:not(.text-u-none):hover::after,
html .contacts-content .contact-footer .social-link:hover::after { animation: gm-ul-redraw var(--dur-base) var(--ease-out) both; }
  html .contacts-content .contact-info-elems .bottom-info a.text-u-none::after { transition: transform var(--dur-base) var(--ease-out); }
  html .contacts-content .contact-info-elems .bottom-info a.text-u-none:hover::after { transform: scaleX(1); }
}/* form: no motion around the input; a colour-only focus state (167 ms linear) so the active field reads without an outline */

html .contacts-content .start-a-new-project .info-content .t-title input { transition: color var(--dur-micro) linear; }
html .contacts-content .start-a-new-project .info-content .t-title input:focus { color: #E7E4E0; }/* button: its own hover line, now a transform (was width), 300 ms --ease-ui, pointer devices only */

html .btn-send-message:before { width: calc(100% - 40px); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-ui); }
html .btn-send-message:hover:before { width: calc(100% - 40px); transform: scaleX(0); }
html .btn-send-message:focus-visible { outline: 1px solid #E7E4E0; outline-offset: 3px; }
html .btn-send-message:focus-visible:before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  html .btn-send-message:hover:before { transform: scaleX(1); }
}/* request modal: opacity 300 ms --ease-ui in / out (hard cut before) */

@keyframes gm-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-modal-out { from { opacity: 1; } to { opacity: 0; } }
html.js-motion .modal.d-flex { animation: gm-modal-in var(--dur-base) var(--ease-ui) both; }
html.js-motion .modal.d-flex.gm-closing { animation: gm-modal-out var(--dur-base) var(--ease-ui) both; pointer-events: none; }/* ======================================================================
 * reduced motion: cut everything to the end state
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  html .vmv-content .tabs-info-content .tabs-content .tab-content,
html .vmv-content .tabs .svg-anim svg,
html .vmv-content .tabs-info-content .svg-content svg,
html .animation-content::before,
html .animation-content .animation-svgs svg,
html .btn-send-message:before,
html .our-team .team-info-list .team-info::after,
html .media-awards-content li.ma-line a::after,
html .media-awards-content li a .name-the-project svg { transition: none !important; }
  html.js-motion .modal.d-flex,
html.js-motion .modal.d-flex.gm-closing { animation: none !important; }
  html .gm-pre { visibility: visible !important; }
}

/* /contacts: row labels never run together ("Drop us a line" + "Contact"), icon never touches the address text */
html .contacts-content .contact-info .contact-info-elems .in-part .info-elem .top-info { gap: 24px; }
html .contacts-content .contact-info .contact-info-elems .in-part .info-elem .top-info span:last-child:not(:first-child) { text-align: right; }
html .contacts-content .contact-info .contact-info-elems .in-part .info-elem .bottom-info { gap: 16px; }