/* ==========================================================================
   TRANSFER Broadcast Graphics Template  (transparent overlay)
   Frame:     1920 x 1080 px  (transparent for compositor / OBS / CasparCG)
   Graphics:  1920 x 758 px  ->  641 x 758 px (center, after 5s)
   Player photo source: 641 x 758 px PNG (displayed 1:1 in State 1)
   ========================================================================== */

:root {
  --team-color:   #FEBE10;
  --team-accent:  #00529F;

  --gfx-h:      758px;
  --gfx-w-full: 1920px;
  --gfx-w-mini: 641px;
  --photo-w:    641px;   /* source image width — 1:1 in State 1 */
  --photo-w-c:  250px;   /* compact State 2 width (cropped from 641 source) */

  --ease:    cubic-bezier(0.45, 0, 0.15, 1);
  --bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --speed:   1.0s;

  --white:   #FFFFFF;
  --dark:    #0F0F14;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 1920px;
  height: 1080px;
  background: transparent;
  overflow: hidden;
  font-family: 'ONY One', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Frame ============================================================== */
.frame {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: transparent;   /* overlay mode — no background */
  overflow: hidden;
}

/* Graphics container ================================================= */
.graphics-container {
  position: absolute;
  bottom: 161px;          /* (1080 - 758) / 2 = 161 -> vertically centered */
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 758px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, width var(--speed) var(--ease);
}

.graphics-container.visible {
  opacity: 1;
}

.graphics-container.hidden {
  opacity: 0;
}

.graphics-container.compact {
  width: 641px;
}

/* Transfer card ====================================================== */
.transfer-card {
  width: 100%;
  height: 100%;
  display: flex;
  background: #222524;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: background var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.compact .transfer-card {
  box-shadow: none;
}

/* Photo section ====================================================== */
.photo-section {
  flex: 0 0 var(--photo-w);
  width: var(--photo-w);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: flex-basis var(--speed) var(--ease),
              width var(--speed) var(--ease);
}

.compact .photo-section {
  flex: 0 0 var(--photo-w-c);
  width: var(--photo-w-c);
}

.player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: object-position var(--speed) var(--ease);
}

.photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 55%,
    rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

/* Info section ======================================================= */
.info-section {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 55px 70px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* always center — never changes */
  position: relative;
  z-index: 3;
  transition: padding var(--speed) var(--ease);
}

.compact .info-section {
  padding: 50px 35px 50px;
}

/* Player name ---------------------------------------------------- */
.player-name {
  font-size: 72px;
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
  margin-bottom: 36px;
  transition: font-size var(--speed) var(--ease),
              line-height var(--speed) var(--ease),
              margin var(--speed) var(--ease);
}

.compact .player-name {
  font-size: 48px;
  line-height: 0.95;
  margin-bottom: 40px;
}

/* Team block ------------------------------------------------------ */
.team-block {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  transition: gap var(--speed) var(--ease),
              margin var(--speed) var(--ease);
}

.compact .team-block {
  gap: 14px;
  margin-bottom: 30px;
}

.team-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  transition: width var(--speed) var(--ease), height var(--speed) var(--ease);
}

.compact .team-logo { width: 56px; height: 56px; }

.team-text { display: flex; flex-direction: column; }

.team-direction {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.5;
  transition: font-size var(--speed) var(--ease),
              letter-spacing var(--speed) var(--ease);
}

.compact .team-direction { font-size: 13px; letter-spacing: 3px; }

.team-name {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-top: 4px;
  transition: font-size var(--speed) var(--ease);
}

.compact .team-name { font-size: 22px; }

/* Price ----------------------------------------------------------- */
.price-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  transition: align-self var(--speed) var(--ease);
}

.compact .price-badge {
  text-align: left;
}

.price-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.5;
  transition: font-size var(--speed) var(--ease),
              letter-spacing var(--speed) var(--ease);
}

.compact .price-label { font-size: 13px; letter-spacing: 3px; }

.price-value {
  font-size: 46px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
  transition: font-size var(--speed) var(--ease),
              color var(--speed) var(--ease),
              margin var(--speed) var(--ease);
}



.compact .price-value { font-size: 38px; white-space: normal; }

/* ========================================================================
   Reveal animation (staggered entrance)
   ======================================================================== */
.reveal .transfer-card { animation: cardIn 0.5s var(--ease) both; }
.reveal .photo-section { animation: photoIn 0.6s var(--ease) 0.15s both; }
.reveal .player-name { animation: slideRight 0.5s var(--ease) 0.55s both; }
.reveal .team-block { animation: slideRight 0.4s var(--ease) 1.0s both; }
.reveal .price-badge { animation: slideRight 0.4s var(--ease) 1.3s both; }

@keyframes cardIn {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes photoIn {
  from { transform: scale(1.15); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-15px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 0.55; }
}
@keyframes slideRight {
  from { transform: translateX(-25px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes popIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}


/* ========================================================================
   Operator panel (dev overlay)
   ======================================================================== */
.operator-panel {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #eee;
  padding: 10px 24px;
  border-radius: 6px;
  font-family: 'ONY One', sans-serif;
  font-size: 16px;
  z-index: 100;
  opacity: 0.25;
  transition: opacity 0.2s;
  pointer-events: none;
}

.operator-panel:hover { opacity: 0.95; }

.op-counter {
  font-size: 20px;
  font-weight: 700;
  color: #FEBE10;
}

.op-controls { font-size: 14px; color: #aaa; }

kbd {
  background: #333;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 1px 7px;
  font-family: monospace;
  font-size: 13px;
  color: #fff;
}