/* portfolio.css — page-scoped CSS for /portfolio (home-2025-08-26 redesign)
 * Sourced from @maray-ai/maray-ai-code: Swiper (testimonials carousel) + glow cards.
 * NOTE: the redesign's section layout classes (section_home_projects, section_testimonial,
 * section_contact, section_advantage, etc.) are NOT in the published Webflow CSS and are
 * therefore NOT covered here. Full visual parity requires publishing home-2025-08-26 in
 * Webflow, then re-vendoring static/webflow.css. See project/phases/26/4-SUMMARY.md.
 */

/* ---- Swiper ---- */
/* node_modules/.pnpm/swiper@11.0.5/node_modules/swiper/swiper.css */
@font-face {
  font-family: "swiper-icons";
  src: url(data:application/font-woff;charset=utf-8;base64,\ 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);
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ---- Glow cards ---- */
:root {
  --spread: 60;
  --blur: 40;

  --bg: hsl(246 44% 7%);
  --border: hsl(280 10% 50% / 1);
  --card: hsla(240, 17%, 15%, 0);
  --color: hsl(240 18% 80%);
  --border-width: 2px;
  --border-radius: 0px;
  --gradient: conic-gradient(
    from 180deg at 50% 70%,
    hsla(0, 0%, 98%, 1) 0deg,
    #eec32d 72.0000010728836deg,
    #ec4b4b 144.0000021457672deg,
    #709ab9 216.00000858306885deg,
    #4dffbf 288.0000042915344deg,
    hsla(0, 0%, 98%, 1) 1turn
  );
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

@property --start {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.wf_process-cards_layout {
  --spread: 60;
  position: relative;
  touch-action: none;
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
  /* gap: 1rem; */
  /* margin: 0 auto; */
  /* justify-content: center; */
  /* place-items: center; */
  /* padding: 2rem; */
}

.wf_process-card_component {
  --active: 0.15;
  --start: 0;
  background: var(--card);
  border-radius: var(--border-radius);

  /* height: 100%; */
  /* display: flex; */
  /* flex-direction: column; */
  /* gap: 1.25rem; */
  /* position: relative; */
  /* padding: 2rem; */
  /* aspect-ratio: 330 / 400; */
  /* min-width: 280px; */
  /* max-width: 280px; */
}

.wf_process-card_component:is(:hover, :focus-visible) {
  z-index: 2;
}

.glows {
  pointer-events: none;
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--blur) * 1px));
}

.glows::after,
.glows::before {
  --alpha: 0;
  content: "";
  background: var(--gradient);
  background-attachment: fixed;
  position: absolute;
  inset: -5px;
  border: 10px solid transparent;
  border-radius: var(--border-radius);
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
      #000 0deg,
      #fff,
      #0000 calc(var(--spread) * 1deg)
    );
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: var(--active);
  transition: opacity 1s;
}

.wf_process-card_component::before {
  position: absolute;
  inset: 0;
  border: var(--border-width) solid transparent;
  content: "";
  border-radius: var(--border-radius);
  pointer-events: none;
  background: var(--border);
  background-attachment: fixed;
  border-radius: var(--border-radius);
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from
        calc(
          ((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) *
            1deg
        ),
      hsl(0 0% 100% / 0.15) 0deg,
      white,
      hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg)
    );
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  opacity: var(--active);
  transition: opacity 1s;
}

.wf_process-card_component::after {
  --bg-size: 100%;
  content: "";
  pointer-events: none;
  position: absolute;
  background: var(--gradient);
  background-attachment: fixed;
  border-radius: var(--border-radius);
  opacity: var(--active, 0);
  transition: opacity 1s;
  --alpha: 0;
  inset: 0;
  border: var(--border-width) solid transparent;
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from
        calc(
          ((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) *
            1deg
        ),
      #0000 0deg,
      #fff,
      #0000 calc(var(--spread) * 0.5deg)
    );
  filter: brightness(1.5);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

/* =============================================================
 * Projects grid — custom layout (maray.ai, NOT from Webflow)
 * -------------------------------------------------------------
 * Adds two projects at the top (Prezi cols 1–8 left, One Who Learns
 * cols 5–12 right — same 8-col width) and re-places Hayashi + Skills
 * Beauty to half-width, shifting the remaining cards down one row.
 * Overrides the recovered #w-node-…-2b4a0719 placements in
 * portfolio-embeds.css (loaded first) — equal ID specificity, later
 * source wins.
 * ============================================================= */
#w-node-project-preziai-2b4a0719 {
  grid-area: 1 / 1 / 2 / 9;
}
#w-node-project-onewholearns-2b4a0719 {
  grid-area: 2 / 5 / 3 / 13;
}
/* Hayashi Whisky — bigger (cols 6–12, right). Swapped with Skills Beauty. */
#w-node-a1dc18dd-c97e-89bd-310b-5b31d2c60262-2b4a0719 {
  grid-area: 3 / 6 / 4 / 13;
}
/* Skills Beauty — smaller (cols 1–4, left). */
#w-node-_054d8484-6da9-f331-0d61-343890c32bf8-2b4a0719 {
  grid-area: 3 / 1 / 4 / 5;
}
#w-node-_11481832-bf03-82de-ce08-5bcd874fb99a-2b4a0719 {
  grid-area: 4 / 1 / 5 / 5;
}
#w-node-_11481832-bf03-82de-ce08-5bcd874fb99f-2b4a0719 {
  grid-area: 4 / 6 / 5 / 13;
}
#w-node-_11481832-bf03-82de-ce08-5bcd874fb9a4-2b4a0719 {
  grid-area: 5 / 1 / 6 / 8;
}
#w-node-_14f108d0-63e1-1d2f-880f-460c1054a2a8-2b4a0719 {
  grid-area: 6 / 5 / 7 / 13;
}
#w-node-_11481832-bf03-82de-ce08-5bcd874fb9a9-2b4a0719 {
  grid-area: 7 / 1 / 8 / 8;
}
#w-node-_3d8e6f4f-6088-f040-b3c2-90f29abc26ef-2b4a0719 {
  grid-area: 7 / 9 / 8 / 13;
}

