/* Moments gallery — full-bleed, frameless, cinematic */
.experience-page .memory-gallery { position: relative; width: 100vw; max-width: none; margin: clamp(3rem,6vw,6rem) 0 0 calc(50% - 50vw); padding: 0; overflow-x: clip; }
.experience-page .memory-gallery::after { content: none; }
.memory-sticky { position: relative; }
.memory-gallery .section-heading { max-width: none; margin: 0; text-align: left; }
.memory-deck { position: relative; margin: 0; }
.memory-card { margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; overflow: hidden; }
.memory-card img { display: block; width: 100%; height: auto; border-radius: 0; }
.memory-controls, .memory-hint, .memory-progress { display: none; }

/* Enhanced (JS ready): one full-viewport stage */
.memory-ready .memory-sticky { height: 100svh; min-height: 34rem; overflow: hidden; background: #1f2b28; color: #f6f1e8; }
.memory-ready .memory-deck { position: absolute; inset: 0; height: auto; max-width: none; touch-action: pan-y; cursor: grab; }
.memory-ready .memory-deck:active { cursor: grabbing; }
.memory-ready .memory-card { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1); will-change: opacity; }
.memory-ready .memory-card.is-active { opacity: 1; }
.memory-ready .memory-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; user-select: none; transform: scale(1.08); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.memory-ready .memory-card.is-active img { transform: scale(1); }
.memory-ready .memory-card img[height="1600"] { object-position: center 92%; }
/* Desktop: photos whose shape doesn't match the screen are shown whole, over a soft blurred fill of themselves */
.memory-ready .memory-card::before { content: ""; position: absolute; inset: -6%; background: var(--memory-src) center / cover no-repeat; filter: blur(42px) saturate(1.1) brightness(.62); opacity: 0; transition: opacity .6s; }
.memory-ready .memory-card.is-contain::before { opacity: 1; }
.memory-ready .memory-card.is-contain img { position: relative; object-fit: contain; object-position: center; padding: clamp(5.5rem,13vh,9rem) 0 clamp(6.5rem,15vh,10rem); filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.memory-ready .memory-deck::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,28,26,.38) 0%, rgba(20,28,26,0) 28%, rgba(20,28,26,0) 52%, rgba(20,28,26,.62) 100%); }

