/* =========================================================
   GA SEASONS — CSS (tidied + sorted)
   ========================================================= */

/* =========================================================
   1) SWITCHER / BUTTONS (base)
   ========================================================= */

/* Optional combined wrapper (if you still use [ga_season_switcher]) */
.ga-season-switcher{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

/* NEW: individual shortcode wrappers */
.ga-season-cycle,
.ga-video-controls{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

/* Base button styling (apply wherever these appear) */
.ga-season-cycle button,
.ga-video-controls button,
.ga-season-switcher button{
  appearance:none;
  border:1px solid rgba(255,255,255,0.4);
  background:transparent;
  padding:10px 14px;                 /* keep original padding */
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  color:#fff;
  height:36px;
  transition: border-color 300ms;
}

.ga-season-cycle button:hover,
.ga-video-controls button:hover,
.ga-season-switcher button:hover{
  border-color:rgba(255,255,255,1);
}

.ga-season-cycle button.is-active,
.ga-video-controls button.is-active,
.ga-season-switcher button.is-active{
  font-weight:700;
  border-color:rgba(255,255,255,1);
}

/* Video toggle button sizing */
.ga-video-toggle-btn,
.ga-video-mute-btn{
  height:36px !important;
  width:36px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  line-height:10px !important;
}

.ga-video-toggle-btn .fa-solid,
.ga-video-mute-btn .fa-solid{
  font-size:10px !important;
}

.ga-video-toggle-btn .fa-play{
  padding-left:2px;
}

/* after any season interaction, kill delay on the icon */
body.ga-season-switched .grve-btn-video-icon{
  transition-delay:0ms !important;
  animation-delay:0ms !important;
}


/* =========================================================
   2) CYCLE BUTTON — slide/fade swap + smooth width grow
   ========================================================= */

/* Single source of truth for timing (also read by JS via computed styles) */
.ga-cycle-btn{
  --ga-dur: 200ms;
  --ga-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position:relative;
  overflow:hidden;                   /* clips sliding overlays */

  /* JS sets these */
  --ga-cur-w: auto;                  /* px */
  --ga-next-w: 0px;                  /* px (label + arrow) */

  display:inline-flex;               /* keeps padding stable */
  align-items:center;
  justify-content:center;

  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;

  transition: width var(--ga-dur) var(--ga-ease);
  will-change: width;
}

@media (prefers-reduced-motion: reduce){
  .ga-cycle-btn{ transition:none; }
}

/* --- SIZER (hidden but drives real width) --- */
.ga-cycle-btn .ga-cycle-sizer{
  visibility:hidden;
  pointer-events:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  line-height:1;
}

/* Current sizer part: width animates to 0 on hover */
.ga-cycle-btn .ga-cycle-sizer-current{
  display:inline-block;
  overflow:hidden;
  width:var(--ga-cur-w);
  transition: width var(--ga-dur) var(--ga-ease);
}

/* Next sizer part: starts collapsed, expands on hover */
.ga-cycle-btn .ga-cycle-sizer-next{
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  width:0px;
  transition: width var(--ga-dur) var(--ga-ease);
}

/* Reserve arrow space inside sizer next (no SVG here, just space)
   Keep it "heightless" so it can't affect vertical padding/height. */
.ga-cycle-btn .ga-cycle-sizer-next-arrow{
  display:inline-block;
  width:22px;                        /* ~14px arrow + ~8px gap */
  height:0;
  line-height:0;
  overflow:hidden;
}

/* Hover preview => button width becomes "next" */
.ga-cycle-btn:not(.ga-hover-disabled):hover .ga-cycle-sizer-current{ width:0px; }
.ga-cycle-btn:not(.ga-hover-disabled):hover .ga-cycle-sizer-next{ width:var(--ga-next-w); }

/* --- Overlays (the visible animated swap) --- */
.ga-cycle-btn .ga-cycle-current,
.ga-cycle-btn .ga-cycle-next{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  pointer-events:none;
  will-change:transform, opacity;

  transition:
    transform var(--ga-dur) var(--ga-ease),
    opacity   var(--ga-dur) var(--ga-ease);
}

.ga-cycle-btn .ga-cycle-current{
  opacity:1;
  transform:translate3d(0,0,0);
}

.ga-cycle-btn .ga-cycle-next{
  opacity:0;
  transform:translate3d(10px,0,0);
}

/* Hover preview => slide/fade swap */
.ga-cycle-btn:not(.ga-hover-disabled):hover .ga-cycle-current{
  opacity:0;
  transform:translate3d(-10px,0,0);
}

.ga-cycle-btn:not(.ga-hover-disabled):hover .ga-cycle-next{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Arrow (only appears during hover preview) */
.ga-cycle-btn .ga-cycle-next-arrow{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  opacity:0;
  transform:translate3d(-2px,0,0);

  transition:
    opacity   var(--ga-dur) var(--ga-ease),
    transform var(--ga-dur) var(--ga-ease);
}

.ga-cycle-btn .ga-cycle-next-arrow svg{
  width:14px;
  height:10px;
  display:block;
}

/* Arrow appears on hover preview */
.ga-cycle-btn:not(.ga-hover-disabled):hover .ga-cycle-next-arrow{
  opacity:.85;
  transform:translate3d(0,0,0);
}

/* After click / hover lock: arrow stays hidden */
.ga-cycle-btn.ga-hover-disabled .ga-cycle-next-arrow{
  opacity:0;
  transform:translate3d(-2px,0,0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ga-cycle-btn .ga-cycle-sizer-current,
  .ga-cycle-btn .ga-cycle-sizer-next,
  .ga-cycle-btn .ga-cycle-current,
  .ga-cycle-btn .ga-cycle-next,
  .ga-cycle-btn .ga-cycle-next-arrow{
    transition:none;
  }
}


/* =========================================
   Video toggle "playing" ring
   Add .is-playing to the button when playing
   ========================================= */

.ga-video-toggle-btn{
  position:relative;           /* anchor pseudo elements */
  overflow:visible;
}

/* subtle ring (hidden by default) */
.ga-video-toggle-btn::after{
  content:"";
  position:absolute;
  inset:-1px;                  /* ring sits just outside border */
  border-radius:999px;
  pointer-events:none;

  /* ring thickness */
  padding:1px;

  /* the rotating arc that fades around the ring */
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,1.00),
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.00)
    );

  /* cut out the middle to make it a ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  opacity:0;
  transform:rotate(0deg);

  transition:opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* active "playing" state */
.ga-video-toggle-btn.is-playing::after{
  opacity:0.9;
  animation: gaRingSpin 2400ms linear infinite;
}

/* optional: soften when hovering */
.ga-video-toggle-btn.is-playing:hover::after{
  opacity:1;
}

/* rotation */
@keyframes gaRingSpin{
  to{ transform:rotate(360deg); }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .ga-video-toggle-btn.is-playing::after{
    animation:none;
  }
}


/* =========================================================
   3) VIDEO — background + modal sizing
   ========================================================= */

#section-video-background{
  position:relative;
  overflow:hidden;
}

.ga-stage{ overflow:hidden; }

/* ONLY background stage iframes should do the "cover" trick */
.ga-stage .ga-ifr iframe{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:100vw !important;
  height:56.25vw !important;
  min-width:177.78vh !important;
  min-height:100vh !important;
  transform:translate(-50%, -50%) !important;
  border:0 !important;
  display:block !important;
}

/* Modal layout width */
#video .grve-modal-content,
#video .grve-modal-element,
#video .grve-modal-wrapper{
  width:100%;
}

