/* ==========================================================================
   EMBR GLOBAL STYLES
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
/*
1. EMBR BRAND VARIABLES & CUSTOM PROPERTIES
2. WEBFLOW OVERRIDES & CUSTOM STYLES
3. ANIMATIONS & TRANSITIONS
4. THIRD-PARTY LIBRARY OVERRIDES
5. PRINT STYLES
6. PRODUCT PAGE CUSTOM STYLES
7. TOOLTIP STYLES
8. BUNNY PLAYER STYLES
9. MINI SHOWREEL
========================================================================== */

/* ==========================================================================
   1. EMBR BRAND VARIABLES & CUSTOM PROPERTIES
   ========================================================================== */

/* Add your EMBR-specific CSS custom properties here */

.pattern-1 {
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient(
     60deg,              /* angle */
     #ffffff 0px,         /* line colour */
     #ffffff 1px,         /* line thickness */
     transparent 2px,
     transparent 12px     /* gap size */
   );
  }
  
  .pattern-2 {
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* colour of the rays */
  
    /* Radial burst lines as mask */
    -webkit-mask: repeating-conic-gradient(
      from 0deg,
      transparent 0deg 4deg,   /* gap */
      black 4deg 6deg          /* line thickness */
    );
    mask: repeating-conic-gradient(
      from 0deg,
      transparent 0deg 4deg,
      black 4deg 6deg
    );
  }



/* ==========================================================================
   2. WEBFLOW OVERRIDES & CUSTOM STYLES
   ========================================================================== */

.u-hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

  html.wf-design-mode .u-hide-design-mode {
    display: none;
  }



/* ==========================================================================
   3. ANIMATIONS & TRANSITIONS
   ========================================================================== */


/* Add your custom animations and transitions here */
/* Prevent flash before JS splits + sets initial state */
/* Live site: hide until GSAP reveals */
[data-animate="text"] {
  visibility: hidden;
}

/* Webflow Designer: keep visible while editing */
html.wf-design-mode [data-animate="text"] {
  visibility: visible;
}

/* Text Highlight Animation */

/* Line highlight (scroll scrub) */
[data-animate="highlight"] .line {
  /* base text colour when "unfilled" */
  color: transparent;

  /* tweak these to suit */
  --line-width: 100%;
  position: relative;

  /* background colour behind the clipped text */
  background-color: var(--_theme---background-2);

  /* the wipe */


  background-image: linear-gradient(
    90deg,
    var(--_theme---text),
    var(--_theme---text) var(--line-width),
    color-mix(in srgb, var(--_theme---text) 0%, transparent) var(--line-width)
  );

  -webkit-background-clip: text;
  background-clip: text;
}

/* Optional: keep any <strong> readable if you use it */
[data-animate="highlight"] .line strong { color: inherit; }

/* ==========================================================================
   4. THIRD-PARTY LIBRARY OVERRIDES
   ========================================================================== */

/* Flickity Carousel Overrides */
.flickity-viewport {
	width: 100%;
    overflow: visible !important;
}
.flickity-button {
	display: none;
}
/* Zero out the width of the global outline within the slider only */
.tricks-slider { --focus--width: 0px; }   /* inherits to children, affects wrapper too */

.media_card_visual{position:relative;overflow:hidden}
.media_card_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.media_card_video{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}
.media_card_video iframe{width:100%;height:100%;border:0;pointer-events:none}
.media_card_visual.is-playing .media_card_image{opacity:0}
.media_card_visual.is-playing .media_card_video{opacity:1}


/* ==========================================================================
   5. PRINT STYLES
   ========================================================================== */

/* Add your print styles here */


/* ==========================================================================
   5. GLOBE STYLES
   ========================================================================== */

 /* Make the internal scene always fill the mount */
#globe > .scene-container,
#globe > .scene-container > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#globe .scene-container > div[style*="overflow:hidden"] {
   overflow: visible !important;
   pointer-events: none !important; /* keeps it non-interactive */
 }

/* Default globe item position + smooth transform transition */
.globe_item {
  transform: translate(-50%, -50%);
  transition: transform 0.6s ease;
  will-change: transform;
}

/* Position adjustments when focusing the UK */
.uk-focused .globe_item {
  transform: translate(-30%, -50%);
}

/* Simple pin element that appears centered when UK is focused */
.globe_uk_pin {
  opacity: 0; /* hidden by default */
}

/* Position the pin relative to the globe item so it follows the transform */
.globe_item .globe_uk_pin {
  position: absolute;
  left: 47%;
  top: 52%;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
  z-index: 10;
}


/* Pin visibility is now controlled by JavaScript timing */

/* ==========================================================================
   6. PRODUCT PAGE CUSTOM STYLES
   ========================================================================== */

/* Add your custom grid styles here */

