/* =====================================================================
 * Die portierten Effekte, angewandt
 *
 * fy-bits.css beschreibt die Effekte. Diese Datei setzt sie auf die
 * Bausteine der Seite, ohne dass an jedem einzelnen Element eine Klasse
 * haengen muss. Was hier steht, ist die Entscheidung, wo ein Effekt
 * hingehoert.
 * ===================================================================== */

/* =====================================================================
 * 1. Gradient Text im Hero
 *
 * Die Unterzeile im Hero traegt den Verlauf, "Sport und Gesundheit in
 * Muenchen". Der grosse Schriftzug darueber nicht: dort laeuft True
 * Focus, und zwei Effekte auf derselben Zeile heben sich gegenseitig
 * auf.
 *
 * Der Verlauf laeuft ueber die Schrift, deshalb background-clip. Die
 * Neigung aus fy-theme.css bleibt erhalten, transform und
 * background-clip stehen sich nicht im Weg.
 * ===================================================================== */
.fy-hero .fy-hero-sub {
  background-image: linear-gradient(
    100deg,
    var(--fy-crimson-deep) 0%,
    var(--fy-crimson) 22%,
    var(--fy-crimson-glow) 40%,
    var(--fy-oak) 55%,
    var(--fy-crimson-glow) 70%,
    var(--fy-crimson) 85%,
    var(--fy-crimson-deep) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fy-gradient-slide 8s linear infinite;
}

/* Im hellen Modus ohne das grelle Rot: --fy-crimson-glow ist als
 * Textfarbe auf hellem Grund ausgeschlossen. */
html[data-fy-theme="light"] .fy-hero .fy-hero-sub {
  background-image: linear-gradient(
    100deg,
    var(--fy-crimson-deep) 0%,
    var(--fy-crimson) 26%,
    var(--fy-oak) 52%,
    var(--fy-crimson) 74%,
    var(--fy-crimson-deep) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .fy-hero .fy-hero-sub {
    animation: none;
    background-position: 40% 50%;
  }
}

/* =====================================================================
 * 2. Border Glow auf den Textboxen
 *
 * Jede Karte, die Text traegt, bekommt den Schein am Rand, der dem
 * Zeiger folgt. Die Position kommt aus fy-bits.js als --fy-mx und
 * --fy-my; ohne Zeiger bleibt der Schein einfach aus.
 *
 * Der Schein liegt in ::after. Er zeichnet nur den Rand: eine Flaeche
 * mit einem Pixel Innenabstand, aus der die Mitte per Maske
 * herausgeschnitten wird.
 * ===================================================================== */
.fy-card,
.fy-card-ink,
.fy-conviction,
.fy-schedule-day,
.fy-ref-teaser,
.fy-account-tile,
.fy-price-card {
  position: relative;
}

.fy-card::after,
.fy-card-ink::after,
.fy-conviction::after,
.fy-schedule-day::after,
.fy-ref-teaser::after,
.fy-account-tile::after,
.fy-price-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--fy-mx, 50%) var(--fy-my, 50%),
    var(--fy-crimson-glow) 0%,
    rgba(189, 9, 36, 0.3) 38%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--fy-dur) var(--fy-ease);
  pointer-events: none;
  z-index: 2;
}

.fy-card:hover::after,
.fy-card:focus-within::after,
.fy-card-ink:hover::after,
.fy-card-ink:focus-within::after,
.fy-conviction:hover::after,
.fy-conviction:focus-within::after,
.fy-schedule-day:hover::after,
.fy-schedule-day:focus-within::after,
.fy-ref-teaser:hover::after,
.fy-ref-teaser:focus-within::after,
.fy-account-tile:hover::after,
.fy-account-tile:focus-within::after,
.fy-price-card:hover::after,
.fy-price-card:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fy-card::after,
  .fy-card-ink::after,
  .fy-conviction::after,
  .fy-schedule-day::after,
  .fy-ref-teaser::after,
  .fy-account-tile::after,
  .fy-price-card::after {
    transition: none;
  }
}

