/* All rules are confined to Selected Work; the approved hero is untouched. */
#work {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 130px 0 180px;
  overflow: clip;
  color: #fffaf0;
  background: linear-gradient(#4e9bab, #428eaa 28%, #357c9a 65%, #2d708e);
  scroll-margin-top: 0;
}
#work .work-water {
  position: absolute;
  inset: 0 0 auto;
  height: 1000px;
  z-index: -2;
  pointer-events: none;
  background: url('assets/hero/water-v2.webp') center / 100% 100%;
  transform: scaleY(-1);
  mask-image: linear-gradient(transparent, #000 80%);
}
#work::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1000px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, #0d5e8b94, transparent 45%), linear-gradient(#0e709f33, transparent 50%);
}
#work .work-content { width: min(1220px, 88%); margin-inline: auto; }
#work .work-intro { margin: 0 0 125px 8%; max-width: 780px; }
#work .work-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 30px; }
#work .work-eyebrow span { margin-left: 28px; letter-spacing: .08em; }
#work h2 { font-family: 'Cormorant Hero', Georgia, serif; font-size: clamp(52px, 6.4vw, 94px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
#work h2 em { font-weight: 400; color: #ffcfbd; }
#work .work-intro-rule { display: block; width: 64px; height: 1px; background: #ffcfbd; margin-top: 38px; }
#work .work-discoveries { display: flex; flex-direction: column; gap: 140px; }
#work .project { margin: 0; width: 100%; transform: translateY(0); transition: transform .85s cubic-bezier(.2,.65,.3,1); }
#work .project.is-approaching { transform: translateY(26px); }
#work .project-link { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: center; gap: 8%; padding: 0; background: none; color: inherit; }
#work .project-image { padding: 12px; background: #f8f3e9; box-shadow: 0 22px 45px #163f4e30; overflow: visible; width: 100%; margin: 0; max-width: none; grid-column: auto; grid-row: auto; transition: transform .5s ease, box-shadow .5s ease; }
#work .project-image img { display: block; width: 100%; height: auto; object-fit: contain; aspect-ratio: auto; transform: none; }
#work .project-spa-world-bondi { width: 82%; }
#work .project-spa-world-bondi .project-link { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
#work .project-merge { width: 76%; align-self: flex-end; }
#work .project-merge .project-link { display: block; }
#work .project-merge .project-info { max-width: 560px; padding-top: 28px; }
#work .project-thread-between-us .project-link { grid-template-columns: minmax(0, .75fr) minmax(0, 1.7fr); gap: 7%; }
#work .project-thread-between-us .project-image { grid-column: 2; grid-row: 1; }
#work .project-thread-between-us .project-info { grid-column: 1; grid-row: 1; }
#work .project-nm-performance-automotive { width: 76%; margin-left: 4%; }
#work .project-nm-performance-automotive .project-link { display: block; }
#work .project-nm-performance-automotive .project-info { padding-top: 28px; max-width: 600px; }
#work .project-mbmpl { width: 79%; align-self: flex-end; }
#work .project-mbmpl .project-link { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
#work .project-info { padding: 0; }
#work .work-number { display: block; font-size: 12px; letter-spacing: .15em; color: #ffd1bf; margin-bottom: 24px; }
#work .project-discipline { color: #eef8f6; font-size: 11px; line-height: 1.6; margin-bottom: 12px; }
#work .project-info h3 { color: #fffaf0; font-family: 'Cormorant Hero', Georgia, serif; font-size: clamp(36px, 3.6vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; }
#work .project-description { color: #eef8f6; font-size: 13px; line-height: 1.8; max-width: 38ch; margin: 0 0 24px; }
#work .project-action { color: #fffaf0; font-size: 12px; gap: 22px; padding-bottom: 8px; border-bottom: 1px solid #fffaf066; }
#work .project-action > span { color: #ffd1bf; transition: transform .35s ease; }
#work .recognition { border-color: #fffaf044; color: #fffaf0; }
#work .project-link:focus-visible { outline: 2px solid #fffaf0; outline-offset: 12px; border-radius: 2px; }
#work .project-link:focus-visible .project-action > span { transform: translate(3px,-3px); }
#work .work-bubbles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#work .work-bubbles i { position: absolute; left: var(--bubble-left); top: var(--bubble-top); width: var(--bubble-size); aspect-ratio: 1; border-radius: 50%; border: 1px solid #ecffff55; box-shadow: inset 2px 2px 4px #ecffff22; animation: work-drift 9s ease-in-out var(--bubble-delay) infinite alternate; }
@keyframes work-drift { to { transform: translate(5px,-18px); } }
@media (hover: hover) {
  #work .project-link:hover .project-image { transform: translateY(-6px) scale(1.01); box-shadow: 0 28px 50px #163f4e40; }
  #work .project-link:hover .project-image img { transform: none; }
  #work .project-link:hover .project-action > span { transform: translate(3px,-3px); }
}
@media (max-width: 1000px) {
  #work .work-content { width: 86%; }
  #work .work-intro { margin-left: 0; }
  #work .project { width: 92%; }
  #work .project-link { gap: 6%; }
  #work .work-discoveries { gap: 100px; }
}
@media (max-width: 650px) {
  #work { padding: 90px 0 100px; }
  #work .work-content { width: calc(100% - 48px); }
  #work .work-intro { margin: 0 0 65px; }
  #work h2 { font-size: clamp(42px, 10vw, 60px); }
  #work .work-eyebrow { font-size: 10px; letter-spacing: .13em; }
  #work .work-eyebrow span { margin-left: 16px; }
  #work .work-discoveries { gap: 78px; }
  #work .project { width: 100%; margin: 0; }
  #work .project .project-link { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  #work .project-image { padding: 8px; }
  #work .project .project-info { padding-top: 24px; }
  #work .work-number { margin-bottom: 14px; }
  #work .project-info h3 { font-size: 38px; }
  #work .work-bubbles i { left: calc(var(--bubble-left) * 1.02); }
  #work .work-water { background-size: auto 100%; background-position: 40% center; }
}
@media (prefers-reduced-motion: reduce) {
  #work .project, #work .project-image, #work .project-action > span { transition: none; transform: none !important; }
  #work .work-bubbles i { animation: none; }
}