.product_page_grid {
  --_column-count---value: 2;
}
@media (max-width: 68em) {
	.product_page_grid { --_column-count---value: 1 !important; }
  .sm-image-slider.product-page { 
    height: auto;
    max-height: 100svh;
    aspect-ratio: 1/1;
   }
   .sm-product-details_wrapper {
    padding-top: 3rem;
   }
  }

@container (width < 40em) {
	.data_sheets { --_column-count---value: 2 !important; }
}
@container (width < 20em) {
	.data_sheets   { --_column-count---value: 1 !important; }
}

@container (min-width: 30rem) {
  .products_grid.u-grid-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 48rem) {
  .products_grid.u-grid-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 64rem) {
  .products_grid.u-grid-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 90rem) {
  .products_grid.u-grid-custom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 130rem) {
  .products_grid.u-grid-custom {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}



/* ==========================================================================
   7. TOOLTIP STYLES
   ========================================================================== */

/* Base */
.tooltip_trigger {
  position: relative;
  cursor: pointer;
}

/* Tooltip panel */
.tooltip_trigger [data-tooltip="content"] {
  z-index: 10;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show on hover */
.tooltip_trigger:hover [data-tooltip="content"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}


/* ==========================================================================
   8. BUNNY PLAYER STYLES
   ========================================================================== */

  /* --------------------------------------------------------------------------
     Bunny: inline embed player — [data-bunny-player-init], .bunny-player__*
     -------------------------------------------------------------------------- */

   .bunny-player {
    pointer-events: none;
    color: #fff;
    isolation: isolate;
    border-radius: 1em;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    transform: translateX(0);
  }
  
  .bunny-player__before {
    padding-top: 62.5%;
  }

  /* --------------------------------------------------------------------------
     Bunny: shared — inline embed + background layer
     Background: [data-bunny-background-init], .bunny-bg__*
     -------------------------------------------------------------------------- */

  [data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading),
  [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) {
    transition: opacity 0.3s linear, visibility 0.3s linear;
  }

  /* Placeholder — base (inline only) */
  .bunny-player__placeholder {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  /* Shared: hide placeholder when active (inline + background) */
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
  [data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
  [data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder,
  [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder,
  [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder,
  [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder {
    opacity: 0;
    visibility: hidden;
  }

  /* --------------------------------------------------------------------------
     Bunny: inline embed only (overlay, video, controls, cover mode, loading UI)
     -------------------------------------------------------------------------- */

  /* Dark overlay */
  .bunny-player__dark {
    opacity: .1;
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  [data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark{
    opacity: 0.3;
  }
  
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
    opacity: 0;
  }
  
  .bunny-player__video {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    padding-right: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* Play / pause layer */
  .bunny-player__playpause {
    pointer-events: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
  }
  
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
    opacity: 0;
  }
  
  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
    opacity: 1;
  }

  /* Shared: play / pause icon visibility (inline + background) */
  [data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg,
  [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg,
  [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg {
    display: none;
  }

  [data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg,
  [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg,
  [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg {
    display: block;
  }
  
  .bunny-player__toggle-playpause {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
  }
  
  .bunny-player__big-btn {
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    cursor: pointer;
    background-color: #64646433;
    border: 1px solid #ffffff1a;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 6em;
    height: 6em;
    padding: 2em;
    display: flex;
    position: relative;
  }
  
  .bunny-player__loading-svg {
    width: 6em;
  }
  
  .bunny-player__pause-svg {
    display: none;
  }
  
  @media screen and (max-width: 767px) {
    .bunny-player__big-btn {
      width: 20vw;
      height: 20vw;
      padding: 6vw;
    }
  }
  
  /* Cover mode (inline embed fills parent) */
  [data-bunny-player-init][data-player-update-size="cover"] {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
  
  [data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
    display: none;
  }
  
  [data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
    object-fit: cover;
  }
  
  /* Loading overlay (inline: default hidden; show when loading — see shared rule below) */
  .bunny-player__loading {
    opacity: 0;
    visibility: hidden;
    background-color: #00000054;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
  }
  
  /* Shared: loading overlay visible */
  [data-bunny-player-init][data-player-status="loading"] .bunny-player__loading,
  [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading {
    opacity: 1;
    visibility: visible;
  }

/* ==========================================================================
   9. MINI SHOWREEL (layout / lightbox — not Bunny embed markup)
   ========================================================================== */

[data-mini-showreel-status="active"] .mini-showreel__click {
  display: none;
}

[data-mini-showreel-status] .mini-showreel__info,
[data-mini-showreel-status] .mini-showreel__card {
  transition: margin 1s cubic-bezier(0.87, 0, 0.13, 1);
}

[data-mini-showreel-status] .mini-showreel-lightbox__dark {
  transition: all 1s cubic-bezier(0.87, 0, 0.13, 1);
}

[data-mini-showreel-status="active"] .mini-showreel-lightbox__dark {
  opacity: 1;
  visibility: visible;
}