/* =========================================================
   Smith Visuals — More Work Teaser
   Figma node 76:175 · Überschrift "WEITERE ARBEITEN" + 3 interaktive
   Foto-Mappen (klein/gross/klein), Technik adaptiert von
   /folder-component (gleiche SVG-Ordner-Pfade, gleiches Auffächer-
   Prinzip), hier per reinem CSS-clamp() statt JS-ResizeObserver
   skaliert, da die Zielgrössen fix sind (keine beliebige Containerbreite).
   Heller Abschnitt (Background/White laut Figma), dunkler Text.
   ========================================================= */

.more-work {
  background: var(--c-white);
  padding-block: var(--space-8);
}

.more-work__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.more-work__title {
  color: var(--c-text-dark);
}

.more-work__folders {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Mobil (ein Ordner pro Zeile) zentriert, ab da wo mehrere Ordner
     nebeneinander passen linksbuendig, damit eine unvollstaendige
     letzte Zeile (z.B. nur 2 von 5 Ordnern) unter der ersten Zeile
     beginnt statt zentriert zu "schweben". */
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 100%;
}

@media (min-width: 40rem) {
  .more-work__folders {
    justify-content: flex-start;
  }
}



.mw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 40rem) {
  .mw-item {
    align-items: center;
  }
}

.mw-item__label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.03em;
  margin: 0;
  transition: color var(--dur-fast) var(--ease-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mw-item__label-type {
  font-size: 0.65em;
  font-weight: 500;
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.1em;
}

.mw-item--sm .mw-item__label { font-size: 0.875rem; } /* 14px */  /* Figma: 16px */
.mw-item--lg .mw-item__label { font-size: 1.375rem; } /* 22px */ /* Figma: 28px */

@media (hover: hover) {
  .mw-item:hover .mw-item__label {
    color: var(--c-accent-hover);
  }
}

.mw-item:focus-within .mw-item__label {
  color: var(--c-accent-hover);
}

/* ---------- Skalierte Stage (Design-Koordinaten 808×682, wie folder-component) ----------
   .mw-folder bleibt immer 808×682px "nativ" (identische Foto-Offsets wie im Referenz-
   Component) und wird per unitless transform:scale() auf die Zielgrösse herunterskaliert.
   scale() akzeptiert keine vw/calc-Werte relativ zum Elternelement, daher 3 feste Stufen
   (Mobile/Tablet/Desktop), bei denen Breite UND Skalierungsfaktor exakt zusammenpassen
   (Figma-Ziel bei Desktop: klein 168.5px, gross 278.25px Breite bei 808px nativer Breite
   → Faktor ≈0.209 bzw. ≈0.344). */
.mw-stagewrap {
  overflow: visible;
  width: var(--mw-w);
}

.mw-item--sm .mw-stagewrap { --mw-w: 6.5rem;  --mw-scale: 0.129; }
.mw-item--lg .mw-stagewrap { --mw-w: 10.5rem; --mw-scale: 0.208; }

@media (min-width: 40rem) {
  .mw-item--sm .mw-stagewrap { --mw-w: 8.5rem;  --mw-scale: 0.168; }
  .mw-item--lg .mw-stagewrap { --mw-w: 13.5rem; --mw-scale: 0.268; }
}

@media (min-width: 60rem) {
  .mw-item--sm .mw-stagewrap { --mw-w: 10.53rem; --mw-scale: 0.2085; }
  .mw-item--lg .mw-stagewrap { --mw-w: 17.39rem; --mw-scale: 0.3444; }
}

.mw-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 808 / 682;
  overflow: visible;
}

.mw-folder {
  position: absolute;
  top: 0;
  left: 0;
  width: 808px;
  height: 682px;
  transform-origin: top left;
  transform: scale(var(--mw-scale));
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.mw-folder:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.mw-folder__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.mw-folder__back {
  z-index: 1;
  fill: url(#mw-folder-sheen-back);
  filter:
    drop-shadow(-3px -3px 12px rgba(255, 255, 255, 0.1))
    drop-shadow(0 26px 40px rgba(0, 0, 0, 0.4));
}

.mw-folder__front {
  z-index: 10;
  fill: url(#mw-folder-sheen-front);
  filter: drop-shadow(0 -6px 10px rgba(0, 0, 0, 0.35));
}

/* Weicher Kontaktschatten unter dem Ordner (statt nur Kanten-Schatten auf den
   Shells) -- lässt ihn wie ein einzelnes, ruhendes Objekt wirken statt wie
   zwei übereinandergelegte flache Formen. Wächst beim Hover leicht mit, als
   würde der Ordner sich minimal vom Untergrund abheben. */
.mw-folder::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 62%;
  height: 60px;
  transform: translateX(-50%) scaleX(1);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 72%);
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-soft), opacity var(--dur-slow) var(--ease-soft);
  opacity: 0.75;
  pointer-events: none;
}

@media (hover: hover) {
  .mw-folder:hover::after {
    transform: translateX(-50%) scaleX(1.12);
    opacity: 1;
  }
}

.mw-folder:focus-visible::after,
.mw-folder.is-open::after {
  transform: translateX(-50%) scaleX(1.12);
  opacity: 1;
}