/* Title — top left, over image */
.memory-ready .section-heading { position: absolute; z-index: 3; left: 12%; top: 25%; width: min(32rem, 72%); max-width: 72%; pointer-events: none; display: block; transform-origin: left center; animation: memory-title-float 8s ease-in-out infinite; }
.memory-ready .section-heading .eyebrow { color: #f6f1e8; opacity: .85; margin: 0 0 1rem; letter-spacing: .32em; font-size: .72rem; font-weight: 500; }
.memory-ready .section-heading h2 { color: #f6f1e8; margin: 0; font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 3px 18px rgba(9,24,18,.42); }
.memory-ready .section-heading h2 .memory-title-accent { display: block; margin-top: .12em; font-family: var(--script, "Alex Brush", cursive); font-size: 1.2em; font-weight: 400; line-height: 1.15; color: var(--mist, #a9d6d2); }
.memory-ready .section-heading .eyebrow { text-shadow: 0 2px 8px rgba(9,24,18,.8); }
@keyframes memory-title-float {
  0%, 100% { transform: perspective(1200px) translate3d(0, 0, 0) rotateX(1deg); }
  50% { transform: perspective(1200px) translate3d(0, -4px, 5px) rotateX(0deg); }
}
@media (max-width: 760px) {
  .memory-ready .section-heading { left: 10%; top: 22%; width: 78%; max-width: 78%; }
  .memory-ready .section-heading h2 { font-size: clamp(1.8rem, 7vw, 2.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .memory-ready .section-heading { animation: none; transform: none; }
}

/* Caption + controls — bottom bar */
.memory-ready .memory-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 2rem; position: absolute; z-index: 3; left: clamp(1.5rem,5vw,5.5rem); right: clamp(1.5rem,5vw,5.5rem); bottom: clamp(2.2rem,6vh,4rem); margin: 0; text-align: left; }
.memory-ready .memory-controls > div { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 1.6rem; }
.memory-count { font-family: "Inter", sans-serif; font-size: .74rem; letter-spacing: .24em; font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.memory-caption { margin: 0; min-width: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.1; color: #f6f1e8; transition: opacity .5s; }
.memory-controls button { width: 3.4rem; height: 3.4rem; border: 1px solid rgba(246,241,232,.45); border-radius: 50%; color: #f6f1e8; background: rgba(20,28,26,.12); backdrop-filter: blur(6px); cursor: pointer; font-size: 1.1rem; transition: background .3s, border-color .3s, opacity .3s; }
.memory-ready .memory-controls [data-memory-prev] { grid-column: 2; grid-row: 1; margin-right: 4.2rem; }
.memory-ready .memory-controls [data-memory-next] { grid-column: 2; grid-row: 1; }
.memory-controls button:hover:not(:disabled) { background: #f6f1e8; color: #2d4f49; border-color: #f6f1e8; }
.memory-controls button:disabled { opacity: .3; cursor: default; }

/* Thin progress segments */
.memory-ready .memory-progress { display: flex; gap: .45rem; position: absolute; z-index: 3; left: clamp(1.5rem,5vw,5.5rem); right: clamp(1.5rem,5vw,5.5rem); bottom: clamp(1rem,3vh,1.8rem); }
.memory-progress span { flex: 1; height: 1px; background: rgba(246,241,232,.28); position: relative; overflow: hidden; }
.memory-progress span::after { content: ""; position: absolute; inset: 0; background: #f6f1e8; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.memory-progress span.is-done::after { transform: scaleX(1); }

.memory-ready .memory-hint { display: block; position: absolute; z-index: 3; right: clamp(1.5rem,5vw,5.5rem); top: clamp(2.4rem,6.5vh,5rem); margin: 0; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #f6f1e8; opacity: .7; }
.memory-deck:focus-visible, .memory-controls button:focus-visible { outline: 2px solid #e0c28f; outline-offset: 6px; }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .memory-ready.memory-gallery { height: 420vh; }
  .memory-ready .memory-sticky { position: sticky; top: 0; }
}
@media (max-width: 760px) {
  .experience-page .memory-gallery { margin-top: 2.5rem; }
  .memory-ready .memory-sticky { height: 88svh; min-height: 30rem; }
  .memory-ready .memory-hint { display: none; }
  .memory-ready .memory-controls { gap: 1rem; }
  .memory-ready .memory-controls > div { flex-direction: column; gap: .5rem; }
  .memory-controls button { width: 2.9rem; height: 2.9rem; }
  .memory-ready .memory-controls [data-memory-prev] { margin-right: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-ready .memory-card, .memory-ready .memory-card img { transition: none; transform: none; }
}


/* =============================================================
   GALÉRIA FELIRAT — kézírásos, pasztell zöld, 3D beúszással
   =============================================================
   A felirat a többi szekciócím stílusát követi: Alex Brush kézírás
   (--script) és a sötét felületeken használt pasztell zöld (--mist),
   ugyanaz, mint a .script-accent elemeké.

   Képváltáskor a szöveg enyhén hátulról, lentről úszik be
   (perspective + translateZ), nem csak átúszik. */

.memory-sticky {
  perspective: 900px;
}

.memory-caption {
  font-family: var(--script, "Alex Brush", cursive);
  font-style: normal;
  font-weight: 400;
  /* Jóval nagyobb, mert a kézírás optikailag kisebbnek hat */
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  line-height: 1.02;
  color: var(--mist, #a9d6d2);
  /* Olvashatóság a fénykép fölött: lágy sötét alámosás */
  text-shadow:
    0 2px 14px rgba(12, 20, 18, 0.55),
    0 1px 3px rgba(12, 20, 18, 0.65);
  transform-origin: left center;
  transition: none;
}

/* A beúszás minden képváltáskor újraindul (lásd gallery.js) */
.memory-caption.is-entering {
  animation: memory-caption-in 820ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
}

@keyframes memory-caption-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, -170px) rotateX(16deg);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@media (max-width: 760px) {
  .memory-caption {
    font-size: clamp(2rem, 9vw, 2.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-caption.is-entering {
    animation: memory-caption-fade 300ms ease both;
  }
  @keyframes memory-caption-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}