/* Homepage polish overrides. */

:root {
  --bg-previous: #141414;
}

/* The hero video belongs to the initial composition: no entrance animation. */
.submarine-3-video,
.submarine-3-video.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
  filter: none;
  box-shadow: 2px 2px 8px rgb(0 0 0 / 30%);
}

/* Header controls belong to the initial composition. They are already present
   when the page opens instead of becoming additional moving elements. */
.site-header .campus-link,
.site-header .info-toggle {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Homepage entrance: only the hero paragraph uses a restrained fade + short
   vertical settle. The Submarine masthead is visible from the first frame. */
.hero_paragraph {
  opacity: 0;
  transform: translateY(-8px);
  animation: home-intro-settle 800ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}

/* On a cross-document return the browser displays a snapshot of the new home
   while its live DOM is already running underneath. Pause the paragraph entrance
   for that snapshot interval so it cannot advance invisibly and then jump. */
html.is-page-revealing .hero_paragraph {
  animation-play-state: paused !important;
}

@supports selector(:active-view-transition) {
  html:active-view-transition .hero_paragraph {
    animation-play-state: paused !important;
  }
}

@keyframes home-intro-settle {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Large desktop hero geometry scales from both viewport width and height rather
   than inheriting the old fixed 60rem/6rem composition. This keeps the hero
   balanced from notebooks through large studio displays without a device-specific
   breakpoint. */
@media (min-width: 768px) {
  .hero_section {
    height: 100svh;
    min-height: 0;
  }

  .hero_section .u-section-padding {
    display: flex;
    align-items: center;
    min-height: 100%;
    padding-top: clamp(5rem, 8svh, 8rem);
    padding-bottom: clamp(3rem, 6svh, 6rem);
  }

  .hero_section .u-container,
  .hero_layout {
    width: 100%;
  }

  .hero_layout {
    margin-top: 0;
  }

  .hero_content {
    gap: clamp(2rem, 4.6svh, 4.5rem);
  }

  .submarine-3-video {
    width: min(58vw, 60rem, calc((100svh - 17rem) * 1.416));
    min-width: 0;
    max-width: none;
    height: auto;
  }

  .hero_paragraph {
    max-width: 42ch;
    font-size: clamp(1.25rem, 1.18vw, 1.7rem);
    line-height: 1.42;
  }
}

@media (min-width: 1600px) {
  .logo-marquee {
    opacity: .14;
  }
}

/* Desktop cover/back-cover interaction is a pure masked slide. Both images stay
   fully opaque throughout: there is no crossfade and no transparent seam. Hover
   only becomes active after the back-cover image has decoded. */
@media (hover: hover) and (pointer: fine) {
  .revista_card-img,
  .revista_card-img-retiro {
    opacity: 1;
    transition: transform 640ms var(--ease-cover);
  }

  .revista_card:hover .revista_card-img {
    opacity: 1;
    transform: translateX(100%);
  }

  .revista_card:hover .revista_card-img-retiro {
    opacity: 1;
    transform: translateX(0);
  }

  .revista_card:not(.is-back-ready):hover .revista_card-img {
    opacity: 1;
    transform: translateX(0);
  }

  .revista_card:not(.is-back-ready):hover .revista_card-img-retiro {
    opacity: 1;
    transform: translateX(-100%);
  }

  /* A click while the back cover is visible first restores the real cover very
     quickly. page-transitions.js waits for this short settle before navigating,
     so the shared-element transition always starts from cover -> cover. */
  .revista_card.is-cover-restoring .revista_card-img,
  .revista_card.is-cover-restoring:hover .revista_card-img {
    opacity: 1;
    transform: translateX(0);
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  .revista_card.is-cover-restoring .revista_card-img-retiro,
  .revista_card.is-cover-restoring:hover .revista_card-img-retiro {
    opacity: 1;
    transform: translateX(-100%);
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}

/* The archive state is binary. app.js only flips the class at one viewport
   trigger; this transition then completes on its own, independent of scroll. */
html,
body {
  transition: background-color 720ms cubic-bezier(.22, 1, .36, 1);
}

html.previous-active,
body.previous-active {
  background-color: var(--bg-previous);
}

/* Keep foreground treatment stable across the trigger. */
body,
body.previous-active {
  color: var(--color-black);
}

/* The archive heading and current-issue label stay black on the green field,
   then switch to white in lockstep with the dark archive background. */
.ediciones-anteriores_heading,
.nuevo-numero_section .hero_card-text {
  color: var(--color-black);
}

body.previous-active .ediciones-anteriores_heading,
body.previous-active .nuevo-numero_section .hero_card-text {
  color: var(--color-white);
}

.nuevo-numero_section .hero_card-text {
  transition:
    transform var(--dur-hover) var(--ease-out),
    color 720ms cubic-bezier(.22, 1, .36, 1);
}

/* All magazine action buttons share one neutral system. Edition colors never
   enter the control: white/dark at rest, black/white on hover. */
.u-btn,
.u-btn.n3 {
  background: var(--color-white);
  color: var(--color-dark-grey);
  filter: none;
}

.u-btn:hover,
.u-btn.n3:hover {
  background: var(--color-black);
  color: var(--color-white);
  filter: none;
}

/* Keep the masthead change synchronized with the archive background. The SVG is
   black on the green field and becomes pure white only in the dark state. */
.top-logo-wrap.intro-logo .submarine-logo-top {
  transition:
    transform .12s linear,
    opacity .12s linear,
    filter 720ms cubic-bezier(.22, 1, .36, 1);
}

body.previous-active .top-logo-wrap.intro-logo .submarine-logo-top {
  filter: invert(1);
  opacity: 1;
}

/* Archive heading now enters with the same restrained motion language used
   elsewhere instead of scaling dramatically from 4x. */
.ediciones-anteriores_heading {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 520ms var(--ease-out),
    transform 560ms var(--ease-out),
    color 720ms cubic-bezier(.22, 1, .36, 1);
}

.ediciones-anteriores_heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* This is the last section in the document. It must size to its content rather
   than inherit u-full-height's 100dvh minimum, which left a large empty tail
   below the archive cards. Keep the existing top composition and finish with a
   modest editorial margin instead of either a full viewport or an abrupt edge. */
.ediciones-anteriores_section.u-full-height {
  min-height: 0;
  padding-bottom: 0;
}

.ediciones-anteriores_section > .u-section-padding {
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

.ediciones-anteriores_cards-layout {
  padding-bottom: 0;
}

/* Keep one white soft-light marquee throughout. On the darker archive field it
   needs substantially less alpha to retain the same quiet visual weight it has
   over green. The alpha change shares the background trigger/timing and is not
   scroll-scrubbed. */
.logo-marquee {
  --marquee-gap: 50vw;
  --marquee-half-gap: 25vw;
  width: max-content;
  column-gap: var(--marquee-gap);
  row-gap: 0;
  opacity: .2;
  filter: none;
  mix-blend-mode: soft-light;
  transition: opacity 720ms cubic-bezier(.22, 1, .36, 1);
}

/* The two identical wordmarks form one exact cycle. The distance is derived from
   the rendered track width plus its gap, so the second copy lands pixel-for-pixel
   where the first began and the animation can restart without a visible cut. */
@keyframes submarine-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--marquee-half-gap))); }
}

