/*!
 * Link Box by Foxco
 * Frontend styles for 6 layouts and 6 presets.
 */

/* =========================================================
 * Base + default (Foxco preset) CSS variables
 * ========================================================= */
.lbf {
  --lbf-bg: #1a1a2e;
  --lbf-text: #ffffff;
  --lbf-accent: #df6737;
  --lbf-muted: rgba(255, 255, 255, 0.18);
  --lbf-muted-2: rgba(255, 255, 255, 0.42);
  --lbf-surface: #26263e;
  --lbf-surface-deep: #0a0a16;
  --lbf-border: rgba(255, 255, 255, 0.12);
  --lbf-stroke: rgba(255, 255, 255, 0.55);
  --lbf-stroke-strong: rgba(255, 255, 255, 0.7);
  --lbf-accent-ink: #1a1a2e;
  --lbf-font-scale: 1;

  background: var(--lbf-bg);
  color: var(--lbf-text);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}
.lbf *, .lbf *::before, .lbf *::after { box-sizing: border-box; }
.lbf a { text-decoration: none; color: inherit; }

/* =========================================================
 * Preset: Midnight
 * Double-class selector ensures presets beat the inner `.lbf`
 * base variables regardless of Elementor's selector prefix.
 * ========================================================= */
.lbf.lbf-preset-midnight {
  --lbf-bg: #000000;
  --lbf-text: #ffffff;
  --lbf-accent: #00d4ff;
  --lbf-muted: rgba(255, 255, 255, 0.15);
  --lbf-muted-2: rgba(255, 255, 255, 0.4);
  --lbf-surface: #101014;
  --lbf-surface-deep: #040408;
  --lbf-border: rgba(255, 255, 255, 0.1);
  --lbf-stroke: rgba(255, 255, 255, 0.5);
  --lbf-stroke-strong: rgba(255, 255, 255, 0.7);
  --lbf-accent-ink: #000000;
}

/* =========================================================
 * Preset: Ivory
 * ========================================================= */
.lbf.lbf-preset-ivory {
  --lbf-bg: #f4efe6;
  --lbf-text: #2a2118;
  --lbf-accent: #8b4513;
  --lbf-muted: rgba(42, 33, 24, 0.22);
  --lbf-muted-2: rgba(42, 33, 24, 0.5);
  --lbf-surface: #e8e0d2;
  --lbf-surface-deep: #ddd2bf;
  --lbf-border: rgba(42, 33, 24, 0.14);
  --lbf-stroke: rgba(42, 33, 24, 0.55);
  --lbf-stroke-strong: rgba(42, 33, 24, 0.78);
  --lbf-accent-ink: #f4efe6;
}

/* =========================================================
 * Preset: Monochrome
 * ========================================================= */
.lbf.lbf-preset-monochrome {
  --lbf-bg: #ffffff;
  --lbf-text: #0a0a0a;
  --lbf-accent: #0a0a0a;
  --lbf-muted: rgba(0, 0, 0, 0.2);
  --lbf-muted-2: rgba(0, 0, 0, 0.5);
  --lbf-surface: #f2f2f2;
  --lbf-surface-deep: #e8e8e8;
  --lbf-border: rgba(0, 0, 0, 0.15);
  --lbf-stroke: rgba(0, 0, 0, 0.6);
  --lbf-stroke-strong: rgba(0, 0, 0, 0.88);
  --lbf-accent-ink: #ffffff;
}

/* =========================================================
 * Preset: Desert
 * ========================================================= */
.lbf.lbf-preset-desert {
  --lbf-bg: #e8dcc4;
  --lbf-text: #3d2817;
  --lbf-accent: #c65d3a;
  --lbf-muted: rgba(61, 40, 23, 0.22);
  --lbf-muted-2: rgba(61, 40, 23, 0.5);
  --lbf-surface: #d9c9a8;
  --lbf-surface-deep: #c9b58e;
  --lbf-border: rgba(61, 40, 23, 0.14);
  --lbf-stroke: rgba(61, 40, 23, 0.55);
  --lbf-stroke-strong: rgba(61, 40, 23, 0.78);
  --lbf-accent-ink: #f4efe6;
}

/* =========================================================
 * Preset: Carbon
 * ========================================================= */
