/**
 * @package     Joomla.Module
 * @subpackage  mod_r3d_floater
 * @file        media/mod_r3d_floater/css/style.css
 * @version     5.5.0
 * @description Basis-Styles und Animationen für den Floater
 */

.r3d-floater {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;

  /* IMPORTANT: no default transition here – JS will set it after initial setup */
  transition: none;

  /* Optional: helps smoother transforms */
  will-change: transform, opacity;
}

/* Visible = centered, upright, full size */
.r3d-floater--visible {
  transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hidden start states (off-screen) – include translate + rotate + scale */
.r3d-floater--from-top {
  transform: translate(-50%, calc(-50% - 60vh)) rotate(var(--r3d-rotate, -90deg)) scale(var(--r3d-scale, .3));
}
.r3d-floater--from-bottom {
  transform: translate(-50%, calc(-50% + 60vh)) rotate(var(--r3d-rotate, -90deg)) scale(var(--r3d-scale, .3));
}
.r3d-floater--from-left {
  transform: translate(calc(-50% - 60vw), -50%) rotate(var(--r3d-rotate, -90deg)) scale(var(--r3d-scale, .3));
}
.r3d-floater--from-right {
  transform: translate(calc(-50% + 60vw), -50%) rotate(var(--r3d-rotate, -90deg)) scale(var(--r3d-scale, .3));
}

/* Optional closing helper (we mostly drive speed via inline transition from JS) */
.r3d-floater--closing { opacity: 0 !important; }

/* Panel */
.r3d-floater__panel {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Content */
.r3d-floater__content {
  padding: 1rem;
  overflow-y: auto;
  max-height: 100%;
}

/* Close button */
.r3d-floater__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  color: #666;
  transition: color .2s ease;
}
.r3d-floater__close:hover { color: #000; }

/* Default fallback (logo) */
.r3d-floater-default {
  display: flex; align-items: center; justify-content: center; height: 100%;
}
.r3d-floater-default img { max-width: 100%; height: auto; display: block; }