:root {
  --motion-wine: #7d1429;
  --motion-wine-deep: #28050c;
  --motion-cream: #f3ece2;
  --motion-ink: #3a0b14;
  --motion-ease: cubic-bezier(.22,.78,.18,1);
  --motion-overlay-z: 2000;
}

/* Curatoriart brand opener: square mark + masked sliding name. */
#preloader.brand-motion {
  position: fixed;
  inset: 0;
  z-index: var(--motion-overlay-z);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--motion-cream);
  background:
    radial-gradient(circle at 50% 44%, rgba(159,40,64,.28), transparent 34rem),
    var(--motion-wine-deep) !important;
  clip-path: inset(0 0 0 0);
  transition: clip-path .82s var(--motion-ease), visibility 0s linear 0s !important;
  pointer-events: auto;
}

#preloader.brand-motion.is-hidden {
  opacity: 1 !important;
  visibility: hidden !important;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .82s var(--motion-ease), visibility 0s linear .82s !important;
  pointer-events: none;
}

#preloader.brand-motion.is-leaving {
  visibility: visible !important;
  clip-path: inset(0 0 0 0);
  transition-duration: .58s, 0s !important;
}

.brand-motion__ambient {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(112deg, transparent 35%, rgba(255,244,228,.055) 48%, transparent 61%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 88px, rgba(243,236,226,.035) 89px 90px);
  animation: ca-loader-ambient 7s ease-in-out infinite alternate;
}

.brand-motion__lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px,2.2vw,28px);
}

.brand-motion__square {
  width: clamp(72px,8vw,118px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: clamp(20px,2.4vw,34px);
  background: var(--motion-cream);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 #fff;
  animation: ca-loader-square 1.05s var(--motion-ease) both;
}

.brand-motion__square img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  animation: ca-loader-mark 1.15s .08s var(--motion-ease) both;
}

.brand-motion__name {
  width: clamp(190px,31vw,510px);
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: ca-loader-name-mask .92s .32s var(--motion-ease) forwards;
}

.brand-motion__name img {
  display: block;
  width: 100%;
  filter: brightness(0) invert(94%) sepia(11%) saturate(258%) hue-rotate(338deg) brightness(106%);
  transform: translateX(-34%);
  animation: ca-loader-name-slide .92s .32s var(--motion-ease) forwards;
}