.lbf.lbf-preset-carbon {
  --lbf-bg: #1c1c1e;
  --lbf-text: #e8e8ea;
  --lbf-accent: #c8c8ca;
  --lbf-muted: rgba(232, 232, 234, 0.18);
  --lbf-muted-2: rgba(232, 232, 234, 0.45);
  --lbf-surface: #2c2c30;
  --lbf-surface-deep: #0f0f11;
  --lbf-border: rgba(232, 232, 234, 0.12);
  --lbf-stroke: rgba(232, 232, 234, 0.55);
  --lbf-stroke-strong: rgba(232, 232, 234, 0.78);
  --lbf-accent-ink: #1c1c1e;
}

/* =========================================================
 * 01 - Cursor Spotlight (horizontal)
 * ========================================================= */
.lbf-spotlight {
  position: relative;
  cursor: none;
  overflow: hidden;
  min-height: 130px;
}
.lbf-sp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  padding: 54px 20px;
  font-size: calc(15px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 130px;
  white-space: nowrap;
  pointer-events: none;
}
.lbf-sp-row a { pointer-events: auto; }
.lbf-sp-dim { color: var(--lbf-muted); }
.lbf-sp-lit {
  position: absolute;
  inset: 0;
  color: var(--lbf-accent);
  clip-path: circle(95px at var(--lbf-mx, -400px) var(--lbf-my, 50%));
  -webkit-clip-path: circle(95px at var(--lbf-mx, -400px) var(--lbf-my, 50%));
}
.lbf-sp-cur {
  position: absolute;
  width: 200px;
  height: 200px;
  left: var(--lbf-mx, -400px);
  top: var(--lbf-my, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lbf-accent) 25%, transparent), transparent 65%);
  pointer-events: none;
}
.lbf-sp-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  left: var(--lbf-mx, -400px);
  top: var(--lbf-my, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lbf-accent);
  pointer-events: none;
}

/* =========================================================
 * 02 - Peeling Strips (horizontal)
 * ========================================================= */
