/*
Theme Name: FuturePhotography
Theme URI: http://example.com/mytheme
Author: Devups
Author URI: http://devups.ch
Description: This theme was created by Devups on behalf of the FuturePhotography agency.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: FuturePhotography
*/
/* Basic reset */
body {
    margin: 0;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}


/********* scroller logo partner *********/

.scroller {
  max-width: 1600px;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"][data-edge-fade="on"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 35s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}


/****** Selected work animation *******/
.jm-selected-work .scroller {
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  mask: none !important;
  mask-image: none !important;
}


/* ==== Glow cards: rotating conic ring + inner glow ==== */
.glow-card {
  position: relative;
  isolation: isolate; /* keep shadows contained */
}

.glow-card::after {
  /* inner glow (only visible while animated by JS) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;        /* match rounded-2xl */
  box-shadow: inset 0 0 0px rgba(0,0,0,0);
  pointer-events: none;
  transition: box-shadow .3s ease;
}

.glow-card .ring-anim {
  position: absolute;
  inset: -2px;                /* slightly outside to avoid clipping */
  padding: 2px;               /* ring thickness */
  border-radius: 1rem;        /* match rounded-2xl */
  pointer-events: none;
  opacity: 0;
  transform: rotate(0deg);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--glow, #d9ff00) 60%, transparent));

  /* Draw a hollow ring using a conic gradient + mask to keep only the border */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--glow, #d9ff00) 100%, white 0%) 70deg,
    transparent 120deg
  );

  /* mask the center out so only the border glows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  background-clip: content-box;
  z-index: 1;
}


/********************* for word scroller***************************/

/* kill UL defaults that break the seam */
.tag-list{
  list-style: none;
  margin: 0;
  padding: 0;           /* <- removes the extra left space */
}

/* optional: make each tag a fixed-ish pill so width accumulates nicely */
.tag-list li{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .5rem 1rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}


/* LIGHT THEME (no .dark on <html>) — keep navbar light when scrolled */
.site-header {
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.site-header.is-scrolled {
  background-color: rgba(255,255,255,.90) !important;   /* light stays light */
  border-bottom-color: rgba(0,0,0,.10) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    inset 0 -1px 0 rgba(0,0,0,.06);
}

/* DARK THEME — only when <html class="dark"> */
.dark .site-header.is-scrolled {
  background-color: rgba(0,0,0,.85) !important;         /* dark stays dark */
  border-bottom-color: rgba(255,255,255,.14) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.10);
}