/* CoachReels global fan navigation
   The brand remains the Home link. Hovering or focusing the brand reveals the
   same compact navigation from every authenticated product surface. */

/* Shared top-row appearance. Product surfaces keep their own layout and tools,
   but the row, home brand, and typography should feel like one application. */
.coachreels-site-topbar {
  --coachreels-topbar-background:rgba(5,11,22,.82);
  --coachreels-topbar-border:rgba(255,255,255,.09);
  --coachreels-topbar-blur:10px;
  box-sizing:border-box;
  border-bottom-color:var(--coachreels-topbar-border);
  background:var(--coachreels-topbar-background);
  backdrop-filter:blur(var(--coachreels-topbar-blur));
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

.coachreels-home-brand {
  --coachreels-brand-width:clamp(190px,20vw,260px);
  display:inline-flex;
  width:var(--coachreels-brand-width);
  max-width:100%;
  min-height:44px;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  padding:2px;
  border-radius:14px;
  color:inherit;
  line-height:0;
  text-decoration:none;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}

.coachreels-home-brand__image {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:292 / 64;
  border-radius:12px;
  object-fit:contain;
  object-position:left center;
}

.coachreels-home-brand:hover {
  filter:brightness(1.08) saturate(1.04);
  transform:translateY(-1px);
}

.coachreels-home-brand:focus-visible {
  outline:2px solid #7ff7e5;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(63,224,205,.16);
}

.coachreels-global-nav {
  position:relative;
  z-index:10020;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  flex:0 0 auto;
  isolation:isolate;
  line-height:normal;
}

.coachreels-global-nav > [data-coachreels-home-link="1"] {
  position:relative;
  z-index:2;
}

.coachreels-global-nav__toggle {
  position:absolute;
  z-index:4;
  right:-8px;
  bottom:-7px;
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  padding:0;
  border:1px solid rgba(103,232,249,.62);
  border-radius:50%;
  color:#dffcff;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.2), transparent 38%),
    linear-gradient(145deg, #0f766e, #075985 72%);
  box-shadow:
    0 8px 22px rgba(2,8,23,.48),
    0 0 0 3px rgba(5,18,29,.84),
    inset 0 1px 0 rgba(255,255,255,.2);
  font:inherit;
  cursor:pointer;
  transition:transform .24s cubic-bezier(.2,.9,.2,1.3), border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.coachreels-global-nav__toggle svg {
  width:17px;
  height:17px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-width:1.7;
  transition:transform .34s cubic-bezier(.2,.9,.2,1.25);
}

.coachreels-global-nav__toggle:hover,
.coachreels-global-nav__toggle:focus-visible,
.coachreels-global-nav.is-open .coachreels-global-nav__toggle {
  border-color:#a7f3d0;
  outline:none;
  filter:brightness(1.12);
  box-shadow:
    0 11px 28px rgba(6,182,212,.3),
    0 0 0 3px rgba(5,18,29,.88),
    0 0 0 6px rgba(45,212,191,.13),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform:scale(1.08);
}

.coachreels-global-nav.is-open .coachreels-global-nav__toggle svg {
  transform:rotate(90deg);
}

.coachreels-nav-fan {
  --coachreels-nav-origin-x:82px;
  --coachreels-nav-origin-y:62px;
  position:fixed;
  z-index:10010;
  width:535px;
  height:505px;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease, visibility 0s linear .42s;
}

.coachreels-nav-fan.is-open {
  opacity:1;
  visibility:visible;
  transition:opacity .16s ease, visibility 0s;
}

body.is-coachreels-nav-open .index-side-nav {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.coachreels-nav-fan__canvas {
  position:absolute;
  inset:0;
  transform-origin:var(--coachreels-nav-origin-x) var(--coachreels-nav-origin-y);
}

.coachreels-nav-fan__halo,
.coachreels-nav-fan__sweep {
  position:absolute;
  left:calc(var(--coachreels-nav-origin-x) - 360px);
  top:calc(var(--coachreels-nav-origin-y) - 360px);
  width:720px;
  height:720px;
  border-radius:50%;
  clip-path:polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
  pointer-events:none;
  transform-origin:center;
}

.coachreels-nav-fan__halo {
  opacity:0;
  background:
    repeating-conic-gradient(from 90deg, transparent 0 30.7deg, rgba(207,250,254,.065) 30.8deg 31deg),
    radial-gradient(circle,
      transparent 0 18.6%,
      rgba(94,234,212,.5) 18.75% 19.1%,
      rgba(3,17,29,.975) 19.2% 33%,
      rgba(103,232,249,.28) 33.1% 33.5%,
      rgba(2,12,22,.985) 33.65% 35.05%,
      rgba(94,234,212,.42) 35.15% 35.5%,
      rgba(3,17,29,.985) 35.6% 49%,
      rgba(125,211,252,.4) 49.1% 49.5%,
      transparent 49.65% 100%);
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.54));
  transform:scale(.4) rotate(-18deg);
  transition:opacity .18s ease, transform .52s cubic-bezier(.16,.84,.26,1.04);
}

.coachreels-nav-fan__sweep {
  opacity:0;
  background:conic-gradient(from 90deg, transparent 0deg, rgba(94,234,212,.46) 6deg, transparent 17deg 90deg, transparent);
  -webkit-mask-image:radial-gradient(circle, transparent 0 18%, #000 19% 49.5%, transparent 50%);
  mask-image:radial-gradient(circle, transparent 0 18%, #000 19% 49.5%, transparent 50%);
  mix-blend-mode:screen;
  transform:rotate(-28deg);
}

.coachreels-nav-fan.is-open .coachreels-nav-fan__halo {
  opacity:1;
  transform:scale(1) rotate(0);
}

.coachreels-nav-fan.is-open .coachreels-nav-fan__sweep {
  animation:coachreels-nav-sweep .82s .12s cubic-bezier(.2,.8,.2,1) both;
}

.coachreels-nav-fan__nav {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.coachreels-nav-fan__item {
  --coachreels-nav-angle:90deg;
  --coachreels-nav-delay:0ms;
  --coachreels-nav-accent:103,232,249;
  position:absolute;
  left:calc(var(--coachreels-nav-origin-x) - 360px);
  top:calc(var(--coachreels-nav-origin-y) - 360px);
  display:block;
  width:720px;
  height:720px;
  overflow:hidden;
  color:#ecfeff;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--coachreels-nav-accent),.52), transparent 24%),
    linear-gradient(180deg, rgba(var(--coachreels-nav-accent),.34), rgba(4,20,33,.99));
  text-decoration:none;
  pointer-events:auto;
  opacity:0;
  filter:blur(5px) saturate(.7);
  transform:rotate(calc(var(--coachreels-nav-angle) - 17deg)) scale(.55);
  transform-origin:center;
  transition:
    opacity .17s ease var(--coachreels-nav-delay),
    filter .32s ease var(--coachreels-nav-delay),
    transform .5s cubic-bezier(.16,.86,.22,1.18) var(--coachreels-nav-delay),
    background .18s ease;
}

.coachreels-nav-fan__item--outer {
  clip-path:polygon(38.1% 2.5%, 50% 1%, 61.9% 2.5%, 58.6% 15.6%, 50% 14.5%, 41.4% 15.6%);
}

.coachreels-nav-fan__item--inner {
  clip-path:polygon(42.1% 18.3%, 50% 17.3%, 57.9% 18.3%, 54.8% 30.8%, 50% 30.2%, 45.2% 30.8%);
}

.coachreels-nav-fan.is-open .coachreels-nav-fan__item {
  opacity:1;
  filter:blur(0) saturate(1);
  transform:rotate(var(--coachreels-nav-angle)) scale(1);
}

.coachreels-nav-fan__item::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 35%, rgba(255,255,255,.16) 49%, transparent 63%);
  opacity:0;
  transform:translateX(-18%);
  transition:opacity .18s ease, transform .32s ease;
}

.coachreels-nav-fan__item:hover,
.coachreels-nav-fan__item:focus-visible,
.coachreels-nav-fan__item.is-active {
  color:#fff;
  outline:none;
  filter:brightness(1.2) saturate(1.15) drop-shadow(0 10px 22px rgba(var(--coachreels-nav-accent),.24));
  transform:rotate(var(--coachreels-nav-angle)) scale(1.028);
}

.coachreels-nav-fan__item:hover::after,
.coachreels-nav-fan__item:focus-visible::after {
  opacity:1;
  transform:translateX(18%);
}

.coachreels-nav-fan__item.is-active {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.32), transparent 24%),
    linear-gradient(180deg, rgba(var(--coachreels-nav-accent),.68), rgba(5,32,43,.995));
}

.coachreels-nav-fan__item.is-active .coachreels-nav-fan__icon {
  border-color:rgba(255,255,255,.72);
  box-shadow:0 0 0 3px rgba(var(--coachreels-nav-accent),.2), 0 8px 20px rgba(0,0,0,.3);
}

.coachreels-nav-fan__content {
  position:absolute;
  left:50%;
  z-index:2;
  display:grid;
  width:116px;
  justify-items:center;
  gap:7px;
  text-align:center;
  transform:translateX(-50%) rotate(calc(-1 * var(--coachreels-nav-angle)));
  transform-origin:center;
}

.coachreels-nav-fan__item--outer .coachreels-nav-fan__content {
  top:27px;
}

.coachreels-nav-fan__item--inner .coachreels-nav-fan__content {
  top:139px;
}

.coachreels-nav-fan__icon {
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(4,18,31,.94);
  box-shadow:0 10px 22px rgba(0,0,0,.38);
}

.coachreels-nav-fan__icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.coachreels-nav-fan__label {
  max-width:116px;
  color:inherit;
  font-size:12px;
  font-weight:950;
  letter-spacing:.035em;
  line-height:1.08;
  text-shadow:0 2px 4px rgba(0,0,0,.96), 0 0 10px rgba(0,0,0,.88);
}

.coachreels-nav-fan__description {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}

.coachreels-nav-fan__tooltip {
  --coachreels-nav-tooltip-accent:103,232,249;
  position:fixed;
  z-index:3;
  left:0;
  top:0;
  display:grid;
  width:max-content;
  max-width:min(230px, calc(100vw - 24px));
  gap:3px;
  box-sizing:border-box;
  border:1px solid rgba(var(--coachreels-nav-tooltip-accent),.48);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(4,20,33,.98),rgba(5,34,45,.97));
  box-shadow:0 14px 34px rgba(0,0,0,.48), 0 0 22px rgba(var(--coachreels-nav-tooltip-accent),.13);
  padding:9px 11px;
  color:#dffcff;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,6px) scale(.97);
  transition:opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

.coachreels-nav-fan__tooltip.is-visible {
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.coachreels-nav-fan__tooltip strong,
.coachreels-nav-fan__tooltip span {
  display:block;
}

.coachreels-nav-fan__tooltip strong {
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.025em;
}

.coachreels-nav-fan__tooltip span {
  color:rgba(207,250,254,.74);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
}

.coachreels-nav-fan__item--outer .coachreels-nav-fan__label {
  font-size:11.5px;
}

@keyframes coachreels-nav-sweep {
  0% { opacity:0; transform:rotate(-30deg); }
  28% { opacity:.9; }
  100% { opacity:0; transform:rotate(72deg); }
}

@media (max-width:560px) {
  .coachreels-nav-fan {
    width:min(535px, 100vw);
    height:420px;
  }

  .coachreels-nav-fan__canvas {
    transform:scale(.86);
  }

  .coachreels-nav-fan__label,
  .coachreels-nav-fan__item--outer .coachreels-nav-fan__label {
    font-size:11px;
  }

  .coachreels-global-nav__toggle {
    right:-5px;
    bottom:-4px;
  }
}

@media (max-width:360px) {
  .coachreels-nav-fan {
    height:365px;
  }

  .coachreels-nav-fan__canvas {
    transform:scale(.72);
  }
}

@media (max-width:340px) {
  .coachreels-nav-fan {
    height:345px;
  }

  .coachreels-nav-fan__canvas {
    transform:scale(.67);
  }
}

@media (prefers-reduced-motion:reduce) {
  .coachreels-global-nav__toggle,
  .coachreels-global-nav__toggle svg,
  .coachreels-nav-fan,
  .coachreels-nav-fan__halo,
  .coachreels-nav-fan__item,
  .coachreels-nav-fan__tooltip {
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }

  .coachreels-nav-fan__sweep {
    display:none;
  }
}