/**
 * Patrick Krisch Website
 * Datei: assets/css/hero-profile.css
 * Bereich: Hero-Profilkarte
 * Zweck: Alle visuellen Regeln der interaktiven Profilkarte zentral an einer Stelle pflegen.
 *
 * Projekt: patrick-krisch.de
 * Entwicklung: Patrick Krisch
 * Technische Umsetzung: Patrick Krisch
 * Version: 2.1
 * Stand: 2026-08-17
 *
 * Bereichsübersicht:
 * 01. Kartenbasis, Glow und 3D-Tilt
 * 02. Typografie und Akzent
 * 03. Desktop-/Tablet-Positionen
 * 04. Mobile Vereinfachung
 * 05. Reduced Motion
 *
 * Verbindlich:
 * - Sämtliche .hero-profile-card-Regeln liegen ausschließlich in dieser Datei.
 * - Gemeinsame Designwerte werden aus design-system.css bezogen.
 * - Pointer-Tilt und Glow werden in hero-slider.js gesteuert.
 */

/* 01. Kartenbasis – eine einzige Quelle für Größe, Perspektive, Glow und Hover. */
.hero-visual.has-slider .hero-profile-card{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --glow-x:50%;
  --glow-y:50%;
  display:block!important;
  position:absolute;
  z-index:7;
  width:300px;
  padding:30px;
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(8,35,79,.97),rgba(7,47,100,.94));
  border:1px solid rgba(68,215,218,.38);
  box-shadow:0 20px 46px rgba(5,32,72,.28),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(13px);
  transform:perspective(720px) rotateX(var(--tilt-x)) rotateY(calc(22deg + var(--tilt-y))) rotateZ(.36deg);
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform .18s ease-out,box-shadow .22s ease;
  will-change:transform;
  overflow:hidden;
}
.hero-visual.has-slider .hero-profile-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(89,229,231,.22),transparent 38%);
  pointer-events:none;
}
.hero-visual.has-slider .hero-profile-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.07) 48%,transparent 66%);
  pointer-events:none;
}
.hero-visual.has-slider .hero-profile-card:hover{
  box-shadow:0 24px 58px rgba(5,32,72,.34),0 0 24px rgba(19,184,199,.12),inset 0 1px 0 rgba(255,255,255,.1);
}

/* 02. Typografie und Akzent. */
.hero-visual.has-slider .hero-profile-card strong,
.hero-visual.has-slider .hero-profile-card small,
.hero-visual.has-slider .hero-profile-card .profile-accent{
  position:relative;
  z-index:1;
  transform:translateZ(28px);
}
.hero-visual.has-slider .hero-profile-card strong{
  display:block;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--surface);
  filter:drop-shadow(0 5px 7px rgba(3,20,47,.2));
}
.hero-visual.has-slider .hero-profile-card .profile-accent{
  display:block;
  width:34px;
  height:3px;
  border-radius:99px;
  margin:12px 0 10px;
  background:linear-gradient(90deg,#25d5d2,#169de0);
  box-shadow:0 0 10px rgba(37,213,210,.42);
}
.hero-visual.has-slider .hero-profile-card small{
  display:block;
  margin:0;
  line-height:1.45;
  font-size:16px;
  color:rgba(255,255,255,.92);
  font-weight:300;
}

/* 03. Positionen – eindeutig nur hier definiert. */
@media(min-width:1041px){
  .hero-visual.has-slider .hero-profile-card{bottom:-5px;left:75px}
}
@media(min-width:821px) and (max-width:1040px){
  .hero-visual.has-slider .hero-profile-card{bottom:2px;left:23%;width:214px;padding:18px 20px}
  .hero-visual.has-slider .hero-profile-card strong{font-size:22px}
  .hero-visual.has-slider .hero-profile-card small{font-size:13px}
}
@media(min-width:621px) and (max-width:820px){
  .hero-visual.has-slider .hero-profile-card{bottom:6px;left:12%;width:205px;padding:15px 17px;transform-origin:center}
  .hero-visual.has-slider .hero-profile-card strong{font-size:20px}
  .hero-visual.has-slider .hero-profile-card small{font-size:12px}
}

/* 04. Mobile – statische Karte ohne 3D-Tilt. */
@media(max-width:620px){
  .hero-visual.has-slider .hero-profile-card{left:4%;bottom:8px;width:178px;padding:12px 14px;transform:none!important;transition:box-shadow .22s ease}
  .hero-visual.has-slider .hero-profile-card strong{font-size:17px;transform:none;filter:none}
  .hero-visual.has-slider .hero-profile-card small{font-size:10px;transform:none}
  .hero-visual.has-slider .hero-profile-card .profile-accent{margin:8px 0 7px;transform:none}
}

/* 05. Reduced Motion – keine autonomen Übergänge; direkte Pointer-Reaktion bleibt mit reduzierter Amplitude möglich. */
@media(prefers-reduced-motion:reduce){
  .hero-visual.has-slider .hero-profile-card{transition:none}
}