/* =====================================================================
 * 3. Referenzen auf der Startseite
 *
 * Drei Begegnungen nebeneinander, das Bild oben, Name und Rolle
 * darunter. Die Bilder sind Hochformat-Collagen und wuerden in voller
 * Hoehe die halbe Seite fuellen; sie bekommen deshalb eine Deckelung
 * und einen Zuschnitt auf die Mitte.
 *
 * Der Scroll Stack lag vorher hier. Er ist damit auf keiner Seite mehr
 * im Einsatz; die Komponente bleibt bestehen und laesst sich an
 * anderer Stelle einsetzen.
 * ===================================================================== */
.fy-ref-teaser .fy-media,
.fy-ref-teaser .fy-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (max-width: 1023px) {
  .fy-ref-teaser .fy-media,
  .fy-ref-teaser .fy-media-frame img {
    max-height: 240px;
  }
}

@media (max-width: 767px) {
  .fy-ref-teaser .fy-media,
  .fy-ref-teaser .fy-media-frame img {
    max-height: 300px;
  }
}

/* =====================================================================
 * 4. True Focus auf dem Schriftzug
 *
 * Der Rahmen wandert zwischen "Fight" und "yourself", die jeweils
 * andere Zeile tritt unscharf zurueck. Beide Zeilen sind schon eigene
 * Elemente, sie werden also nicht aus Text zerlegt, sondern direkt als
 * die beiden Woerter genommen.
 *
 * Nur Unschaerfe, keine Deckkraft: der Hero laeuft beim Laden ueber
 * eigene Keyframes, und eine Animation mit Fuellung schlaegt jede
 * normale Angabe zur Deckkraft. Eine Abstufung ueber opacity waere
 * deshalb wirkungslos, die Unschaerfe ist es nicht.
 * ===================================================================== */
.fy-hero .fy-hero-focus {
  position: relative;
}

/* Die Zeilen sind Bloecke und damit so breit wie die Spalte. Der
 * Rahmen richtet sich nach dem Kasten, nicht nach den Buchstaben, und
 * saesse sonst weit neben dem Wort. Mit fit-content umschliesst der
 * Kasten den Schriftzug. */
.fy-hero .fy-hero-focus .fy-hero-line,
.fy-hero .fy-hero-focus .fy-hero-line-offset {
  width: fit-content;
  max-width: 100%;
}

.fy-hero .fy-hero-line.fy-focus-word,
.fy-hero .fy-hero-line-offset.fy-focus-word {
  filter: blur(10px);
  transition: filter var(--fy-dur) var(--fy-ease);
}

.fy-hero .fy-hero-line.fy-focus-active,
.fy-hero .fy-hero-line-offset.fy-focus-active {
  filter: blur(0);
}

/* Der Rahmen gehoert vor den Schriftzug, nicht dahinter. */
.fy-hero .fy-hero-focus .fy-focus-frame {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .fy-hero .fy-hero-line.fy-focus-word,
  .fy-hero .fy-hero-line-offset.fy-focus-word {
    filter: none;
    transition: none;
  }
}

/* Ausdrueckliche Wahl des Besuchers: siehe fy-motion.css. */
html.fy-motion-on .fy-hero .fy-hero-sub {
  animation: fy-gradient-slide 8s linear infinite;
}

html.fy-motion-on .fy-focus-frame {
  display: block;
}

html.fy-motion-on .fy-hero .fy-hero-line.fy-focus-word,
html.fy-motion-on .fy-hero .fy-hero-line-offset.fy-focus-word {
  filter: blur(10px);
  transition: filter var(--fy-dur) var(--fy-ease);
}

html.fy-motion-on .fy-hero .fy-hero-line.fy-focus-active,
html.fy-motion-on .fy-hero .fy-hero-line-offset.fy-focus-active {
  filter: blur(0);
}