/* QUICK DESIGN CONTROLS — edit these values, save, then refresh your local preview. */
:root {
  --landing-red: #e7492d;
  --motion-duration: 600ms; /* Larger number = slower. Try 800ms. */
  --motion-easing: cubic-bezier(.45, 0, .55, 1); /* Gentle ease-in and ease-out. */
  --title-hover-scale: 1.06; /* 1.06 = 6% larger. */
  --name-rest-scale: 1.10; /* Name is 10% larger than resting landing titles. */
  --name-size: var(--title-size); /* Hovered landing name matches resting title size. */
  --title-size: clamp(33px, 5.8vw, 126px); /* Normal desktop title size. */
}

.landing .world { --accent: var(--landing-red); }
.landing .world h1 {
  font-size: var(--title-size);
  transform: scale(1);
  transition: transform var(--motion-duration) var(--motion-easing),
              color var(--motion-duration) var(--motion-easing);
}
.landing-name, .site-name {
  color: var(--landing-red);
  font-size: var(--name-size);
  transform: translateX(-50%) scale(var(--name-rest-scale));
  transform-origin: center top;
}
/* Only the hovered title expands. The neighbouring title keeps its normal size. */
@media (hover: hover) {
  .landing .world h1:hover {
    color: var(--landing-red);
    transform: scale(var(--title-hover-scale));
  }
}
/* Equivalent behaviour for keyboard navigation. */
.landing .world:focus-visible h1 {
  color: var(--landing-red);
  transform: scale(var(--title-hover-scale));
}
@media (max-width: 700px) {
  :root {
    --title-size: clamp(30px, 10.2vw, 70px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing .world h1, .landing-name { transition: none; }
}

/* Hover shrinks the landing name to the resting title size. */
.landing-name{transition:transform var(--motion-duration) var(--motion-easing)}

@media(hover:hover){.landing:has(.world h1:hover) .landing-name{transform:translateX(-50%) scale(1)}}
.landing:has(.world:focus-visible) .landing-name{transform:translateX(-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.landing-name{transition:none}}

/* Inner pages use the exact fully-shrunk landing-name size. */
.site-name{transform:translateX(-50%) scale(1)}

/* Reversible landing colour test: reserve red for the active discipline. */
.landing-name span{transition:color var(--motion-duration) var(--motion-easing)}
@media(hover:hover) and (min-width:701px){
 .landing:has(.world h1:hover) .landing-name span:first-child{color:#fff}
 .landing:has(.world h1:hover) .landing-name span:last-child{color:#000}
}
@media(min-width:701px){
 .landing:has(.world:focus-visible) .landing-name span:first-child{color:#fff}
 .landing:has(.world:focus-visible) .landing-name span:last-child{color:#000}
}
/* Both name halves sit over black when the entrance stacks on narrow screens. */
@media(hover:hover) and (max-width:700px){.landing:has(.world h1:hover) .landing-name span{color:#fff}}
@media(max-width:700px){.landing:has(.world:focus-visible) .landing-name span{color:#fff}}
@media(prefers-reduced-motion:reduce){.landing-name span{transition:none}}