/* ==========================================================================
   Centenario de Vida Municipal | Entry screen
   ========================================================================= */

/* 1. Tokens and page foundation */
:root {
  color-scheme: dark;
  --green: #063d2c;
  --green-deep: #032c25;
  --gold: #f2cb56;
  --white: #fff;
  --display: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--sans);
}

body { background: var(--green); }

.entry-screen {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  padding: 26px 22px 56px;
  color: var(--white);
  text-align: center;
}

.entry-photo,
.entry-overlay {
  position: absolute;
  inset: 0;
}

.entry-photo {
  transform: scale(1.025);
  background: url("assets/valle-carvajal.jpg") center 52% / cover no-repeat;
  animation: photo-arrive 1.4s ease-out both;
}

.entry-overlay {
  background:
    linear-gradient(90deg, rgb(3 44 37 / 85%), rgb(6 55 43 / 74%) 49%, rgb(3 44 37 / 85%)),
    linear-gradient(0deg, rgb(2 39 31 / 91%), transparent 55%, rgb(2 39 31 / 53%));
}

.entry-brand,
.entry-content,
.entry-footer {
  position: relative;
  z-index: 1;
}

/* 2. Municipal identity */
.entry-brand {
  position: absolute;
  top: clamp(18px, 4vh, 42px);
  right: 0;
  left: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.entry-brand img {
  width: clamp(58px, 8vw, 80px);
  height: auto;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 22px rgb(0 27 22 / 65%);
  object-fit: contain;
}

.entry-brand p {
  margin: 0;
  color: #f4f1e8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}

.entry-brand p span {
  padding-inline: 4px;
  color: var(--gold);
}

/* 3. Centennial message */
.entry-content {
  width: min(1040px, 100%);
  padding: 115px 0 56px;
  animation: content-arrive .85s .12s ease-out both;
}

.entry-coming-soon {
  margin: 0 0 13px;
  color: #ffe79a;
  font-size: clamp(30px, 6.3vw, 58px);
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
  text-shadow: 0 3px 18px rgb(0 26 22 / 72%);
}

.entry-coming-soon span { letter-spacing: .02em; }

.entry-years {
  margin: 0 0 9px;
  font-family: var(--display);
  font-size: clamp(19px, 3vw, 28px);
  letter-spacing: .16em;
}

.entry-years span {
  padding-inline: 5px;
  color: var(--gold);
}

.entry-content h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 7.3vw, 76px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  text-shadow: 0 2px 16px rgb(0 27 22 / 65%);
}

.entry-content h1 em {
  display: block;
  margin-top: 8px;
  color: #f5df9a;
  font-size: .48em;
  font-weight: 400;
  letter-spacing: .015em;
}

.entry-motto {
  margin: 14px 0 0;
  color: #edf5ef;
  font-family: var(--display);
  font-size: clamp(13px, 1.8vw, 17px);
  letter-spacing: .025em;
}

/* 4. Full-width interactive inauguration ribbon */
.entry-link {
  position: relative;
  left: 50%;
  display: grid;
  width: 100vw;
  justify-items: center;
  margin: 14px 0 0;
  transform: translateX(-50%);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline-offset: 5px;
}

.entry-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 8px;
}

.entry-ribbon {
  display: block;
  width: 100%;
  height: clamp(112px, 16vw, 205px);
  overflow: visible;
  filter: drop-shadow(0 9px 18px rgb(0 26 22 / 52%));
}

.entry-ribbon .bow-left,
.entry-ribbon .bow-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: bow-sway 2.8s ease-in-out infinite alternate;
}

.entry-ribbon .bow-right { animation-direction: alternate-reverse; }

.entry-ribbon .tail-left,
.entry-ribbon .tail-right {
  transform-box: fill-box;
  transform-origin: top center;
  animation: tail-sway 2.5s ease-in-out infinite alternate;
}

.entry-ribbon .tail-right { animation-direction: alternate-reverse; }

