/* ============================================================
   bridgecode.kr static PoC — custom styles
   - Section 1: page custom CSS carried over from the original head
   - Section 2: responsive root font-size (carried over)
   - Section 3: glowing button (carried over from body embed)
   - Section 4: spotlight text (carried over from body embed)
   - Section 5: jQuery/CSS replacements for Webflow IX2 interactions
     (scroll reveal, marquees, nav/dropdown open states, hero shapes)
   ============================================================ */

/* ---------- 1. page custom CSS (from original) ---------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
b,
li,
a {
  word-break: keep-all;
}

.dropdown-toggle.w--open {
  color: inherit !important;
  box-shadow: none !important;
}

nav {
  max-height: calc(100vh - 64px);
}

.go-up-button {
  display: none;
}

@media screen and (max-width: 479px) {
  .bottom-banner {
    max-width: 124px;
  }
}

/* ---------- 2. root font-size + smoothing (from original) ---------- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: calc(0.625rem + 0.41666666666666663vw);
}
@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.625rem + 0.41666666666666674vw);
  }
}
@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8126951092611863rem + 0.20811654526534862vw);
  }
}
@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.7494769874476988rem + 0.8368200836820083vw);
  }
}

/* ---------- 전역 서체: webflow.css의 body(IBM Plex Sans)를 Pretendard로 통일 ---------- */
body {
  font-family: Pretendard, sans-serif;
}

/* ---------- 3. glowing button (from original embed) ---------- */
.glowing-wrapper-button:after {
  background: radial-gradient(85% 120% at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 999px;
  content: '';
  height: calc(100% + 4px);
  left: -2px;
  opacity: 0;
  position: absolute;
  top: -2px;
  transition: 1s all;
  width: calc(100% + 4px);
}

.glowing-wrapper-button:hover:after {
  opacity: 0.7;
}

.glowing-wrapper-active .glowing-wrapper-animations,
.glowing-wrapper-active .glowing-wrapper-borders-masker {
  opacity: 1;
}

.glowing-wrapper-animations:before,
.glowing-wrapper-borders:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.glowing-wrapper-animations:after,
.glowing-wrapper-borders:after {
  clear: both;
  content: '';
  display: block;
}

.glowing-wrapper-animations {
  pointer-events: none;
}

.glowing-wrapper-animations * {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.glowing-wrapper-borders,
.glowing-wrapper-glow,
.glowing-wrapper-mask {
  animation: borderTurn 2.5s infinite linear;
  background-image: conic-gradient(
    from 0 at 50% 50%,
    rgba(255, 255, 255, 0.5) 0deg,
    rgba(255, 255, 255, 0) 60deg,
    rgba(255, 255, 255, 0) 310deg,
    rgba(255, 255, 255, 0.5) 360deg
  );
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 원본(bridgecode.kr) embed는 mask URL이 깨져 있어 이 레이어가 렌더링되지 않는다.
   유효한 mask로 "복원"하면 버튼 내부 전체를 도는 광선이 생겨 원본과 달라지므로 숨긴다. */
.glowing-wrapper-mask-wrapper {
  display: none;
}

.glowing-wrapper-borders {
  animation-name: borderTurnWithTranslate;
}

.glowing-wrapper-borders-masker {
  content: '';
  inset: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes borderTurn {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes borderTurnWithTranslate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ---------- 4. spotlight text (from original embed) ---------- */
.spotlight-text {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.section_spotlight:hover .spotlight-text {
  color: rgba(255, 255, 255, 1);
}

/* ---------- 5-a. scroll reveal (replaces Webflow IX2) ----------
   Elements are hidden only when JS is available (html.js),
   so content stays visible if scripts fail. */
html.js [data-anim='reveal'] {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 0.8s ease,
    filter 0.8s ease;
  will-change: opacity, filter;
}

html.js [data-anim='reveal'].anim-in {
  opacity: 1;
  filter: blur(0);
}

/* ---------- 5-b. Who We Are / Our Vision reveal ----------
   Recreates the original Webflow entrance: copy rises by 25px,
   followed by an opposing image/container wipe. */
html.js .who-we-are-page .section-3 .fade-in-move-on-scroll-4 {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
  will-change: opacity, transform;
}

html.js .who-we-are-page .section-3 .fade-in-move-on-scroll-4.vision-copy-in {
  opacity: 1;
  transform: translateY(0);
}

html.js .who-we-are-page .section-3 .image-with-animation-container {
  transform: translateY(-110%);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s;
  will-change: transform;
}

html.js .who-we-are-page .section-3 .image-with-animation {
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s;
  will-change: transform;
}

html.js .who-we-are-page .section-3 .image-holder-with-animation.vision-image-in .image-with-animation-container,
html.js .who-we-are-page .section-3 .image-holder-with-animation.vision-image-in .image-with-animation {
  transform: translateY(0);
}

/* ---------- 5-c. logo marquee (replaces Webflow IX2 loop) ----------
   Markup has two identical .logo-v3-slide blocks; sliding the row by
   one block width loops seamlessly. Gap between slides must match the
   slide's internal item gap (40px desktop / 24px / 20px). */
.logo-v3 {
  flex-wrap: nowrap;
}

.logo-v3-slide {
  animation: marqueeX 30s linear infinite;
}

@keyframes marqueeX {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 40px));
  }
}

@media screen and (max-width: 991px) {
  @keyframes marqueeX {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - 10px));
    }
  }
}

@media screen and (max-width: 479px) {
  @keyframes marqueeX {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - 12px));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .who-we-are-page .section-3 .fade-in-move-on-scroll-4,
  html.js .who-we-are-page .section-3 .image-with-animation-container,
  html.js .who-we-are-page .section-3 .image-with-animation {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 5-d. vertical certificate marquees ---------- */
.scroll-track {
  animation: marqueeYUp 26s linear infinite;
}

.scroll-track2 {
  animation: marqueeYDown 26s linear infinite;
}

@keyframes marqueeYUp {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% - 10px));
  }
}

