/* Right-to-left motion-poster gallery for AI fashion campaigns. */
.fashion {
  overflow: visible;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  padding-top: clamp(4rem, 7vw, 6.5rem);
}

.fashion::after { display: none; }

.fashion-head {
  align-items: end;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(9rem, .7fr) minmax(0, 2fr);
  margin-bottom: clamp(1.6rem, 3vw, 3.4rem);
}

.fashion-head .section-kicker { margin: 0 0 .35rem; }
.fashion-head h2 {
  color: #f7e1d5;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.05vw, 3.48rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .92;
  margin: 0;
  max-width: 20ch;
}
.fashion-head h2 em { color: #f7e1d5; font-style: normal; }

.fashion-handoff {
  isolation: isolate;
  margin: 0 -5vw;
  min-height: clamp(34rem, 47vw, 43rem);
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.fashion-handoff::before { display: none; }

.fashion-handoff::after {
  animation: fashion-dots 23s linear infinite;
  background-image:
    radial-gradient(circle, rgba(255, 211, 190, .9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(238, 142, 137, .76) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(244, 189, 145, .78) 0 .9px, transparent 1.7px);
  background-position: 0 0, 6rem 7rem, 12rem 2.4rem;
  background-size: 11rem 11rem, 17rem 15rem, 21rem 18rem;
  content: '';
  inset: 0;
  opacity: .62;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.fashion-folder-deck { inset: 0; position: absolute; touch-action: pan-y; width: 100%; z-index: 2; }

.fashion-folder-deck::before,
.fashion-folder-deck::after {
  color: rgba(255, 218, 202, .7);
  content: '✦     ·     ✧     ·     ✦     ·     ✧';
  font: 400 clamp(.7rem, 1vw, 1rem)/1 var(--font-display);
  letter-spacing: clamp(.9rem, 3.8vw, 4.2rem);
  opacity: .44;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 0 11px rgba(238, 142, 137, .82), 0 0 23px rgba(150, 49, 68, .45);
  white-space: nowrap;
  z-index: 0;
}
.fashion-folder-deck::before { animation: fashion-star-drift 18s ease-in-out infinite alternate; left: -4%; top: 8%; }
.fashion-folder-deck::after { animation: fashion-star-drift 21s ease-in-out -8s infinite alternate-reverse; bottom: 10%; right: -7%; }

.fashion-bunch {
  --fashion-scale: 1;
  --rail-shift: 0%;
  background: transparent;
  border: 0;
  cursor: pointer;
  height: min(75%, 24rem);
  left: 50%;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--rail-shift)) scale(var(--fashion-scale));
  transform-origin: 50% 50%;
  transition: filter .45s ease, opacity .62s ease, transform .86s cubic-bezier(.2,.8,.18,1);
  width: min(28vw, 22rem);
}

.fashion-bunch[data-offstage="true"] { pointer-events: none; }
.fashion-bunch[data-active="false"] { pointer-events: none; }

.fashion-bunch-photos {
  animation: fashion-bunch-float 6.6s ease-in-out var(--bunch-delay) infinite;
  display: block;
  height: calc(100% - 2.4rem);
  inset: 0;
  position: absolute;
  transform-origin: 50% 50%;
  width: 100%;
}

.fashion-bunch-photos,
.fashion-bunch-photos img,
.fashion-topic { pointer-events: none; }

.fashion-bunch-photos::after {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--collection-accent) 40%, transparent), transparent 68%);
  bottom: -9%;
  content: '';
  filter: blur(12px);
  height: 33%;
  left: 6%;
  opacity: .72;
  position: absolute;
  width: 88%;
  z-index: -1;
}