/* Project bubbles: the rim is glass; the original artwork stays clear inside. */
#work .work-discoveries { gap: 120px; }
#work .project { width: 94%; margin: 0; align-self: flex-start; }
#work .project:nth-child(1) { align-self: center; width: 90%; }
#work .project:nth-child(2) { width: 88%; }
#work .project:nth-child(3) { align-self: flex-end; }
#work .project:nth-child(4) { width: 88%; margin-left: 3%; }
#work .project:nth-child(5) { align-self: flex-end; width: 90%; }
#work .project .project-link {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 6%;
  align-items: center;
}
#work .project:nth-child(odd) .project-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
#work .project:nth-child(odd) .project-image { grid-column: 2; grid-row: 1; }
#work .project:nth-child(odd) .project-info { grid-column: 1; grid-row: 1; }
#work .project .project-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  border-radius: 49% 51% 50% 50% / 51% 49% 51% 49%;
  border: 1px solid #dbffff77;
  background: radial-gradient(ellipse at 25% 15%, #ffffff20, transparent 35%), radial-gradient(ellipse at 78% 86%, #98ecea25, transparent 48%);
  box-shadow: inset 3px 4px 8px #efffff45, inset -5px -8px 15px #b1ece633, 0 15px 30px #174a5b20;
  animation: project-buoyancy 9s ease-in-out -2s infinite;
  overflow: visible;
}
#work .project:nth-child(1) .project-image { aspect-ratio: .94; animation-duration: 9s; }
#work .project:nth-child(2) .project-image { aspect-ratio: 1.08; animation-duration: 11s; animation-delay: -5s; }
#work .project:nth-child(3) .project-image { aspect-ratio: 1.04; animation-duration: 10s; animation-delay: -3s; }
#work .project:nth-child(4) .project-image { aspect-ratio: 1.08; animation-duration: 12s; animation-delay: -7s; }
#work .project:nth-child(5) .project-image { aspect-ratio: .96; animation-duration: 10.5s; animation-delay: -6s; }
#work .project-image::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: inherit;
  border: 2px solid transparent;
  border-top-color: #ffffff90;
  border-left-color: #ffffff28;
  mask-image: linear-gradient(120deg, #000 5%, transparent 43%);
  transform: rotate(-24deg);
  pointer-events: none;
  transition: transform .6s ease;
}
#work .project-image::after {
  content: '';
  position: absolute;
  inset: 2.5%;
  border-radius: inherit;
  border: 1px solid transparent;
  border-right-color: #c5ffff66;
  border-bottom-color: #d0ffef55;
  mask-image: linear-gradient(135deg, transparent 60%, #000);
  pointer-events: none;
}
#work .project .project-image img {
  width: 78%;
  height: 72%;
  object-fit: contain;
  aspect-ratio: auto;
  transform: none;
  filter: drop-shadow(0 8px 9px #16465b24);
  transition: transform .6s ease;
}
#work .project .project-info { padding: 0; max-width: 100%; grid-column: 2; grid-row: 1; }
#work .project-info::before { content: ''; display: block; width: 50px; height: 1px; background: #ffd1bf88; margin-bottom: 24px; }
#work .project-link:focus-visible .project-image { outline: 2px solid #fffaf0; outline-offset: 7px; }
@keyframes project-buoyancy { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (hover: hover) {
  #work .project-link:hover .project-image {
    transform: translateY(-6px) scale(1.015);
    box-shadow: inset 3px 4px 9px #efffff55, inset -5px -8px 15px #b1ece644, 0 21px 35px #174a5b28;
  }
  #work .project-link:hover .project-image img { transform: translateY(-2px); }
  #work .project-link:hover .project-image::before { transform: rotate(-20deg); }
}
@media (max-width: 1000px) {
  #work .project, #work .project:nth-child(n) { width: 100%; margin-left: 0; }
  #work .project .project-link { gap: 5%; }
}
@media (max-width: 650px) {
  #work .work-content { width: calc(100% - 32px); }
  #work .work-intro { margin-inline: 8px; }
  #work .work-discoveries { gap: 76px; }
  #work .project .project-link { display: flex; gap: 0; }
  #work .project .project-image { width: 96%; align-self: flex-start; }
  #work .project:nth-child(even) .project-image { align-self: flex-end; }
  #work .project .project-info { padding: 26px 12px 0; }
  #work .project-info::before { margin-bottom: 18px; width: 36px; }
  #work .work-bubbles i:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #work .project .project-image { animation: none; translate: none; }
  #work .project .project-image img, #work .project-image::before { transition: none; }
  #work .project-link:hover .project-image img { transform: none; }
  #work .project-link:hover .project-image::before { transform: rotate(-24deg); }
}

