/* Site styles — extracted from index.html. Loaded before template.css, same order as before. */



    

    

    

html {
      scroll-behavior: smooth;
    }

    section[id],
    .section[id] {
      scroll-margin-top: 90px;
    }

    .header-logo-text {
      font-size: 28px;
      font-weight: 700;
      color: var(--neutral--100);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .header-logo-text span {
      color: var(--secondary--color-1);
    }

    .social-icon i {
      font-size: 20px;
      line-height: 21px;
    }

    .eds-badge {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 32px;
      margin-bottom: 24px;
    }

    .card.skills {
      height: 100%;
    }

    .w-layout-grid.grid-2-columns.eds-stretch {
      align-items: stretch;
    }

    /* "What I do" cards: hover animation inside the card */
    .eds-stretch .card.skills {
      position: relative;
      overflow: hidden;
      transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
    }

    .eds-stretch .card.skills::before {
      /* soft glow sweeping in from the corner */
      content: "";
      position: absolute;
      top: -40%;
      right: -30%;
      width: 70%;
      height: 140%;
      background: radial-gradient(circle, rgba(46, 129, 255, .28), transparent 65%);
      opacity: 0;
      transform: scale(.6);
      transition: opacity .5s ease, transform .6s ease;
      pointer-events: none;
    }

    .eds-stretch .card.skills::after {
      /* accent line growing along the bottom */
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 4px;
      width: 100%;
      background: var(--secondary--color-1, #2e81ff);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s ease;
    }

    .eds-stretch .card.skills>* {
      position: relative;
      z-index: 1;
    }

    .eds-stretch .card.skills .eds-badge {
      transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
    }

    .eds-stretch .card.skills h3,
    .eds-stretch .card.skills p {
      transition: transform .4s ease, color .3s ease;
    }

    .eds-stretch .card.skills:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    }

    .eds-stretch .card.skills:hover::before {
      opacity: 1;
      transform: scale(1);
    }

    .eds-stretch .card.skills:hover::after {
      transform: scaleX(1);
    }

    .eds-stretch .card.skills:hover .eds-badge {
      transform: rotate(-12deg) scale(1.12);
      box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .35);
    }

    .eds-stretch .card.skills:hover h3 {
      transform: translateX(6px);
    }

    .eds-stretch .card.skills:hover p {
      transform: translateX(6px);
      color: var(--neutral--100, #fff);
    }

    @media (prefers-reduced-motion: reduce) {

      .eds-stretch .card.skills,
      .eds-stretch .card.skills *,
      .eds-stretch .card.skills::before,
      .eds-stretch .card.skills::after {
        transition: none !important;
      }
    }

    .card.portfolio-project {
      display: flex;
      flex-direction: column;
      min-height: 600px;
    }

    .card.portfolio-project .portfolio-project-card-text-container {
      margin-top: 100px;
      margin-bottom: 32px;
    }

    .card.portfolio-project img.portfolio-thumbnail-image {
      margin-top: auto;
      width: 100%;
      height: 370px;
      object-fit: cover;
      object-position: left top;
    }

    .eds-resource-icon {
      height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 96px;
      color: var(--neutral--100);
    }

    .hero-bg-image.eds {
      width: auto;
      max-width: 75%;
      height: 100%;
      max-height: 1040px;
      margin: 0 auto;
      object-fit: cover;
      object-position: center top;
    }

    .hero-bg-image-wrapper {
      top: 0;
      align-items: flex-end;
    }

    /* footer accent: cyan name, nav links and copyright */
    .footer-wrapper .footer-cyan,
    .footer-wrapper .footer-link,
    .footer-wrapper .footer-bottom p {
      color: #00e5ff;
    }

    .avatar-circle._05 {
      background: #fff;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 1;
    }

    .w-layout-grid.logo-strip-right {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      gap: 27px;
    }

    @media (max-width: 991px) {
      .w-layout-grid.logo-strip-right {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16px 32px;
      }
    }

    .about-worked {
      white-space: nowrap;
      font-size: 20px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--neutral--400);
    }

    .attach-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      color: var(--neutral--100);
      border: 1px dashed var(--neutral--600);
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 16px;
    }

    .attach-trigger:hover {
      border-color: var(--secondary--color-1);
    }

    .attach-hint {
      font-size: 14px;
      color: var(--neutral--500);
      margin-top: 8px;
      line-height: 1.5;
    }

    .attach-hint.error {
      color: #ff5a65;
    }

    .attach-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .attach-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--neutral--700);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 15px;
      color: var(--neutral--100);
    }

    .attach-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attach-size {
      color: var(--neutral--500);
      font-size: 13px;
    }

    .attach-remove {
      background: none;
      border: none;
      color: var(--neutral--500);
      cursor: pointer;
      font-size: 15px;
    }

    .attach-remove:hover {
      color: #ff5a65;
    }

