/* VR Player Component — the FA video-player adapted for 360° video.

   The player is a full-bleed cinema strip: an ultra-wide WebGL canvas renders
   the equirectangular video, and the controls overlay the canvas bottom (the
   FA player's fullscreen treatment, made the default). Controls sit over
   video content, so they use fixed white/black overlay neutrals — the same
   exception FA's fullscreen styles make — while brand accents stay tokens.

   --vr-h drives the canvas height everywhere: ultra-wide 21:9 on desktop,
   square-ish on phones (the rescue is vertical — divers descend), full
   viewport in (fake-)fullscreen. */

.cp-vr-player {
  --vr-h: min(42.86vw, 80svh);   /* 21:9 strip, capped to the viewport */
  position: relative;
  width: calc(100% - 2 * var(--page-inset));   /* breathing room on desktop */
  margin-inline: auto;
  background: var(--black);
  border-radius: var(--radius);
  overflow: hidden;   /* clips the canvas AND the overlay controls to the card */
}

@media (max-width: 700px) {
  .cp-vr-player {
    --vr-h: min(100vw, 70svh);   /* taller window on phones */
    width: 100%;                 /* full bleed on phones */
    border-radius: 0;
  }
}

.cp-vr-player:focus {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cp-vr-player {

  /* Video wrapper - contains canvas, hidden video, and overlays */
  & .video-wrapper {
    position: relative;
    overflow: hidden;
  }

  /* The WebGL viewport. Buffer size tracks the CSS box from JS, so any
     box shape renders undistorted. */
  & .vr-canvas {
    display: none;
    width: 100%;
    height: var(--vr-h);
    cursor: grab;
    touch-action: none;   /* the canvas owns its gestures (look-around) */
  }

  &:not(.disabled):not(.flat) .vr-canvas {
    display: block;
  }

  &.dragging-view .vr-canvas {
    cursor: grabbing;
  }

  /* The video element: flat fallback while .disabled (no JS yet) or .flat
     (no WebGL). Once the canvas takes over it stays in the DOM as the
     texture source — tiny and invisible, never display:none (some browsers
     stop painting frames for display:none video). */
  & .video {
    display: block;
    width: 100%;
    height: var(--vr-h);
    object-fit: cover;
  }

  &:not(.disabled):not(.flat) .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
  }

  & .video:focus {
    outline: 2px dashed var(--text);
    outline-offset: -2px;
  }

  /* Hide native controls */
  & .video::-webkit-media-controls {
    display: none !important;
  }

  /* Disabled state */
  &.disabled .big-play-button,
  &.disabled .play-pause,
  &.disabled .thumb,
  &.disabled .cc,
  &.disabled .speaker,
  &.disabled .fullscreen {
    cursor: not-allowed;
  }

  /* Video heading overlay - always white on video content */
  & .video-heading {
    position: absolute;
    top: var(--md);
    left: var(--md);
    z-index: 2;
    color: var(--white);
    font-size: var(--h3);
    text-shadow:
      0 0 10px rgba(0, 0, 0, 0.9),
      0 0 20px rgba(0, 0, 0, 0.7),
      0 2px 4px rgba(0, 0, 0, 0.9);
    margin: 0;
    opacity: 1;
    transition: all var(--normal) ease;
    white-space: nowrap;
  }

  & .video-heading.hidden {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  @media (max-width: 480px) {
    & .video-heading {
      font-size: 1.1rem;
      top: var(--sm);
      left: 50%;
      transform: translateX(-50%);
    }

    & .video-heading.hidden {
      transform: translateX(-50%) translateY(-0.5rem);
    }
  }

  /* Big center play button */
  & .big-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 15%;
    min-width: 70px;
    max-width: 120px;
    aspect-ratio: 1;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--white);
    transition: transform var(--fast), opacity var(--fast);
  }

  & .big-play-button svg {
    width: 100%;
    height: 100%;
  }

  & .big-play-button:hover {
    outline: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }

  & .big-play-button:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    border-radius: 50%;
  }

  & .big-play-button.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.5);
  }

  /* The look-around hint — one short animated message on first play */
  & .vr-hint {
    position: absolute;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--pill);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--white);
    font-size: var(--small);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--normal) ease;
  }

  & .vr-hint.show {
    opacity: 1;
  }

  & .vr-hint svg {
    flex: none;
    animation: vr-hint-sway 1.6s ease-in-out infinite;
  }

  /* Loading indicator */
  & .loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid currentColor;
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    pointer-events: none;
    color: var(--white);
  }

  & .loading-text {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: bold;
  }

  & .loading-dots span {
    animation: cp-vr-player-dots 1.4s infinite;
    opacity: 0;
  }

  & .loading-dots span:nth-child(1) {
    animation-delay: 0s;
  }

  & .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  & .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  & .loading-indicator.hidden {
    display: none;
  }

  /* Video controls - overlay along the canvas bottom (FA fullscreen mode) */
  & .video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem clamp(0.5rem, 2.5vw, 1.5rem);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: opacity var(--normal) ease;
  }

  /* Idle while playing - controls fade, cursor hides */
  &.idle .video-controls {
    opacity: 0;
    pointer-events: none;
  }

  &.idle .video-wrapper {
    cursor: none;
  }

  &.idle .vr-canvas {
    cursor: none;
  }

  /* Control buttons - always white over video content */
  & .play-pause,
  & .speaker,
  & .cc,
  & .gyro,
  & .fullscreen,
  & .settings {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--white);
    transition: color var(--fast);
    flex-shrink: 0;
  }

  /* Play-pause has no padding - size increased to compensate */
  & .play-pause {
    padding: 0;
  }

  & .play-pause:hover,
  & .speaker:hover,
  & .cc:hover,
  & .gyro:hover,
  & .fullscreen:hover,
  & .settings:hover {
    color: var(--accent);
  }

  & .play-pause:focus-visible,
  & .speaker:focus-visible,
  & .cc:focus-visible,
  & .gyro:focus-visible,
  & .fullscreen:focus-visible,
  & .settings:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }

  & .play-pause:active,
  & .speaker:active,
  & .cc:active,
  & .gyro:active,
  & .fullscreen:active,
  & .settings:active {
    opacity: 0.6;
  }

  /* Motion control engaged - accent the icon */
  & .gyro.on {
    color: var(--accent);
  }

  & .play-pause svg {
    display: block;
    width: 32px;
    height: 32px;
  }

  & .speaker svg,
  & .cc svg,
  & .gyro svg,
  & .fullscreen svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  & .settings svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* Settings wrapper and panel */
  & .settings-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  & .settings-panel {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 20;
    margin-bottom: 0.5rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sm);
    display: flex;
    gap: var(--sm);
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--shadow);
    transform: translateY(10px);
    transition: all var(--fast) ease;
  }

  & .settings-section {
    min-width: 90px;
  }

  & .settings-wrapper.open .settings-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  & .settings-label {
    font-size: var(--small);
    color: var(--text-2);
    margin-bottom: var(--xs);
    font-weight: bold;
  }

  & .speed-options,
  & .quality-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  & .speed-option,
  & .quality-option {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.4rem 0.6rem;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: var(--small);
    transition: background var(--fast);
  }

  & .speed-option:hover,
  & .quality-option:hover {
    background: var(--border);
  }

  & .speed-option.active,
  & .quality-option.active {
    background: var(--accent);
    color: var(--white);
  }

  & .quality-section.hidden {
    display: none;
  }

  & .quality-section {
    padding-right: var(--sm);
    border-right: 1px solid var(--border);
  }

  /* Hidden icon state - only for control button icons */
  & .play-pause .hidden,
  & .speaker .hidden,
  & .cc .hidden,
  & .fullscreen .hidden {
    display: none;
  }

  /* Seekbar container - subtle track over video */
  & .seekbar {
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    height: 10px;
    flex-grow: 1;
    margin: 0 0.5rem;
    cursor: pointer;
    touch-action: none; /* Prevent scroll on mobile when dragging */
  }

  /* Invisible expanded hit area for easier hover/click */
  & .seekbar::before {
    content: "";
    position: absolute;
    top: -1rem;
    bottom: -1.5rem;
    left: 0;
    right: 0;
  }

  /* Buffer bar - more visible than track */
  & .bufferbar {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--buffer);
    border-radius: 4px;
    height: 100%;
    width: 0;
    pointer-events: none;
  }

  /* Time/progress bar */
  & .timebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--accent);
    border-radius: 4px;
    height: 100%;
    width: 0;
    pointer-events: none;
  }

  /* Draggable thumb with time display */
  & .thumb {
    position: absolute;
    cursor: grab;
    text-align: center;
    z-index: 2;
    top: -38px;
    left: 0;
    transform: translateX(-50%);
    border-radius: 4px;
    background: var(--accent);
    font-family: var(--mono);
    font-size: var(--body);
    color: var(--white);
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    transition: transform 0.05s;
  }

  /* Triangle pointer on thumb */
  & .thumb::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--accent);
  }

  & .thumb:active {
    cursor: grabbing;
  }

  /* Total time display */
  & .total-time {
    color: var(--white);
    font-family: var(--mono);
    font-size: var(--body);
    white-space: nowrap;
    padding: 0 0.25rem;
    flex-shrink: 0;
  }

  /* Hover thumbnail preview (tooltip above seekbar) */
  & .hover-preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateX(-50%);
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
  }

  & .hover-preview.hidden {
    display: none;
  }

  & .hover-thumbnail {
    width: 160px;
    height: 90px;
    background-color: var(--black);
    background-size: auto;
    background-repeat: no-repeat;
    border: 2px solid var(--accent);
    border-radius: 4px;
  }

  & .hover-time {
    margin-top: 4px;
    padding: 2px 8px;
    background: var(--accent);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--white);
  }

  /* Scrub sprite overlay (covers canvas during drag) */
  & .scrub-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
  }

  & .scrub-sprite.hidden {
    display: none;
  }

  /* On-screen notification for keyboard actions - always white over video */
  & .video-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    opacity: 0.8;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow:
      0 0 10px rgba(0, 0, 0, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 10;
    transition: opacity var(--normal);
  }

  /* Captions styling */
  & .video::cue {
    color: var(--white);
    background: rgba(0, 0, 0, 0.7);
    font-family: var(--sans);
  }
}

