/* Garoon motion: home section. OWNER FILE: only the home agent edits this file.
 * Tokens: see motion.css (:root). Hover rules only inside @media (hover:hover) and (pointer:fine).
 * Start (hidden) states exist only under html.js-motion:not(.gm-rm) and inside prefers-reduced-motion: no-preference,
 * so without JS or with reduced motion everything is simply visible.
 * Lines are drawn with transform on real 1px elements / pseudo elements driven by CSS custom props (--lt --lb --lr --lp --sl):
 * the old 1px borders stay in layout as transparent borders, so nothing shifts by a pixel. */

/* ===================== 1. HERO (index.php .home-hero) ===================== */
.home-hero .thumbContainer .middle-elem-part {
  position: relative;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.home-hero .thumbContainer .middle-elem-part::before,
.home-hero .thumbContainer .middle-elem-part::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #9C958A;
  transform-origin: 0 50%; pointer-events: none;
}
.home-hero .thumbContainer .middle-elem-part::before { top: -1px; transform: scaleX(var(--lt, 1)); }
.home-hero .thumbContainer .middle-elem-part::after { bottom: -1px; transform: scaleX(var(--lb, 1)); }

.home-hero .thumbContainer .middle-elem-part .left-part { border-right-color: transparent; }
.home-hero .thumbContainer .middle-elem-part .left-part::before {
  content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #9C958A;
  transform-origin: 50% 0; transform: scaleY(var(--lr, 1)); pointer-events: none;
}
.home-hero .thumbContainer .middle-elem-part .left-part::after {
  transform-origin: 50% 0; transform: scaleY(var(--lp, 1));
}
.home-hero .v-line { transform-origin: 50% 0; }

/* wordmark: the star keeps its hover rotation (transition lives here now, so the intro can switch it off) */
.home-hero .b-title-elem svg { transition: transform .6s ease-in-out, fill .6s ease-in-out; }
.home-hero .b-title-elem.gm-hero-intro svg { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* start states (released by JS adding .gm-hero-lines at the moment the intro plays) */
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines) {
    --lt: 0; --lb: 0; --lr: 0; --lp: 0;
  }
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines) .v-line { transform: scaleY(0); }
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines) .b-title-elem svg { visibility: hidden; }
  /* mask for the wordmark during the intro only (a permanent clip would cut the star while it rotates) */
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-done) .b-title-elem { clip-path: inset(0); }
}

/* ===================== text masks ===================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion:not(.gm-rm) [data-hm="lines"]:not(.gm-ready),
  html.js-motion:not(.gm-rm) [data-hm="statement"]:not(.gm-ready) { visibility: hidden; }
}

/* 2. STATEMENT: plain line-mask reveal, no sticky track (final layout = original) */

