:root {
  /* ===============================================================
     1. FLUID SCALING: Parâmetros e Pontos de Bloqueio (CSS Locks)
     =============================================================== */
  --vp-min: 320;   /* Viewport mínima (px) */
  --vp-max: 1360;  /* Viewport máxima (px) */

  --h-w-min: 180;         /* Largura mínima (px) */
  --h-w-max: 686;     /* Largura máxima (px) */
  
  --h-h-min: 195;         /* Altura mínima (px) */
  --h-h-max: 509.2;       /* Altura máxima (px) */

  --h-offset-x: 3vw;      /* Deslocamento X (da direita) */
  --h-offset-y: 6dvh;     /* Deslocamento Y (do bottom) */
  
  /* Variável para a FÓRMULA DE INTERPOLAÇÃO (Fator de Escala)
     Calcula a posição da Viewport atual entre o limite min e max. */
  --fluid-scale-factor: 
    ((100vw - var(--vp-min) * 1px) / (var(--vp-max) - var(--vp-min)));
}

#whitch-hat {
  position: fixed;

  /* POSICIONAMENTO */
  right: var(--h-offset-x);
  bottom: var(--h-offset-y);

  /* --- DIMENSIONAMENTO FLUIDO --- */
  
  /* Largura: Mínimo + (Diferença * Fator) */
  width: calc(
    var(--h-w-min) * 1px +
    (var(--h-w-max) - var(--h-w-min)) * var(--fluid-scale-factor)
  );

  /* Altura: Mínimo + (Diferença * Fator) */
  height: calc(
    var(--h-h-min) * 1px +
    (var(--h-h-max) - var(--h-h-min)) * var(--fluid-scale-factor)
  );
}