.fashion-bunch-photos img {
  aspect-ratio: .83;
  background: #210b14;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: clamp(.72rem, 1vw, 1rem);
  box-shadow: 0 1.1rem 2.1rem rgba(0,0,0,.52), 0 .08rem .3rem rgba(255,255,255,.25) inset;
  height: auto;
  object-fit: cover;
  position: absolute;
  transform-origin: 50% 50%;
  transition: filter .42s ease, transform .46s cubic-bezier(.2,.85,.2,1);
  width: 76%;
}
.fashion-bunch-photos img:nth-child(1) { --stack-transform: rotate(-12deg); --scatter-x: clamp(-13rem, -16vw, -8rem); --scatter-y: clamp(-9rem, -12vh, -5.5rem); --scatter-rotate: -20deg; --scatter-scale: .68; filter: brightness(.68) saturate(.82); left: 1%; top: 17%; transform: var(--stack-transform); z-index: 1; }
.fashion-bunch-photos img:nth-child(2) { --stack-transform: rotate(-6deg); --scatter-x: clamp(8rem, 16vw, 13rem); --scatter-y: clamp(-8rem, -11vh, -4.5rem); --scatter-rotate: 18deg; --scatter-scale: .7; filter: brightness(.8) saturate(.9); left: 7%; top: 10%; transform: var(--stack-transform); z-index: 2; }
.fashion-bunch-photos img:nth-child(3) { --stack-transform: rotate(0deg); --scatter-x: clamp(-12rem, -15vw, -7rem); --scatter-y: clamp(6rem, 12vh, 9rem); --scatter-rotate: -15deg; --scatter-scale: .69; filter: brightness(.9); left: 13%; top: 5%; transform: var(--stack-transform); z-index: 3; }
.fashion-bunch-photos img:nth-child(4) { --stack-transform: rotate(6deg); --scatter-x: clamp(7rem, 15vw, 12rem); --scatter-y: clamp(6rem, 11vh, 8.5rem); --scatter-rotate: 16deg; --scatter-scale: .7; left: 19%; top: 0; transform: var(--stack-transform); z-index: 4; }
.fashion-bunch-photos img:nth-child(5) { --stack-transform: rotate(-3deg); --scatter-x: clamp(-3rem, -4vw, -1.5rem); --scatter-y: clamp(-11rem, -17vh, -7rem); --scatter-rotate: 10deg; --scatter-scale: .64; filter: brightness(.76) saturate(.88); left: 10%; top: 11%; transform: var(--stack-transform); z-index: 2; }
.fashion-bunch-photos img:nth-child(6) { --stack-transform: rotate(9deg); --scatter-x: clamp(1.5rem, 4vw, 3rem); --scatter-y: clamp(7rem, 17vh, 11rem); --scatter-rotate: -17deg; --scatter-scale: .65; filter: brightness(.72) saturate(.84); left: 16%; top: 7%; transform: var(--stack-transform); z-index: 1; }

.fashion-bunch[data-active="true"] .fashion-bunch-photos { animation-name: fashion-center-jelly; }
.fashion-bunch.is-scattering .fashion-bunch-photos img { animation: fashion-photo-scatter 2.6s cubic-bezier(.2,.83,.2,1) both; pointer-events: auto; }
.fashion-bunch:hover .fashion-bunch-photos,
.fashion-bunch:focus-visible .fashion-bunch-photos { animation-play-state: paused; }
.fashion-bunch:hover,
.fashion-bunch:focus-visible { filter: brightness(1.1) saturate(1.14); outline: 0; }
.fashion-bunch:hover .fashion-bunch-photos img:nth-child(1), .fashion-bunch:focus-visible .fashion-bunch-photos img:nth-child(1) { transform: translate(-12%, 8%) rotate(-18deg); }
.fashion-bunch:hover .fashion-bunch-photos img:nth-child(2), .fashion-bunch:focus-visible .fashion-bunch-photos img:nth-child(2) { transform: translate(-5%, -3%) rotate(-9deg); }
.fashion-bunch:hover .fashion-bunch-photos img:nth-child(3), .fashion-bunch:focus-visible .fashion-bunch-photos img:nth-child(3) { transform: translate(5%, -5%) rotate(1deg); }
.fashion-bunch:hover .fashion-bunch-photos img:nth-child(4), .fashion-bunch:focus-visible .fashion-bunch-photos img:nth-child(4) { transform: translate(13%, 2%) rotate(11deg); }

.fashion-topic {
  bottom: 0;
  color: rgba(255, 233, 222, .97);
  font: 500 clamp(.85rem, 1.15vw, 1.1rem)/1.06 var(--font-display);
  left: 50%;
  letter-spacing: -.035em;
  position: absolute;
  text-shadow: 0 .15rem .8rem rgba(0,0,0,.83), 0 0 1.5rem color-mix(in srgb, var(--collection-accent) 45%, transparent);
  transform: translateX(-50%);
  transition: transform .45s cubic-bezier(.2,.85,.2,1);
  width: 140%;
  z-index: 8;
}
.fashion-bunch:hover .fashion-topic, .fashion-bunch:focus-visible .fashion-topic { transform: translateX(-50%) translateY(.25rem); }
.fashion-bunch.is-muted { opacity: .12 !important; }
.fashion-bunch.is-opening { filter: brightness(1.25); }
.fashion-folder-deck:has(.fashion-bunch:hover) .fashion-bunch:not(:hover) { filter: blur(1.1px) brightness(.68); }