.brand-motion__footer {
  position: absolute;
  left: clamp(22px,5vw,80px);
  right: clamp(22px,5vw,80px);
  bottom: clamp(22px,4vw,54px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: rgba(243,236,226,.5);
  font: 750 8px/1 ui-monospace,monospace;
  letter-spacing: .19em;
  opacity: 0;
  animation: ca-loader-footer .55s .72s ease forwards;
}

.brand-motion__footer i { height: 1px; background: rgba(243,236,226,.16); }

@keyframes ca-loader-square {
  from { opacity: 0; transform: translate3d(-42px,0,0) scale(.68) rotate(-8deg); border-radius: 50%; }
  to { opacity: 1; transform: none; }
}
@keyframes ca-loader-mark {
  from { opacity: 0; transform: scale(.45) rotate(-38deg); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes ca-loader-name-mask { to { clip-path: inset(0); } }
@keyframes ca-loader-name-slide { to { transform: translateX(0); } }
@keyframes ca-loader-footer { to { opacity: 1; } }
@keyframes ca-loader-ambient { to { transform: translate3d(2%,1%,0) scale(1.035); } }

/* Editorial 4:5 portfolio showreel inspired by slow collection reveals. */
.portfolio-teaser {
  min-height: min(1040px, 100svh);
  display: grid;
  grid-template-columns: minmax(330px,.82fr) minmax(420px,1.18fr);
  align-items: center;
  gap: clamp(48px,7vw,118px);
  padding: clamp(92px,10vw,170px) clamp(24px,7vw,120px) !important;
  overflow: hidden;
  color: var(--motion-ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(125,20,41,.07), transparent 28rem),
    #f7f1e8 !important;
}

.portfolio-teaser__copy { position: relative; z-index: 2; }
.portfolio-teaser__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(30px,4vw,58px);
  color: rgba(58,11,20,.58);
  font: 760 8px/1 ui-monospace,monospace;
  letter-spacing: .17em;
}
.portfolio-teaser__meta i { width: 34px; height: 1px; background: rgba(110,18,35,.24); }
.portfolio-teaser h2 {
  margin: 0;
  color: var(--motion-ink);
  font-size: clamp(54px,6.4vw,106px);
  font-weight: 720;
  line-height: .84;
  letter-spacing: -.075em;
}
.portfolio-teaser h2 span { display: inline-block; }
.portfolio-teaser h2 em {
  color: var(--motion-wine);
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400;
  letter-spacing: -.08em;
}
.portfolio-teaser__copy > p {
  max-width: 560px;
  margin: 34px 0 28px;
  color: rgba(58,11,20,.6);
  font-size: clamp(14px,1.15vw,18px);
  line-height: 1.75;
}
.portfolio-teaser__cta {
  width: fit-content;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 22px;
  border: 1px solid rgba(110,18,35,.24);
  border-radius: 999px;
  color: var(--motion-cream);
  background: var(--motion-wine);
  box-shadow: 0 16px 36px rgba(81,13,27,.16);
  font-size: 13px;
  font-weight: 760;
  transition: transform .25s var(--motion-ease), box-shadow .25s ease, background .25s ease;
}
.portfolio-teaser__cta:hover { transform: translateY(-3px); background: #651020; box-shadow: 0 22px 48px rgba(81,13,27,.22); }
.portfolio-teaser__cta span { font-size: 18px; }

.portfolio-showreel {
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 4 / 5;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(110,18,35,.18);
  border-radius: clamp(28px,4vw,54px);
  background: var(--motion-wine);
  box-shadow: 0 45px 110px rgba(73,12,24,.22), inset 0 1px 0 rgba(255,255,255,.25);
  isolation: isolate;
}
.portfolio-showreel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -100px 120px rgba(27,2,7,.09);
}
.portfolio-scene {
  --scene-delay: 0s;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.portfolio-showreel.is-playing .portfolio-scene {
  animation: ca-portfolio-scene 12s var(--scene-delay) infinite both;
}
.portfolio-scene__top {
  position: absolute;
  z-index: 4;
  top: clamp(22px,4vw,46px);
  left: clamp(22px,4vw,46px);
  right: clamp(22px,4vw,46px);
  display: flex;
  justify-content: space-between;
  font: 760 7px/1 ui-monospace,monospace;
  letter-spacing: .17em;
}
.portfolio-scene__caption {
  position: absolute;
  z-index: 5;
  left: clamp(22px,4vw,46px);
  right: clamp(22px,4vw,46px);
  bottom: clamp(24px,4vw,48px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
}
.portfolio-scene__caption b { font: 760 7px/1.4 ui-monospace,monospace; letter-spacing: .13em; }
.portfolio-scene--one { color: var(--motion-ink); background: var(--motion-cream); }
.portfolio-scene__word {
  position: absolute;
  z-index: 2;
  top: 16%;
  left: -1%;
  color: var(--motion-wine);
  font-size: clamp(84px,10vw,174px);
  font-weight: 850;
  line-height: .8;
  letter-spacing: -.09em;
}
.portfolio-scene__art--hero {
  position: absolute;
  z-index: 3;
  left: 26%;
  top: 29%;
  width: 48%;
  height: 48%;
  margin: 0;
  overflow: hidden;
  border: 10px solid #fff8ef;
  box-shadow: 0 28px 55px rgba(63,8,19,.2);
  transform: rotate(2.5deg);
}
.portfolio-scene__art img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-showreel.is-playing .portfolio-scene__word,
.portfolio-showreel.is-playing .portfolio-scene__art,
.portfolio-showreel.is-playing .portfolio-scene__statement,
.portfolio-showreel.is-playing .portfolio-scene__brand-lockup {
  animation: ca-portfolio-content 12s var(--scene-delay) infinite both;
}

.portfolio-scene--two { color: var(--motion-cream); background: linear-gradient(145deg,#8b1b33,#5f0d1e); }
.portfolio-phone {
  position: absolute;
  top: 22%;
  width: 38%;
  aspect-ratio: 9 / 16;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background: #f8f0e6;
  box-shadow: 0 26px 56px rgba(26,2,7,.28);
}
.portfolio-phone img { width: 100%; height: calc(100% - 24px); object-fit: cover; border-radius: 17px; }
.portfolio-phone span { display: block; padding: 8px 3px 0; color: var(--motion-wine); font: 750 6px/1 ui-monospace,monospace; letter-spacing: .11em; }
.portfolio-phone--a { left: -8%; transform: rotate(-8deg); }
.portfolio-phone--b { left: 31%; z-index: 2; transform: translateY(-7%) rotate(2deg); }
.portfolio-phone--c { right: -8%; transform: rotate(9deg); }
.portfolio-showreel.is-playing .portfolio-phone { animation: ca-portfolio-phone 12s var(--scene-delay) infinite both; }
.portfolio-scene__marquee {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 7%;
  overflow: hidden;
  color: rgba(243,236,226,.2);
  font-size: clamp(30px,4.5vw,70px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.portfolio-scene--three { color: var(--motion-cream); background: linear-gradient(115deg,var(--motion-wine-deep) 0 48%,var(--motion-cream) 48%); }
.portfolio-scene--three .portfolio-scene__top { mix-blend-mode: difference; }
.portfolio-scene__brand-lockup {
  position: absolute;
  z-index: 3;
  top: 22%;
  left: 10%;
  right: 10%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.portfolio-scene__mark { width: 31%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26px; background: var(--motion-cream); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.portfolio-scene__mark img { width: 75%; height: 75%; object-fit: contain; }
.portfolio-scene__brand-name { width: 62%; overflow: hidden; }
.portfolio-scene__brand-name img { width: 100%; filter: brightness(0) invert(94%) sepia(11%) saturate(258%) hue-rotate(338deg) brightness(106%); }
.portfolio-scene__statement {
  position: absolute;
  z-index: 4;
  left: 10%;
  bottom: 17%;
  margin: 0;
  color: var(--motion-cream);
  font-size: clamp(34px,4.4vw,70px);
  font-weight: 720;
  line-height: .92;
  letter-spacing: -.06em;
}
.portfolio-scene__statement em { color: var(--motion-wine); font-family: Georgia,serif; font-weight: 400; }
.portfolio-scene--three .portfolio-scene__caption { mix-blend-mode: difference; }

@keyframes ca-portfolio-scene {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(12px); }
  3%,27% { opacity: 1; clip-path: inset(0); filter: none; }
  32%,100% { opacity: 0; clip-path: inset(0 0 0 100%); filter: blur(8px); }
}
@keyframes ca-portfolio-content {
  0%,2% { opacity: 0; transform: translate3d(0,70px,0) scale(.94); filter: blur(9px); }
  8%,26% { opacity: 1; filter: none; }
  8% { transform: none; }
  26% { transform: translate3d(0,-8px,0) scale(1.015); }
  32%,100% { opacity: 0; transform: translate3d(0,-55px,0) scale(1.03); }
}
@keyframes ca-portfolio-phone {
  0%,2% { opacity: 0; translate: 0 90px; scale: .88; filter: blur(8px); }
  9%,26% { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  32%,100% { opacity: 0; translate: 0 -55px; scale: 1.04; }
}

/* Requested Bordeaux studio surface. */
.about {
  color: var(--motion-cream) !important;
  background:
    radial-gradient(circle at 79% 20%, rgba(255,236,220,.1), transparent 31rem),
    linear-gradient(135deg,#84162d 0%,#761225 52%,#64101f 100%) !important;
}

/* Navigation refinements from final visual review. */
@media (min-width: 901px) {
  .site-header,
  .site-header.is-scrolled {
    border-bottom: 0 !important;
    border-color: transparent !important;
  }
}

@media (max-width: 900px) {
  .site-header .main-nav > a.nav-login {
    min-height: 58px !important;
    margin-top: 14px !important;
    padding: 0 20px !important;
    justify-content: space-between !important;
    border: 1px solid rgba(255,239,224,.34) !important;
    border-radius: 18px !important;
    color: #fff8ef !important;
    background: linear-gradient(135deg,rgba(139,26,49,.92),rgba(96,12,29,.94)) !important;
    box-shadow: 0 16px 34px rgba(10,0,3,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  .site-header .main-nav > a.nav-login::after {
    content: "→" !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    color: rgba(255,248,239,.78) !important;
    background: none !important;
    font-size: 18px;
  }
}

/* Marketplace and member mobile corrections. */
@media (max-width: 760px) {
  body.has-panel-dock { padding-bottom: 116px !important; }
  .market-shell { padding-bottom: 132px !important; }
  .panel-dock {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px,env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    gap: 2px !important;
    padding: 6px !important;
  }
  .panel-dock__item,
  .panel-dock__item.is-active {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-inline: 6px !important;
  }
  .panel-dock__separator { margin-inline: 0 !important; }
}

@media (max-width: 600px) {
  .market-shell { width: calc(100% - 20px) !important; padding-top: 34px !important; }
  .market-hero {
    min-height: 0 !important;
    gap: 34px !important;
    padding: 34px 20px !important;
    border-radius: 28px !important;
  }
  .market-hero h1 { margin-block: 22px 10px !important; font-size: clamp(68px,22vw,94px) !important; }
  .market-hero > div { min-width: 0; }
  .market-search {
    width: 100%;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center;
    gap: 4px;
    padding: 4px !important;
    flex-wrap: nowrap !important;
  }
  .market-search input { width: 100% !important; min-width: 0 !important; padding-inline: 14px !important; font-size: 14px !important; }
  .market-search button { width: auto !important; min-width: 74px !important; min-height: 48px !important; padding-inline: 14px !important; }
  .market-section { margin-top: 26px !important; padding: 24px 18px !important; border-radius: 26px !important; }
  .market-section-head { align-items: end !important; flex-direction: row !important; }

  .profile-shell { width: calc(100% - 20px) !important; padding-inline: 0 !important; }
  .profile-page .profile-card { padding: 16px !important; }
  .profile-page .profile-card button {
    width: 100% !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .profile-page .profile-card button span { text-align: center; }
  .profile-page .profile-card button i { font-size: 17px; }
}

@media (max-width: 980px) {
  .portfolio-teaser {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 58px;
  }
  .portfolio-showreel { justify-self: center; width: min(100%,620px); }
  .portfolio-teaser__copy { max-width: 720px; }
}

@media (max-width: 560px) {
  .brand-motion__lockup { flex-direction: column; gap: 18px; }
  .brand-motion__name { width: min(72vw,290px); }
  .brand-motion__footer { grid-template-columns: 1fr; text-align: center; }
  .brand-motion__footer i,
  .brand-motion__footer span:last-child { display: none; }
  .portfolio-teaser { padding: 78px 16px !important; gap: 42px; }
  .portfolio-teaser__meta { flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
  .portfolio-teaser h2 { font-size: clamp(50px,16vw,76px); }
  .portfolio-teaser__copy > p { margin-block: 25px 22px; font-size: 14px; }
  .portfolio-teaser__cta { width: 100%; justify-content: space-between; font-size: 12px; }
  .portfolio-showreel { border-radius: 30px; }
  .portfolio-scene__word { top: 19%; font-size: 22vw; }
  .portfolio-scene__art--hero { left: 22%; width: 56%; height: 48%; border-width: 6px; }
  .portfolio-phone { border-radius: 17px; padding: 5px; }
  .portfolio-phone img { border-radius: 12px; }
  .portfolio-scene__statement { font-size: 9vw; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader.brand-motion,
  #preloader.brand-motion.is-hidden,
  #preloader.brand-motion.is-leaving { transition: opacity .12s linear, visibility .12s linear !important; }
  .brand-motion__ambient,
  .brand-motion__square,
  .brand-motion__square img,
  .brand-motion__name,
  .brand-motion__name img,
  .brand-motion__footer,
  .portfolio-scene,
  .portfolio-scene__word,
  .portfolio-scene__art,
  .portfolio-scene__statement,
  .portfolio-scene__brand-lockup,
  .portfolio-phone { animation: none !important; }
  #preloader.brand-motion.is-hidden { opacity: 0 !important; clip-path: none; }
  .portfolio-scene--one { opacity: 1 !important; clip-path: none !important; }
  .portfolio-scene--two,
  .portfolio-scene--three { display: none; }
}

/* 2026 refined loader — light editorial canvas, one purposeful motion. */
#preloader.brand-motion {
  color: var(--motion-ink);
  background: #f7f1e8 !important;
  opacity: 1;
  clip-path: none;
  transition: opacity .34s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s !important;
}

#preloader.brand-motion.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  clip-path: none;
  transition: opacity .34s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s !important;
}

#preloader.brand-motion.is-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none;
  transition-duration: .2s,0s !important;
}

.brand-motion__wash {
  position: absolute;
  inset: -28%;
  background:
    radial-gradient(circle at 28% 42%,rgba(110,18,35,.12),transparent 22%),
    radial-gradient(circle at 72% 58%,rgba(145,38,59,.08),transparent 25%),
    linear-gradient(118deg,transparent 34%,rgba(255,255,255,.74) 50%,transparent 66%);
  transform: rotate(-5deg);
  animation: ca2-loader-wash 1.1s cubic-bezier(.16,1,.3,1) both;
}

.brand-motion__frame {
  position: absolute;
  inset: clamp(18px,3vw,48px);
  pointer-events: none;
}

.brand-motion__frame i {
  position: absolute;
  width: clamp(28px,4vw,58px);
  height: clamp(28px,4vw,58px);
  border-color: rgba(110,18,35,.22);
}

.brand-motion__frame i:nth-child(1) { top:0;left:0;border-top:1px solid;border-left:1px solid; }
.brand-motion__frame i:nth-child(2) { top:0;right:0;border-top:1px solid;border-right:1px solid; }
.brand-motion__frame i:nth-child(3) { bottom:0;left:0;border-bottom:1px solid;border-left:1px solid; }
.brand-motion__frame i:nth-child(4) { right:0;bottom:0;border-right:1px solid;border-bottom:1px solid; }

.brand-motion__editorial {
  position: relative;
  z-index: 2;
  width: min(620px,calc(100vw - 56px));
}

.brand-motion__lockup {
  display: block;
  justify-content: center;
}

.brand-motion__logo {
  display: block;
  width: min(390px,76vw);
  height: auto;
  aspect-ratio: 706 / 159;
  margin: 0 auto;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  clip-path: none;
  filter: none;
  transform: none;
  animation: ca2-loader-logo .42s cubic-bezier(.16,1,.3,1) both;
}

.brand-motion__square {
  width: clamp(68px,7vw,92px);
  border: 1px solid rgba(110,18,35,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 48px rgba(65,8,20,.11),inset 0 1px 0 #fff;
  animation: ca2-loader-mark .62s cubic-bezier(.16,1,.3,1) both;
}

.brand-motion__square img {
  width: 70%;
  height: 70%;
  animation: none;
}

.brand-motion__name {
  width: min(390px,76vw);
  margin: 0 auto;
  clip-path: inset(0 100% 0 0);
  animation: ca2-loader-name .68s .12s cubic-bezier(.16,1,.3,1) forwards;
}

.brand-motion__name img {
  width: 100%;
  filter: none;
  transform: translate3d(-18%,0,0);
  animation: ca2-loader-name-slide .68s .12s cubic-bezier(.16,1,.3,1) forwards;
}

.brand-motion__status {
  margin: clamp(30px,5vw,48px) 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(58,11,20,.62);
  font: 760 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .17em;
  opacity: 0;
  animation: ca2-loader-fade .35s .28s ease-out forwards;
}

.brand-motion__count { color: var(--motion-wine); }
.brand-motion__progress { height: 2px; overflow: hidden; border-radius: 999px; background: rgba(110,18,35,.12); }
.brand-motion__progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6e1223,#a33b50);
  transform: scaleX(0);
  transform-origin: left;
  animation: ca2-loader-progress .7s .1s cubic-bezier(.16,1,.3,1) forwards;
}

.brand-motion__footer {
  color: rgba(58,11,20,.46);
  animation: ca2-loader-fade .35s .36s ease-out forwards;
}
.brand-motion__footer i { background: rgba(110,18,35,.14); }

#preloader.brand-motion.is-leaving .brand-motion__wash,
#preloader.brand-motion.is-leaving .brand-motion__square,
#preloader.brand-motion.is-leaving .brand-motion__name,
#preloader.brand-motion.is-leaving .brand-motion__name img,
#preloader.brand-motion.is-leaving .brand-motion__logo,
#preloader.brand-motion.is-leaving .brand-motion__status,
#preloader.brand-motion.is-leaving .brand-motion__progress i,
#preloader.brand-motion.is-leaving .brand-motion__footer { animation-duration: .2s; animation-delay: 0s; }

@keyframes ca2-loader-wash { from { opacity:0;transform:translate3d(-3%,1%,0) rotate(-7deg) scale(.96); } to { opacity:1;transform:rotate(-5deg); } }
@keyframes ca2-loader-mark { from { opacity:0;transform:translate3d(-16px,0,0) scale(.72) rotate(-12deg); } to { opacity:1;transform:none; } }
@keyframes ca2-loader-logo { from { opacity:.72;transform:translate3d(0,8px,0) scale(.985); } to { opacity:1;transform:none; } }
@keyframes ca2-loader-name { to { clip-path:inset(0); } }
@keyframes ca2-loader-name-slide { to { transform:none; } }
@keyframes ca2-loader-progress { to { transform:scaleX(1); } }
@keyframes ca2-loader-fade { to { opacity:1; } }

/* Portfolio atelier — a real portfolio surface instead of decorative phone cards. */
.portfolio-teaser {
  grid-template-columns: minmax(360px,.86fr) minmax(560px,1.14fr);
  gap: clamp(56px,7vw,120px);
  background:
    radial-gradient(circle at 11% 20%,rgba(125,20,41,.055),transparent 25rem),
    linear-gradient(180deg,#faf5ed,#f4ece2) !important;
}

.portfolio-teaser h2 {
  max-width: 760px;
  font-size: clamp(52px,5.65vw,92px);
  line-height: .88;
}

.portfolio-teaser__copy > p { max-width: 520px; color: rgba(58,11,20,.68); }

.portfolio-showcase {
  position: relative;
  width: min(100%,780px);
  aspect-ratio: 1.08 / 1;
  justify-self: end;
  perspective: 1400px;
  isolation: isolate;
}

.portfolio-showcase__aura {
  position: absolute;
  inset: 3% -4% -5% 8%;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(circle at 66% 35%,rgba(179,67,88,.78),transparent 37%),linear-gradient(145deg,#7b1428,#37070f);
  box-shadow: 0 50px 120px rgba(65,8,20,.22);
  transform: rotate(2deg);
}

.portfolio-browser {
  position: absolute;
  inset: 4% 3% 5% 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(110,18,35,.18);
  border-radius: clamp(26px,3vw,40px);
  color: var(--motion-ink);
  background: #f9f3ea;
  box-shadow: 0 34px 84px rgba(42,4,12,.25),inset 0 1px 0 #fff;
  transform: rotateY(-3deg) rotateX(1deg);
  transform-origin: center;
}

.portfolio-showcase.is-playing .portfolio-browser { animation: ca2-browser-enter .7s cubic-bezier(.16,1,.3,1) both; }
.portfolio-browser__bar {
  min-height: 68px;
  padding: 0 clamp(18px,2.4vw,30px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(110,18,35,.12);
  font: 720 7px/1 ui-monospace,monospace;
  letter-spacing: .12em;
}
.portfolio-browser__brand { display:flex;align-items:center;gap:8px; }
.portfolio-browser__brand img { width:24px;height:24px;object-fit:contain; }
.portfolio-browser__bar nav { display:flex;gap:18px; }
.portfolio-browser__url { justify-self:end;color:rgba(58,11,20,.5);text-transform:lowercase;letter-spacing:0; }

.portfolio-browser__body {
  min-height: 0;
  padding: clamp(18px,2.8vw,34px);
  display: grid;
  grid-template-columns: minmax(150px,.75fr) minmax(230px,1.25fr) minmax(70px,.32fr);
  gap: clamp(14px,2vw,24px);
}

.portfolio-browser__intro { padding-top: clamp(8px,2vw,24px); }
.portfolio-browser__intro > span { color:rgba(110,18,35,.55);font:760 7px/1.5 ui-monospace,monospace;letter-spacing:.14em; }
.portfolio-browser__intro h3 { margin:clamp(22px,3vw,38px) 0 20px;color:var(--motion-ink);font-size:clamp(28px,3.2vw,50px);line-height:.9;letter-spacing:-.065em; }
.portfolio-browser__intro h3 em { color:var(--motion-wine);font-family:Georgia,serif;font-weight:400; }
.portfolio-browser__intro p { max-width:230px;margin:0;color:rgba(58,11,20,.6);font-size:clamp(9px,.78vw,12px);line-height:1.7; }
.portfolio-browser__tags { margin-top:clamp(22px,4vw,42px);display:flex;flex-wrap:wrap;gap:6px; }
.portfolio-browser__tags span { padding:7px 9px;border:1px solid rgba(110,18,35,.16);border-radius:999px;color:rgba(58,11,20,.64);font:700 6px/1 ui-monospace,monospace;letter-spacing:.08em; }

.portfolio-browser__feature { min-width:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto; }
.portfolio-browser__art-stack { position:relative;min-height:0;overflow:hidden;border-radius:clamp(18px,2vw,28px);background:#21050b;box-shadow:0 18px 42px rgba(65,8,20,.16); }
.portfolio-browser__art-stack img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04); }
.portfolio-browser__art-stack img:first-child { opacity:1; }
.portfolio-showcase.is-playing .portfolio-browser__art-stack img { animation:ca2-art-cycle 12s infinite both; }
.portfolio-showcase.is-playing .portfolio-browser__art-stack img:nth-child(2) { animation-delay:4s; }
.portfolio-showcase.is-playing .portfolio-browser__art-stack img:nth-child(3) { animation-delay:8s; }
.portfolio-browser__feature figcaption { padding-top:15px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px; }
.portfolio-browser__feature figcaption span { grid-row:1/3;color:var(--motion-wine);font:760 7px/1 ui-monospace,monospace;letter-spacing:.12em; }
.portfolio-browser__feature figcaption b { font-size:11px; }
.portfolio-browser__feature figcaption small { color:rgba(58,11,20,.5);font-size:8px; }

.portfolio-browser__rail { display:grid;grid-template-rows:1fr 1fr;gap:10px; }
.portfolio-browser__rail figure { position:relative;min-height:0;margin:0;overflow:hidden;border-radius:16px;background:#e7ddd0; }
.portfolio-browser__rail img { width:100%;height:100%;object-fit:cover; }
.portfolio-browser__rail span { position:absolute;right:8px;bottom:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(58,11,20,.78);font:700 7px/1 ui-monospace,monospace; }
.portfolio-browser__footer { min-height:45px;padding:0 clamp(18px,2.4vw,30px);display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(110,18,35,.12);color:rgba(58,11,20,.5);font:700 6px/1 ui-monospace,monospace;letter-spacing:.12em; }

.portfolio-showcase__badge {
  position:absolute;
  z-index:5;
  right:-2%;
  bottom:8%;
  min-height:66px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:20px;
  color:#fff8ef;
  background:rgba(93,12,29,.92);
  box-shadow:0 20px 48px rgba(42,4,12,.28),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  opacity:0;
}
.portfolio-showcase.is-playing .portfolio-showcase__badge { animation:ca2-badge-enter .5s .42s cubic-bezier(.16,1,.3,1) forwards; }
.portfolio-showcase__badge i { width:9px;height:9px;border:2px solid rgba(255,255,255,.42);border-radius:50%;background:#f3ece2;box-shadow:0 0 0 5px rgba(255,255,255,.07); }
.portfolio-showcase__badge span { font-size:9px;line-height:1.45;color:rgba(255,248,239,.64); }
.portfolio-showcase__badge b { display:block;color:#fff8ef;font:760 7px/1.5 ui-monospace,monospace;letter-spacing:.1em; }
.portfolio-showcase__index { position:absolute;z-index:6;top:0;right:7%;display:flex;align-items:baseline;gap:5px;color:var(--motion-cream);text-shadow:0 3px 12px rgba(42,4,12,.25); }
.portfolio-showcase__index b { font-size:28px; }.portfolio-showcase__index span,.portfolio-showcase__index small { font:700 8px/1 ui-monospace,monospace;opacity:.62; }

@keyframes ca2-browser-enter { from { opacity:0;transform:translate3d(0,28px,0) rotateY(-7deg) rotateX(2deg) scale(.97); } to { opacity:1;transform:rotateY(-3deg) rotateX(1deg); } }
@keyframes ca2-badge-enter { from { opacity:0;transform:translate3d(22px,18px,0) scale(.9); } to { opacity:1;transform:none; } }
@keyframes ca2-art-cycle { 0%{opacity:0;transform:scale(1.045)} 5%,29%{opacity:1;transform:scale(1)} 34%,100%{opacity:0;transform:scale(.985)} }

@media (max-width:1100px) {
  .portfolio-teaser { grid-template-columns:minmax(320px,.84fr) minmax(470px,1.16fr);gap:46px; }
  .portfolio-browser__bar nav { display:none; }
  .portfolio-browser__bar { grid-template-columns:1fr 1fr; }
}

@media (max-width:980px) {
  .portfolio-teaser { grid-template-columns:1fr;min-height:0; }
  .portfolio-showcase { width:min(100%,760px);justify-self:center; }
  .portfolio-teaser__copy { max-width:760px; }
}

@media (max-width:600px) {
  .brand-motion__lockup { display:block; }
  .brand-motion__name { width:min(74vw,280px); }
  .brand-motion__status { font-size:7px;letter-spacing:.12em; }
  .portfolio-teaser { padding:74px 16px !important;gap:38px; }
  .portfolio-teaser h2 { font-size:clamp(47px,15.5vw,70px);line-height:.9; }
  .portfolio-showcase { aspect-ratio:.82 / 1; }
  .portfolio-showcase__aura { inset:5% -3% -4% 7%;border-radius:32px; }
  .portfolio-browser { inset:3% 2% 4% 0;border-radius:28px; }
  .portfolio-browser__bar { min-height:56px;grid-template-columns:1fr; }
  .portfolio-browser__url { display:none; }
  .portfolio-browser__body { grid-template-columns:.72fr 1.28fr;padding:16px;gap:12px; }
  .portfolio-browser__rail { display:none; }
  .portfolio-browser__intro h3 { font-size:clamp(27px,8.5vw,38px); }
  .portfolio-browser__intro p { font-size:9px;line-height:1.55; }
  .portfolio-browser__tags span:nth-child(3) { display:none; }
  .portfolio-showcase__badge { right:-1%;bottom:7%;min-height:58px;padding-inline:14px;border-radius:17px; }
  .portfolio-browser__footer { font-size:5px; }
}

@media (prefers-reduced-motion:reduce) {
  .brand-motion__wash,.brand-motion__square,.brand-motion__name,.brand-motion__name img,
  .brand-motion__status,.brand-motion__progress i,.brand-motion__footer,
  .portfolio-showcase.is-playing .portfolio-browser,.portfolio-showcase.is-playing .portfolio-showcase__badge,
  .portfolio-showcase.is-playing .portfolio-browser__art-stack img { animation:none !important; }
  .brand-motion__name { clip-path:none; }.brand-motion__name img { transform:none; }
  .brand-motion__status,.brand-motion__footer,.portfolio-showcase__badge { opacity:1; }
  .brand-motion__progress i { transform:none; }
  .portfolio-browser__art-stack img:not(:first-child) { display:none; }
}

/* Curatoriart intro v4: one logo, one pass, no navigation interception. */
html:not(.ca-loader-active) #preloader.brand-motion,
#preloader.brand-motion[hidden],
#preloader.brand-motion.is-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.ca-loader-active { overflow: hidden; }

html.ca-loader-active #preloader.brand-motion {
  position: fixed;
  inset: 0;
  z-index: var(--motion-overlay-z);
  width: 100%;
  height: 100%;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  contain: strict;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: none !important;
  color: var(--motion-ink);
  background:
    radial-gradient(circle at 50% 45%,rgba(153,43,65,.10),transparent 24rem),
    linear-gradient(145deg,#fbf7f1 0%,#f3ece2 58%,#eee3d7 100%) !important;
  transition: opacity .22s ease, visibility 0s linear 0s !important;
}

html.ca-loader-active #preloader.brand-motion.is-closing {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity .22s ease !important;
}

.brand-motion__veil {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(118deg,transparent 39%,rgba(255,255,255,.62) 49%,transparent 59%),
    radial-gradient(circle at 28% 32%,rgba(110,18,35,.07),transparent 18rem);
  opacity: .72;
  transform: translate3d(-2%,0,0) rotate(-4deg);
  animation: ca-loader-v4-veil .52s var(--motion-ease) both;
}

html.ca-loader-active .brand-motion__editorial {
  position: relative;
  z-index: 2;
  width: min(560px,calc(100vw - 44px));
  padding: clamp(24px,5vw,42px);
  border: 1px solid rgba(110,18,35,.12);
  border-radius: clamp(24px,5vw,38px);
  background: rgba(251,247,241,.68);
  box-shadow: 0 28px 80px rgba(65,8,20,.09),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}

.brand-motion__kicker {
  display: block;
  margin-bottom: clamp(28px,5vw,42px);
  color: rgba(58,11,20,.52);
  font: 760 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .18em;
  text-align: center;
  opacity: 1;
  animation: ca-loader-v4-rise .28s .04s ease-out forwards;
}

html.ca-loader-active .brand-motion__lockup { display: block; }

html.ca-loader-active .brand-motion__logo {
  display: block;
  width: min(430px,76vw);
  height: auto;
  aspect-ratio: 2400 / 620;
  margin: 0 auto;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  clip-path: none;
  filter: none;
  transform: translate3d(0,10px,0) scale(.985);
  animation: ca-loader-v4-logo .38s .06s var(--motion-ease) forwards;
}

html.ca-loader-active .brand-motion__status {
  margin: clamp(28px,5vw,42px) 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(58,11,20,.56);
  font: 720 8px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1;
  animation: ca-loader-v4-rise .25s .18s ease-out forwards;
}

html.ca-loader-active .brand-motion__progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(110,18,35,.10);
}

html.ca-loader-active .brand-motion__progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6e1223,#a74457);
  transform: scaleX(0);
  transform-origin: left;
  animation: ca-loader-v4-progress .44s .08s var(--motion-ease) forwards;
}

@keyframes ca-loader-v4-logo {
  to { transform: none; }
}

@keyframes ca-loader-v4-rise {
  from { opacity: 0; transform: translate3d(0,7px,0); }
  to { opacity: 1; transform: none; }
}

@keyframes ca-loader-v4-progress {
  to { transform: scaleX(1); }
}

@keyframes ca-loader-v4-veil {
  to { opacity: 1; transform: rotate(-4deg); }
}

@media (max-width: 480px) {
  html.ca-loader-active .brand-motion__editorial {
    width: calc(100vw - 28px);
    padding: 28px 20px;
    border-radius: 26px;
  }

  html.ca-loader-active .brand-motion__logo { width: min(82vw,360px); }
  html.ca-loader-active .brand-motion__status { font-size: 7px; letter-spacing: .09em; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-motion__veil,
  .brand-motion__kicker,
  html.ca-loader-active .brand-motion__logo,
  html.ca-loader-active .brand-motion__status,
  html.ca-loader-active .brand-motion__progress i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}