/* ==========================================================================
   Behaviour previously supplied by the Webflow runtime (scroll reveals,
   hover effects, full-screen menu, dropdown, slider). Driven by assets/js/ui.js
   ========================================================================== */

/* Scroll reveal: slide up + fade in when the element enters the viewport */
.w-mod-js .reveal { opacity: 0; transform: translate3d(0, 10%, 0); }
.w-mod-js .reveal.in-view { opacity: 1; transform: none; transition: opacity .5s ease .2s, transform .5s ease .2s; }
.loading-bar-wrapper { display: none; }

/* Link hover: arrow nudges right, underline redraws */
.link-wrapper .line-square-icon.link-icon-right { transition: transform .3s ease; }
.link-wrapper:hover .line-square-icon.link-icon-right { transform: translateX(6px); }
.link-wrapper:hover .link-underline { animation: underlineGrow .5s ease; }
@keyframes underlineGrow { from { width: 0; } to { width: 100%; } }

/* Hovering one item dims its siblings */
.social-icon, .sibling-opacity-item, .header-nav-list-item { transition: opacity .25s ease, transform .3s ease; }
*:has(> .social-icon:hover) > .social-icon:not(:hover) { opacity: .25; }
*:has(> .sibling-opacity-item:hover) > .sibling-opacity-item:not(:hover) { opacity: .35; }
.header-nav-menu-list:has(> .header-nav-list-item:hover) > .header-nav-list-item:not(:hover) { opacity: .35; }
.header-nav-menu-list.hamburger-desktop:has(> .header-nav-list-item:hover) > .header-nav-list-item:not(:hover) { opacity: .15; transform: scale(.9); }

/* Full-screen menu */
.header-wrapper .header-nav-menu-wrapper.hamburger-desktop {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease .1s, visibility 0s linear .45s;
}
.menu-open .header-wrapper .header-nav-menu-wrapper.hamburger-desktop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s;
}
.header-nav-menu-bg { width: 0; height: 0; transition: width .3s cubic-bezier(.08, .82, .17, 1) .1s, height .3s cubic-bezier(.08, .82, .17, 1) .1s; }
.menu-open .header-nav-menu-bg { width: 180vw; height: 180vw; transition-delay: .2s; }
.header-nav-menu-list.hamburger-desktop { opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease; }
.menu-open .header-nav-menu-list.hamburger-desktop { opacity: 1; transform: none; transition-delay: .4s; }
.hamburger-menu-bar { transition: transform .3s ease; }
.menu-open .hamburger-menu-bar.top { transform: translateY(4px) rotate(135deg); }
.menu-open .hamburger-menu-bar.bottom { transform: translateY(-12px) rotate(45deg); }
body.menu-open { overflow: hidden; }

/* Dropdown in the top bar */
.line-square-icon.dropdown-arrow { display: inline-block; transition: transform .3s ease, color .3s ease; }
.dropdown-wrapper.is-open .dropdown-arrow { transform: rotate(-180deg); color: var(--accent--primary-1); }
.dropdown-wrapper.is-open .dropdown-text { color: var(--accent--primary-1); }
.dropdown-wrapper .dropdown-column-wrapper { left: auto; right: -8px; transform: none; }
.dropdown-wrapper .dropdown-column-wrapper.w--open { animation: dropdownIn .3s ease; }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Skills slider: the track slides; arrows are disabled at either end */
.w-slider-nav { display: none; }
.slider-wrapper .w-slider-mask { transition: transform .5s ease; touch-action: pan-y; }
.slider-arrow.is-disabled { opacity: .4; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .w-mod-js .reveal, .w-mod-js .reveal.in-view { opacity: 1; transform: none; transition: none; }
}