@keyframes marqueeYDown {
  0% {
    transform: translateY(calc(-100% - 10px));
  }
  to {
    transform: translateY(0);
  }
}

/* ---------- 5-e. mobile nav open state ----------
   Webflow's runtime injected these; reproduced for data-collapse=medium. */
body.locale-en .nav-link.en.v2 {
  display: block;
}

@media screen and (max-width: 991px) {
  .nav-menu.v2[data-nav-menu-open] {
    display: block !important;
    min-width: 0;
    animation: navSlideDown 0.5s ease;
  }

  .nav-menu.v2[data-nav-menu-open] .brand-link {
    display: none;
  }

  .navbar.v2 .w-nav-menu:not([data-nav-menu-open]) {
    display: none;
  }

  @keyframes navSlideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* dropdown open state is toggled by js/main.js via .w--open
   (base rules already exist in css/webflow.css) */

/* ---------- 5-e. nav CTA rolling label ----------
   .div-block-308 stacks three labels and clips to one line height;
   hovering rolls to the (white) middle label like the IX2 original. */
.link-block-25 .div-block-308 > .nav-text.cta {
  transition: transform 0.35s ease;
}

.link-block-25:hover .div-block-308 > .nav-text.cta {
  transform: translateY(-200%);
}

/* ---------- 5-f. hero gradient shapes (replaces IX2 idle loop) ---------- */
.ultra-gradient-wrapper .shape-1 {
  animation: shapeDrift 14s ease-in-out infinite alternate;
}

.ultra-gradient-wrapper .shape-2 {
  animation: shapeDrift 18s ease-in-out infinite alternate-reverse;
}

.ultra-gradient-wrapper .shape-3 {
  animation: shapeSpin 60s linear infinite;
}

@keyframes shapeDrift {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  50% {
    transform: translate3d(2vw, -2vh, 0) scale3d(1.05, 1.05, 1);
  }
  to {
    transform: translate3d(-2vw, 1vh, 0) scale3d(0.97, 0.97, 1);
  }
}

@keyframes shapeSpin {
  0% {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* ---------- 5-g. team card accordion (replaces IX2) ----------
   The Webflow runtime set inline width:16rem on every card and
   animated the hovered card to ~37rem; siblings shrink naturally
   because the flex row clips overflow (flex: 0 1 auto). */
.team-image-box {
  width: 16rem;
  transition: width 0.5s ease;
}

.team-profile-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.team-profile-link:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px #fff;
}

.div-block-303:not(.mobile) .team-image-box:hover,
.team-image-box.is-expanded {
  width: 37rem;
}

.team-image-box .div-block-302 {
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

.div-block-303:not(.mobile) .team-image-box:hover .div-block-302,
.team-image-box.is-expanded .div-block-302 {
  opacity: 1;
}

.privacy-page .meta-value {
  white-space: nowrap;
}

/* ---------- 5-h. service tabs (replaces Webflow Tabs runtime) ---------- */
.service-page .tab-link-cocktails {
  cursor: pointer;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  font: inherit;
}

.service-page .tab-link-cocktails:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.service-page .w-tab-pane[hidden] {
  display: none !important;
}

/* ---------- team section component (partials/team-section.njk) ---------- */
/* 화이트 배경 버전에서 소개 문단 색 보정 */
.team-section-white .text-block-100 {
  color: var(--grey-text);
}

/* 언어 드롭다운: 트리거 오른쪽 끝에 맞춰 왼쪽으로 펼침 (풀 화면에서 우측 잘림 방지) */
.language-list.w--open {
  left: auto;
  right: 0;
}

/* 언어 리스트 호버 시 밑줄이 왼쪽에서 오른쪽으로 차오르는 액션 (원본 Webflow IX 대체) */
.langauge-line-break {
  transition: width 0.3s ease;
}

.language-link:hover .langauge-line-break,
.language-link:focus-visible .langauge-line-break {
  width: 100%;
}

/* who-we-are 콜라주: 모바일(<=767px)에서 절대배치 이미지가 고정 높이 컨테이너를 넘쳐
   아래 섹션 텍스트를 덮는 문제 — 흐름 배치로 전환하고 겹침 느낌은 음수 마진으로 유지 */
@media screen and (max-width: 767px) {
  .who-we-are-images-container,
  .who-we-are-images-container.animation-on-page-load-3 {
    min-height: 0;
  }

  .who-we-are-image {
    position: relative;
    inset: auto;
    width: 60%;
    margin-left: auto;
    display: block;
  }

  .who-we-are-image-2 {
    position: relative;
    inset: auto;
    width: 80%;
    margin-top: -25%;
    padding-bottom: 10px;
    display: block;
  }
}

/* 모바일 헤더 로고: 원본은 Webflow 런타임이 붙이는 w--current 클래스에 의존해
   480~991px에서 로고가 사라짐 — 햄버거 메뉴 구간(<=991px)에서 항상 노출 */
@media screen and (max-width: 991px) {
  .brand-link.mobile {
    flex: 1;
    display: block;
  }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logo-v3-slide,
  .scroll-track,
  .scroll-track2,
  .ultra-gradient-wrapper .shape-1,
  .ultra-gradient-wrapper .shape-2,
  .ultra-gradient-wrapper .shape-3,
  .glowing-wrapper-borders,
  .glowing-wrapper-glow,
  .glowing-wrapper-mask {
    animation: none;
  }

  html.js [data-anim='reveal'] {
    opacity: 1;
    filter: none;
    transition: none;
  }
}