/* Modal: true 16:9 */
#video .ga-modal-embed{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  max-height:80vh;
}

/* Modal iframe should fill the 16:9 box (not cover viewport) */
#video .ga-modal-embed iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  top:auto !important;
  left:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  transform:none !important;

  border:0 !important;
  display:block !important;
}

#grve-header .grve-right-area,
#grve-header .grve-left-area {
	gap: 30px;
	align-items: center!important;
}


.ga-video-toggle-wrap{
  display:none;
}
.ga-video-toggle-wrap.is-on{
  display:inline-flex;
}


/* =========================================
   Header video loading spinner (80px)
   Forever spinning; only opacity fades
   ========================================= */

.ga-spinner{
  position:absolute;
  top:50%;
  left:50%;
  width:80px;
  height:80px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index:3;
}

.ga-spinner::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:80px;
  height:80px;
  transform:translate(-50%,-50%) rotate(0deg);
  border-radius:999px;
  padding:2px;
  /* keep the rest of your ring styles + animation */
}

/* visible while loading */
.ga-spinner.is-on{
  opacity:0.9;
}

/* ring body (ALWAYS spins) */
.ga-spinner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;

  padding:2px; /* ring thickness */

  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,1.00),
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.00)
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;

  transform:translateZ(0) rotate(0deg);
  transform-origin:50% 50%;
  will-change:transform;

  /* key change: always running, so no reset/jump */
  animation: gaThumbSpin 2400ms linear infinite;
}

@keyframes gaThumbSpin{
  to{ transform:translateZ(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .ga-spinner::after{
    animation:none;
  }
}




/* ---------------------------
   Video controls show/hide
---------------------------- */

/* Default hide both */
.ga-video-controls { 
  display: none; 
}

/* <768 show content */
@media (max-width: 767px) {
  .ga-video-controls.ga-location-content { 
    display: block; 
  }
}

/* >=768 show header/template */
@media (min-width: 768px) {
  .ga-video-controls.ga-location-template { 
    display: block; 
  }
}


/* ---------------------------
   Mobile layout: inline + centered
   (only for your combined container)
---------------------------- */
@media (max-width: 767px) {

  /* Make season + controls sit inline and centered as a group */
  .season-video-controls {
    display: flex;
    justify-content: center; /* centered */
    align-items: center;
    gap: 10px;               /* space between season + video controls */
    flex-wrap: nowrap;
  }

  /* Prevent children from stretching */
  .season-video-controls > .ga-season-cycle,
  .season-video-controls > .ga-video-controls {
    width: auto;
    flex: 0 0 auto;
  }

  /* Ensure the two video buttons sit inline */
  .season-video-controls .ga-video-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* space between play + mute */
  }

  /* Swap order: play left, mute right */
  .season-video-controls .ga-video-toggle-btn { 
    order: 1; 
  }
  .season-video-controls .ga-video-mute-btn { 
    order: 2; 
    margin-right: 0 !important; /* override inline margin-right in HTML */
  }

}


.ga-spinner{ z-index: 3; }