.lbf-strips {
  display: flex;
  height: 220px;
  gap: 2px;
  overflow: hidden;
}
.lbf-strip {
  flex: 1;
  background: var(--lbf-surface);
  color: var(--lbf-accent);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  min-width: 0;
}
.lbf-strip:hover { flex: 4.2; }
.lbf-strip-vlabel {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: var(--lbf-text);
  opacity: 0.75;
  font-size: calc(11px * var(--lbf-font-scale, 1));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.lbf-strip:hover .lbf-strip-vlabel { opacity: 0; }
.lbf-strip svg,
.lbf-strip img {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 160px;
  height: 160px;
  opacity: 0.25;
  transition: opacity 0.45s;
  pointer-events: none;
  object-fit: contain;
}
.lbf-strip:hover svg,
.lbf-strip:hover img { opacity: 0.55; }
.lbf-strip-body {
  position: absolute;
  inset: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.4s 0.15s;
  pointer-events: none;
}
.lbf-strip:hover .lbf-strip-body { opacity: 1; }
.lbf-strip-num {
  color: var(--lbf-accent);
  font-size: calc(10px * var(--lbf-font-scale, 1));
  letter-spacing: 0.22em;
  font-weight: 500;
}
.lbf-strip-title {
  color: var(--lbf-text);
  font-size: calc(22px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: normal;
}

/* =========================================================
 * 03 - Letter Stagger (horizontal)
 * ========================================================= */
.lbf-stagger {
  padding: 46px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  min-height: 120px;
  align-items: center;
}
.lbf-w {
  cursor: pointer;
  font-size: calc(22px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
}
.lbf-w .lbf-l {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--lbf-stroke);
  transition: color 0.22s, -webkit-text-stroke-color 0.22s;
}
.lbf-w:hover .lbf-l {
  color: var(--lbf-accent);
  -webkit-text-stroke-color: var(--lbf-accent);
  transition-delay: calc(var(--i, 0) * 0.03s);
}

/* =========================================================
 * 04 - Image Preview (vertical)
 * ========================================================= */
.lbf-ip {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 320px;
}
.lbf-ip-list {
  padding: 28px 10px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.lbf-ip-list a {
  display: block;
  padding: 11px 14px;
  color: var(--lbf-muted-2);
  font-size: calc(20px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.3s, padding 0.3s, border-color 0.3s;
  border-left: 1px solid transparent;
}
.lbf-ip-list a:hover,
.lbf-ip-list a.lbf-ac {
  color: var(--lbf-text);
  padding-left: 22px;
  border-left-color: var(--lbf-accent);
}
.lbf-ip-pan {
  position: relative;
  background: var(--lbf-surface-deep);
  color: var(--lbf-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbf-ip-pan .lbf-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.85) rotate(-3deg);
}
.lbf-ip-pan .lbf-glyph.lbf-ac {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.lbf-ip-pan .lbf-glyph svg,
.lbf-ip-pan .lbf-glyph img {
  width: 78%;
  height: 78%;
  max-width: 320px;
  max-height: 320px;
  object-fit: contain;
}

/* =========================================================
 * 05 - Text Slice (vertical)
 * ========================================================= */
.lbf-slice { padding: 6px 0; }
.lbf-slice-row {
  position: relative;
  display: block;
  height: 68px;
  cursor: pointer;
  overflow: hidden;
  border-top: 0.5px solid var(--lbf-border);
}
.lbf-slice-row:last-child { border-bottom: 0.5px solid var(--lbf-border); }
.lbf-slice-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: calc(24px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lbf-text);
  line-height: 1;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.lbf-slice-top {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.lbf-slice-bot {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.lbf-slice-row:hover .lbf-slice-top { transform: translateY(-100%); }
.lbf-slice-row:hover .lbf-slice-bot { transform: translateY(100%); }
.lbf-slice-rev {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  opacity: 0;
  transition: opacity 0.35s 0.15s;
}
.lbf-slice-row:hover .lbf-slice-rev { opacity: 1; }
.lbf-slice-tagline {
  color: var(--lbf-accent);
  font-size: calc(21px * var(--lbf-font-scale, 1));
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1;
}
.lbf-slice-arrow {
  color: var(--lbf-accent);
  font-size: calc(20px * var(--lbf-font-scale, 1));
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lbf-slice-arrow svg,
.lbf-slice-arrow img {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}
.lbf-slice-arrow- .lbf-slice-arrow { display: none; }

/* =========================================================
 * 06 - Liquid Fill (vertical)
 * ========================================================= */
.lbf-fill {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbf-fill-word {
  font-size: calc(36px * var(--lbf-font-scale, 1));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  cursor: pointer;
  color: transparent;
  -webkit-text-stroke: 1px var(--lbf-stroke-strong);
  background-image: linear-gradient(to top, var(--lbf-accent), var(--lbf-accent));
  background-size: 100% 0%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 0.65s cubic-bezier(0.76, 0, 0.24, 1),
              -webkit-text-stroke-color 0.65s;
  display: inline-block;
  width: fit-content;
  width: -moz-fit-content;
}
.lbf-fill-word:hover {
  background-size: 100% 100%;
  -webkit-text-stroke-color: var(--lbf-accent);
}

/* =========================================================
 * Responsive visibility toggles
 * ========================================================= */
/* Elementor default breakpoints: mobile <768, tablet 768-1024, desktop >1024 */
@media (min-width: 1025px) {
  .lbf-hide-desktop--yes .lbf { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .lbf-hide-tablet--yes .lbf { display: none !important; }
}
@media (max-width: 767px) {
  .lbf-hide-mobile--yes .lbf { display: none !important; }
}

/* =========================================================
 * Mobile structural defaults
 * ========================================================= */
@media (max-width: 767px) {
  /* Image Preview stacking — only stacks when the widget-level toggle is on
   * (the prefix_class "lbf-ip-stack-mobile--yes" is set on the outer
   * Elementor widget wrapper). When the toggle is off, columns stay
   * side-by-side at all viewport sizes.
   */
  .lbf-ip-stack-mobile--yes .lbf-ip {
    grid-template-columns: 1fr;
  }
  .lbf-ip-stack-mobile--yes .lbf-ip .lbf-ip-pan {
    min-height: 220px;
    order: -1;
  }
  .lbf-ip-stack-mobile--yes .lbf-ip .lbf-ip-list {
    padding: 20px 14px;
  }

  /* Peeling Strips: taller on mobile so the compressed strips stay tappable. */
  .lbf-strips { height: 300px; }

  /* Spotlight: cursor tracking is pointless on touch - fall back to the lit row. */
  .lbf-spotlight { cursor: auto; }
  .lbf-sp-cur, .lbf-sp-dot { display: none; }
  .lbf-sp-lit {
    clip-path: none;
    -webkit-clip-path: none;
    position: static;
  }
  .lbf-sp-dim { display: none; }
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .lbf *, .lbf *::before, .lbf *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}