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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--color-primary);
  color: var(--color-secondary);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

:root {
  /* Palette: warm cream + warm charcoal */
  --color-primary:   #F5EFE4;  /* warm cream — page bg + iris text */
  --color-secondary: #1F1A14;  /* warm charcoal — grid, GO disc, iris bg */

  --font-family-bigger:   "Bebas Neue", "Anton", Impact, sans-serif;
  --font-family-fraktion: "Space Grotesk", system-ui, sans-serif;
}

/* ---------- section shell ---------- */
.s-cta {
  position: relative;
  width: 100vw;
  height: 100svh;
  background: var(--color-primary);
  overflow: hidden;
  isolation: isolate;
}

.s__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.s__hover {
  position: relative;
  width: min(80vmin, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

/* ---------- GO button ---------- */
.s__button {
  position: relative;
  z-index: 1;          /* below .s__cta (z:2) so the iris overlays it on hover */
  width: 6rem;
  height: 6rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-primary);
  font: 700 3.75rem/6.85rem var(--font-family-bigger);
  letter-spacing: 0.05em;
  text-align: center;
  text-indent: 0.075em;
  text-transform: uppercase;
}

.s__button__inner {
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  border-radius: 999rem;
  transition: scale 1s cubic-bezier(.23,1,.32,1) .2s;
  will-change: scale;
}

.s__button__text {
  transition: scale 1.2s cubic-bezier(.23,1,.32,1) .2s;
  will-change: scale;
}

.s__hover.is-active .s__button__inner {
  scale: 1.5;
  transition: scale .6s cubic-bezier(.755,.05,.855,.06) 0s;
}

.s__hover.is-active .s__button__text {
  animation-play-state: paused;
  scale: 2;
  transition: scale .6s cubic-bezier(.55,.055,.675,.19) 0s;
}

/* ---------- giant iris disc ---------- */
.s__cta {
  --size: 64rem;
  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  z-index: 2;
  width: var(--size);
  height: var(--size);
  background: var(--color-secondary);
  border-radius: 999rem;
  clip-path: circle(0 at 50% 50%);
  overflow: hidden;
  color: var(--color-primary);
  font: 700 calc(var(--size) * .3743) / 1 var(--font-family-bigger);
  text-align: center;
  text-transform: uppercase;
  transition: clip-path .6s cubic-bezier(.86,0,.07,1);
  will-change: clip-path;
  pointer-events: none;
}

.s__cta::before,
.s__cta::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border-radius: 999rem;
  transition: border-width .6s cubic-bezier(.86,0,.07,1);
  will-change: border-width;
  content: "";
  pointer-events: none;
}

.s__cta::before { border: calc(var(--size) * .5) solid var(--color-primary); }
.s__cta::after  { border: calc(var(--size) * .5) solid var(--color-secondary); }

/* email link */
.s__cta__link {
  position: absolute;
  top: calc(50% + var(--size) * .36);
  left: 50%;
  z-index: 3;
  display: block;
  padding: 1em 1em 1em 2em;
  background: var(--color-secondary);
  opacity: 0;
  transform: translate3d(-50%, 1em, 0);
  color: var(--color-primary);
  font: 700 14px/1 var(--font-family-fraktion);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0s linear .3s, opacity 0s linear .3s;
  will-change: transform, opacity;
}

.s__cta__link::before {
  position: absolute;
  top: calc(50% - 3px);
  left: .6em;
  border-top: 3px solid transparent;
  border-left: 6px solid currentColor;
  border-bottom: 3px solid transparent;
  content: "";
}

@media (max-width: 576px) {
  .s__cta__link { top: calc(50% + var(--size) * .28); padding: 1em; font-size: 13px; }
  .s__cta__link::before { display: none; }
}

/* lines */
.s__cta__line {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  translate: -50% -50%;
  width: 100%;
  scale: .5;
  transition: scale .6s cubic-bezier(.55,.055,.675,.19);
  will-change: scale;
}

@media (max-width: 576px) { .s__cta__line { top: 45%; } }

.s__cta__line--top    { clip-path: inset(-100% 0 calc(50% + .01em) 0); }
.s__cta__line--bottom { clip-path: inset(calc(50% + .01em) 0 -100% 0); letter-spacing: .014em; }

.s__cta__line--top    .s__cta__char__slice { --toggle-delay: calc(var(--delay) + var(--offset) + .45s); }
.s__cta__line--bottom .s__cta__char__slice { --toggle-delay: calc(var(--delay) + var(--offset) + 1.45s); }

.s__cta__line--top    .s__cta__char__slice:nth-child(2) { clip-path: inset(0 0 calc(100% - .03em) 0); }
.s__cta__line--top    .s__cta__char__slice:nth-child(3) { clip-path: inset(0 0 calc(100% - .06em) 0); }
.s__cta__line--top    .s__cta__char__slice:nth-child(4) { clip-path: inset(0 0 calc(100% - .09em) 0); }
.s__cta__line--bottom .s__cta__char__slice:nth-child(2) { clip-path: inset(calc(100% - .03em) 0 0 0); }
.s__cta__line--bottom .s__cta__char__slice:nth-child(3) { clip-path: inset(calc(100% - .06em) 0 0 0); }
.s__cta__line--bottom .s__cta__char__slice:nth-child(4) { clip-path: inset(calc(100% - .09em) 0 0 0); }