/* ===================== 3. NUMBERS ===================== */
/* only the background transitions (opacity belongs to the group fade); touch devices get no sticky hover */
.numbers_block_text { transition: background-color var(--dur-base) linear; }
@media (hover: none), (pointer: coarse) {
  .numbers_block_text:hover { background-color: transparent; }
  .numbers_block_text:hover p { color: #e7e4e0; }
  .numbers_block_text:hover > span { color: #959595; }
  .numbers_block_text:hover p span svg { transform: none; }
  .numbers_block_text:nth-child(1):hover p span svg path { fill: #DAD7D3; }
  .numbers_block_text:nth-child(n+2):hover p span svg path { fill: #E7E4E0; }
}

/* ===================== 4. IMAGE BANNER: clip wipe + parallax without zoom ===================== */
.image_banner img { height: auto; display: block; }
/* height attrs on process images must not break the aspect ratio */
.process_item.item_4 .image-and-icons img, .image_banner img { height: auto; }
/* line-mask wrappers must be height-neutral */
.gm-line { padding: 0 !important; margin: 0 !important; overflow: visible !important; clip-path: inset(-.15em -.1em); }

/* ===================== 5. PROCESS item_4: crossfade instead of display swap ===================== */
@media (min-width: 501px) and (hover: hover) and (pointer: fine) {
  .process_block .process_item.item_4 .image-and-icons #full_image_2 { display: block; position: absolute; left: 0; top: 0; opacity: 0; }
  .process_block .process_item.item_4:hover #full_image { display: block; opacity: 0; }
  .process_block .process_item.item_4:hover #full_image_2 { opacity: 1; }
  .process_block .process_item.item_4 #full_image, .process_block .process_item.item_4 #full_image_2 { transition: opacity var(--dur-base) var(--ease-ui); }
}
@media (hover: none), (pointer: coarse) {
  .process_item.item_4:hover .image-and-icons .svg-icons-content svg { transform: none; }
  .process_item.item_4:hover .image-and-icons .svg-icons-content svg path { fill: #E7E4E0; }
}

/* ===================== 6. WORKS: title star, cards ===================== */
@media (hover: none), (pointer: coarse) {
  .works_header-title:hover svg { transform: none; }
  .text_block_1 .title-content svg:hover { transform: none; }
  .work_item:hover .slider_text p:before { width: 0; }
}
.work_item .media { position: relative; overflow: hidden; }
.work_item .media img { display: block; }
.work_item .media::after {
  content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity var(--dur-micro) linear;
}
/* Arca logo-loader card: sized by the media box instead of fixed 573px / 330px */
.work_item .media #preloader_ { height: 100%; top: 0; left: 0; }
@media (hover: hover) and (pointer: fine) {
  .work_items_container:has(.work_item:hover) .work_item:not(:hover) .media::after { opacity: .7; }
}

/* ===================== 7. SEE ALL ===================== */
.see_all { position: relative; }
[data-barba-namespace="home"] .see_all { border-top-color: transparent; border-bottom-color: transparent; }  /* style.css (loaded later) sets the border: higher specificity so the pseudo lines are the only lines */
.see_all::before, .see_all::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #9c958a; transform-origin: 0 50%;
  transform: scaleX(var(--sl, 1)); pointer-events: none;
}
.see_all::before { top: -1px; }
.see_all::after { bottom: -1px; }
.see_all a { position: relative; }
.see_all a::before { content: ""; position: absolute; inset: -14px -10px; }   /* 48px hit area */
@media (hover: hover) and (pointer: fine) {
  .see_all a { clip-path: inset(-14px 0 -14px -10px); }   /* hides the arrow while it waits 3em to the right */
  .see_all a span { transition: transform var(--dur-base) var(--ease-ui); }
  .see_all a svg { transform: translate3d(3em, 0, 0); transition: transform var(--dur-base) var(--ease-ui); }
  .see_all a:hover svg { transform: translate3d(0, 0, 0); }
  .see_all a:hover span { transform: translate3d(-20%, 0, 0); }
}

/* ===================== 8. SERVICES ===================== */
[data-barba-namespace="home"] .service_item { border-bottom-color: transparent; }
[data-barba-namespace="home"] .service_item.b-top { border-top-color: transparent; }
.service_item::after, .service_item.b-top::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #373737; transform-origin: 0 50%;
  transform: scaleX(var(--sl, 1)); pointer-events: none;
}
.service_item::after { bottom: 0; }          /* .service_item clips at its padding box, so the line sits inside it */
.service_item.b-top::before { top: 0; }
.service_item span { transition: none; }
.service_item span img { transition: transform var(--dur-base) var(--ease-ui); }
@media (hover: none), (pointer: coarse) {
  .service_item span img, .service_item:hover span img { transform: none; }
}

/* ===================== start states for scroll-in blocks ===================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion:not(.gm-rm) .services_block:not(.hm-in) .service_item,
  html.js-motion:not(.gm-rm) .see_all:not(.hm-in) { --sl: 0; }
  html.js-motion:not(.gm-rm) [data-barba-namespace="home"] .image_banner:not(.gm-in):not(.hm-armed) { clip-path: inset(100% 0 0 0); }
  html.js-motion:not(.gm-rm) [data-barba-namespace="home"] .work_item:not(.gm-in):not(.hm-armed) { clip-path: inset(100% 0 0 0); }
}

/* failsafe: if the module never runs (error), reveal everything after 14 s instead of staying hidden */
@keyframes hm-failsafe { to { visibility: visible; clip-path: none; transform: none; --lt: 1; --lb: 1; --lr: 1; --lp: 1; --sl: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.js-motion:not(.gm-rm) [data-hm]:not(.gm-ready),
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines),
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines) .v-line,
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-lines) .b-title-elem svg,
  html.js-motion:not(.gm-rm) .home-hero:not(.gm-hero-done) .b-title-elem,
  html.js-motion:not(.gm-rm) [data-barba-namespace="home"] .image_banner:not(.gm-in):not(.hm-armed),
  html.js-motion:not(.gm-rm) [data-barba-namespace="home"] .work_item:not(.gm-in):not(.hm-armed),
  html.js-motion:not(.gm-rm) .services_block:not(.hm-in) .service_item,
  html.js-motion:not(.gm-rm) .see_all:not(.hm-in) { animation: hm-failsafe 0s linear 14s forwards; }
}

/* wordmark: round-letter overshoot (G, S, C bottoms) must never be cut by the svg viewport; the intro mask lives on .b-title-elem only */
.home-hero .b-title-elem svg { overflow: visible; }