/* Tablet + mobile: stack every project card full-width in DOM order.
 * Overrides the recovered staggered 991/479 placements for these nodes. */
@media screen and (max-width: 991px) {
  #w-node-project-onewholearns-2b4a0719,
  #w-node-project-preziai-2b4a0719,
  #w-node-a1dc18dd-c97e-89bd-310b-5b31d2c60262-2b4a0719,
  #w-node-_054d8484-6da9-f331-0d61-343890c32bf8-2b4a0719,
  #w-node-_11481832-bf03-82de-ce08-5bcd874fb99a-2b4a0719,
  #w-node-_11481832-bf03-82de-ce08-5bcd874fb99f-2b4a0719,
  #w-node-_11481832-bf03-82de-ce08-5bcd874fb9a4-2b4a0719,
  #w-node-_14f108d0-63e1-1d2f-880f-460c1054a2a8-2b4a0719,
  #w-node-_11481832-bf03-82de-ce08-5bcd874fb9a9-2b4a0719,
  #w-node-_3d8e6f4f-6088-f040-b3c2-90f29abc26ef-2b4a0719 {
    grid-area: auto / 1 / auto / 13;
  }
}

/* Text-link CTAs ("View case study", "View projects"): the base .button is a
 * full-width flex row with justify-content: center, which floats the label
 * away from the left edge. Page-scoped left alignment. */
.button.is-text-link {
  justify-content: flex-start;
  text-align: left;
}

/* Hero layout: centered max-width column instead of the Webflow 12-col grid.
 * The content-wrap used to sit at grid cols 5–9 of a `.layout_12col` grid; now
 * the grid is gone (`.about_header_content-row` is a plain block) and the column
 * is a fixed max-width centered with auto margins. ~39.3rem reproduces the old
 * 4-of-12-column span at the 120rem container width. */
.about_header_content-wrap {
  max-width: 34rem;
  margin-inline: auto;
}

/* Hero footer row: BERLIN left, scroll triangle centered, socials right.
 * Flexbox (not grid) on purpose: the children still carry Webflow node-id
 * `grid-area` rules from portfolio-embeds.css, and those ID selectors outrank
 * any class-based grid placement — a grid parent would let them spill into
 * implicit tracks and shove the triangle off-center. A flex parent ignores
 * grid-area outright. Equal `flex:1` on the outer items keeps the triangle
 * (natural width, in the middle) perfectly centered. */
.about_header_footer-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Parent .about_header_component is a flex column with `align-items: center`,
   * which shrinks this row to its content width and centers it. Force full
   * width so the `flex:1` outer items push BERLIN to the left edge and the
   * socials to the right edge (triangle stays centered between them). */
  width: 100%;
}
.about_header_footer-row .home-header_location {
  flex: 1;
}
.about_header_footer-row .social-links_wrap {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Hero CTA row: Explore/Contact links removed — keep the scroll triangle
 * centered instead of space-between pushing it to the far left. */
.about_header_cta-wrap {
  justify-content: center;
}

/* Hero meta row: tagline + "View work" link on one line, pushed apart.
 * (Parent .about_header_content-wrap is a flex column with a 3rem gap.) */
.about_header_meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 2.5rem;
  row-gap: 1rem;
}
/* Underline the hero link; the embeds CSS sets .button { text-decoration:
 * none !important; } so this needs !important to win. */
.about_header_meta-row .button.is-text-link {
  text-decoration: underline !important;
  text-underline-offset: 0.25em;
}

/* ---- Phase 29: three.js hero particle sphere (PortfolioSphere.svelte) ---- */
/* Full-viewport fixed canvas layer behind the page content. pointer-events:none
 * so it never intercepts nav/link clicks. Content sections are elevated above it. */
.canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.canvas-container canvas {
  display: block;
}
.main-wrapper {
  position: relative;
}
.main-wrapper > *:not(.canvas-container) {
  position: relative;
  z-index: 1;
}

/* ---- Unify project-item content spacing ----
 * .project_component has no layout of its own in webflow.css, so the vertical
 * gap between the media-link, the description, and the "View case study" link
 * collapsed to default <p> margins — inconsistent from card to card. Make it a
 * flex column with a single 1rem rhythm (matching .project_link's internal gap),
 * so every project card spaces its content identically. Baseline: Skills Beauty. */
.project_component {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Zero the default <p> margin so the flex gap alone controls the rhythm. */
.project_component p {
  margin-top: 0;
  margin-bottom: 0;
}