/* WULF brand layer (Sept 2026): new loader, gold colour sweeps, SEO helpers.
   Brand colours: grey #CFCFCF, gold #EFB782 with the gold card texture (img/default-texture.png). */

/* ---------- loading screen: a pool of liquid gold seen from above ----------
   The liquid itself is drawn by js/wulf-loader.js (a small WebGL shader) on the canvas inside the emblem mask.
   Without WebGL, or with reduced motion, the emblem simply warms from grey to gold. */
.wl-loader { width: 150px; margin: 0 auto; position: relative; transform-origin: 50% 51%;
  -webkit-animation: wlPulse 2.6s linear infinite; animation: wlPulse 2.6s linear infinite; }
/* the loading heartbeat, every 2.6 s: rest, a gentle draw-in, a quick but soft swell, an easy fall that
   dips only slightly past rest, a faint second swell, then a slow glide home. Soft, like an idea breathing,
   not a machine. The swell peaks 1.3 s into each cycle, when the liquid sends a ripple out from the centre. */
@keyframes wlPulse {
  0%, 34% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  44% { transform: scale(.994, .993); animation-timing-function: cubic-bezier(.22, .55, .3, 1); }
  50% { transform: scale(1.033, 1.037); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  64% { transform: scale(.998, .997); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76% { transform: scale(1.004, 1.005); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  92%, 100% { transform: scale(1, 1); }
}
@-webkit-keyframes wlPulse {
  0%, 34% { -webkit-transform: scale(1, 1); -webkit-animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  44% { -webkit-transform: scale(.994, .993); -webkit-animation-timing-function: cubic-bezier(.22, .55, .3, 1); }
  50% { -webkit-transform: scale(1.033, 1.037); -webkit-animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  64% { -webkit-transform: scale(.998, .997); -webkit-animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76% { -webkit-transform: scale(1.004, 1.005); -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  92%, 100% { -webkit-transform: scale(1, 1); }
}

.wl-loader__shape { position: relative; width: 150px; height: 175px; background: #CFCFCF; overflow: hidden; opacity: 0;
  -webkit-mask: url(/wp-content/themes/wulf/img/brand/wulf-emblem-dark.svg) center / 100% 100% no-repeat;
          mask: url(/wp-content/themes/wulf/img/brand/wulf-emblem-dark.svg) center / 100% 100% no-repeat;
  animation: wlAppear .8s ease-out forwards; }
.wl-loader__gl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.wl-loader--quick .wl-loader__shape { animation-duration: .35s; }
.wl-loader--static .wl-loader__gl { display: none; }
.wl-loader__shape:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0;
  background: url(/wp-content/themes/wulf/img/brand/wulf-gold-card.jpg) center / cover #E6B37C; display: none; }
.wl-loader--static .wl-loader__shape:after { display: block; animation: wlAppear 1.6s ease .4s forwards; }
@keyframes wlAppear { to { opacity: 1; } }
/* leave quietly */
.preloader--hide .preloader__logo { -webkit-transform: scale(.97); transform: scale(.97); opacity: 0;
  -webkit-transition: opacity .6s ease, -webkit-transform .9s ease; transition: opacity .6s ease, transform .9s ease; }
@media screen and (min-width: 768px) { .wl-loader { width: 190px; } .wl-loader__shape { width: 190px; height: 222px; } }
@media screen and (min-width: 1280px) { .wl-loader { width: 210px; } .wl-loader__shape { width: 210px; height: 245px; } }
@media (prefers-reduced-motion: reduce) { .wl-loader__shape { animation-duration: .01s; } .wl-loader { -webkit-animation: none; animation: none; } }

/* ---------- menu button: gold sweep on hover and when open ---------- */
.nav-icon span:before { background-color: transparent !important;
  background-image: linear-gradient(90deg, #EFB782 0, #D59A5B 50%, #010101 50%, #010101 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-transition: width .4s cubic-bezier(.4,.25,0,1), background-position .55s cubic-bezier(.4,.25,0,1);
          transition: width .4s cubic-bezier(.4,.25,0,1), background-position .55s cubic-bezier(.4,.25,0,1); }
.nav-icon:hover span:before, .nav-icon--isActive span:before { background-position: 0 0; }
.nav-icon:before { -webkit-transition: all .6s cubic-bezier(.4,.25,0,1); transition: all .6s cubic-bezier(.4,.25,0,1); }
.nav-icon:hover:before { background-color: #EFB782; }
.nav-icon:hover { -webkit-box-shadow: 0 8px 40px 0 rgba(239,183,130,.35); box-shadow: 0 8px 40px 0 rgba(239,183,130,.35); }

/* ---------- homepage menu labels: the grey-to-gold sweep ---------- */
.home-nav ul span { background-image: linear-gradient(90deg, #EFB782 0, #C98E4E 50%, #282828 50%, #282828 100%);
  background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; -webkit-transition: background-position .6s cubic-bezier(.4,.25,0,1); transition: background-position .6s cubic-bezier(.4,.25,0,1); }
.home-nav ul li:hover span { background-position: 0 0; }

/* ---------- animated GIFs now served as MP4 (same look, about 85% lighter) ---------- */
video.wl-gif { max-width: 100%; height: auto; }
.section--project-more-info .more-info-image video.wl-gif { width: 100%; height: auto;
  -webkit-box-shadow: -10px 0 40px 2px rgba(0,0,0,.2); box-shadow: -10px 0 40px 2px rgba(0,0,0,.2); }

/* ---------- accessible hidden headings (SEO) ---------- */
.wl-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- "What we build" + FAQ on the AR/VR & 3D page ---------- */
.wl-capabilities { padding-top: 40px; padding-bottom: 80px; }
.wl-capabilities .section__title-wrap { margin-bottom: 40px; }
.wl-cap { position: relative; padding: 28px 24px 24px; margin-bottom: 24px; background: #fff; box-shadow: 0 8px 59px 0 rgba(0,0,0,.08); height: calc(100% - 24px); }
.wl-cap:before { content: ""; position: absolute; top: 0; left: 24px; width: 48px; height: 3px; background: url(/wp-content/themes/wulf/img/default-texture.png) center / cover; }
.wl-cap h3 { font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
.wl-cap p { font-size: 15px; line-height: 1.7; color: #666; margin: 0; }
.wl-faq { max-width: 860px; margin: 40px auto 0; }
.wl-faq h2 { text-align: center; margin-bottom: 24px; }
.wl-faq details { border-bottom: 1px solid #e3e3e3; padding: 18px 4px; }
.wl-faq summary { cursor: pointer; list-style: none; font-family: "Circe-Bold", sans-serif; font-size: 17px; position: relative; padding-right: 28px; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary:after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 22px; color: #C98E4E; transition: transform .3s; }
.wl-faq details[open] summary:after { transform: rotate(45deg); }
.wl-faq details p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: #555; }