/* site_web/assets/css/realisations.css */

/* ============ Hero ============ */
.real-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
  padding: 7rem 0 4rem;
}
@media (min-width: 768px) { .real-hero { min-height: 90vh; } }

.real-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.4)),
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
}

.real-hero__shell {
  position: absolute;
  z-index: 0;
  width: 170px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  animation: caauri-float 16s ease-in-out infinite;
}
.real-hero__shell--gold {
  top: 10%;
  left: 4%;
  filter: drop-shadow(0 0 40px rgba(212, 160, 23, 0.25));
}
.real-hero__shell--dark {
  bottom: 8%;
  right: 5%;
  width: 140px;
  opacity: 0.4;
  animation-delay: 3s;
  filter: drop-shadow(0 0 30px rgba(212, 160, 23, 0.15));
}
@media (max-width: 640px) {
  .real-hero__shell { width: 100px; opacity: 0.3; }
  .real-hero__shell--dark { width: 90px; }
}

.real-hero__guide {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
  display: none;
}
@media (min-width: 768px) { .real-hero__guide { display: block; } }

.real-hero__content { position: relative; z-index: 10; width: 100%; }
.real-hero__inner { max-width: 42rem; }

.real-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  margin-bottom: 1.5rem;
}

.real-hero__subtitle {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  max-width: 36rem;
}

.real-hero__follow {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
}
@media (min-width: 768px) { .real-hero__follow { display: flex; align-items: center; } }
.real-hero__follow span {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ============ Manifesto ============ */
.manifesto { position: relative; background: #000; padding-block: 5rem; overflow: hidden; }
@media (min-width: 768px) { .manifesto { padding-block: 8rem; } }

.manifesto__halo {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  border-radius: 50%;
  background: rgba(212, 160, 23, 0.04);
  filter: blur(160px);
  pointer-events: none;
}

.manifesto__inner { position: relative; max-width: 56rem; font-family: var(--font-script); }

.manifesto__line {
  position: relative;
  display: inline-block;
  line-height: 1.45;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) { .manifesto__line { font-size: 1.875rem; } }

.manifesto__line--strong { color: var(--gold); font-size: 1.5rem; }
@media (min-width: 768px) { .manifesto__line--strong { font-size: 2.25rem; } }

.manifesto__rule {
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, rgba(212, 160, 23, 0.7), rgba(212, 160, 23, 0.3), transparent);
}

/* ============ Memory Seal (shared) ============ */
.memory-seal { position: relative; background: #000; padding-block: 5rem; overflow: hidden; }
@media (min-width: 768px) { .memory-seal { padding-block: 8rem; } }

.memory-seal__halo {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
}
.memory-seal__halo--gold { top: 25%; left: -10rem; background: rgba(212, 160, 23, 0.05); }
.memory-seal__halo--amber { bottom: 25%; right: -10rem; background: rgba(232, 184, 40, 0.05); }
.memory-seal__halo--emerald { top: 25%; left: -10rem; background: rgba(52, 211, 153, 0.05); }

.memory-seal__head { position: relative; margin-bottom: 3rem; max-width: 56rem; }
@media (min-width: 768px) { .memory-seal__head { margin-bottom: 4rem; } }

.eyebrow--emerald { color: #34d399; }

.memory-seal__heading {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  max-width: 56rem;
}

.text-gradient-gold {
  background: linear-gradient(to right, var(--gold), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-emerald {
  background: linear-gradient(to right, #34d399, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.memory-seal__intro {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-top: 1.5rem;
  max-width: 42rem;
}
@media (min-width: 768px) { .memory-seal__intro { font-size: 1rem; } }

/* ============ Memory Seal 1 — bento grid ============ */
.memory-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) {
  .memory-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 340px; gap: 1rem; }
}

.memory-item { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); }
.memory-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease-out;
}
.memory-item:hover img { transform: scale(1.05); }

.memory-item__num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.5s;
}
.memory-item:hover .memory-item__num { color: rgba(212, 160, 23, 0.7); }

/* mobile heights per layout */
.memory-item--1 { height: 60vh; min-height: 420px; }
.memory-item--2, .memory-item--3 { height: 40vh; min-height: 260px; }
.memory-item--4, .memory-item--5, .memory-item--6 { height: 40vh; }
.memory-item--7 { height: 50vh; }

/* desktop spans (12-col grid, 340px auto-rows) */
@media (min-width: 768px) {
  .memory-item--1 { grid-column: span 7; grid-row: span 2; height: auto; min-height: 420px; }
  .memory-item--2 { grid-column: span 5; grid-row: span 1; height: auto; min-height: 260px; }
  .memory-item--3 { grid-column: span 5; grid-row: span 1; height: auto; min-height: 260px; }
  .memory-item--4 { grid-column: span 4; height: 340px; }
  .memory-item--5 { grid-column: span 4; height: 340px; }
  .memory-item--6 { grid-column: span 4; height: 340px; }
  .memory-item--7 { grid-column: span 12; height: 460px; }
}

/* ============ Memory Seal 2 — vertical posters ============ */
.poster-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

.poster-item {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.poster-item__frame { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.poster-item__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.7s ease-out;
}
.poster-item:hover .poster-item__frame img { transform: scale(1.03); }

.poster-item__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: color 0.5s;
}
.poster-item:hover .poster-item__num { color: #34d399; }

/* ============ Book download CTA ============ */
.book-cta { position: relative; background: #000; padding-block: 5rem; }
@media (min-width: 768px) { .book-cta { padding-block: 5rem 8rem; } }
.book-cta__inner { text-align: center; }
.book-cta__text { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; margin-bottom: 1.5rem; }

/* ============ Partners logos ============ */
.partners { background: #fff; padding-block: 5rem; }
@media (min-width: 768px) { .partners { padding-block: 7rem; } }

.partners__heading {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  font-size: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .partners__heading { font-size: 2.25rem; margin-bottom: 4rem; } }

.partners__grid { gap: 1.5rem; }
@media (min-width: 768px) { .partners__grid { gap: 2rem; } }

.partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  aspect-ratio: 3 / 2;
  padding: 1rem;
  transition: background-color 0.3s;
}
@media (min-width: 768px) { .partners__logo { padding: 1.5rem; } }
.partners__logo:hover { background: #fafafa; }

.partners__logo img {
  height: 4rem;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15) brightness(1.1);
  opacity: 0.8;
  transition: filter 0.3s, opacity 0.3s;
}
@media (min-width: 768px) { .partners__logo img { height: 5rem; } }
@media (min-width: 1024px) { .partners__logo img { height: 6rem; } }
.partners__logo:hover img { filter: none; opacity: 1; }

.logo--inverted { filter: invert(1) grayscale(1) contrast(1.15) brightness(1.1); }
.partners__logo:hover .logo--inverted { filter: invert(1); }