@import url(https://fonts.bunny.net/css?family=crushed:400);

@layer base, demo;

/* =========================
   GLOBAL RESET
========================= */
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --bg-dark: rgb(16, 24, 40);
  --bg-light: rgb(248, 244, 238);
  --txt-light: rgb(10, 10, 10);
  --txt-dark: rgb(245, 245, 245);

  --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
  --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
}

/* =========================
   BODY (CENTER SAFE)
========================= */
.wrapper body {
  margin: 0;
  overflow-x: hidden;

  min-height: 100svh;
  padding: 2rem 0;

  background-color: var(--clr-bg);
  color: var(--clr-txt);

  font-family: "Jura", sans-serif;

  display: grid;
  place-items: center;
}

/* =========================
   GALLERY WRAPPER (CENTER ONLY)
========================= */
.memories-gallery {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  padding-top: 35vh;
  margin-bottom: -50px;
}

@media (max-width: 768px) {
  .memories-gallery {
    padding-top: 20vh;
    margin-bottom: -30px;    
  }
}

/* =========================
   ARC CARD SYSTEM (UNCHANGED CORE)
========================= */
.wrapper {
  --card-trans-duration: 1000ms;

  --card-trans-easing: linear(
    0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%,
    1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%,
    1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%,
    1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%,
    0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1
  );

  --card-border-radius: 10px;
  --card-width: 25vmin;
  --radius: 70vmin;
  --cards: sibling-count();

  @supports not (order: sibling-index()) {
    --cards: 7;
  }

  --arc-size: 0.25;
  --arc-center: 0.75;
  --arc-start: calc(var(--arc-center) - var(--arc-size) / 2);

  --arc-shift: 0;
  --arc-shift-delta: 0.01;

  position: relative;
  width: var(--card-width);
  aspect-ratio: 4 / 6;
}

@media (max-width: 768px) {
  .wrapper {
    --card-width: 25vmin;   /* bigger cards on mobile */
    --radius: 70vmin;       /* keeps arc balanced */
  }
}

/* =========================
   CARDS
========================= */
.wrapper > div {
  --card-i: sibling-index();

  @supports not (order: sibling-index()) {
    &:nth-child(1){--card-i:1}
    &:nth-child(2){--card-i:2}
    &:nth-child(3){--card-i:3}
    &:nth-child(4){--card-i:4}
    &:nth-child(5){--card-i:5}
    &:nth-child(6){--card-i:6}
    &:nth-child(7){--card-i:7}
  }

  --arc-step: calc(var(--arc-size) / (var(--cards) - 1));

  position: absolute;

  width: var(--card-width);
  aspect-ratio: 4 / 6;

  background: white;
  border-radius: var(--card-border-radius);

  offset-path: circle(var(--radius) at 50% 100%);
  offset-distance: calc(
    (var(--arc-start)
    + (var(--card-i) - 1) * var(--arc-step)
    + var(--arc-shift)
    ) * 100%
  );

  offset-rotate: auto;
  offset-anchor: 50% 0%;

  transition: all var(--card-trans-duration) var(--card-trans-easing);
}

/* Z-INDEX STACKING */
.wrapper > div:nth-child(1),
.wrapper > div:nth-child(7) { z-index: 0; }

.wrapper > div:nth-child(2),
.wrapper > div:nth-child(6) { z-index: 1; }

.wrapper > div:nth-child(3),
.wrapper > div:nth-child(5) { z-index: 3; }

.wrapper > div:nth-child(4) { z-index: 4; }

/* =========================
   HOVER INTERACTION (UNCHANGED LOGIC)
========================= */
.wrapper > div:hover {
  offset-anchor: 50% 10%;
}

.wrapper > div:hover + div {
  --arc-shift: calc(var(--arc-shift-delta) * 3);
}

.wrapper > div:hover + div + div {
  --arc-shift: calc(var(--arc-shift-delta) * 2);
}

.wrapper > div:hover + div + div + div {
  --arc-shift: calc(var(--arc-shift-delta) * 1);
}

/* BACK SHIFT */
.wrapper > div:has(+ *:hover) {
  --arc-shift: calc(var(--arc-shift-delta) * -3);
}

.wrapper > div:has(+ * + *:hover) {
  --arc-shift: calc(var(--arc-shift-delta) * -2);
}

.wrapper > div:has(+ * + * + *:hover) {
  --arc-shift: calc(var(--arc-shift-delta) * -1);
}

/* IMAGE */
.wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* =========================
   CAPTION (OUTSIDE IMAGE)
========================= */
.wrapper > div::before {
  content: attr(data-title);

  position: absolute;
  top: 100%;              /*  BELOW card */
  left: 50%;
  transform: translateX(-50%) translateY(8px);


  font-size: 1rem;
  font-weight: 200;
  text-align: center;

  color: var(--clr-txt);
  text-shadow: 0 0.5px 15px rgba(0,0,0,0.6);
  padding: 60px 10px;
  border-radius: 6px;

  opacity: 0;
  transition: all 0.25s ease;

  white-space: nowrap;
  pointer-events: none;
  
    /* 🔥 KEY FIX */
  white-space: normal;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  
}

.wrapper > div:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

@media (max-width: 768px) {
  .wrapper > div::before {
    font-size: 0.55rem;
    padding: 35px 6px;
    position: absolute;
    top: 100%;              /*  BELOW card */
    left: 50%;
  }
}