.s__cta__text {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  height: .8em;
}

.s__cta__char { position: relative; height: 100%; }
.s__cta__char:nth-child(1) { --delay: .1s; }
.s__cta__char:nth-child(2) { --delay: .2s; }
.s__cta__char:nth-child(3) { --delay: .3s; }
.s__cta__char:nth-child(4) { --delay: .4s; }

.s__cta__char__slice {
  --offset: 0s;
  --move-delay: calc(var(--delay) + var(--offset));
  position: relative;
  display: block;
  height: 100%;
  animation: s-cta-char-up-down 2s infinite var(--move-delay);
  will-change: transform;
}

.s__cta__char__slice:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  animation:
    s-cta-char-up-down 2s infinite var(--move-delay),
    s-cta-char-toggle  2s linear infinite var(--toggle-delay);
}

.s__cta__char__slice:nth-child(2) { --offset: calc(.02s + .12s); }
.s__cta__char__slice:nth-child(3) { --offset: calc(.02s + .08s); }
.s__cta__char__slice:nth-child(4) { --offset: calc(.02s + .04s); }

.s__cta .sup { font-size: .5em; vertical-align: top; }

/* dots */
.s__cta .a-dots {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  scale: 1.1;
  transition: scale .8s cubic-bezier(.55,.055,.675,.19);
  will-change: scale;
}

.s__cta .a-dots::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, var(--color-secondary) 3px, var(--color-secondary) 100%) center/48px 48px repeat,
    repeating-linear-gradient(90deg, var(--color-primary), var(--color-primary) 2px, transparent 3px, transparent 48px) center/48px 48px repeat;
  transform: translate3d(-50%, -50%, 0) scale(.5);
  content: "";
}

/* stars */
.s__cta__stars {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  scale: 1.25;
  transition: scale .8s cubic-bezier(.55,.055,.675,.19);
  will-change: scale;
}

.s__cta__star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .15em;
  height: auto;
  fill: var(--color-primary);
  animation: s-cta-star-float 10s infinite cubic-bezier(.455,.03,.515,.955);
  will-change: transform;
}
.s__cta__star:nth-child(1) { top: 12%; left: 25%; animation-duration: 8s; }
.s__cta__star:nth-child(2) { top: 33%; left: 85%; width: .1em; animation-duration: 9s; }
.s__cta__star:nth-child(3) { top: 60%; left: 11%; width: .1em; animation-duration: 7s; }
.s__cta__star:nth-child(4) { top: 83%; left: 74%; }

@media (max-width: 767px) {
  .s__cta__star:nth-child(2),
  .s__cta__star:nth-child(3) { width: .15em; }
}

/* ---------- .is-active cascade ---------- */
.s__hover.is-active .s__cta {
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 1s cubic-bezier(1,0,0,1) .2s;
  pointer-events: auto;
}

.s__hover.is-active .s__cta::before {
  border-width: 1rem;
  transition: border-width 1.1s cubic-bezier(1,0,0,1) .2s;
}

@media (max-width: 576px) {
  .s__hover.is-active .s__cta::before { border-width: .5rem; }
}

.s__hover.is-active .s__cta::after {
  border-width: 1px;
  transition: border-width 1.005s cubic-bezier(1,0,0,1) .2s;
}

.s__hover.is-active .s__cta .s__cta__stars {
  scale: 1;
  transition: scale 2s cubic-bezier(.23,1,.32,1) .4s;
}

.s__hover.is-active .s__cta .s__cta__line {
  scale: 1;
  transition: scale 1.8s cubic-bezier(.23,1,.32,1) .6s;
}

.s__hover.is-active .s__cta .s__cta__link {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition:
    transform .6s cubic-bezier(.19,1,.22,1) 1s,
    opacity .3s cubic-bezier(.19,1,.22,1) 1s;
}

.s__hover.is-active .s__cta .a-dots {
  scale: 1;
  transition: scale 1.8s cubic-bezier(.23,1,.32,1) .6s;
}

/* ---------- grid ---------- */
.s__grid {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
}

.s__grid__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.s__grid__path {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 1px;
  opacity: .85;
}

.s-cta.is-out-of-view .s__hover { display: none; }

/* ---------- keyframes ---------- */
/* Slices ride up by HALF their own height, then back down by half — combined with the
   per-slice clip-path (thin band) this makes each band shoot out of the letter, hold
   for a beat, snap back, then disappear via the toggle keyframe. */
@keyframes s-cta-char-up-down {
  0%   { transform: translateZ(0);              animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  25%  { transform: translate3d(0, -52%, 0);    animation-timing-function: cubic-bezier(.645,.045,.355,1); }
  75%  { transform: translate3d(0,  52%, 0);    animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  100% { transform: translateZ(0); }
}

/* Hard cut at the midpoint: slices visible for the first half of the cycle, invisible
   for the second half. The 50.01% guarantees a step transition, not interpolation. */
@keyframes s-cta-char-toggle {
  0%     { opacity: 1; }
  50%    { opacity: 1; }
  50.01% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes s-cta-star-float {
  0%   { transform: translateZ(0); }
  50%  { transform: translate3d(0, -15%, 0) scale(.5); }
  100% { transform: translateZ(0); }
}