/* ─── DESIGN TOKENS ────────────────────────────────── */
:root {
  --font-f-card: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

  --clr-f-card-bg-start:       hsl(168, 100%, 50%);
  --clr-f-card-bg-end:         hsl(181, 93%, 46%);
  --clr-f-card-title:          hsl(183, 100%, 26%);
  --clr-f-card-text:           hsla(182, 100%, 27%, 0.76);
  --clr-f-card-accent:         hsl(184, 100%, 38%);
  --clr-f-card-stroke:         hsl(182, 100%, 38%);
  --clr-f-card-icon-fill:      hsl(183, 100%, 27%);
  --clr-f-card-circle-bg:      hsla(166, 100%, 49%, 0.20);
  --clr-f-card-button-bg:      hsl(0, 0%, 100%);
  --clr-f-card-shadow:         hsla(133, 87%, 15%, 0.50);

  --clr-f-card-glass-lo:       hsla(0, 0%, 100%, 0.35);
  --clr-f-card-glass-hi:       hsla(0, 0%, 100%, 0.82);

  --clr-f-card-btn-hover-bg:   hsl(0, 0%, 0%);
  --clr-f-card-btn-hover-icon: hsl(0, 0%, 100%);
}

/* ─── FONT UTILITY ──────────────────────────────────── */
.font-f-card {
  font-family: var(--font-f-card);
}

/* ─── RESET ─────────────────────────────────────────── */
* {
  margin: ;
  padding: 0;
  box-sizing: border-box;
}

/* ─── MODULE WRAPPER ─────────────────────────────────── */
#f-card-module {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(#00c3ff, black);
}

/* ─── PARENT ─────────────────────────────────────────── */
.f-card-parent {
  width: 290px;
  height: 300px;
  perspective: 1000px;
}

/* ─── CARD ───────────────────────────────────────────── */
.f-card {
  height: 100%;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--clr-f-card-bg-start) 0%,
    var(--clr-f-card-bg-end)   100%
  );
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

/* ─── GLASS OVERLAY ──────────────────────────────────── */
.f-card-glass {
  /* placement */
  position: absolute;
  inset: 8px;

  /* shape */
  border-radius: 55px;
  border-top-right-radius: 100%;

  /* borders */
  border-bottom: 1px solid var(--clr-f-card-button-bg);
  border-left:   1px solid var(--clr-f-card-button-bg);

  /* visual */
  background: linear-gradient(
    0deg,
    var(--clr-f-card-glass-lo) 0%,
    var(--clr-f-card-glass-hi) 100%
  );
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  /* 3D */
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

/* ─── CONTENT ────────────────────────────────────────── */
.f-card-content {
  padding: 100px 60px 0px 30px;
  transform: translate3d(0, 0, 26px);
}

.f-card-title {
  display: block;
  color: var(--clr-f-card-title);
  font-weight: bold;
  font-size: 20px;
}

.f-card-text {
  display: block;
  color: var(--clr-f-card-text);
  font-size: 15px;
  margin-top: 20px;
}

/* ─── BOTTOM BAR ─────────────────────────────────────── */
.f-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 10px 12px;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 26px);
}

/* ─── VIEW MORE ──────────────────────────────────────── */
.f-card-bottom .f-card-view-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40%;
  transition: all 0.2s ease-in-out;
}

.f-card-bottom .f-card-view-more:hover {
  transform: translate3d(0, 0, 10px);
}

.f-card-view-more .f-card-view-more-button {
  background: none;
  border: none;
  color: var(--clr-f-card-accent);
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}

.f-card-svg {
  fill: none;
  stroke: var(--clr-f-card-stroke);
  stroke-width: 3px;
  max-height: 15px;
}

/* ─── SOCIAL BUTTONS ─────────────────────────────────── */
.f-card-social-buttons-container {
  display: flex;
  gap: 10px;
  transform-style: preserve-3d;
}

.f-card-social-button {
  width: 30px;
  aspect-ratio: 1 / 1;
  padding: 5px;
  background-color: var(--clr-f-card-button-bg);
  border-radius: 50%;
  border: none;
  display: grid;
  place-content: center;
  box-shadow: var(--clr-f-card-shadow) 0px 7px 5px -5px;
}

.f-card-social-buttons-container .f-card-social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s,
              box-shadow 0.2s ease-in-out 0.4s;
}

.f-card-social-buttons-container .f-card-social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s,
              box-shadow 0.2s ease-in-out 0.6s;
}

.f-card-social-buttons-container .f-card-social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s,
              box-shadow 0.2s ease-in-out 0.8s;
}

.f-card-social-buttons-container .f-card-social-button .f-card-svg {
  width: 15px;
  fill: var(--clr-f-card-icon-fill);
}

.f-card-social-buttons-container .f-card-social-button:hover {
  background: var(--clr-f-card-btn-hover-bg);
  cursor: pointer;
}

.f-card-social-buttons-container .f-card-social-button:hover .f-card-svg {
  fill: var(--clr-f-card-btn-hover-icon);
}

/* ─── LOGO CIRCLES ───────────────────────────────────── */
.f-card-logo {
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}

.f-card-circle {
  display: block;
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  top: 0;
  right: 0;
  background: var(--clr-f-card-circle-bg);
  transition: all 0.5s ease-in-out;
  box-shadow: hsla(240, 2%, 42%, 0.20) -10px 10px 20px 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.f-card-circle1 {
  width: 170px;
  transform: translate3d(0, 0, 20px);
  top: 8px;
  right: 8px;
}

.f-card-circle2 {
  width: 140px;
  top: 10px;
  right: 10px;
  transition-delay: 0.4s;
  transform: translate3d(0, 0, 40px);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.f-card-circle3 {
  width: 110px;
  top: 17px;
  right: 17px;
  transition-delay: 0.8s;
  transform: translate3d(0, 0, 60px);
}

.f-card-circle4 {
  width: 80px;
  top: 23px;
  right: 23px;
  transition-delay: 1.2s;
  transform: translate3d(0, 0, 80px);
}

/* ─── HOVER STATES ───────────────────────────────────── */
.f-card-parent:hover .f-card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: hsla(133, 87%, 15%, 0.30) 30px 50px 25px -40px,
              hsla(133, 87%, 15%, 0.10) 0px 25px 30px 0px;
}

.f-card-parent:hover .f-card .f-card-bottom .f-card-social-buttons-container .f-card-social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: hsla(133, 87%, 15%, 0.20) -5px 20px 10px 0px;
}

.f-card-parent:hover .f-card .f-card-logo .f-card-circle2 {
  transform: translate3d(0, 0, 60px);
}

.f-card-parent:hover .f-card .f-card-logo .f-card-circle3 {
  transform: translate3d(0, 0, 80px);
}

.f-card-parent:hover .f-card .f-card-logo .f-card-circle4 {
  transform: translate3d(0, 0, 100px);
}