/* Fake fullscreen - iPhone has no Fullscreen API for arbitrary elements,
   so the player pins itself over the page instead */
.cp-vr-player.fake-fullscreen {
  --vr-h: 100svh;
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100%;
  border-radius: 0;
}

body.vr-fullscreen {
  overflow: hidden;
}

/* Fullscreen states */
.cp-vr-player:fullscreen {
  --vr-h: 100vh;
  width: 100%;
  height: 100%;
  background: var(--black);
  border-radius: 0;
}

.cp-vr-player:-webkit-full-screen {
  --vr-h: 100vh;
  width: 100%;
  height: 100%;
  background: var(--black);
  border-radius: 0;
}

/* Prevent body scroll while dragging thumb */
body.dragging {
  user-select: none;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .cp-vr-player {
    & .video-controls {
      gap: 0.125rem;
      padding: 0.375rem;
    }

    & .play-pause svg {
      width: 28px;
      height: 28px;
    }

    & .speaker svg,
    & .cc svg,
    & .gyro svg,
    & .fullscreen svg {
      width: 20px;
      height: 20px;
    }

    & .thumb {
      font-size: 0.65rem;
      padding: 0.15rem 0.4rem;
      top: -28px;
    }

    & .total-time {
      font-size: 0.65rem;
    }

    & .seekbar {
      margin: 0 0.25rem;
    }
  }
}

/* Loading dots animation */
@keyframes cp-vr-player-dots {
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/* Hint hand sway - "drag me" */
@keyframes vr-hint-sway {
  0%, 100% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-vr-player .vr-hint svg {
    animation: none;
  }
}