/* =========================
   Home (wave hero + CSS-only cycler)
   ========================= */

/* Toggle OFF wave (optional) */
.wave-off .hero-wave__bg{ display:none; }
.wave-off .hero-wave{
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), transparent 55%);
}

.hero-wave{
  position: relative;
  min-height: 100vh;
  background: #000;
  overflow: hidden;
  display: grid;
  align-items: center;
}

.hero-wave__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;
}

.wave--1{ opacity: 0.26; }
.wave--2{ opacity: 0.10; }

.hero-wave__content{
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--page-pad-left);
  padding-right: var(--page-pad-right);

  padding-top: calc(var(--header-height) + 2.0rem);
  padding-bottom: 4.0rem;

  color: var(--text-primary);
  text-align: left;
}

/* Headline hierarchy */
.home-title{
  margin: 0 0 5rem 0; /*increae 3rd rem to move up - margin bottom*/
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  max-width: 22ch;
}

.home-title__sub{
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(1.05rem, 2.25vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  opacity: 0.95;
}

/* =========================
   Cycler (3s each, 4 items)
   - Absolutely layered, but never visible at the same time
   ========================= */

.home-cycle{
  position: relative;
  max-width: 66ch;
  min-height: 6.6rem; /* reserve space for two lines + fade */
  /*margin: 0 0 1.75rem 0;*/
    margin-top: -1.8rem;
  contain: layout paint;
  z-index: 2;
}

.home-cycle__item{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  animation: cycleOne 12s infinite linear;
  animation-delay: var(--d);
  animation-fill-mode: both;
  transform: translateZ(0);
}

/* NO OVERLAP: each item is only visible inside its own slot */
@keyframes cycleOne{
  /* Each item is responsible for the FIRST quarter (0–25%) of its 12s animation (= 3s).
     The delay offsets (0/3/6/9s) move that quarter into the right slot.
     Outside 0–25% the item is fully hidden, so overlap cannot occur. */
  0%   { opacity: 0; visibility: hidden; }
  6%   { opacity: 1; visibility: visible; }  /* quick fade in */
  20%  { opacity: 1; visibility: visible; }  /* hold */
  25%  { opacity: 0; visibility: hidden; }   /* fade out + hide */
  100% { opacity: 0; visibility: hidden; }
}

.home-cycle__headline{
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
}

.home-cycle__sub{
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}



/* Buttons: accent only on hover/focus */
.home-actions{
  margin-top: 1.25rem;
  z-index: 1;

  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.home-btn{
  display: inline-block;
  font-family: var(--font-body);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease;
  outline: none;
}

.home-btn--primary{
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--fg);
}
.home-btn--ghost{
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: rgba(255,255,255,0.9);
}

.home-btn:hover,
.home-btn:focus-visible{
  border-color: rgba(111,175,179,0.55);
  background: rgba(111,175,179,0.10);
  transform: translateY(-1px);
}
.home-btn:active{
  transform: translateY(0);
  opacity: 0.92;
}

/* Reduced motion: stop SVG animation and stack messages */
@media (prefers-reduced-motion: reduce){
  .hero-wave__bg animate{ display: none; }
  .home-cycle{ min-height: auto; }
  .home-cycle__item{
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    animation: none;
    margin-bottom: 1rem;
  }
}

/* iPhone / small screens: stack messages (no cycling) */
@media (max-width: 640px){
  .home-title{ max-width: 20ch; }
  .home-cycle{ min-height: auto; }
  .home-cycle__item{
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    animation: none;
    margin-bottom: 1rem;
  }
}