/* Refractive material: rear light, sharp artwork, then front surface reflections. */
#work .project .project-image {
  width: 88%;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 32% 22%, #e8ffff0d, transparent 48%),
    radial-gradient(ellipse at 70% 78%, transparent 45%, #86edee12 69%, transparent 74%);
  box-shadow: 0 12px 38px #153e4e12;
}
#work .project .project-image::before {
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    #c5ffff45 0deg, transparent 38deg, transparent 99deg,
    #a3faff55 122deg, #f9ffffed 145deg, #e7ffffb0 157deg,
    #e9d9f46b 166deg, #9ae8e52e 182deg, transparent 214deg,
    transparent 251deg, #acf6ff47 278deg, #efffffe0 308deg,
    #ffffffed 320deg, #d6ffff88 335deg, #c5ffff45 360deg);
  mask-image: radial-gradient(ellipse, transparent 62%, #0002 65%, #000b 68%, #000 69%, #0005 70%, transparent 71%);
  filter: blur(.6px);
  transform: none;
  animation: reflection-drift 11s ease-in-out -4s infinite;
}
#work .project .project-image::after {
  inset: 0;
  z-index: 3;
  border: 0;
  border-radius: inherit;
  mask-image: none;
  background:
    radial-gradient(ellipse 11% 3% at 24% 18%, #ffffff8a, #d9ffff22 58%, transparent 100%),
    radial-gradient(ellipse 6% 12% at 14% 28%, #e8ffff38, transparent 100%),
    radial-gradient(ellipse 12% 4% at 77% 85%, #ffffffa6, #c8ffff30 55%, transparent 100%),
    radial-gradient(ellipse 8% 3% at 82% 78%, #f9d8ea30, transparent 100%),
    linear-gradient(135deg, transparent 28%, #f1ffff08 33%, transparent 37%, transparent 68%, #d8ffff0a 72%, transparent 76%);
  filter: blur(1px);
  animation: reflection-drift 11s ease-in-out -4s infinite reverse;
}
#work .project .project-image img {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 82%;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px #133e4d22);
  animation: artwork-drift 10s ease-in-out -3s infinite;
}
#work .project:nth-child(2n) .project-image::before { rotate: 4deg; }
#work .project:nth-child(3n) .project-image::before { rotate: -5deg; }
#work .work-bubbles i {
  border: 0;
  background: radial-gradient(ellipse at 26% 18%, #ffffff99, transparent 22%), radial-gradient(ellipse at 78% 83%, #d3ffff99, transparent 24%), radial-gradient(ellipse at 78% 70%, #efcee52b, transparent 30%);
  box-shadow: inset 1px 2px 3px #d9ffff35, 0 0 6px #d0ffff0d;
}
@keyframes reflection-drift { 0%,100% { translate: 0 0; } 50% { translate: 1px -1px; } }
@keyframes artwork-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 1.5px; } }
@media (hover: hover) {
  #work .project-link:hover .project-image { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 40px #153e4e18; }
  #work .project-link:hover .project-image::before { transform: translate(1px,-1px); }
  #work .project-link:hover .project-image::after { transform: translate(1px,-1px); }
}
@media (max-width: 650px) {
  #work .project .project-info { order: -1; padding: 0 12px 28px; }
  #work .project .project-image { width: 88%; align-self: center; }
  #work .project:nth-child(even) .project-image { align-self: center; }
  #work .project .project-image::after { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #work .project .project-image img,
  #work .project .project-image::before,
  #work .project .project-image::after { animation: none; translate: none; transition: none; }
  #work .project-link:hover .project-image::before,
  #work .project-link:hover .project-image::after { transform: none; }
}

/* Non-destructive, individually inspected crops in the original source coordinates. */
#work .project-spa-world-bondi { --art-width: 68%; --art-ratio: 756 / 758.44; --source-width: 100%; --source-left: 0%; --source-top: -34.328%; }
#work .project-merge { --art-width: 76%; --art-ratio: 871.455 / 655.98; --source-width: 183.486%; --source-left: -42.202%; --source-top: -35.345%; }
#work .project-thread-between-us { --art-width: 80%; --art-ratio: 1161 / 730; --source-width: 100%; --source-left: 0%; --source-top: 0%; }
#work .project-nm-performance-automotive { --art-width: 78%; --art-ratio: 799 / 602; --source-width: 100%; --source-left: 0%; --source-top: 0%; }
#work .project-mbmpl { --art-width: 48%; --art-ratio: 919.1 / 1690; --source-width: 153.846%; --source-left: -26.923%; --source-top: -7.692%; }
#work .work-artwork {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--art-width);
  aspect-ratio: var(--art-ratio);
  overflow: hidden;
  filter: drop-shadow(0 4px 18px #133e4d22);
  animation: artwork-drift 10s ease-in-out -3s infinite;
  transition: transform .6s ease;
}
#work .project .project-image .work-artwork img {
  position: absolute;
  width: var(--source-width);
  max-width: none;
  height: auto;
  max-height: none;
  left: var(--source-left);
  top: var(--source-top);
  object-fit: initial;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
}
@media (hover: hover) {
  #work .project-link:hover .work-artwork { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  #work .work-artwork { animation: none; transition: none; }
  #work .project-link:hover .work-artwork { transform: none; }
}