.entry-button {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: -3px;
  padding: 13px 23px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: #075239;
  box-shadow: 0 5px 18px rgb(0 26 22 / 48%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  transition: background-color .2s, color .2s, transform .2s;
}

.entry-link:hover .entry-button,
.entry-link:focus-visible .entry-button {
  transform: translateY(-2px);
  background: var(--gold);
  color: #17362a;
}

.entry-button b { font-size: 16px; }

.entry-hint {
  margin: 10px 0 0;
  color: rgb(255 255 255 / 82%);
  font-size: 10px;
  letter-spacing: .06em;
}

/* 5. Release animation: bow loosens, ribbon ends pull away */
.entry-screen.is-opening .ribbon-left {
  transform-box: fill-box;
  transform-origin: right center;
  animation: pull-left .78s cubic-bezier(.55, .04, .76, .32) forwards;
}

.entry-screen.is-opening .ribbon-right {
  transform-box: fill-box;
  transform-origin: left center;
  animation: pull-right .78s cubic-bezier(.55, .04, .76, .32) forwards;
}

.entry-screen.is-opening .bow-left {
  transform-origin: right center;
  animation: untie-left .62s ease-in forwards;
}

.entry-screen.is-opening .bow-right {
  transform-origin: left center;
  animation: untie-right .62s ease-in forwards;
}

.entry-screen.is-opening .tail-left {
  transform-origin: top right;
  animation: tail-release-left .65s ease-in forwards;
}

.entry-screen.is-opening .tail-right {
  transform-origin: top left;
  animation: tail-release-right .65s ease-in forwards;
}

.entry-screen.is-opening .knot {
  transform-box: fill-box;
  transform-origin: center;
  animation: knot-release .34s ease-in forwards;
}

.entry-screen.is-opening .entry-button,
.entry-screen.is-opening .entry-hint {
  opacity: 0;
  transition: opacity .2s ease;
}

@keyframes content-arrive {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes photo-arrive {
  from { transform: scale(1.07); }
  to { transform: scale(1.025); }
}

@keyframes bow-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

@keyframes tail-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

@keyframes pull-left {
  to { transform: translateX(-110vw) rotate(-7deg); opacity: 0; }
}

@keyframes pull-right {
  to { transform: translateX(110vw) rotate(7deg); opacity: 0; }
}

@keyframes untie-left {
  to { transform: translate(-24px, -38px) rotate(-35deg) scale(.35); opacity: 0; }
}

@keyframes untie-right {
  to { transform: translate(24px, -38px) rotate(35deg) scale(.35); opacity: 0; }
}

@keyframes tail-release-left {
  to { transform: translate(-24px, 38px) rotate(-32deg); opacity: 0; }
}

@keyframes tail-release-right {
  to { transform: translate(24px, 38px) rotate(32deg); opacity: 0; }
}

@keyframes knot-release {
  to { transform: scale(.1); opacity: 0; }
}

/* 6. Screen footer and entrance frame */
.entry-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 48px);
  border-top: 1px solid rgb(255 255 255 / 22%);
  color: #f2f4e8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.entry-footer span:last-child { color: #ffe59a; }

.entry-screen::after {
  position: absolute;
  z-index: 2;
  border: 1px solid rgb(255 255 255 / 19%);
  content: "";
  inset: 12px;
  pointer-events: none;
}

/* 7. Responsive layout */
@media (max-width: 600px) {
  .entry-screen { padding: 18px 16px 52px; }
  .entry-brand { top: 20px; }
  .entry-content { padding: 112px 0 50px; }
  .entry-coming-soon {
    margin-bottom: 13px;
    font-size: clamp(27px, 8.3vw, 42px);
    letter-spacing: .09em;
  }
  .entry-content h1 { font-size: clamp(39px, 11vw, 60px); }
  .entry-motto {
    max-width: 300px;
    margin: 12px auto 0;
    line-height: 1.5;
  }
  .entry-link { margin-top: 8px; }
  .entry-ribbon { height: clamp(110px, 32vw, 172px); }
  .entry-button { margin-top: 2px; padding: 12px 20px; font-size: 10px; }
  .entry-hint { font-size: 9px; }
  .entry-footer { padding: 13px 15px; font-size: 8px; letter-spacing: .08em; }
  .entry-screen::after { inset: 8px; }
}

@media (max-height: 700px) and (min-width: 601px) {
  .entry-brand { top: 12px; }
  .entry-brand img { width: 55px; }
  .entry-content { padding-top: 96px; padding-bottom: 48px; }
  .entry-ribbon { height: clamp(100px, 13vw, 150px); }
  .entry-footer { padding-block: 10px; }
}

/* 8. Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}