body.previous-active .logo-marquee {
  opacity: .07;
  filter: none;
  mix-blend-mode: soft-light;
}

/* During a cross-document View Transition the browser displays a snapshot while
   the live document exists underneath it. Freeze the moving marquee for that
   interval so the snapshot cannot hand off to a marquee that has advanced a few
   pixels and create the perceived post-navigation vibration. */
html.is-page-revealing .logo-marquee {
  animation-play-state: paused !important;
}

@supports selector(:active-view-transition) {
  html:active-view-transition .logo-marquee {
    animation-play-state: paused !important;
  }
}

/* Keep the final credit fully readable, with a short deliberate tail only. */
.about_layout {
  padding-bottom: 1.5rem;
}

.about_content {
  margin-bottom: 0;
  padding-bottom: 2.5rem;
}

/* Semantic heading without introducing another visible element. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.revista_card:focus-visible,
.campus-link:focus-visible,
.about_content a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  /* On small screens the masthead belongs to the document flow; it should leave
     the viewport naturally rather than occupying permanent vertical space. */
  .top-logo-wrap.intro-logo {
    position: relative;
    top: auto;
  }

  .ediciones-anteriores_cards-layout {
    row-gap: 2.5rem;
  }

  .about_scroll-wrap {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .about_content {
    padding-bottom: max(2.25rem, calc(env(safe-area-inset-bottom) + 1rem));
  }
}

/* Touch devices navigate directly. Never synthesize the desktop cover/back-cover
   hover transition before the page transition begins. */
@media (hover: none), (pointer: coarse) {
  .revista_card-img,
  .revista_card-img-retiro {
    transition: none;
  }

  .revista_card:hover .revista_card-img,
  .revista_card:active .revista_card-img {
    opacity: 1;
    transform: none;
  }

  .revista_card:hover .revista_card-img-retiro,
  .revista_card:active .revista_card-img-retiro {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .logo-marquee,
  .hero_paragraph,
  .ediciones-anteriores_heading,
  .ediciones-anteriores_heading.is-visible {
    transform: none;
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}