/* Open-water pacing: each exhibit has room for an approach and departure. */
#work {
  padding-top: clamp(280px, 38vh, 420px);
  padding-bottom: 300px;
  background:
    radial-gradient(ellipse at 18% 34%, #8cd2d51c, transparent 21%),
    radial-gradient(ellipse at 85% 65%, #a6e1de12, transparent 23%),
    linear-gradient(#4e9bab, #4898ac 22%, #3788a4 53%, #307b99 78%, #2d708e);
}
#work .work-intro { margin-bottom: clamp(210px, 28vh, 320px); }
#work .work-discoveries { gap: clamp(290px, 36vh, 430px); }
#work .project { min-height: 72vh; display: flex; align-items: center; }
#work .project .project-link { width: 100%; }
#work .project:nth-child(2) { margin-bottom: 90px; }
#work .project:nth-child(3) { margin-bottom: 50px; }
#work .work-water, #work::before { height: 1500px; }
@media (max-width: 650px) {
  #work { padding-top: 230px; padding-bottom: 180px; }
  #work .work-intro { margin-bottom: 160px; }
  #work .work-discoveries { gap: 210px; }
  #work .project { min-height: 0; }
  #work .project:nth-child(2), #work .project:nth-child(3) { margin-bottom: 30px; }
}
@media (max-width: 650px) {
  #work::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 300px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(#2b83a3, #2b83a3b3 30%, transparent);
  }
}
/* Approved open-water direction: retain crop geometry without the large glass shells. */
#work .project .project-image,
#work .project-link:hover .project-image { background: none; border: 0; box-shadow: none; }
#work .project .project-image::before,
#work .project .project-image::after { content: none; }