### This is the special.css file for the special css classes  website ###
/* ===============================
   HERO PLUGIN (NAMESPACED)
   =============================== */

.hero-plugin {
  position: relative;
  height: 90vh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  font-family: Georgia, system-ui, sans-serif;
}

/* --- Background slideshow --- */
.hero-plugin-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-plugin-bg span {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroPluginFade 24s infinite;
}

.hero-plugin-bg span:nth-child(1) {
  background-image: url("/cms/assets/_core/image/hero1.jpg");
  animation-delay: 0s;
}
.hero-plugin-bg span:nth-child(2) {
  background-image: url("/cms/assets/_core/image/hero2.jpg");
  animation-delay: 8s;
}
.hero-plugin-bg span:nth-child(3) {
  background-image: url("/cms/assets/_core/image/hero3.jpg");
  animation-delay: 16s;
}

/* --- Dark overlay --- */
.hero-plugin-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    circle,
    rgba(0,0,0,0.3) 35%,
    rgba(0,0,0,0.85) 85%
  );
}

/* --- Logo intro --- */
.hero-plugin-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: heroPluginLogo 12s infinite;
}

.hero-plugin-logo img {
  width: clamp(240px, 35vw, 520px);
  height: auto;
  animation: heroPluginLogoScale 12s infinite;
}

/* --- Text content --- */
.hero-plugin-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f5e6c8;
  padding: 1rem;
}

.hero-plugin-welcome {
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 700;
  color: #d4af37;

  margin-bottom: 1.2rem;       /* ✅ tightened */
  line-height: 1;

  opacity: 0;
  transform: translateY(20px);
  animation: heroPluginWelcome 12s infinite;
}

.hero-plugin-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(4rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  margin-top: 0;          /* ✅ KEY FIX (removes browser default) */
  margin-bottom: 0.25rem;
  line-height: 0.95;
}

.hero-plugin-title span {
  display: block;
  opacity: 0;
  transform: translateX(-60px);
  animation: heroPluginTitle 12s infinite;
}

.hero-plugin-title span:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-plugin-divider {
  width: 0;
  height: 2px;
  background: #d4af37;
  margin: 1rem 0;
  animation: heroPluginDivider 12s infinite;
}

.hero-plugin-subtitle {
  letter-spacing: 0.25em;
  font-size: 1.5rem;
  font-weight: 800;
  color: #d4af37;
  opacity: 0;
  animation: heroPluginSubtitle 12s infinite;
}

/* --- Film grain (optional) --- */
.hero-plugin-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("/cms/assets/_core/image/grain.png");
  opacity: 0.12;
}

/* ===============================
   MOBILE ENHANCEMENTS
   =============================== */
@media (max-width: 768px) {

  .hero-plugin {
    height: 100svh; /* fixes mobile viewport bugs */
  }

  .hero-plugin-welcome {
    font-size: 3.2rem;      /* larger on mobile */
    margin-bottom: 0;
  }

  .hero-plugin-title {
    font-size: clamp(4.6rem, 10vw, 6.2rem); /* BIGGER + responsive */
    line-height: 0.92;
  }

  .hero-plugin-divider {
    margin: 0.75rem 0;
  }

  .hero-plugin-subtitle {
    font-size: 1.7rem;
    letter-spacing: 0.3em;
  }

  /* Make motion more visible on mobile */
  .hero-plugin-title span {
    transform: translateX(-90px);
  }

  .hero-plugin-welcome {
    transform: translateY(30px);
  }

  /* Speed up slightly for mobile attention span */
  .hero-plugin-logo,
  .hero-plugin-logo img,
  .hero-plugin-welcome,
  .hero-plugin-title span,
  .hero-plugin-divider,
  .hero-plugin-subtitle {
    animation-duration: 10s;
  }

  /* Bigger logo on mobile */
  .hero-plugin-logo img {
    width: clamp(260px, 70vw, 420px);
  }
}


/* ===============================
   ANIMATIONS
   =============================== */

@keyframes heroPluginFade {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  45% { opacity: 1; transform: scale(1.08); }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heroPluginLogo {
  0%, 15% { opacity: 0; }
  20%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes heroPluginLogoScale {
  0%, 20% { transform: scale(0.95); }
  35%, 45% { transform: scale(1); }
  100% { transform: scale(0.95); }
}

@keyframes heroPluginWelcome {
  0%, 50% { opacity: 0; transform: translateY(20px); }
  60%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes heroPluginTitle {
  0%, 55% { opacity: 0; transform: translateX(-60px); }
  65%, 85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}

@keyframes heroPluginDivider {
  0%, 60% { width: 0; }
  70%, 85% { width: 240px; }
  100% { width: 0; }
}

@keyframes heroPluginSubtitle {
  0%, 65% { opacity: 0; }
  75%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
/* ===============================
   MOBILE HERO TYPOGRAPHY BOOST
   =============================== */
@media (max-width: 768px) {

  .hero-content {
    padding-top: 4rem;
  }

  .hero-welcome {
    font-size: 1.4rem;     /* was smaller */
    margin-bottom: 0.2rem;
  }

  .hero-title {
    font-size: 3.2rem;     /* BIGGER on mobile */
    line-height: 0.95;     /* tighter lines */
  }

  .hero-title span {
    display: block;
  }

  .hero-subtitle {
    font-size: 1.6rem;
    margin-top: 0.4rem;
  }

  .hero-divider {
    margin-top: 0.6rem;
  }
}