/* Logo compositions. All logos keep their proportions and original colors. */
.project-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #eeeae1;
}
.project-art > span { pointer-events: none; }
.project-art .art-logo {
  position: relative;
  z-index: 3;
  width: 76%;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 12px 14px rgb(32 35 30 / .07));
  transition: transform 1s cubic-bezier(.2,.65,.2,1), filter 1s;
}
.project-art .art-light {
  position: absolute;
  inset: -25%;
  z-index: 0;
  animation: atmosphere-drift 16s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.project-art.is-visible .art-light { animation-play-state: running; }
.art-orbit, .art-form {
  position: absolute;
  z-index: 1;
  transition: transform 1.4s cubic-bezier(.2,.65,.2,1);
}
.project-art .art-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .075;
  background: url('assets/art-grain.svg');
  mix-blend-mode: soft-light;
}
.project-image .project-arrow { z-index: 5; }
.project-detail-image { position: relative; overflow: hidden; min-width: 0; width: 100%; }
.project-dialog .dialog-close { z-index: 10; background: var(--background); opacity: .95; }
@media (min-width: 768px) {
  .project-detail-image { aspect-ratio: auto; }
}

/* Osyra — a quiet, luminous orbit. */
.art-osyra { background: #101423; }
.art-osyra .art-light {
  background:
    radial-gradient(ellipse at 20% 35%, #c17c663d, transparent 37%),
    radial-gradient(ellipse at 72% 62%, #687dde72, transparent 38%),
    radial-gradient(ellipse at 53% 110%, #8a9fce40, transparent 60%);
}
.art-osyra .art-logo { width: 43%; max-height: 45%; filter: drop-shadow(0 30px 25px #0007); }
.art-osyra .art-orbit {
  width: 145%; height: 49%; left: -23%; top: 28%;
  border: 1px solid #c5c9f345;
  border-radius: 50%;
  transform: rotate(-38deg);
  box-shadow: 0 0 30px #9fa9ff0b, inset 0 0 22px #9fa9ff0b;
}
.art-osyra .art-orbit::after {
  content: ''; position: absolute; inset: 18%;
  border: 1px solid #c4d0ff17; border-radius: inherit;
}
.art-osyra .art-form {
  left: -25%; bottom: -48%; width: 150%; height: 77%;
  border-radius: 50%; border-top: 1px solid #e6c2aa4d;
  background: linear-gradient(180deg, #bb947c10, #0a0b13 36%);
  box-shadow: 0 -20px 55px #9385c514;
  transform: rotate(-15deg);
}

/* Life Lately — warm paper, sage light and a gently folded surface. */
.art-life { background: #f1ece1; }
.art-life .art-light {
  background:
    radial-gradient(ellipse at 14% 12%, #c4cead 0, transparent 45%),
    radial-gradient(ellipse at 83% 90%, #dbc0af99, transparent 39%),
    radial-gradient(ellipse at 65% 40%, #fffdf4, transparent 55%);
}
.art-life .art-logo { width: 68%; transform: translateY(-5%) scale(1); }
.art-life .art-orbit {
  width: 125%; height: 125%; border: 1px solid #81916e25;
  border-radius: 50%; left: 35%; top: -77%;
  box-shadow: 0 0 0 22px #81916e09, 0 0 0 45px #81916e06;
  transform: rotate(-20deg);
}
.art-life .art-form {
  width: 160%; height: 90%; left: -27%; bottom: -77%;
  border-radius: 48% 48% 0 0;
  background: linear-gradient(180deg, #fdf9ef, #d7c9b6 42%);
  box-shadow: 0 -1px 0 #fff9, 0 -16px 35px #8a896820;
  transform: rotate(-28deg);
}
.art-life .art-grain { opacity: .17; mix-blend-mode: multiply; }

/* Polaris — precise lines crossing an illuminated coral horizon. */
.art-polaris { background: #f1edea; }
.art-polaris .art-light {
  background:
    radial-gradient(ellipse at 86% 77%, #ff5c4d47, transparent 39%),
    radial-gradient(ellipse at 18% 13%, #cfccdf99, transparent 47%),
    radial-gradient(ellipse at 50% 30%, #fff, transparent 52%);
}
.art-polaris .art-logo { width: 93%; max-height: 55%; }
.art-polaris .art-orbit {
  width: 180%; height: 95%; left: -39%; top: 55%;
  border: 1px solid #ff5c4d3d; border-radius: 50%;
  box-shadow: 0 -17px 0 -16px #ff5c4d23, 0 -42px 0 -41px #28234214;
  transform: rotate(-23deg);
}
.art-polaris .art-form {
  width: 115%; height: 35%; left: -35%; bottom: -12%;
  background: linear-gradient(180deg, #fff9, #e8ded959);
  border-top: 1px solid #ffffffbd;
  box-shadow: 0 -12px 28px #38324c08;
  transform: rotate(31deg);
}
.art-polaris .art-grain { opacity: .1; mix-blend-mode: multiply; }

/* Brandi — a cropped sculptural arch, in the brand's coral. */
.art-brandi { background: #dbe3cc; }
.art-brandi .art-light {
  background:
    radial-gradient(ellipse at 17% 2%, #f6f8e8, transparent 50%),
    radial-gradient(ellipse at 91% 73%, #7d98735c, transparent 48%),
    radial-gradient(ellipse at 30% 76%, #f3e5cf, transparent 36%);
}
.art-brandi .art-logo { width: 73%; transform: translateY(-12%) scale(1); }
.art-brandi .art-orbit {
  width: 95%; height: 88%; right: -54%; top: -44%;
  border: 1px solid #65795b39; border-radius: 48%;
  box-shadow: 0 0 0 27px #65795b0b, 0 0 0 55px #65795b08;
  transform: rotate(-30deg);
}
.art-brandi .art-form {
  width: 117%; height: 73%; left: -12%; bottom: -51%;
  border: clamp(25px, 4vw, 64px) solid #ee7554;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 2px 3px 9px #92382552, 10px 19px 28px #48634130, -2px -2px 1px #ffd0a7b8;
  transform: rotate(-34deg);
}
.art-brandi .art-grain { opacity: .12; mix-blend-mode: multiply; }

/* Roadmap covers use atmospheric photography or typographic studies. */
.roadmap-tag { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 12px; border-radius: 999px; background: #edf1b0; color: #283321; font: 600 11px/1.2 var(--font-body); letter-spacing: .035em; }
.roadmap-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.roadmap-tag--card { position: absolute; z-index: 5; top: 22px; left: 22px; box-shadow: 0 4px 18px #0000000d; }
.project-card--roadmap .project-caption h3 { white-space: normal; overflow: visible; }
.project-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-right: 12px; }
.project-dialog[data-roadmap='true'] #project-title { font-size: clamp(42px, 5vw, 62px); }
.project-roadmap-status { padding-block: 20px 12px; }
.project-roadmap-status p { font: 400 36px/1.1 var(--font-display); }
.project-art .art-title { position: relative; z-index: 3; width: 76%; font: 400 clamp(48px, 7vw, 106px)/.91 var(--font-display); letter-spacing: -.025em; text-align: left; transition: transform 1s cubic-bezier(.2,.65,.2,1); }
.art-title em { font-weight: 400; }
.art-chinatown { background: #251c1b; }
.art-chinatown .art-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
  transform: scale(1.025); filter: saturate(.86) contrast(1.03);
  transition: transform 1.2s cubic-bezier(.2,.65,.2,1), filter 1.2s;
}
.art-chinatown .art-light {
  z-index: 1; opacity: .55; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 25% 35%, #dc76462c, transparent 54%), radial-gradient(ellipse at 82% 78%, #737eaa22, transparent 55%);
}
.art-chinatown::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #140d1433, transparent 35%, #140d1433);
}
.art-chinatown .art-grain { opacity: .055; }
.art-invisible-mind { background: #252238; color: #f0e8fa; }
.art-invisible-mind .art-light { background: radial-gradient(ellipse at 72% 50%, #b6a4e346, transparent 45%), radial-gradient(ellipse at 5% 4%, #78929840, transparent 48%); }
.art-invisible-mind .art-title em { color: #bfb0da; }
.art-invisible-mind .art-orbit { width: 97%; height: 140%; left: 36%; top: -28%; border: 1px solid #d1c3ec30; border-radius: 50%; box-shadow: 0 0 0 23px #d1c3ec0a, 0 0 0 49px #d1c3ec08; transform: rotate(-30deg); }
.art-invisible-mind .art-form { width: 90%; height: 90%; left: 40%; bottom: -49%; border: 1px solid #b3c3e729; border-radius: 50%; background: radial-gradient(ellipse at 20% 20%, #c0b5e317, transparent 60%); transform: rotate(-15deg); }
.art-cultural-adaptation { background: #dbe7d2; color: #314c41; }
.art-cultural-adaptation .art-light { background: radial-gradient(ellipse at 0 0, #fff8d7, transparent 51%), radial-gradient(ellipse at 100% 85%, #96bcb45c, transparent 48%); }
.art-cultural-adaptation .art-title { padding-top: 20px; font-size: clamp(36px, 5vw, 74px); }
.art-cultural-adaptation .art-title em { color: #607961; }
.art-cultural-adaptation .art-orbit { width: 90%; height: 140%; left: 56%; top: -70%; border: 1px solid #66866f40; border-radius: 45%; box-shadow: 0 0 0 24px #66866f0a, 0 0 0 47px #66866f09; transform: rotate(-30deg); }
.art-cultural-adaptation .art-form { width: 100%; height: 70%; left: 42%; bottom: -52%; border-radius: 45%; background: linear-gradient(170deg, #f4f6d6, #a7c2a6); box-shadow: 0 -1px 0 #fff9, 0 -13px 30px #4a715917; transform: rotate(-32deg); }
.art-cultural-adaptation .art-grain { opacity: .12; mix-blend-mode: multiply; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .art-chinatown .art-photo { transform: scale(1.07); filter: saturate(1) contrast(1.03); }
  .project-card:hover .project-art .art-title { transform: translateY(-6px); }
  .project-card:hover .project-art .art-logo { transform: translateY(-8px) scale(1.045); filter: drop-shadow(0 21px 19px #20231e18); }
  .project-card:hover .art-osyra .art-logo { filter: drop-shadow(0 40px 30px #0008); }
  .project-card:hover .art-orbit { transform: rotate(-30deg) translate(3%, -2%); }
  .project-card:hover .art-form { transform: rotate(-21deg) translateY(-4%); }
  .project-card:hover .art-polaris .art-form { transform: rotate(27deg) translateY(-4%); }
  .project-card:hover .art-brandi .art-form { transform: rotate(-30deg) translateY(-5%); }
}
.project-card:focus-within .project-art .art-logo { transform: translateY(-5px) scale(1.025); }
.project-card:focus-within .art-chinatown .art-photo { transform: scale(1.05); }
@keyframes atmosphere-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(3%, 2%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .project-art *, .project-art *::before, .project-art *::after { animation: none !important; transition: none !important; }
  .project-card:hover .project-art .art-logo, .project-card:focus-within .project-art .art-logo { transform: none; }
  .project-card:hover .art-chinatown .art-photo, .project-card:focus-within .art-chinatown .art-photo { transform: scale(1.025); }
}