.mw-folder__photos {
  position: absolute;
  inset: 0;
  z-index: 5;
  -webkit-clip-path: inset(-1200px -1200px 0 -1200px);
  clip-path: inset(-1200px -1200px 0 -1200px);
}

.mw-photo {
  position: absolute;
  margin: 0;
  width: 534px;
  height: 668px;
  border-radius: 20px;
  border: 1px solid var(--c-bg);
  overflow: hidden;
  transform-origin: 50% 88%;
  box-shadow: -4px -4px 22px rgba(255, 255, 255, 0.10);
  background: linear-gradient(110deg, #8c929d 8%, #e5e7eb 18%, #8c929d 33%);
  background-size: 200% 100%;
  animation: shine-skeleton 1.5s linear infinite;
  transition:
    transform var(--dur-slow) var(--ease-fan),
    box-shadow var(--dur-slow) var(--ease-soft);
  /* KEIN pauschales will-change hier: das wuerde fuer jedes der ~40
     Faecher-Fotos (534x668 nativ, x Geraete-Pixeldichte) dauerhaft eine
     GPU-Ebene reservieren -- auf Mobile ein bekannter Ausloeser fuer
     Renderer-Crashes durch GPU-Speicher-Erschoepfung. Stattdessen nur
     waehrend der tatsaechlichen Faecher-Animation (Hover/offen) setzen. */
}

@media (hover: hover) {
  .mw-folder:hover .mw-photo { will-change: transform; }
}

.mw-folder.is-open .mw-photo,
.mw-folder:focus-visible .mw-photo {
  will-change: transform;
}

@keyframes shine-skeleton {
  to {
    background-position-x: -200%;
  }
}

.mw-photo img,
.mw-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

.mw-folder__open-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label-btn);
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity var(--dur-slow) var(--ease-soft);
}

.mw-folder.is-open .mw-folder__open-text {
  opacity: 1;
  animation: pulse-white-glow 2s ease-in-out infinite;
}

.mw-photo--a { left: 30px;  top: 27px;  z-index: 3; transform: translateY(0) rotate(0deg); }
.mw-photo--b { left: 67px;  top: 44px;  z-index: 4; transform: translateY(0) rotate(0deg); }
.mw-photo--c { left: 153px; top: 84px;  z-index: 5; transform: translateY(0) rotate(0deg); }

@media (hover: hover) {
  .mw-folder:hover .mw-photo--a {
    transform: translate(-118px, -196px) rotate(-15deg);
    box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
    transition-delay: 0s;
  }
  .mw-folder:hover .mw-photo--b {
    transform: translate(-4px, -236px) rotate(-3.75deg);
    box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
    transition-delay: 0.06s;
  }
  .mw-folder:hover .mw-photo--c {
    transform: translate(150px, -168px) rotate(15deg);
    box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
    transition-delay: 0.12s;
  }
  .mw-folder:hover .mw-folder__glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .mw-folder:hover .mw-folder__open-text {
    opacity: 1;
    animation: pulse-text 2s ease-in-out infinite;
  }
}

.mw-folder:focus-visible .mw-photo--a,
.mw-folder.is-open      .mw-photo--a {
  transform: translate(-118px, -196px) rotate(-15deg);
  box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
  transition-delay: 0s;
}
.mw-folder:focus-visible .mw-photo--b,
.mw-folder.is-open      .mw-photo--b {
  transform: translate(-4px, -236px) rotate(-3.75deg);
  box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
  transition-delay: 0.06s;
}
.mw-folder:focus-visible .mw-photo--c,
.mw-folder.is-open      .mw-photo--c {
  transform: translate(150px, -168px) rotate(15deg);
  box-shadow: -6px -6px 34px rgba(255, 255, 255, 0.22);
  transition-delay: 0.12s;
}

@keyframes pulse-text {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

.mw-folder:focus-visible .mw-folder__open-text,
.mw-folder.is-open      .mw-folder__open-text {
  opacity: 1;
  animation: pulse-text 2s ease-in-out infinite;
}

.mw-folder__glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 96%;
  aspect-ratio: 1113 / 802;
  transform: translate(-50%, -50%) scale(0.9);
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0.30) 0%, rgba(217, 217, 217, 0) 70%);
  filter: blur(40px);
  opacity: 0;
  z-index: 2;
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
  pointer-events: none;
}

.mw-folder:focus-visible .mw-folder__glow,
.mw-folder.is-open      .mw-folder__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@keyframes pulse-white-glow {
  0%   { opacity: 0.6; filter: blur(40px) brightness(1.5); }
  50%  { opacity: 1;   filter: blur(50px) brightness(2); }
  100% { opacity: 0.6; filter: blur(40px) brightness(1.5); }
}

.mw-folder.pulse-white .mw-folder__glow {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
  animation: pulse-white-glow 2s ease-in-out infinite;
}

@media (min-width: 60rem) {
  .more-work__inner {
    /* Keep title on top */
    gap: var(--space-7);
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-photo,
  .mw-folder__glow,
  .mw-item__label {
    transition-duration: 0.001ms;
    transition-delay: 0s;
  }
}