/* ============================================================
   CULTURAL IDENTITY — sections/cultural-identity.css
   Showcases Hội An's UNESCO heritage & cultural landmarks
   ============================================================ */

/* =======================
   MARQUEE TICKER
   ======================= */
.cultural-ticker {
  background: #d49a32;
  padding: 12px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.cultural-ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: tickerScroll 28s linear infinite;
  will-change: transform;
}
.cultural-ticker__track:hover { animation-play-state: paused; }

.cultural-ticker__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 36px;
  font-family: var(--ff-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.cultural-ticker__item:visited { color: #fff; }
.cultural-ticker__item:hover { color: #fff; }
.cultural-ticker__item .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--clr-primary);
  flex-shrink: 0;
}
.cultural-ticker__item .lantern-icon {
  font-size: var(--fs-14);
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}


/* =======================
   MAIN CULTURAL IDENTITY
   ======================= */
.cultural-identity {
  background: var(--clr-hoian-sand);
  padding-block: var(--section-py);
  position: relative;
  overflow: hidden;
}

/* Decorative subtle pattern on bg */
.cultural-identity::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: none;
  pointer-events: none;
}

/* ---- Grid layout ---- */
.cultural-identity__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

/* =======================
   LEFT — Image + badge
   ======================= */
.cultural-identity__left {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Main building image (Chùa Cầu, yellow walls, etc.) */
.cultural-identity__img-main {
  --roof-pop: 55px;
  border-radius: var(--r-2xl);
  overflow: visible;
  width: min(100%, 430px);
  aspect-ratio: 3 / 4;
  box-shadow: none;
  position: relative;
  clip-path: inset(calc(-1 * var(--roof-pop)) 0 0 0 round var(--r-2xl));
}
.cultural-identity__img-main img {
  display: block;
  width: 100%;
  height: calc(100% + var(--roof-pop));
  object-fit: cover;
  border-radius: var(--r-2xl);
  position: relative;
  top: calc(-1 * var(--roof-pop));
}
/* Yellow warm overlay to match Hội An wall colour */
.cultural-identity__img-main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background: linear-gradient(
    to bottom right,
    rgba(245,197,24,.06),
    transparent 62%
  );
  pointer-events: none;
}

/* Floating lantern decoration (CSS-only) */
.lantern-group {
  position: absolute;
  top: -24px;
  right: -28px;
  display: flex;
  gap: 14px;
  z-index: var(--z-above);
}

.lantern {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: lanternSway 3.5s ease-in-out infinite;
}
.lantern:nth-child(2) { animation-delay: 0.5s; animation-duration: 4s; }
.lantern:nth-child(3) { animation-delay: 1s;   animation-duration: 3s; }

@keyframes lanternSway {
  0%,100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* String */
.lantern__string {
  width: 1.5px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(139,105,20,.7), rgba(139,105,20,.3));
}

/* Body */
.lantern__body {
  width: 28px;
  height: 44px;
  border-radius: 50% 50% 45% 45% / 38% 38% 62% 62%;
  position: relative;
  box-shadow: inset -4px 0 8px rgba(0,0,0,.18), 0 0 18px rgba(255,165,0,.55);
}
.lantern:nth-child(1) .lantern__body { background: linear-gradient(160deg, #E53935, #B71C1C); }
.lantern:nth-child(2) .lantern__body { background: linear-gradient(160deg, #FFB300, #E65100); }
.lantern:nth-child(3) .lantern__body { background: linear-gradient(160deg, #E53935, #880E4F); }

/* Ribs */
.lantern__body::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-full);
  box-shadow: 0 8px 0 rgba(255,255,255,.12), 0 16px 0 rgba(255,255,255,.08);
}

/* Cap top + bottom */
.lantern__cap {
  width: 18px;
  height: 6px;
  background: linear-gradient(to bottom, #8B6914, #A07820);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.lantern__cap--bottom {
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* Tassel */
.lantern__tassel {
  width: 1.5px;
  height: 14px;
  background: linear-gradient(to bottom, #FFD700, transparent);
  position: relative;
}
.lantern__tassel::before,
.lantern__tassel::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 1px;
  height: 16px;
  background: rgba(255,215,0,.6);
}
.lantern__tassel::before { left: -4px; transform: rotate(-15deg); }
.lantern__tassel::after  { right: -4px; transform: rotate(15deg); }

/* Glow orb (light source) */
.lantern__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: rgba(255,220,100,.55);
  filter: blur(4px);
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: .9; transform: translate(-50%,-50%) scale(1.25); }
}

/* UNESCO badge */
.cultural-identity__badge {
  position: absolute;
  bottom: 2px;
  left: 52px;
  z-index: var(--z-above);
  --bevel-size: 10px;
  background: #1d3433;
  color: var(--clr-white);
  border-radius: 0;
  clip-path: polygon(
    var(--bevel-size) 0,
    calc(100% - var(--bevel-size)) 0,
    100% var(--bevel-size),
    100% calc(100% - var(--bevel-size)),
    calc(100% - var(--bevel-size)) 100%,
    var(--bevel-size) 100%,
    0 calc(100% - var(--bevel-size)),
    0 var(--bevel-size)
  );
  padding: 18px 22px;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 230px;
}
.cultural-identity__badge-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.cultural-identity__badge-text strong {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: #d49a32;
  line-height: 1.2;
}
.cultural-identity__badge-text span {
  font-size: var(--fs-11);
  color: rgba(255,255,255,.6);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* =======================
   RIGHT — Text + pillars
   ======================= */
.cultural-identity__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.cultural-identity__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--clr-hoian-amber);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.cultural-identity__eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--clr-hoian-amber);
  border-radius: var(--r-full);
}

.cultural-identity__title {
  font-family: 'Normiyola', 'Normiyola VIP', var(--ff-display);
  font-size: clamp(3.1rem, 5.6vw, 5.8rem);
  font-weight: 700;
  color: #1d3433;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.cultural-identity__title em {
  font-style: italic;
  color: #d49a32;
}

.cultural-identity__desc {
  font-size: var(--fs-14);
  color: var(--clr-gray-500);
  line-height: var(--lh-relaxed);
  max-width: 440px;
}

/* ---- Cultural pillars grid ---- */
.cultural-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cultural-pillar {
  background: var(--clr-white);
  border-radius: 0;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
  padding: 18px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(212,146,42,.12);
  cursor: default;
  transition: var(--t-base);
}
.cultural-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212,146,42,.35);
}

.cultural-pillar__emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.cultural-pillar__vi {
  font-family: var(--ff-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--clr-dark);
  line-height: 1.2;
}
.cultural-pillar__en {
  font-size: var(--fs-11);
  color: var(--clr-gray-500);
  margin-top: 2px;
  line-height: 1.3;
}