.fashion-motion-controls { bottom: clamp(1.1rem, 3vw, 2rem); flex-direction: row; position: absolute; right: clamp(1rem, 5vw, 5rem); z-index: 5; }

@keyframes fashion-dots { to { background-position: 11rem 8rem, -11rem 17rem, 5rem -15rem; } }
@keyframes fashion-star-drift { to { opacity: .82; transform: translate3d(3rem, -1.5rem, 0) rotate(9deg); } }
@keyframes fashion-bunch-float { 0%,100% { transform: translate3d(0, 0, 0) rotate(-.7deg); } 50% { transform: translate3d(0, -.55rem, 0) rotate(1deg); } }
@keyframes fashion-center-jelly { 0%, 14%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(0, -.32rem, 0) scale(1.018, .984); } 31% { transform: translate3d(0, .08rem, 0) scale(.99, 1.012); } 41%, 74% { transform: translate3d(0, -.12rem, 0) scale(1.004); } 83% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes fashion-photo-scatter {
  0%, 14%, 100% { transform: var(--stack-transform); }
  28%, 47% { transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-rotate)) scale(var(--scatter-scale)); }
  66% { transform: var(--stack-transform); }
}

/* Gallery remains centered, with compact previous/next controls inside. */
.fashion-modal { background: rgba(24, 5, 12, .92); border: 0; height: 100%; max-height: none; max-width: none; padding: clamp(3.2rem, 7vh, 5.8rem) clamp(1rem, 5vw, 5rem) 2rem; width: 100%; }
.fashion-modal::backdrop { backdrop-filter: blur(16px) saturate(.75); background: rgba(19,3,8,.75); }
.fashion-modal-inner { margin: 0 auto; max-width: 80rem; position: relative; }
.fashion-modal-back { background: transparent; border: 0; color: rgba(255,255,255,.78); cursor: pointer; font: 600 .62rem/1 var(--font-mono); left: 0; letter-spacing: .13em; padding: .45rem 0; position: absolute; top: .15rem; transition: color .2s ease, transform .2s ease; z-index: 4; }
.fashion-modal-back:hover, .fashion-modal-back:focus-visible { color: var(--hf-signal); outline: 0; transform: translateX(-.25rem); }
.fashion-modal-close { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.42); color: #fff; position: absolute; right: 0; top: 0; z-index: 3; }
.fashion-modal-head { padding: 2.15rem 4rem 1rem 0; }
.fashion-modal-head small, .fashion-modal-head span { color: #f1b0a0; font: 500 .63rem/1 var(--font-mono); letter-spacing: .12em; }
.fashion-modal-head h3 { color: #fff; font-size: clamp(1.7rem, 4vw, 4rem); margin: .35rem 0; }
.fashion-modal-stage { align-items: center; display: flex; gap: clamp(.5rem, 2vw, 1.4rem); justify-content: center; }
.fashion-modal-stage img { border: 1px solid rgba(255,255,255,.25); border-radius: 1rem; box-shadow: 0 2.5rem 5rem rgba(0,0,0,.5); max-height: 67vh; max-width: calc(100% - 7.5rem); object-fit: contain; }
.fashion-modal-stage button { background: rgba(44,10,19,.78); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.fashion-modal-strip { display: flex; gap: .55rem; margin-top: 1rem; overflow-x: auto; padding: .35rem 0; }
.fashion-modal-strip button { border-radius: .5rem; flex-basis: 4.3rem; height: 4.3rem; }
.fashion-modal-strip button.is-active { border-color: #f1b0a0; box-shadow: 0 0 0 1px rgba(241,176,160,.4), 0 0 1rem rgba(211,102,101,.4); }

/* A native pointer remains available inside the top-layer image dialog. */
@media (hover: hover) and (pointer: fine) {
  body.is-fashion-modal-open .fashion-modal,
  body.is-fashion-modal-open .fashion-modal * { cursor: auto !important; }
}

@media (max-width: 820px) {
  .fashion-head { display: block; }
  .fashion-head .section-kicker { margin-bottom: 1rem; }
  .fashion-handoff { margin: 0 -5vw; min-height: 40rem; width: 100vw; }
  .fashion-bunch { height: 19rem; width: min(56vw, 18rem); }
  .fashion-motion-controls { bottom: 1rem; right: 1rem; }
  .fashion-modal-stage img { max-width: calc(100% - 5.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .fashion-handoff::before, .fashion-handoff::after, .fashion-folder-deck::before, .fashion-folder-deck::after, .fashion-bunch-photos, .fashion-bunch-photos img { animation: none !important; }
}